nsITaskbarPreviewButton
widget/public/nsitaskbarpreviewbutton.idlscriptable this interface is used on microsoft windows to get access to a window preview's toolbar button properties. these buttons are displayed below the window preview. 1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) you can't directly instantiate this interface. instead, you use the nsitaskbarwindowpreview.getbutton() to get the objects representing the buttons. attributes attribute type description disabled boolean if true, the button is disabled. this is not the same as visible, which indicates whether or not the button should be displayed at all. ...
...this is false by default. hasborder boolean if true, the taskbar should draw a border around this button's image. this is true by default. image imgicontainer the icon displayed in the button. this is null by default. ...
...taskbar should draw a border around this button's image. this is true by default. image imgicontainer the icon displayed in the button. this is null by default. ...
...And 4 more matches

Mailnews and Mail code review requirements
this document describes the process for reviewing patches to the mozilla/mailnews and mozilla/mail directories. thunderbird and seamonkey are the primary users of the code in mozilla/mailnews. thunderbird's front-end code is stored in mozilla/mail. (a fair amount of this code is forked from code in the mailnews/ directory). mailnews and mail review rules patches affecting thunderbird user experience or interfaces note: it is recommended that when working on bugs that affect user experience or interfaces, that ui-review is obtained at an early stage in the patch development process. getting early ui-reviews this reduces the chance that work is rejected due to needing further user experience changes, and hence is aimed at saving time for the developer and reviewers. all patches ...
...ugs that affect user experience or interfaces, that ui-review is obtained at an early stage in the patch development process. getting early ui-reviews this reduces the chance that work is rejected due to needing further user experience changes, and hence is aimed at saving time for the developer and reviewers. all patches that affect user experience or interfaces on thunderbird should have ui-review on those patches in addition to the reviews required below. to obtained a ui-review on an attachment, set ui-review to '?' and enter :bwinton (for blake winton) as the requestee. mike conley (:mconley) can also provide useful feedback, but blake is the current ultimate decider for ui choices in thunderbird. ...
...uld have ui-review on those patches in addition to the reviews required below. to obtained a ui-review on an attachment, set ui-review to '?' and enter :bwinton (for blake winton) as the requestee. mike conley (:mconley) can also provide useful feedback, but blake is the current ultimate decider for ui choices in thunderbird. rules for all patches affecting mailnews/ and mail/ wherever possible, significant patches in a certain area should be reviewed by one of the listed sub-module owner/reviewers. peers may grant review in any area covered by mailnews/, provided they feel confident in their knowledge of the code being changed. sub-module peers may only grant review in the listed sub-module. ...
...And 4 more matches

ErrorEvent - Web APIs
the errorevent interface represents events providing information related to errors in scripts or in files. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" ...
...height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/errorevent" target="_top"><rect x="116" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="166" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">errorevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits propert...
...="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="166" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">errorevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from its parent event. errorevent.message read only is a domstring containing a human-readable error message describing the problem. ...
...And 4 more matches

Event.preventDefault() - Web APIs
the event interface's preventdefault() method tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be. the event continues to propagate as usual, unless one of its event listeners calls stoppropagation() or stopimmediatepropagation(), either of which terminates propagation at once. as noted below, calling preventdefault() for a non-cancelable event, such as one dispatched via eventtarget.dispatchevent(), without specifying cancelable: true has no effect. syntax event.preventdefault(); examples blocking default click handling toggling a checkbox is the default action of clicking on a checkbox. ...
... of which terminates propagation at once. as noted below, calling preventdefault() for a non-cancelable event, such as one dispatched via eventtarget.dispatchevent(), without specifying cancelable: true has no effect. syntax event.preventdefault(); examples blocking default click handling toggling a checkbox is the default action of clicking on a checkbox. ...
...true has no effect. syntax event.preventdefault(); examples blocking default click handling toggling a checkbox is the default action of clicking on a checkbox. ...
...And 4 more matches

Proxy.revocable() - JavaScript
the proxy.revocable() method is used to create a revocable proxy object. syntax proxy.revocable(target, handler); parameters target a target object to wrap with proxy. it can be any sort of object, including a native array, a function, or even another proxy. handler an object whose properties are functions define the behavior of proxy p when an operation is performed on it. return value a newly created revocable proxy object is returned. description a revocable proxy is an object with following two properties {proxy: proxy, revoke: revoke}. proxy a proxy object created with new proxy(target, handler) call. revoke a function with no argument to invalidate (switch off) the proxy. ...
...define the behavior of proxy p when an operation is performed on it. return value a newly created revocable proxy object is returned. description a revocable proxy is an object with following two properties {proxy: proxy, revoke: revoke}. proxy a proxy object created with new proxy(target, handler) call. revoke a function with no argument to invalidate (switch off) the proxy. if the revoke() function gets called, the proxy becomes unusable: any trap to a handler will throw a typeerror. once a proxy is revoked, it will remain revoked and can be garbage collected. calling revoke() again has no effect. ...
... proxy a proxy object created with new proxy(target, handler) call. revoke a function with no argument to invalidate (switch off) the proxy. if the revoke() function gets called, the proxy becomes unusable: any trap to a handler will throw a typeerror. once a proxy is revoked, it will remain revoked and can be garbage collected. calling revoke() again has no effect. ...
...And 4 more matches

compareVersion - Web APIs
parts of this page show the use of the xpinstall api. the majority of this api is now deprecated and as of gecko 1.9 no longer available. extension, theme, and plug-in developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest. in particular plugin developers should see how to package a plugin as an extension. ...
...ilable. extension, theme, and plug-in developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest. in particular plugin developers should see how to package a plugin as an extension. compareversion compares the version of a file or package with the version of an existing file or package. ...
...tall.js based packages to the new packaging scheme with an install.rdf manifest. in particular plugin developers should see how to package a plugin as an extension. compareversion compares the version of a file or package with the version of an existing file or package. method of installtrigger object syntax int compareversion ( string registryname, installversion version); int compareversion ( string registryname, string version); int compareversion ( string registryname, int major, int minor, int release, int build); parameters the compareversion method has the following parameters: registryname the pathname in the client version registry for the component whose version is to be compared. this parameter can be an absolute pathname, such as /royalai...
...And 3 more matches

Permissions.revoke() - Web APIs
the available options are: name: the name of the api whose permissions you want to query. valid values are 'geolocation', 'midi', 'notifications', and 'push'. ...
...the available options are: name: the name of the api whose permissions you want to query. valid values are 'geolocation', 'midi', 'notifications', and 'push'. ...
...the available options are: name: the name of the api whose permissions you want to query. valid values are 'geolocation', 'midi', 'notifications', and 'push'. ...
...And 3 more matches

RTCErrorEvent - Web APIs
methods no additional methods are provided beyond any found on the parent interface, event. ...
... methods no additional methods are provided beyond any found on the parent interface, event. ...
... methods no additional methods are provided beyond any found on the parent interface, event. ...
...And 2 more matches

Reviewer Checklist
good web citizenship make sure new web-exposed apis actually make sense and are either standards track or preffed off by default. in c++, wrapper-cache as needed. if your object can be gotten from somewhere without creating it in the process, it needs to be wrapper-cached. correctness the bug being fixed is a valid bug and should be fixed. ...
...e process, it needs to be wrapper-cached. correctness the bug being fixed is a valid bug and should be fixed. the patch fixes the issue. the patch is not unnecessarily complicated. the patch does not add duplicates of existing code ('almost duplicates' could mean a refactor is needed). commonly this results in "part 0" of a bug, which is "tidy things up to make the fix easier to write and review". if qa needs to verify the fix, you should provide steps to reproduce (str). quality if you can unit-test it, you should unit-test it. if it's js, try to design and build so that xpcshell can exercise most functionality. it's quicker. make sure the patch doesn't create any unused code (e.g., remove strings when removing a feature) all caught exceptions should be logged at the appropr...
...tension enabled). whitespace can be fixed easily in mercurial using the checkfiles extension. in git, you can use git rebase --whitespace=fix. security issues there should be no writing to arbitrary files outside the profile folder. be careful when reading user input, network input, or files on disk. assume that inputs will be too big, too short, empty, malformed, or malicious. tag for sec review if unsure. if you're writing code that uses jsapi, chances are you got it wrong. try hard to avoid doing that. privacy issues there should be no logging of urls or content from which urls may be inferred. [fennec: android services has logger.pii() for this purpose (e.g., logging profile dir)]. tag for privacy review if needed. resource leaks in java, memory leaks are largely due t...
...le the feature entirely in case bugs are found later in the release cycle. [fennec: "prefs" can be gecko prefs, sharedpreferences values, or build-time flags. which one you choose depends on how the feature is implemented: a pure java service can't easily check gecko prefs, for example.] strings there should be no string changes in patches that will be uplifted (including string removals). rev entity names for string changes. when making ui changes, be aware of the fact that strings will be different lengths in different locales. documentation the commit message should describe what the patch is changing (not be a copy of the bug summary). the first line should be a short description (since only the first line is shown in the log), and additional description, if needed, should be...

Event.defaultPrevented - Web APIs
the defaultprevented read-only property of the event interface returns a boolean indicating whether or not the call to event.preventdefault() canceled the event. note: you should use this instead of the non-standard, deprecated getpreventdefault() method (see bug 691151). syntax var defaultwasprevented = event.defaultprevented; value a boolean, where true indicates 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. ...
...ser 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. ...
... is used to prevent the second link from working. ...
... living standard ...

MediaRecorderErrorEvent() - Web APIs
it must contain the error property at a minimum. error a domexception that describes the error that occurred. this object's name property should indicate the name of the error that occurred. the other fields may or may not be present. ...
...it must contain the error property at a minimum. error a domexception that describes the error that occurred. this object's name property should indicate the name of the error that occurred. the other fields may or may not be present. ...
...it must contain the error property at a minimum. error a domexception that describes the error that occurred. this object's name property should indicate the name of the error that occurred. the other fields may or may not be present. ...
... working draft initial definition. ...

NodeIterator.previousNode() - Web APIs
the nodeiterator.previousnode() method returns the previous node in the set represented by the nodeiterator and moves the position of the iterator backwards within the set. this method returns null when the current node is the first node in the set. in old browsers, as specified in old versions of the specifications, the method may throws the invalid_state_err domexception if this method is called after the nodeiterator.detach()method. recent browsers never throw. ...
...erator and moves the position of the iterator backwards within the set. this method returns null when the current node is the first node in the set. in old browsers, as specified in old versions of the specifications, the method may throws the invalid_state_err domexception if this method is called after the nodeiterator.detach()method. recent browsers never throw. ...
...ator.detach()method. recent browsers never throw. syntax node = nodeiterator.previousnode(); example var nodeiterator = document.createnodeiterator( document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false // this optional argument is not used any more ); currentnode = nodeiterator.nextnode(); // returns the next node previousnode = nodeiterator.previousnode(); // same result, since we backtracked to the previous node specifications specification status comment domthe definition of 'nodeiterator.previousnode' in that specification. living standard as detach() is now a no-op method, this method cannot throw anymore. document object model (dom) level 2 traversal and range spe...
...same result, since we backtracked to the previous node specifications specification status comment domthe definition of 'nodeiterator.previousnode' in that specification. living standard as detach() is now a no-op method, this method cannot throw anymore. document object model (dom) level 2 traversal and range specificationthe definition of 'nodeiterator.previousnode' in that specification. obsolete initial definition. ...

Array.prototype.reverse() - JavaScript
the reverse() method reverses an array in place. the first array element becomes the last, and the last array element becomes the first. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax a.reverse() return value the reversed array. description the reverse method transposes the elements of the calling array object in place, mutating the array, and returning a reference to the array. reverse is intentionally generic; this method can be called or applied to objects resembling arrays. objects which do not contain a length property reflecting the last in a series of consecutive, zero-based numerical propertie...
...nsposes the elements of the calling array object in place, mutating the array, and returning a reference to the array. reverse is intentionally generic; this method can be called or applied to objects resembling arrays. objects which do not contain a length property reflecting the last in a series of consecutive, zero-based numerical properties may not behave in any meaningful manner. examples reversing the elements in an array the following example creates an array a, containing three elements, then reverses the array. the call to reverse() returns a reference to the reversed array a. ...
...length property reflecting the last in a series of consecutive, zero-based numerical properties may not behave in any meaningful manner. examples reversing the elements in an array the following example creates an array a, containing three elements, then reverses the array. the call to reverse() returns a reference to the reversed array a. const a = [1, 2, 3]; console.log(a); // [1, 2, 3] a.reverse(); console.log(a); // [3, 2, 1] reversing the elements in an array-like object the following example creates an array-like object a, containing three elements and a length property, then reverses the array-like object. the call to reverse() returns a reference to the reversed array-like object a. const a = {0: 1, 1: 2, 2: 3, length: 3}; console.log(a); // {0: 1, 1: 2, 2: 3, length: 3} ...
...log(a); // [3, 2, 1] reversing the elements in an array-like object the following example creates an array-like object a, containing three elements and a length property, then reverses the array-like object. the call to reverse() returns a reference to the reversed array-like object a. const a = {0: 1, 1: 2, 2: 3, length: 3}; console.log(a); // {0: 1, 1: 2, 2: 3, length: 3} array.prototype.reverse.call(a); //same syntax for using apply() console.log(a); // {0: 3, 1: 2, 2: 1, length: 3} specifications specification ecmascript (ecma-262)the definition of 'array.prototype.reverse' in that specification. ...

handler.preventExtensions() - JavaScript
the handler.preventextensions() method is a trap for object.preventextensions(). the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax const p = new proxy(target, { preventextensions: function(target) { } }); parameters the following parameter is passed to the preventextensions() method. this is bound to the handler. target the target object. return value the preventextensions() method must return a boolean value. description the handler.preventextensions() method is a trap for object.preventextensions(). ...
...arget) { } }); parameters the following parameter is passed to the preventextensions() method. this is bound to the handler. target the target object. return value the preventextensions() method must return a boolean value. description the handler.preventextensions() method is a trap for object.preventextensions(). interceptions this trap can intercept these operations: object.preventextensions() reflect.preventextensions() invariants if the following invariants are violated, the proxy will throw a typeerror: object.preventextensions(proxy) only returns true if object.isextensible(proxy) is false. examples trapping of preventextensions the following code traps object.preventextensions(). ...
...can intercept these operations: object.preventextensions() reflect.preventextensions() invariants if the following invariants are violated, the proxy will throw a typeerror: object.preventextensions(proxy) only returns true if object.isextensible(proxy) is false. examples trapping of preventextensions the following code traps object.preventextensions(). const p = new proxy({}, { preventextensions: function(target) { console.log('called'); object.preventextensions(target); return true; } }); console.log(object.preventextensions(p)); // "called" // false the following code violates the invariant. ...
...ensions the following code traps object.preventextensions(). const p = new proxy({}, { preventextensions: function(target) { console.log('called'); object.preventextensions(target); return true; } }); console.log(object.preventextensions(p)); // "called" // false the following code violates the invariant. const p = new proxy({}, { preventextensions: function(target) { return true; } }); object.preventextensions(p); // typeerror is thrown specifications specification ecmascript (ecma-262)the definition of '[[preventextensions]]' in that specification. ...

Reflect.preventExtensions() - JavaScript
the static reflect.preventextensions() method prevents new properties from ever being added to an object (i.e., prevents future extensions to the object). it is similar to object.preventextensions(), but with some differences. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax reflect.preventextensions(target) parameters target the target object on which to prevent extensions. return value a boolean indicating whether or not the target was successfully set to prevent extensions. exceptions a typeerror, if target is not an object. ...
... project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax reflect.preventextensions(target) parameters target the target object on which to prevent extensions. return value a boolean indicating whether or not the target was successfully set to prevent extensions. exceptions a typeerror, if target is not an object. description the reflect.preventextensions() method allows you to prevent new properties from ever being added to an object (i.e., prevents future extensions to the object). it is similar to object.preventextensions(). examples using reflect.preventextensions() see also object.preventextensions(). // objects are extensible by default. let empty = {} reflect.isextensible(empty) // === true // ...but that can be changed. ...
...ions() method allows you to prevent new properties from ever being added to an object (i.e., prevents future extensions to the object). it is similar to object.preventextensions(). examples using reflect.preventextensions() see also object.preventextensions(). // objects are extensible by default. let empty = {} reflect.isextensible(empty) // === true // ...but that can be changed. reflect.preventextensions(empty) reflect.isextensible(empty) // === false difference from object.preventextensions() if the target argument to this method is not an object (a primitive), then it will cause a typeerror. with object.preventextensions(), a non-object target will be coerced to an object. ...
...empty = {} reflect.isextensible(empty) // === true // ...but that can be changed. reflect.preventextensions(empty) reflect.isextensible(empty) // === false difference from object.preventextensions() if the target argument to this method is not an object (a primitive), then it will cause a typeerror. with object.preventextensions(), a non-object target will be coerced to an object. reflect.preventextensions(1) // typeerror: 1 is not an object object.preventextensions(1) // 1 specifications specification ecmascript (ecma-262)the definition of 'reflect.preventextensions' in that specification. ...

Animation.reverse() - Web APIs
the animation.reverse() method of the animation interface reverses the playback direction, meaning the animation ends at its beginning. if called on an unplayed animation, the whole animation is played backwards. if called on a paused animation, the animation will continue in reverse. syntax animation.reverse(); parameters none. return value undefined example in the growing/shrinking alice game example, clicking or tapping the bottle causes alice's growing animation (alicechange) to play backwards, causing her to get smaller. ...
...verse. syntax animation.reverse(); parameters none. return value undefined example in the growing/shrinking alice game example, clicking or tapping the bottle causes alice's growing animation (alicechange) to play backwards, causing her to get smaller. ...
...bottle causes alice's growing animation (alicechange) to play backwards, causing her to get smaller. it is done by setting alicechange's animation.playbackrate to -1 like so: var shrinkalice = function() { // play alice's animation in reverse alicechange.playbackrate = -1; alicechange.play(); // play the bottle's animation drinking.play() } but it could also have been done by calling reverse() on alicechange like so: var shrinkalice = function() { // play alice's animation in reverse alicechange.reverse(); // play the bottle's animation drinking.play() } specifications specification status comment web animationsthe definition of 'reverse()' in that specification. working draft ...

MediaRecorderErrorEvent.error - Web APIs
the error's name property's value may be any exception that makes sense during the handling of media recording, including these specifically identified by the specification. ...
...the error's name property's value may be any exception that makes sense during the handling of media recording, including these specifically identified by the specification. ...
... working draft initial specification. ...

Node.previousSibling - Web APIs
the node.previoussibling read-only property returns the node immediately preceding the specified one in its parent's childnodes list, or null if the specified node is the first in that list. syntax previousnode = node.previoussibling; example <img id="b0"> <img id="b1"> <img id="b2"> console.log(document.getelementbyid("b1").previoussibling); // <img id="b0"> console.log(document.getelementbyid("b2").previoussibling.id); // "b1" notes gecko-based browsers insert text nodes into a document to represent whitespace in the source markup. therefore a node obtained, for example, using node.firstchild or node.previoussibling may refer to a whitespace text node rather than the actual element the author intended to get. see whitespace in the dom and w3c dom 3 faq: why are some t...
... node.previoussibling may refer to a whitespace text node rather than the actual element the author intended to get. see whitespace in the dom and w3c dom 3 faq: why are some text nodes empty? for more information. to navigate the opposite way through the child nodes list use node.nextsibling. specifications specification status comment domthe definition of 'node.previoussibling' in that specification. living standard no change document object model (dom) level 3 core specificationthe definition of 'node.previoussibling' in that specification. obsolete no change document object model (dom) level 2 core specificationthe definition of 'node.previoussibling' in that specification. obsolete no change document object mod...
... no change document object model (dom) level 3 core specificationthe definition of 'node.previoussibling' in that specification. obsolete no change document object model (dom) level 2 core specificationthe definition of 'node.previoussibling' in that specification. obsolete no change document object model (dom) level 1 specificationthe definition of 'node.previoussibling' in that specification. obsolete initial definition ...

PointerEvent.height - Web APIs
specifications specification status comment pointer events – level 2the definition of 'height' in that specification. ...
... specifications specification status comment pointer events – level 2the definition of 'height' in that specification. recommendation non-stable version. ...
...er device (for example a finger), for a given pointer, each event may produce a different value. if the input hardware cannot report the contact geometry to the browser, the height defaults to 1. syntax var contactheight = pointerevent.height; return value contactheight the height of the event's contact area (in css pixels). example an example of this property is included in the pointerevent.width example. specifications specification status comment pointer events – level 2the definition of 'height' in that specification. recommendation non-stable version. pointer eventsthe definition of 'height' in that specification. obsolete initial definition. ...

RTCIdentityErrorEvent - Web APIs
the rtcidentityerrorevent interface represents an error associated with the identity provider (idp). this is usually for an rtcpeerconnection. two events are sent with this type: idpassertionerror and idpvalidationerror. firefox implements this interface under the following name: rtcpeerconnectionidentityerrorevent. it is likely that it will correct this name when it will unprefix rtcpeerconnection, once spec and implementation will have been stabilized. properties a rtcidentityerrorevent being an event, this event also implements these properties. rtcidentityerrorevent.idp read only is a domstring describing the domain name of the identity provider (idp) generating the error response. ...
...t is likely that it will correct this name when it will unprefix rtcpeerconnection, once spec and implementation will have been stabilized. properties a rtcidentityerrorevent being an event, this event also implements these properties. rtcidentityerrorevent.idp read only is a domstring describing the domain name of the identity provider (idp) generating the error response. rtcidentityerrorevent.loginurl read only is a domstring giving the url where the user can complete the authentication. it can be null and is provided by the identity provider (idp). ...
...n event, this event also implements these properties. rtcidentityerrorevent.idp read only is a domstring describing the domain name of the identity provider (idp) generating the error response. rtcidentityerrorevent.loginurl read only is a domstring giving the url where the user can complete the authentication. it can be null and is provided by the identity provider (idp). rtcidentityerrorevent.protocol read only is a domstring describing the idp protocol in use. methods a rtcidentityerrorevent being an event, this event also implements these properties. there is no specific rtcidentityerrorevent method. examples pc.onidpassertionerror = function( ev ) { alert("the idp named '" + ev.idp + ...

RTCPeerConnectionIceErrorEvent - Web APIs
the rtcpeerconnectioniceerrorevent interface—based upon the event interface—provides details pertaining to an ice error announced by sending an icecandidateerror event to the rtcpeerconnection object. constructor rtcpeerconnectioniceerrorevent() creates and returns a new rtcpeerconnectioniceerrorevent object, with its type and other properties initialized as specified in the parameters. you will not normally create an object of this type yourself. ...
...ning to an ice error announced by sending an icecandidateerror event to the rtcpeerconnection object. constructor rtcpeerconnectioniceerrorevent() creates and returns a new rtcpeerconnectioniceerrorevent object, with its type and other properties initialized as specified in the parameters. you will not normally create an object of this type yourself. properties the rtcpeerconnectioniceerrorevent interface includes the properties found on the event interface, as well as the following properties: address read only a domstring providing the local ip address used to communicate with the stun or turn server being used to negotiate the connection, or null if the local ip address has not yet been exposed as part of a local ice candidate. errorcode read only an unsigned integer value ...
...or. port read only an unsigned integer value giving the port number over which communication with the stun or turn server is taking place, using the ip address given in address. null if the connection hasn't been established (that is, if address is null). url read only a domstring indicating the url of the stun or turn server with which the error occurred. methods rtcpeerconnectioniceerrorevent has no methods other than any provided by the parent interface, event. examples tbd specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnectioniceerrorevent' in that specification. candidate recommendation initial definition. ...

SpeechSynthesisErrorEvent - Web APIs
the speechsynthesiserrorevent interface of the web speech api contains information about any errors that occur while processing speechsynthesisutterance objects in the speech service. properties speechsynthesiserrorevent extends the speechsynthesisevent interface, which inherits properties from its parent interface, event. speechsynthesiserrorevent.error read only returns an error code indicating what has gone wrong with a speech synthesis attempt. methods speechsynthesiserrorevent extends the speechsynthesisevent interface, which inherits methods from its parent interface, event. examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var v...
...siserrorevent extends the speechsynthesisevent interface, which inherits methods from its parent interface, event. examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... ...
... draft ...

findpreviousaccesskey - Archive of obsolete content
...
... ...

ontextreverted - Archive of obsolete content
...
... ...

getPreviousItem - Archive of obsolete content
« xul reference home getpreviousitem( startitem, delta ) return type: element this method returns the item a given distance (delta) before the specified startitem, or null if no such item exists. ...
... « xul reference home getpreviousitem( startitem, delta ) return type: element this method returns the item a given distance (delta) before the specified startitem, or null if no such item exists. ...

CredentialsContainer.preventSilentAccess() - Web APIs
for example, you might call this, after a user signs out of a website to ensure that he/she isn't automatically signed in on the next site visit. mediation varies by origin, and is an added check point of browser stored credentials, informing a user of an account login status. this method is typically called after a user signs out of a website, ensuring this user's login information is not automatically passed on the next site visit. earlier versions of the spec called this method requireusermediation(). see browser compatibility for support details. ...
...f browser stored credentials, informing a user of an account login status. this method is typically called after a user signs out of a website, ensuring this user's login information is not automatically passed on the next site visit. earlier versions of the spec called this method requireusermediation(). see browser compatibility for support details. syntax var promise = credentialscontainer.preventsilentaccess() parameters none. returns an empty promise. specifications specification status comment credential management level 1the definition of 'preventsilentaccess()' in that specification. working draft initial definition. ...

PointerEvent.isPrimary - Web APIs
it returns true if the pointer that caused the event to be fired is the primary device and returns false otherwise. in a multi-pointer scenario (such as a touch screen that supports more than one touch point), this property is used to identify a master pointer among the set of active pointers for each pointer type. only a primary pointer will produce compatibility mouse events. authors who desire only single-pointer interaction can achieve that by ignoring non-primary pointers. a pointer is considered primary if the pointer represents a mouse device. ...
...ointers (one for each pointertype) are considered primary. for example, a touch contact and a mouse cursor moved simultaneously will produce pointers that are both considered primary. if there are multiple primary pointers, these pointers will all produce compatibility mouse events (see pointer_events for more information about pointer, mouse and touch interaction). syntax var isprimary = pointerevent.isprimary; return value isprimary returns true if the pointer for this event is the primary pointer and returns false otherwise. example this example illustrates using the value of isprimary to call the appropriate processing function. target.addeventlistener('pointerdown', function(event) { if (event.isprimary) process_primary_pointer(event); else process_secondary_p...

PointerEvent.pointerId - Web APIs
the pointerid read-only property of the pointerevent interface is an identifier assigned to a given pointer event. the identifier is unique, being different from the identifiers of all other active pointer events. since the value may be randomly generated, it is not guaranteed to convey any particular meaning. syntax var id = pointerevent.pointerid; return value id the pointer event's unique identifier number. example the following code snippet compares a previously saved pointerid with the one of the pointerdown event that was just fired. ...
...pointer events. since the value may be randomly generated, it is not guaranteed to convey any particular meaning. syntax var id = pointerevent.pointerid; return value id the pointer event's unique identifier number. example the following code snippet compares a previously saved pointerid with the one of the pointerdown event that was just fired. let id; // let's assume that this is a previously saved pointerid target.addeventlistener('pointerdown', function(event) { // compare previous event's id that was cached // to current event's id and handle accordingly if (id === event.pointerid) process_event(event); }, false); specifications specification status comment pointer events – level 2the definition of 'pointerid' in that specification. reco...

PointerEvent.pointerType - Web APIs
the supported values are the following strings: "mouse" the event was generated by a mouse device. "pen" the event was generated by a pen or stylus device. "touch" the event was generated by a touch, such as a finger. if the device type cannot be detected by the browser, the value can be an empty string (""). if the browser supports pointer device types other than those listed above, the value should be vendor-prefixed to avoid conflicting names for different types of devices. ...
...finition of 'pointertype' in that specification. obsolete initial definition. pointer events – level 2the definition of 'pointertype' in that specification. recommendation non-stable version. css object model (cssom) view modulethe definition of 'mouseevent' in that specification. working draft redefines mouseevent from long to double. this means that a pointerevent whose pointertype is mouse will be a double. ...

PointerEvent.tiltX - Web APIs
the range of values is -90 to 90, inclusive, where a positive value is a tilt to the right. for devices that do not support this property, the value is 0. example this example illustrates simple accessing of the tiltx and tilty properties. ...
...the range of values is -90 to 90, inclusive, where a positive value is a tilt to the right. for devices that do not support this property, the value is 0. example this example illustrates simple accessing of the tiltx and tilty properties. ...

PointerEvent.tiltY - Web APIs
the range of values is -90 to 90, inclusive, where a positive value is a tilt towards the user. for devices that do not support this property, the value is 0. example this example illustrates simple accessing of the tiltx and tilty properties. ...
...the range of values is -90 to 90, inclusive, where a positive value is a tilt towards the user. for devices that do not support this property, the value is 0. example this example illustrates simple accessing of the tiltx and tilty properties. ...

RTCErrorEvent.error - Web APIs
since rtcerror is based upon domexception, it includes those properties. additional properties defined by rtcerror are: errordetail read only a domstring specifying the webrtc-specific error code identifying the type of error that occurred. receivedalert read only an unsigned long integer value indicating the fatal dtls error which was received from the network. only valid if the errordetail string is dtls-failure. if null, no dtls error was received. ...
...e example uses addeventlistener() to add the handler for error events. you can also use the rtcdatachannel object's onerror event handler property, like this: datachannel.onerror = (event) => { let error = event.error; /* and so forth */ }; specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcerrorevent.error' in that specification. candidate recommendation initial definition. ...

RTCIdentityErrorEvent.idp - Web APIs
it is likely that it will correct this name when it will unprefix rtcpeerconnection, once spec and implementation will have been stabilized. ...
...it is likely that it will correct this name when it will unprefix rtcpeerconnection, once spec and implementation will have been stabilized. ...

RTCIdentityErrorEvent.loginUrl - Web APIs
it is likely that it will correct this name when it will unprefix rtcpeerconnection, once spec and implementation will have been stabilized. ...
...it is likely that it will correct this name when it will unprefix rtcpeerconnection, once spec and implementation will have been stabilized. ...

RTCIdentityErrorEvent.protocol - Web APIs
it is likely that it will correct this name when it will unprefix rtcpeerconnection, once spec and implementation will have been stabilized. ...
...it is likely that it will correct this name when it will unprefix rtcpeerconnection, once spec and implementation will have been stabilized. ...

RTCPeerConnectionIceErrorEvent.address - Web APIs
this address identifies the network interface on the local device which is being used to attempt to establish the connection to the remote peer. this can be useful on multi-homed systems—devices with more than one network connection—to determine which network interface is being used. ...
... candidate recommendation initial definition. ...

SensorErrorEvent.error - Web APIs
specifications specification status comment generic sensor apithe definition of 'error' in that specification. ...
... specifications specification status comment generic sensor apithe definition of 'error' in that specification. ...

SpeechSynthesisErrorEvent.error - Web APIs
syntax myerror = event.error; value a domstring containing an error code. possible codes are: canceled a speechsynthesis.cancel method call caused the speechsynthesisutterance to be removed from the queue before it had begun being spoken. interrupted a speechsynthesis.cancel method call caused the speechsynthesisutterance to be interrupted after it had begun being spoken and before it completed. ...
...ynthesisutterance.rate, speechsynthesisutterance.pitch or speechsynthesisutterance.volume property was not valid. examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... ...

TreeWalker.previousNode() - Web APIs
the treewalker.previousnode() method moves the current node to the previous visible node in the document order, and returns the found node. it also moves the current node to this one. if no such node exists,or if it is before that the root node defined at the object construction, returns null and the current node is not changed. syntax node = treewalker.previousnode(); example var treewalker = document.createtreewalker( document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); var node = treewalker.previousnode(); // returns null as there is no parent specifications specification status comment domthe definition of 'treewalker.previousnode' in that specification. living standard ...
...(); // returns null as there is no parent specifications specification status comment domthe definition of 'treewalker.previousnode' in that specification. living standard no change from document object model (dom) level 2 traversal and range specification document object model (dom) level 2 traversal and range specificationthe definition of 'treewalker.previousnode' in that specification. obsolete initial definition. ...

TreeWalker.previousSibling() - Web APIs
the treewalker.previoussibling() method moves the current node to its previous sibling, if any, and returns the found sibling. if there is no such node, return null and the current node is not changed. syntax node = treewalker.previoussibling(); example var treewalker = document.createtreewalker( document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); var node = treewalker.previoussibling(); // returns null as there is no previous sibiling specifications specification status comment domthe definition of 'treewalker.previoussibling' in that specification. living standard no change from document object model (dom) level 2 traversal and range specification document objec...
... null as there is no previous sibiling specifications specification status comment domthe definition of 'treewalker.previoussibling' in that specification. living standard no change from document object model (dom) level 2 traversal and range specification document object model (dom) level 2 traversal and range specificationthe definition of 'treewalker.previoussibling' in that specification. obsolete initial definition. ...

URL.revokeObjectURL() - Web APIs
the url.revokeobjecturl() static method releases an existing object url which was previously created by calling url.createobjecturl(). call this method when you've finished using an object url to let the browser know not to keep the reference to the file any longer. note: this feature is available in web workers. note: this method is not available from service workers, due to issues with the blob interface's life cycle and the potential for leaks. syntax url.revokeobjecturl(objecturl) parameters objecturl a domstring representing a object url that was previously created by calling createobjecturl(). examples see using object urls to display images. ...
...s, due to issues with the blob interface's life cycle and the potential for leaks. syntax url.revokeobjecturl(objecturl) parameters objecturl a domstring representing a object url that was previously created by calling createobjecturl(). examples see using object urls to display images. specification specification status comment file apithe definition of 'revokeobjecturl()' in that specification. working draft initial definition ...

TypedArray.prototype.reverse() - JavaScript
the reverse() method reverses a typed array in place. the first typed array element becomes the last and the last becomes the first. this method has the same algorithm as array.prototype.reverse(). typedarray is one of the typed array types here. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax typedarray.reverse(); return value the reversed array. ...
... algorithm as array.prototype.reverse(). typedarray is one of the typed array types here. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax typedarray.reverse(); return value the reversed array. examples using reverse var uint8 = new uint8array([1, 2, 3]); uint8.reverse(); console.log(uint8); // uint8array [3, 2, 1] specifications specification ecmascript (ecma-262)the definition of 'typedarray.prototype.reverse' in that specification. ...

Tamarin-central rev 703:2cee46be9ce0 - Archive of obsolete content
the announcement sent to tamarin-devel can be read here. testing summary acceptance tests have passed on the following supported platforms: * windows, 32 & 64 bit * mac ox x ppc & intel, 32 bit * linux, 32 bit * windows mobile arm version asc-4200 of the actionscript compiler was used for all tests. performance testsuite time metric the following is a comparison of the current tamarin-central (tc-703) versus the prior build (tc-700) as well as current against the vm in flash player 10. the key takeaway is that the interpreter is much improved. ...

ontextrevert - Archive of obsolete content
« xul reference home ontextrevert obsolete since gecko 1.9.1 type: script code note: applies to: thunderbird, seamonkey this event handler is called when the user presses escape to revert the textbox to its original uncompleted value. as of gecko 1.9.1, this attribute is superseded by the ontextreverted attribute. ...

onTextReverted - Archive of obsolete content
« xul reference home ontextreverted() return type: event result calls the ontextreverted event handler. you should not call this method yourself. ...

Styling Abbreviations and Acronyms - Archive of obsolete content
summary: the html elements abbr and acronym are useful accessibility aids, but their styling can come as a surprise to authors. see how you can take control of their presentation without sacrificing the benefits these elements provide. many authors are beginning to use the html elements abbr (abbreviation) and acronym in their web pages. this is to be encouraged, and according to guideline 4 of the web content accessibility guidelines, both elements should be given a title attribute to improve "readability of the web for all people, including those with learning disabilities, cognitive disabilities, or people who are deaf." the problem authors have discovered that any abbr or acronym that has a title attribute is rendered with a dotted underline, per the following rule in resou...

PL_CompareValues
compares two void * values numerically. syntax #include <plhash.h> printn pl_comparevalues(const void *v1, const void *v2); description pl_comparevalues compares the two void * values v1 and v2 numerically, i.e., it returns the value of the expression v1 == v2. pl_comparevalues can be used as the comparator function for integer or pointer-valued key or entry value. ...

PR_PREV_LINK
returns the preceding element in a list. syntax #include <prclist.h> prclist *pr_prev_link (prclist *elemp); parameter elemp a pointer to the element. returns a pointer to a list element. description pr_prev_link returns a pointer to the element preceding the specified element. it can be used to traverse a list. the preceding element is not removed from the list. ...

PreviousSibling
« nsiaccessible page summary returns previous node in accessible tree. attribute nsiaccessible previoussibling; exceptions thrown ns_error_failure indicates that the accessible is unattached from the accessible tree. see also nsiaccessible.parent nsiaccessible.nextsibling nsiaccessible.firstchild nsiaccessible.lastchild nsiaccessible.children nsiaccessible.childcount nsiaccessible.getchildat() ...

nsIDataSignatureVerifier
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview boolean verifydata(in acstring adata, in acstring asignature, in acstring apublickey); methods verifydata() verifies that the data matches the data that was used to generate the signature. boolean verifydata( in acstring adata, in acstring asignature, in acstring apublickey ); parameters adata the data to be tested. asignature the signature of the data, base64 encoded. ...

MediaRecorderErrorEvent - Web APIs
the mediarecordererrorevent interface represents errors returned by the mediastream recording api. it is an event object that encapsulates a reference to a domexception describing the error that occurred. properties inherits properties from its parent interface, event. error read only a domexception containing information about the error that occurred. read only. constructor mediastreamrecorderevent() creates and returns a new mediarecordererrorevent event object with the given parameters. methods inherits methods from its parent interface, event. specifications specification status comment mediastream recordingthe definition of 'mediarecordererrorevent' in that specification. working draft initial definition. ...

PointerEvent.getCoalescedEvents() - Web APIs
specifications specification status comment pointer events – level 3the definition of 'getcoalescedevents()' in that specification. editor's draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...

PointerEvent.pressure - Web APIs
for hardware that does not support pressure, such as a mouse, the value is 0.5 when the pointer is active buttons state and 0 otherwise. example in this snippet, when a pointerdown event is fired, different functions are called depending on the value of the event's pressure property. ...

PointerEvent.tangentialPressure - Web APIs
note that some hardware may only support positive values in the range 0 to 1. for hardware that does not support tangential pressure, the value will be 0. example in this snippet, when a pointerdown event is fired, different functions are called depending on the value of the event's tangentialpressure property. ...

PointerEvent.twist - Web APIs
the value is in the range 0 to 359, inclusive. for devices that do not report twist, the value is 0. example when a pointerdown event is fired, different functions are called depending on the value of the event's twist property. ...

PointerEvent.width - Web APIs
the width read-only property of the pointerevent interface represents the width of the pointer's contact geometry along the x-axis, measured in css pixels. depending on the source of the pointer device (such as a finger), for a given pointer, each event may produce a different value. if the input hardware cannot report the contact geometry to the browser, the width defaults to 1. syntax var contactwidth = pointerevent.width; return value contactwidth the width of the event's contact area (in css pixels). example this example illustrates using the pointerevent interface's width and height properties to calculate the contact area. target.addeventlistener("pointerdown", function(ev) { // calculate the contact area var area = ev.width * ev.height; }, false); specifications ...

SensorErrorEvent - Web APIs
the sensorerrorevent interface of the sensor apis provides information about errors thrown by a sensor or related interface. constructor sensorerrorevent.sensorerrorevent() creates a new sensorerrorevent object. properties sensorerrorevent.error read only returns the domexception object passed in the event's contructor. specifications specification status comment generic sensor apithe definition of 'sensorerrorevent' in that specification. candidate recommendation initial definition. ...

SpeechRecognitionErrorEvent.error - Web APIs
syntax var myerror = event.error; value a domstring naming the type of error. the possible error types are: no-speech no speech was detected. aborted speech input was aborted in some manner, perhaps by some user-agent-specific behavior like a button the user can press to cancel speech input. audio-capture audio capture failed. network network communication required for completing the recognition failed. not-allowed the user agent disallowed any speech input from occurring for reasons of security, privacy or user preference. ...

SpeechRecognitionErrorEvent.message - Web APIs
syntax var myerrormsg = event.message; value a domstring containing more details about the error that was raised. note that the spec does not define the exact wording of these messages — this is up to the implementors to decide upon. ...

SpeechRecognitionErrorEvent - Web APIs
the speechrecognitionerrorevent interface of the web speech api represents error messages from the recognition service. properties speechrecognitionerrorevent also inherits properties from its parent interface, event. speechrecognitionerrorevent.error read only returns the type of error raised. speechrecognitionerrorevent.message read only returns a message describing the error in more detail. examples var recognition = new speechrecognition(); recognition.onerror = function(event) { console.log('speech recognition error detected: ' + event.error); console.log('additional information: ' + event.message); } specifications specification status comment web speech apithe definition of 'speechrecognitionerrorevent' in that specification. draft ...

Index - Web APIs
animations, web animations api the read-only animation.ready property of the web animations api returns a promise which resolves when the animation is ready to play. a new promise is created every time the animation enters the "pending" play state as well as when the animation is canceled, since in both of those scenarios, the animation is ready to be started again. 78 animation.reverse() api, animation, interface, method, reference, web animations, reverse, waapi, web animations api the animation.reverse() method of the animation interface reverses the playback direction, meaning the animation ends at its beginning. if called on an unplayed animation, the whole animation is played backwards. if called on a paused animation, the animation will continue in reverse. ...
... audio api, outputlatency the outputlatency read-only property of the audiocontext interface provides an estimation of the output latency of the current audio context. 134 audiocontext.resume() api, audio, audiocontext, method, reference, web audio api, resume the resume() method of the audiocontext interface resumes the progression of time in an audio context that has previously been suspended. 135 audiocontext.suspend() api, audio, audiocontext, method, reference, web audio api, suspend the suspend() method of the audiocontext interface suspends the progression of time in the audio context, temporarily halting audio hardware access and reducing cpu/battery usage in the process — this is useful if you want an application to power down the aud...
...view the battery status api, more often referred to as the battery api, provides information about the system's battery charge level and lets you be notified by events that are sent when the battery level or charging status change. this can be used to adjust your app's resource usage to reduce battery drain when the battery is low, or to save changes before the battery runs out in order to prevent data loss. 264 batterymanager api, battery api, device api, interface, obsolete, reference, référence(2) the batterymanager interface provides ways to get information about the system's battery charge level. 265 batterymanager.charging api, battery api, needsmarkupwork, property, reference, référence(2) a boolean value indicating whether or not the...
...And 154 more matches

Index - Archive of obsolete content
e support in old browsers code snippets no summary! 221 xpath no summary! 222 getattributens code snippets no summary! 223 common pitfalls add-ons, developing mozilla, extensions there are some common pitfalls that should be avoided when writing either extensions or core mozilla code. these are the sort of things that super-review should be catching for code that goes into the tree; avoiding these to start with saves super-reviewers a lot of effort. 224 communication between html and your extension add-ons, extensions, web development see also interaction between privileged and non-privileged pages. 225 creating custom firefox extensions with the mozilla build system add-ons, build do...
...ions, json, xmlhttprequest a common practice found in many extensions is using xmlhttprequest (or some other mechanism) to download javascript or json (they are different) from a remote website. once the content has been downloaded, the extension authors proceed to use eval() to decode the string content into javascript objects. this practice is dangerous and will not, in fact, pass an amo review. so the extension will not be allowed to move out of the amo sandbox. 233 enhanced extension installation add-ons, extensions no summary! 234 extension etiquette add-ons, extensions, guide no summary! 235 extension library no summary! 236 extension packaging add-ons, extensions, guide, toolkit api no summary! ...
...and commands add-ons, codingscripting, dom, glossary, guide, javascript, xul, events no summary! 268 adding toolbars and toolbar buttons toolbars, xul adding new toolbars to firefox is easy, but adding them the wrong way is very easy as well. 269 adding menus and submenus add-ons, codingscripting, macs, xul, apple the hello world example in the previous sections shows the two most common ways to add menus. in this section we'll look into more specialized menus and what you can do with them. 270 adding sidebars no summary! 271 adding windows and dialogs no summary! 272 appendix a: add-on performance add-ons, extensions, performance no summary! 273 appendix b: install ...
...And 39 more matches

JavaScript Daemons Management - Archive of obsolete content
rt for init and onstart functions (declarable during the instantiation of the daemon). so the minidaemon framework will remain the recommended way for simple animations, because daemon without its collection of methods is essentially a clone of it. /*\ |*| |*| ******************************* |*| * daemon.js * |*| ******************************* |*| |*| ver. 1.0 rev. 2 |*| |*| daemon.js - a javascript highly scalable daemons manager. |*| |*| https://developer.mozilla.org/docs/javascript/timers/daemons |*| https://developer.mozilla.org/user:fusionchess |*| |*| this framework is released under the gnu public license, version 3 or later. |*| http://www.gnu.org/licenses/gpl-3.0.html |*| \*/ "use strict"; /**************************** * the daemon...
...k.prototype; /* make love with the gc :-) */ daemon.blank.prototype = /* important! ...
...you could safely remove all or some of them, * depending on your nee...
...And 28 more matches

Index
er details; for example, it contains a signature by a third party that expresses trust in the ownership relationship for the certificate. the trust assigned by the third party might be restricted to certain uses, which are listed in certificate extensions that are contained in the certificate. many (if not most) of the operations performed by nss involve the use of x.509 certificates (often abbreviated as “cert”, unfortunately making it easy to confuse with the term “computer emergency response team“). when checking whether a certificate is trusted or not, it's necessary to find a relevant trust anchor (root certificate) that represents the signing capability of a trusted third party, usually called a certificate authority (ca). a trust anchor is just another x.509 certificate t...
...nss to free the associated resources. when working with handles to private keys it's usually difficult (and undesired) that an application gets access to the raw key data; therefore it may be difficult to extract such data from nss. the usual minimum requirement is that private keys must be wrapped using a protective layer (such as password-based encryption). the intention is to make it easier to review code for security. the less code that has access to raw secret keys, the less code that must be reviewed. nss has only limited functionality to look up raw keys. the preferred approach is to use certificates, and to look up certificates by properties such as the contained subject name (information that describes the owner of the certificate). for example, while nss supports random calculati...
... trust anchors contained in the ckbi module are usually self signed, which is defined as having identical subject name and issuer name fields. if a self-signed certificate is marked as explicitly trusted, nss will sk...
...And 27 more matches

sslfnc.html
sl v2. factory setting is on. if you turn this option off, an attempt to establish a connection with a peer that only understands ssl v2 will fail. ssl_enable_tls is a peer of the ssl_enable_ssl2 and ssl_enable_ssl3 options. the ietf standard transport layer security (tls) protocol, rfc 2246, is a modified version of ssl3. it uses the ssl version number 3.1, appearing to be a "minor" revision of ssl 3.0. nss 2.8 supports tls in addition to ssl2 and ssl3. you can think of it as "ssl_enable_ssl3.1". see the description below for more information about this option. ssl_v2_compatible_hello tells the ssl library whether or not to send ssl3 client hello messages in ssl2-compatible format. if set to pr_true, it will; otherwise, it will not. factory setting is on (pr_true). ...
... is functioning as a client or server. for a complete discussion of the use of ssl_handshake_as_client and ssl_handshake_as_server with ssl_enabledefault and ssl_enable, see ssl_optionset. the ssl protocol is defined to be able to handle simultaneous two-way communication between applications at each end of an ssl connection. two-way simultaneous communication is also known as "full duplex", abbreviated fdx. however, most application protocols that use ssl are not two-way simultaneous, but two-way alternate, also known as "half dupled"; that is, each end takes turns sending, and each end is either sending, or receiving, but not both at the same time. for an application to do full duplex, it would typically have two threads sharing the socket; one doing all the reading and the other doin...
...eterror to obtain error code. description ssl_cipherprefgetdefault gets the application default preference for the specified ssl2, ssl3, or tls cipher a cipher suite is used only if the policy allows it and the preference for it is set to pr_true. ssl_cipherprefsetdefault enables or disables ssl2 or ssl3 cipher suites (subject to which cipher suites are permitted or disallowed by previous calls to one or more of the ssl export policy functions). this function must be called once for each cipher you want to enable or disable by default. syntax #include "ssl.h" secstatus ssl_cipherprefsetdefault(print32 cipher, prbool enabled); parameters this function has the following parameters: cipher one of the following values for ssl2 (factory sett...
...And 20 more matches

Index
of the cycle collector introduced into xpcom for firefox 3, including a description of the steps involved in modifying an existing c++ class to participate in xpcom cycle collection. if you have a class that you think is involved in a cyclical-ownership leak, this page is for you. 14 introduction to xpcom for the dom developing mozilla warning: this document has not yet been reviewed by the dom gurus, it might contain some errors. 15 language bindings embedding, landing, mozilla, xpcom, xpcom:language bindings an xpcom language binding is a bridge between a particular language and xpcom to provide access to xpcom objects from that language, and to let modules written in that language be used as xpcom objects by all other languages for which there are...
...e(2), xpcom:language bindings, xpconnect components.utils.createobjectin creates a new javascript object in the scope of the specified object's compartment. 34 components.utils.evalinsandbox add-ons, developing mozilla, extensions, javascript, xpcom:language bindings, xpconnect the evalinsandbox() function enables you to evaluate javascript code inside a sandbox you've previously created using the components.utils.sandbox constructor. 35 components.utils.evalinwindow this function enables code running in a more-privileged javascript context to evaluate a string in a less-privileged javascript context. the result is structured cloned back to the original context, unless it is native (for example, if it returns a dom node, this is not structured ...
... could cause them to behave in unexpected ways. for example, privileged code using an xray to a dom object sees only the original, native version of the dom object. any expando properties are not visible, and if any native properties have been redefined, this has no effect. 43 components.utils.makeobjectpropsnormal add-ons, developing mozilla, extensions, javascript, needstechnicalreview, xpcom:language bindings, xpconnect ensures that the specified object's methods are all in the object's scope, and aren't cross-component wrappers. 44 components.utils.reporterror xpcom:language bindings, xpconnect components.utils.reporterror reports a javascript error object to the error console, and returns. it is meant for use by extension developers who have exc...
...And 19 more matches

Border-image generator - CSS: Cascading Style Sheets
</div> </div> <div class="separator"></div> <div class="property"> <div class="name">draggable</div> <div class="ui-checkbox" data-topic='drag-subject'></div> </div> <div class="property right"> <div class="name">section height</div> <div class="ui-input-slider" data-topic="preview-area-height" data-min="400" data-max="1000"> </div> </div> </div> <div id="preview_section" class="group section"> <div id="subject"> <div class="guideline" data-axis="y" data-topic="slice-top"></div> <div class="guideline" data-axis="x" data-topic="slice-right"></div> <...
... <div id="subject"> <div class="guideline" data-axis="y" data-topic="slice-top"></div> <div class="guideline" data-axis="x" data-topic="slice-right"></div> <div class="guideline" data-axis="y" data-topic="slice-bottom"></div> <div class="guideline" data-axis="x" data-topic="slice-left"></div> </div> <div id="preview"> </div> </div> <!-- controls --> <div id="controls" class="group section"> <!-- border-image-slice --> <div id="border-slice-control" class="category"> <div class="title"> border-image-slice </div> <div class="property"> <div class="name">fill</div> <div class="ui-checkbox...
... </div> </div> <div class="property"> <div class="ui-input-slider" data-topic="font-size" data-info="em size" data-unit="px" data-value="12" data-sensivity="3"> </div> </div> <div class="property"> <div class="ui-input-slider" data-topic="preview-width" data-info="width" data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"></div> </div> <div class="property"> <div class="ui-input-slider" data-topic="preview-height" data-info="height" data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"> </di...
...And 19 more matches

Client-side storage - Learn web development
this lets you persist data for long-term storage, save sites or documents for offline use, retain user-specific settings for your site, and more. this article explains the very basics of how these work. prerequisites: javascript basics (see first steps, building blocks, javascript objects), the basics of client-side apis objective: to learn how to use client-side storage apis to store application data. client-side storage? elsewhere in the mdn learning area we talked about the difference between static sites and dynamic sites. ...
...ed by the user's browser. client-side storage works on similar principles, but has different uses. it consists of javascript apis that allow you to store data on the client (i.e. on the user's machine) and then retrieve it when needed. this has many distinct uses, such as: personalizing site preferences (e.g. showing a user's choice of custom widgets, color scheme, or font size). persisting previous site activity (e.g. storing the contents of a shopping cart from a previous session, remembering if a user was previously logged in). saving data and assets locally so a site will be quicker (and potentially less expensive) to download, or be usable without a network connection. saving web application generated documents locally for use offline often client-side and server-side storage ar...
...lector('#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 is clicked. the comments explain in detail what each bit does, but in essence here we are taking the name the user has entered into the text inpu...
...And 18 more matches

nsIWinTaskbar
askbar.idlscriptable represents a service that exposes the apis provided by the microsoft windows taskbar. 1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) starting with windows 7, applications gain some control over their appearance in the taskbar. by default, there is a single taskbar preview per top level window (excluding pop-ups). this preview is represented by an nsitaskbarwindowpreview object. an application can register its own "tab" previews. these previews automatically hide the corresponding nsitaskbarwindowpreview. these don't have to correspond to tabs within the application; they can vary in size, shape, and location. they don't even have to represent actual gui element...
...warning: this api has undergone changes that are not yet documented. among these is the addition of the method getoverlayiconcontroller(). this method is currently known to crash if used under certain conditions. ...
...warning: this api has undergone changes that are not yet documented. among these is the addition of the method getoverlayiconcontroller(). this method is currently known to crash if used under certain conditions. see bug 744992 for details and to track progress on a fix. ...
...And 16 more matches

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
gomita-san won "most useful upgraded extension" award in mozilla's 2006 "extend firefox" competition for scrapbook, and was runner-up in the "extend firefox 2" contest for firegestures. ...
... world” extension that only displays the time.3 phase 1: test install our first step will be to perform a test installation consisting of the minimum code needed to add a new menu item to the tools menu (figure 3). fixme: figure 3: menu after phase 1 complete source file structure first set up the work folders you’ll use to organize your extension’s source files. the folder can be wherever you want, but for the purposes of this guide, we’ll assume it’s at c:\extensions\helloworld . create folders and files in your work folder as shown in figure 4. the purpose of each file created during phase 1 is explained in table 2. figure 4: folder structure used in phase 1 c:/ └───extensions └───helloworld │ chrome.manifest │ install.rdf ...
...e target of the overlay in overlay.xul is being read in again, the changes will be reflected, and you’ll be able to see the changes by opening a new browser window. the files clock.xul and clock.js will be read in every time you open the clock window, so just re-opening the clock window once will suffice to check them. during development, it’s important to minimize the number of steps between revising a source file and running an operations check against those changes. the part “operations checks on revised source files” discusses the general procedure to follow from source-file revision to operations check. what if something’s not working right? if your extension isn’t working according to plan, first see if there’s an error being displayed on the errors panel of the error co...
...And 15 more matches

Index - MDN Web Docs Glossary: Definitions of Web-related terms
found 528 pages: # page tags and summary 1 mdn web docs glossary: definitions of web-related terms beginner, definitions, dictionary, glossary, index, landing, terminology web technologies contain long lists of jargon and abbreviations that are used in documentation and coding. this glossary provides definitions of words and abbreviations you need to know to successfully understand and build for the web. 2 404 glossary, http errors, infrastructure, navigation a 404 is a standard response code meaning that the server cannot find the requested resource. 3 502 502, bad gateway, glossary, http errors, infrastructure, navigation an http error code meaning "bad gateway". 4 alpn alpn, draft, glossar...
...are or hardware. 6 aria accessibility, glossary aria (accessible rich internet applications) is a w3c specification for adding semantics and other metadata to html to cater to users of assistive technology. 7 arpa glossary, infrastructure .arpa (address and routing parameter area) is a top-level domain used for internet infrastructure purposes, especially reverse dns lookup (i.e., find the domain name for a given ip address). 8 ascii glossary, infrastructure ascii (american standard code for information interchange) is one of the most popular coding method used by computers for converting letters, numbers, punctuation and control codes into digital form. since 2007, utf-8 superseded it on the web. 9 atag atag, acces...
... an array is an ordered collection of data (either primitive or object depending upon the language). arrays are used to store multiple values in a single variable. this is compared to a variable that can store only one value. 24 asynchronous glossary, web, webmechanics, asynchronous the term asynchronous refers to or multiple related things happening without waiting for the previous one to complete). 25 attribute codingscripting, glossary, html an attribute extends an element, changing its behavior or providing metadata. 26 bandwidth glossary, infrastructure bandwidth is the measure of how much information can pass through a data connection in a given amount of time. it is usually measured in multiples of bits-per-second (bps), f...
...And 15 more matches

Linear-gradient Generator - CSS: Cascading Style Sheets
lpha"] > input { float: right; } .ui-color-picker .input[data-topic="hexa"] { width: auto; float: right; margin: 6px 8px 0 0; } .ui-color-picker .input[data-topic="hexa"] > .name { display: none; } .ui-color-picker .input[data-topic="hexa"] > input { width: 90px; height: 24px; padding: 2px 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* preview color */ .ui-color-picker .preview { width: 95px; height: 53px; margin: 5px; margin-top: 10px; border: 1px solid #ddd; background-image: url("images/alpha.png"); float: left; position: relative; } .ui-color-picker .preview:before { height: 100%; width: 50%; left: 50%; top: 0; content: ""; background: #fff; position: absolute; z-index: 1; } .ui-color-picker .preview-color { w...
...component('v', 'value', this.inputchangevalue.bind(this)); this.newinputcomponent('l', 'lightness', this.inputchangelightness.bind(this)); this.createalphaarea(); this.newinputcomponent('r', 'red', this.inputchangered.bind(this)); this.newinputcomponent('g', 'green', this.inputchangegreen.bind(this)); this.newinputcomponent('b', 'blue', this.inputchangeblue.bind(this)); this.createpreviewbox(); this.createchangemodebutton(); this.newinputcomponent('alpha', 'alpha', this.inputchangealpha.bind(this)); this.newinputcomponent('hexa', 'hexa', this.inputchangehexa.bind(this)); this.setcolor(this.color); pickers[topic] = this; } /*************************************************************************/ // function for generating the color-picker /*****************...
... function createalphaarea() { var mask = document.createelement('div'); var picker = document.createelement('div'); mask.classname = 'alpha'; picker.classname = 'slider-picker'; this.alpha_mask = mask; this.alpha_picker = picker; setmousetracking(mask, this.updatealphaslider.bind(this)); mask.appendchild(picker); this.node.appendchild(mask); }; colorpicker.prototype.createpreviewbox = function createpreviewbox(e) { var preview_box = document.createelement('div'); var preview_color = document.createelement('div'); preview_box.classname = 'preview'; preview_color.classname = 'preview-color'; this.preview_color = preview_color; preview_box.appendchild(preview_color); this.node.appendchild(preview_box); }; colorpicker.prototype.newinputcomponent = funct...
...And 15 more matches

Secure Development Guidelines
the following content will likely see significant revision, though can be used as a reference for security best practices to follow when developing code for mozilla. introduction provide developers with information on specific security issues cover common coding mistakes and how they affect a product how to avoid making them how to mitigate them everything is oriented toward c/c++ introduction: gaining control specifics about the underlying architecture, using x86 as an example 6 basic registers (eax, ebx, ecx, edx, edi, esi) 2 stack-related registers (esp, ebp) mark top and bottom of current stack frame status register (eflags) contains various state information instruction pointer (eip) points to register being executed; can’t be modif...
...victim’s browser executes those html instructions could be used to steal user credentials think: webmail, online auction, cms, online banking... xss: example the following snippet of javascript: document.write("welcome to " + document.location); ... ...
... could itself become an sql instruction and be used to: query data from the database (passwords) insert value into the database (a user account) change application logic based on results returned by the database sql injection: example snprintf(str, sizeof(str), "select * from account where name ='%s'", name); sqlite3_exec(db, str, null, null, null); sql injection: prevention use parameterized queries insert a marker for every piece of dynamic content so data does not get mixed with sql instructions example: sqlite3_stmt *stmt; char *str = "select * from account where name='?'"; sqlite3_prepare_v2(db, str, strlen(str), &stmt, null); sqlite3_bind_text(stmt, 1, name, strlen(name), sqlite_transient); sqlite3_step(stmt); sqlite3_finalize(p_stmt); ...
...And 14 more matches

Using files from web applications - Web APIs
ragover, 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. ...
...g 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. ...
...dding 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 is the same whether the ...
...And 14 more matches

Accessibility in React - Learn web development
prerequisites: familiarity with the core html, css, and javascript languages, knowledge of the terminal/command line. objective: to learn about implementing keyboard accessibility in react. including keyboard users at this point, we've accomplished all of the features we set out to implement. a user can add a new task, check and uncheck tasks, delete tasks, or edit task names. and they can filter their task list by all, active, or completed tasks. ...
...ent renders. let's see this in action; put the following useeffect() call just above the return statement in the body of todo(), and pass into it a function that logs the words "side effect" to your console: useeffect(() => { console.log("side effect"); }); to illustrate the difference between the main render process and code run inside useeffect(), add another log – put this one below the previous addition: console.log("main render"); now, open the app in your browser. you should see both messages in your console, with each one repeating three times. note how "main render" logged first, and "side effect" logged second, even though the "side effect" log appears first in the code. main render (3) todo.js:100 side effect (3) ...
...there are three instances of <todo />, we see focus on the last "edit" button. we need to refactor our approach so that focus changes only when isediting changes from one value to another. more robust focus management in order to meet our refined criteria, we need to know not just the value of isediting, but also when that value has changed. in order to do that, we need to be able to read the previous value of the isediting constant. using pseudocode, our logic should be something like this: if (wasnoteditingbefore && iseditingnow) { focusoneditfield() } if (waseditingbefore && isnoteditingnow) { focusoneditbutton() } the react team had discussed ways to get a component’s previous state, and has provided an example custom hook we can use for the job. paste the following code near ...
...And 13 more matches

Key Values - Web APIs
qt::key_home (0x01000010) keycode_move_home (122) "pagedown" the page down (or pgdn) key. scrolls down or displays the next page of content. vk_next (0x22) kvk_pagedown (0x79) gdk_key_page_down (0xff56) gdk_key_kp_page_down (0xff9b) qt::key_pagedown (0x01000017) keycode_page_down (93) "pageup" the page up (or pgup) key. scrolls up or displays the previous page of content. vk_prior (0x21) kvk_pageup (0x74) gdk_key_page_up (0xff55) gdk_key_kp_page_up (0xff9a) qt::key_pageup (0x01000016) keycode_page_up (92) [1] internet explorer, edge (16 and earlier), and firefox (36 and earlier) use "left", "right", "up", and "down" instead of "arrowleft", "arrowright", "arrowup", and "arrowdown". editing keys keyboardeven...
...the exsel key is pressed. ui keys keyboardevent.key value description virtual keycode windows mac linux android "accept" the accept, commit, or ok key or button. accepts the currently selected option or input method sequence conversion. vk_accept (0x1e) keycode_dpad_center (23) "again" the again key. redoes or repeats a previous action. gdk_key_redo (0xff66) "attn" [4] the attn (attention) key. vk_oem_attn (0xf0) gdk_key_3270_attn (0xfd0e) "cancel" [1] the cancel key. gdk_key_cancel (0xff69) "contextmenu" [3] shows the context menu. typically found between the windows (or os) key and the control key on the right side of the keyboard. v...
...se key. pauses the current application or state, if applicable. note: this shouldn't be confused with the "mediapause" key value, which is used for media controllers, rather than to control applications and processes. vk_pause (0x13) gdk_key_pause (0xff13) gdk_key_break (0xff6b) qt::key_pause (0x01000008) keycode_break (121) "play" the play key. resumes a previously paused application, if applicable. note: this shouldn't be confused with the "mediaplay" key value, which is used for media controllers, rather than to control applications and processes. vk_play (0xfa) gdk_key_3270_play (0xfd16) qt::key_play (0x01020005) "props" the props (properties) key. "select" the select key. vk_sele...
...And 13 more matches

JXON - Archive of obsolete content
if you have already have a dom tree from using xmlhttprequest, skip to the next paragraph. note: if you are using an instance of xmlhttprequest in order to retrieve your xml file, please use the yourrequest.responsexml property to get a parsed xml document. don't use yourrequest.responsetext! the algorithms proposed here (see: #1...
... nattr++; } return null; }; jxontree.prototype.haschildren = function () { return this.keylength > 0; }; */ var myobject = new jxontree(doc); // we got our javascript object! try: alert(json.stringify(myobject)); note: if you want to freeze the whole object tree (because of the "static" nature of an xml document), uncomment the string: /* object.freeze(this); */. the object.freeze() method prevents new properties from being added to it, prevents existing properties from being removed and prevents existing properties, or their enumerability, configurability, or writability, from being changed. in essence the object tree is made effectively immutable. with this algorithm our example becomes: { "catalog": { "product": { "catalog_item": [{ "item_number": { "keyval...
...["@" + oattrib.name.tolowercase()] = parsetext(oattrib.value.trim()); } } /* object.freeze(this); */ } var myobject = new jxontree(doc); // we got our javascript object! try: alert(json.stringify(myobject)); note: if you want to freeze the whole object tree (because of the "static" nature of an xml document), uncomment the string: /* object.freeze(this); */. the object.freeze() method prevents new properties from being added to it, prevents existing properties from being removed and prevents existing properties, or their enumerability, configurability, or writability, from being changed. in essence the object tree is made effectively immutable. with this algorithm our example becomes: { "catalog": { "product": { "catalog_item": [{ "item_number": { "k...
...And 12 more matches

Third-party APIs - Learn web development
many large websites and services such as google maps, twitter, facebook, paypal, etc. provide apis allowing developers to make use of their data (e.g. displaying your twitter stream on your blog) or services (e.g. using facebook login to log in your users). this article looks at the difference between browser apis and 3rd party apis and shows some typical uses of the latter. prerequisites: javascript basics (see first steps, building blocks, javascript objects), the basics of client-side apis objective: to learn how third-party apis work, and how to use them to enhance your websites. ...
...y 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 have a copy of this file, which you can find in the javascript/apis...
...and display the search results. connect the api to your app first, you'll need to make a connection between the api and your app. in the case of this api, you need to include the api key as a get parameter every time you request data from the service at the correct url. find the following line: let key = ' ... ...
...And 12 more matches

Timing element visibility with the Intersection Observer API - Web APIs
d provide enough understanding of the api to quickly learn how to apply the intersection observer api to your own site. there's a good reason why the notion of tracking visibility of ads is being used in this example. it turns out that one of the most common uses of flash or other script in advertising on the web is to record how long each ad is visible, for the purpose of billing and payment of revenues. without the intersection observer api, this winds up being done using intervals and timeouts for each individual ad, or other techniques that tend to slow the page down. using this api lets everything get streamlined by the browser to reduce the impact on performance substantially. let's get started! site structure: the html the site's structure is not too complicated. we'll be using cs...
...x; width: 120px; font-size: 14px; bottom: 30px; border: 1px solid black; background-color: rgba(255, 255, 255, 0.5); } there's nothing magic in here. it's fairly basic css. tying it together with javascript that brings us to the javascript code which makes everything work. let's start with the global variables: let contentbox; let nextarticleid = 1; let visibleads = new set(); let previouslyvisibleads = null; let adobserver; let refreshintervalid = 0; these are used as follows: contentbox a reference to the <main> element's htmlelement object in the dom. this is where we'll insert the articles and ads. nextarticleid each article is given a unique id number; this variable tracks the next id to use, starting with 1. visibleads a set which we'll use to track the ads curr...
...dobserver; let refreshintervalid = 0; these are used as follows: contentbox a reference to the <main> element's htmlelement object in the dom. this is where we'll insert the articles and ads. nextarticleid each article is given a unique id number; this variable tracks the next id to use, starting with 1. visibleads a set which we'll use to track the ads currently visible on the screen. previouslyvisibleads used to temporarily store the list of visible ads while the document is not visible (for example, if the user has tabbed to another page). adobserver will hold our intersectionobserver used to track the intersection between the ads and the <main> element's bounds. refreshintervalid used to store the interval id returned by setinterval(). this interval will be used to trigger ...
...And 12 more matches

Touch events - Web APIs
ded", startup); this simply sets up all the event listeners for our <canvas> element so we can handle the touch events as they occur. tracking new touches we'll keep track of the touches in-progress. var ongoingtouches = []; when a touchstart event occurs, indicating that a new touch on the surface has occurred, the handlestart() function below is called. ...
...then we get the context and pull the list of changed touch points out of the event's touchevent.changedtouches property. after that, we iterate over all the touch objects in the list, pushing them onto an array of active touchpoints and drawing the start point ...
...hes.push(copytouch(touches[i])); var color = colorfortouch(touches[i]); ctx.beginpath(); ctx.arc(touches[i].pagex, touches[i].pagey, 4, 0, 2 * math.pi, false); // a circle at the start ctx.fillstyle = color; ctx.fill(); console.log("touchstart:" + i + "."); } } this calls event.preventdefault() to keep the browser from continuing to process the touch event (this also prevents a mouse event from also being delivered). then we get the context and pull the list of changed touch points out of the event's touchevent.changedtouches property. after that, we iterate over all the touch objects in the list, pushing them onto an array of active touchpoints and drawing the start point for the draw as a small circle; we're using a 4-pixel wide line, so a 4-pixel radius circle...
...And 12 more matches

HTTP Index - HTTP
s, such as those issued by the browser when resources are embedded using elements such as <script> and <img>. this serves as an additional layer of protection above and beyond the same-origin policy which can mitigate speculative side channel attacks as well as cross-site script inclusion attacks. cross-origin resource policy complements cross-origin read blocking (corb), which is a mechanism to prevent some cross-origin reads by default. 20 cross-origin resource sharing (cors) ajax, cors, cross-origin resource sharing, fetch, fetch api, http, http access controls, same-origin policy, security, xmlhttprequest, l10n:priority cross-origin resource sharing (cors) is a mechanism that uses additional http headers to tell browsers to give a web application running at one origin...
...ccess control and authentication. the most common http authentication is based on the "basic" schema. this page shows an introduction to the http framework for authentication and shows how to restrict access to your server using the http "basic" schema. 43 http caching caching, guide, http the performance of web sites and applications can be significantly improved by reusing previously fetched resources. web caches reduce latency and network traffic and thus lessen the time needed to display a representation of a resource. by making use of http caching, web sites become more responsive. 44 http conditional requests conditional requests, guide, http http has a concept of conditional requests, where the result, and even the success of a request, can be ...
...ts conditional requests, guide, http http has a concept of conditional requests, where the result, and even the success of a request, can be changed by comparing the affected resources with the value of a validator. such requests can be useful to validate the content of a cache, and sparing a useless control, to verify the integrity of a document, like when resuming a download, or when preventing to lose updates when uploading or modifying a document on the server. 45 http cookies advertising, browser, cookies, cookies article, guide, http, history, javascript, privacy, protocols, server, storage, web development, data, request, tracking an http cookie (web cookie, browser cookie) is a small piece of data that a server sends to the user's web browser. the browse...
...And 12 more matches

<input type="file"> - HTML: Hypertext Markup Language
he first file in the list of files they selected. the other files can be identified using the input's htmlinputelement.files property. note: if multiple files are selected, the string represents the first selected file. javascript can access the other files through the input's files property. if no file is yet selected, the string is "" (empty). the string is prefixed with c:\fakepath\, to prevent malicious software from guessing the user's file structure. additional attributes in addition to the common attributes shared by all <input> elements, inputs of type file also support the following attributes: attribute description accept one or more unique file type specifiers describing file types to allow capture what source to use for capturing ...
.... a value of user indicates that the user-facing camera and/or microphone should be used. a value of environment specifies that the outward-facing camera and/or microphone should be used. if this attribute is missing, the user agent is free to decide on its own what to do. if the requested facing mode isn't available, the user agent may fall back to its preferred default mode. note: capture was previously a boolean attribute which, if present, requested that the device's media capture device(s) such as camera or microphone be used instead of requesting a file input. files a filelist object that lists every selected file. this list has no more than one member unless the multiple attribute is specified. multiple when the multiple boolean attribute is specified, the file input allows the us...
... it may look similar, but if you try selecting a file with this input, you'll see that the file picker only lets you select the file types specified in the accept value (the exact nature differs across browsers and operating systems). the accept attribute doesn't validate the ...
...And 11 more matches

Client-side form validation - Learn web development
this is called client-side form validation, and helps ensure data submitted matches the requirements set forth in the various form controls. this article leads you through basic concepts and examples of client-side form validation. prerequisites: computer literacy, a reasonable understanding of html, css, and javascript. objective: to understand what client-side form validation is, why it's important, and how to apply various techniques to implement it. ...
...ant to protect our users' data. forcing our users to enter secure passwords makes it easier to protect their account information. we want to protect ourselves. there are many ways that malicious users can misuse unprotected forms to damage the application (see website security). warning: never trust data passed to your server from the client. even if your form is validating correctly and preventing malformed input on the client-side, a malicious user can still alter the network request. different types of client-side validation there are two different types of client-side validation that you'll encounter on the web: built-in form validation uses html5 form validation features, which we've discussed in many places throughout this module. this validation generally doesn't require...
...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. note: there are several errors that will prevent the form from being submitted, including a badinput, patternmismatch, rangeoverflow or rangeunderflow, stepmismatch, toolong or tooshort, typemismatch, valuemissing, or a customerror. built-in form validation examples in this section, we'll test out some of the attributes that we discussed above. simple start file let's start with a simple example: an input that allows you to choose wheth...
...And 10 more matches

nsIDOMEvent
dom/interfaces/events/nsidomevent.idlscriptable this interface is the primary data type for all events in the document object model. inherits from: nsisupports last changed in gecko 16.0 (firefox 16.0 / thunderbird 16.0 / seamonkey 2.13) note: as of gecko 16.0, the nsiprivatedomevent interface was merged into this interface. everything marked as gecko 16.0 was previously available in that interface. ...
...interface. everything marked as gecko 16.0 was previously available in that interface. see bug 761613. ...
... 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! void settrusted(in boolean atrusted); native code only! v...
...And 10 more matches

Using IndexedDB - Web APIs
ase is ver_err. it indicates that the version of the database stored on the disk is greater than the version that you are trying to open. this is an error case that must always be handled by the error handler. creating or updating the version of the database when you create a new database or increase the version number of an existing database (by specifying a higher version number than you did previously, when opening a database), the onupgradeneeded event will be triggered and an idbversionchangeevent object will be passed to any onversionchange event handler set up on request.result (i.e., db in the example). in the handler for the upgradeneeded event, you should create the object stores needed for this version of the database: // this event is only implemented in recent browsers request...
...if you need to change an existing object store (e.g., to change the keypath), then you must delete the old object store and create it again with the new options. (note that this will delete ...
...e var db = event.target.result; // create an objectstore for this database var objectstore = db.createobjectstore("name", { keypath: "mykey" }); }; in this case, the database will already have the object stores from the previous version of the database, so you do not have to create these object stores again. you only need to create any new object stores, or delete object stores from the previous version that are no longer needed. if you need to change an existing object store (e.g., to change the keypath), then you must delete the old object store and create it again with the new options. (note that this will delete the information in the object store! if you need to save that information, you should read it out and save it somewhere else before upgrading the database.) trying to cr...
...And 10 more matches

Color picker tool - CSS: Cascading Style Sheets
lpha"] > input { float: right; } .ui-color-picker .input[data-topic="hexa"] { width: auto; float: right; margin: 6px 8px 0 0; } .ui-color-picker .input[data-topic="hexa"] > .name { display: none; } .ui-color-picker .input[data-topic="hexa"] > input { width: 90px; height: 24px; padding: 2px 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* preview color */ .ui-color-picker .preview { width: 95px; height: 53px; margin: 5px; margin-top: 10px; border: 1px solid #ddd; background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png"); float: left; position: relative; } .ui-color-picker .preview:before { height: 100%; width: 50%; left: 50%; top: 0; content: ""; background: #fff; position: absolute; z-index: 1; } .ui...
...-color-picker .preview { width: 95px; height: 53px; margin: 5px; margin-top: 10px; border: 1px solid #ddd; background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png"); float: left; position: relative; } .ui-color-picker .preview:before { height: 100%; width: 50%; left: 50%; top: 0; content: ""; background: #fff; position: absolute; z-index: 1; } .ui-color-picker .preview-color { width: 100%; height: 100%; background-color: rgba(255, 0, 0, 0.5); position: absolute; z-index: 1; } .ui-color-picker .switch_mode { width: 10px; height: 20px; position: relative; border-radius: 5px 0 0 5px; border: 1px solid #ddd; background-color: #eee; left: -12px; top: -1px; z-index: 1; transition: all 0.5s; } .ui-color-picker .switch_mode:hover { background-color...
...ck { display: table; } /** * container */ #container { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; display: table; } /** * picker zone */ #picker { padding: 10px; width: 980px; } .ui-color-picker { padding: 3px 5px; float: left; border-color: #fff; } .ui-color-picker .switch_mode { display: none; } .ui-color-picker .preview-color:hover { cursor: move; } /** * picker container */ #picker-samples { width: 375px; height: 114px; max-height: 218px; margin: 0 10px 0 30px; overflow: hidden; position: relative; float: left; transition: all 0.2s; } #picker-samples .sample { width: 40px; height: 40px; margin: 5px; border: 1px solid #ddd; position: absolute; float: left; transition: all 0.2s; } #picke...
...And 10 more matches

A re-introduction to JavaScript (JS tutorial) - JavaScript
and... // bracket notation obj['name'] = 'simon'; var name = obj['name']; // can use a variable to define a key var user = prompt('what is your key?') obj[user] = prompt('what is its value?') these are also semantically equivalent. the second method has the advantage that the name of the property is provided as a string, which means it can be calculated at run-time. however, using this method prevents some javascript engine and minifier optimizations being applied. it can also be used to set and get properties with names that are reserved words: obj.for = 'simon'; // syntax error, because 'for' is a reserved word obj['for'] = 'simon'; // works fine starting in ecmascript 5, reserved words may be used as object property names "in the buff". this means that they don't need to be "clothed...
...nd returns the first item. a.unshift(item1[, item2[, ...[, itemn]]]) prepends items to the start of the array. a.slice(start[, end]) returns a sub-array. a.sort([cmpfn]) takes an optional comparison function. a.splice(start, delcount[, item1[, ...[, itemn]]]) lets you modify an array by deleting a section and replacing it with more items. a.reverse() reverses the array. functions along with objects, functions are the core component in understanding javascript. the most basic function couldn't be much simpler: function add(x, y) { var total = x + y; return total; } this demonstrates a basic function. a javascript function can take 0 or more named parameters. the function body can contain as many statements as you like a...
...he function was called with. we will also replace the for loop with a for...of loop to return the values within our variable. function avg(...args) { var sum = 0; for (let value of args) { sum += value; } return sum / args.length; } avg(2, 3, 4, 5); // 3.5 in the above code, the variable args holds all the values that were passed into the function. it is important to note that wherever the rest parameter operator is placed in a function declaration it will store all arguments after its declaration, but not before. i.e. function avg(firstvalue, ...args) will store the first value passed into the function in the firstvalue variable and the remaining arguments in args. that's another useful language feature but it does lead us to a new problem. the avg() function takes a comma-s...
...And 10 more matches

Index - Archive of obsolete content
individual element of a statusbar. this is a special type of button which is drawn differently. unlike normal buttons, a statusbarpanel can only have a label or an image but not both. this element is often used with a short label or icon to indicate status, for instance whether the user is online or whether there are new messages. 3 a xul bestiary add-ons, extensions, needstechnicalreview, xul this xulnote presents some of the key concepts and terms in the xul development environment. the purpose of this article is not to describe these items in any great detail but to define what they are in simple terms. i selected items for this group because they seemed to be either shrouded in mystery, misused as concepts or terms, or underestimated according to their role in xul and...
...ry! 116 eventnode xul attributes, xul reference no summary! 117 events xul attributes, xul reference no summary! 118 expr xul attributes, xul reference no summary! 119 fadein xul, xul attribute, xul reference no summary! 120 findnextaccesskey xul, xul attributes no summary! 121 findpreviousaccesskey no summary! 122 first-tab xul attributes, xul reference no summary! 123 firstdayofweek xul attributes, xul reference no summary! 124 firstpage xul attributes, xul reference no summary! 125 fixed xul attributes, xul reference no summary! 126 flags xul attributes, xul reference...
... 245 onsearchbegin xul, xul attributes, xul reference no summary! 246 onsearchcomplete xul attributes, xul reference no summary! 247 onselect no summary! 248 ontextcommand xul attributes, xul reference no summary! 249 ontextentered xul attributes, xul reference no summary! 250 ontextrevert xul attributes, xul reference no summary! 251 ontextreverted xul attributes, xul reference no summary! 252 onunload xul attributes, xul reference no summary! 253 onwizardback xul attributes, xul reference no summary! 254 onwizardcancel xul attributes, xul reference no summary! 255 onwizardf...
...And 9 more matches

NSS Tools crlutil
for information on security module database management, see using the security module database tool. ...
...for information on security module database management, see using the security module database tool. ...
...t can list, generate, modify, or delete crls within the nss security database file(s) and list, create, modify or delete certificates entries in a particular crl. ...
...And 9 more matches

Index
js::objectvalue jsapi reference, reference, référence(2), spidermonkey js::objectvalue converts a given jsobject to js::value. the conversion always succeeds. 59 js::ordinarytoprimitive jsapi reference, reference, référence(2), spidermonkey js::ordinarytoprimitive converts a javascript object to a specified type value, by the algorithm specified in es6 draft rev 28 (2014 oct 14) 7.1.1, second algorithm. 60 js::persistentrooted jsapi reference, reference, référence(2), spidermonkey here, ptr represents the private member of js::persistentrooted<t>, typed with t. 61 js::propertyspecnameequalsid jsapi reference, reference, référence(2), spidermonkey js::propertyspecnameequalsid determines if the given jsproperty...
... 242 js_destroyidarray jsapi reference, spidermonkey js_destroyidarray frees the id array pointed to by ida. 243 js_destroyruntime jsapi reference, spidermonkey js_destroyruntime frees the specified the javascript runtime environment, rt. call js_destroyruntime after completing all other js api calls. js_destroyruntime garbage collects and frees the memory previously allocated by js_newruntime. 244 js_destroyscript jsapi reference, obsolete, spidermonkey js_destroyscript destroys the given compiled script, freeing the memory allocated to it. the script must not be currently executing (in any context, at any level of the stack) and must not be used again afterwards. 245 js_doubleisint32 jsapi reference, spidermonkey ...
...uatescriptforprincipals jsapi reference, obsolete, spidermonkey no summary! 263 js_executeregexp jsapi reference, spidermonkey js_executeregexp and js_newregexpobjectnostatics execute the regexp object, reobj, to the specified input string, chars, from *indexp index. 264 js_executescript jsapi reference, spidermonkey js_executescript executes a previously-compiled script, script. 265 js_executescriptpart jsapi reference, obsolete, spidermonkey js_executescriptpart executes part of a previously compiled script, script. the part parameter must be either jsexec_prolog to execute the script prolog or jsexec_main to execute the main section of the script. 266 js_executescriptversion jsapi reference, obsolete, s...
...And 9 more matches

EventTarget.addEventListener() - Web APIs
of this type will be dispatched to the registered listener before being dispatched to any eventtarget beneath it in the dom tree. once a boolean indicating that the listener should be invoked at most once after being added. if true, the listener would be automatically removed when invoked. passive a boolean that, if true, indicates that the function specified by listener will never call preventdefault(). if a passive listener does call preventdefault(), the user agent will do nothing other than generate a console warning. see improving scrolling performance with passive listeners to learn more. mozsystemgroup a boolean indicating that the listener should be added to the system group. available only in code running in xbl or in the chrome of the firefox browser. usecapture ...
... that means that the variables and constants available to the containing function are also available to the event handler when using an arrow function. ...
... example of options usage html <div class="outer"> outer, once & none-once <div class="middle" target="_blank"> middle, capture & none-capture <a class="inner1" href="https://www.mozilla.org" target="_blank"> inner1, passive & preventdefault(which is not allowed) </a> <a class="inner2" href="https://developer.mozilla.org/" target="_blank"> inner2, none-passive & preventdefault(not open new page) </a> </div> </div> css .outer, .middle, .inner1, .inner2 { display: block; width: 520px; padding: 15px; margin: 15px; text-decoration: none; } .outer { border: 1px solid red; color: red; } .middle { border: 1px solid green; color: green; width: 460px; } .inner1, .inner2 { border: 1px solid purple; color: purple; width: 400px;...
...And 9 more matches

Drag Operations - Web APIs
none no operation is permitted copy copy only move move only link link only copymove copy or move only copylink copy or link only linkmove link or move only all copy, move, or link uninitialized the default value is all. note that these values must be used exactly as listed above. for example, setting the effectallowed property to copymove allows a copy or move operation but prevents the user from performing a link operation. if you don't change the effectallowed property, then any operation is allowed, just like with the 'all' value. so you don't need to adjust this property unless you want to exclude specific types. during a drag operation, a listener for the dragenter or dragover events can check the effectallowed property to see which operations are permitted. a rela...
... the source of the drag within the dragend event. specifying drop targets a listener for the dragenter and dragover events are used to indicate valid drop targets, that is, places where dragged items may be dropped. most areas of a web page or application are not valid places to drop data. thus, the default handling of these events is not to allow a drop. ...
...gged items may be dropped. most areas of a web page or application are not valid places to drop data. thus, the default handling of these events is not to allow a drop. if you want to allow a drop, you must prevent the default handling by cancelling both the dragenter and dragover events. you can do this either by returning false from attribute-defined event listeners, or by calling the event's preventdefault() method. the latter may be more feasible in a function defined in a separate script. ...
...And 9 more matches

HTTP caching - HTTP
web caches reduce latency and network traffic and thus lessen the time needed to display a representation of a resource. by making use of http caching, web sites become more responsive. different kinds of caches caching is a technique that stores a copy of a given resource and serves it back when requested. when a web cache has a requested resource in its store, it intercepts the request and returns its copy instead of re-downloading from the originating server. ...
...ating server. this achieves several goals: it eases the load of the server that doesn’t need to serve all clients itself, and it improves performance by being closer to the client, i.e., it takes less time to transmit the resource back. for a web site, it is a major component in achieving high performance. on the other side, it has to be configured properly as not all resources stay identical forever: it is important to cache a resource only until it changes, not longer. there are several kinds of caches: these can be grouped into two main categories: private or shared caches. a shared cache is a cache that stores responses for reuse by more than one user. a private cache is dedicated to a single user. this page will mostly talk about browser and proxy caches, but there are also gateway ca...
...mportant to cache a resource only until it changes, not longer. there are several kinds of caches: these can be grouped into two main categories: private or shared caches. a shared cache is a cache that stores responses for reuse by more than one user. a private cache is dedicated to a single user. this page will mostly talk about browser and proxy caches, but there are also gateway caches, cdn, reverse proxy caches and load balancers that are deployed on web servers for better reliability, performance and scaling of web sites and web applications. private browser caches a private cache is dedicated to a single user. you might have seen "caching" in your browser's settings already. a browser cache holds all documents downloaded via http by the user. this cache is used to make visited doc...
...And 9 more matches

How to Write and Land Nanojit Patches - Archive of obsolete content
case the patch won't apply cleanly. if the breakage is minor you'll be able to fix it by hand. if it's major you'll need to do a private update of that other repo in order to test. but don't push that update, as that should only be done by a member of that public repo.] once it passes testing, file the patch to bugzilla (file a bug under the "nanojit" component in the "core" product) and get a review. generally, patches by mozilla people should be reviewed by adobe people and vice versa. once it passes review, land it on nanojit-central, mark the bug's whiteboard as fixed-in-nanojit, and note the revision in a comment. (note that nanojit-central revision urls have the form http://hg.mozilla.org/projects/nanojit-central/<revid>, ie. there is a projects/ subdir in there. you might find it e...
...whoever does the next tm/tr update (scenario 3 below) will deal with the other patches. scenario 3: doing a periodic nj-to-tm/tr update this step is only done by certain people. ...
... find it easier to just cut-and-paste links from the commit log.) you're done, but watch the nanojit tinderbox for breakage. scenario 2: creating an external patch write and test the patch, as in scenario 1 above. split the patch into three parts: nanojit, tracemonkey, tamarin. file them all in a single bug. reviews should involve people from both mozilla and adobe. once all the patches pass review, land the nanojit patch on nanojit-central and mark the bug as fixed-in-nanojit. whoever does the next tm/tr update (scenario 3 below) will deal with the other patches. scenario 3: doing a periodic nj-to-tm/tr update this step is only done by certain people. nnethercote usually does it for mozilla, edwsmith and stejohns usually do it for adobe. note that you'd only do this for your company'...
...And 8 more matches

Introduction to Public-Key Cryptography - Archive of obsolete content
, the encrypted information is unintelligible to an intruder. tamper detection allows the recipient of information to verify that it has not been modified in transit. any attempt to modify data or substitute a false message for a legitimate one will be detected. authentication allows the recipient of information to determine its origin-that is, to confirm the sender's identity. nonrepudiation prevents the sender of information from claiming at a later date that the information was never sent. the sections that follow introduce the concepts of public-key cryptography that underlie these capabilities. certificates and authentication managing certificates certificates and authentication a certificate identifies someone or something authentication confirms an identity how certific...
... be used. in general, before issuing a certificate, the ca must use its published verification procedures for that type of certificate to ensure that an entity requesting a certificate is in fact who it claims to be. the certificate issued by the ca binds a particular public key to the name of the entity the certificate identifies (such as the name of an employee or a server). certificates help prevent the use of fake public keys for impersonation. only the public key certified by the certificate will work with the corresponding private key possessed by the entity identified by the certificate. in addition to a public key, a certificate always includes the name of the entity it identifies, an expiration date, the name of the ca that issued the certificate, a serial number, and other informa...
...y this line: -----end certificate----- distinguished names an x.509 v3 certificate binds a distinguished name (dn) to a public key. a dn is a series of name-value pairs, such as uid=doe, that uniquely identify an entity-that is, the certificate subject. for example, this might be a typical dn for an employee of example corp: uid=doe,e=doe@example.net,cn=john doe,o=example corp.,c=us the abbreviations before each equal sign in this example have these meanings: uid: user id e: email address cn: the user's common name o: organization c: country dns may include a variety of other name-value pairs. they are used to identify both certificate subjects and entries in directories that support the lightweight directory access protocol (ldap). the rules governing the construction of dns...
...And 8 more matches

Anatomy of a video game - Game development
cannot really get more smooth and responsive than that. but do not immediately assume animations require frame-by-frame control. simple animations 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 wit...
...shed. for the first issue, if you want the main loop to just run and you do not need easy (direct) access to it, you could create it as an immediately-invoked function expression (iife). /* * starting with the semicolon is in case whatever line of code above this example * relied on automatic semicolon insertion (asi). the browser could accidentally * think this whole example continues from the previous line. the leading semicolon * marks the beginning of our new line if the previous one was not empty or terminated. */ ;(function () { function main() { window.requestanimationframe( main ); // your main loop contents } main(); // start the cycle })(); when the browser comes across this iife, it will define your main loop and immediately queue it for the next frame. it will n...
... // your main loop contents } main(); // start the cycle })(); when the browser comes across this iife, it will define your 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...
...And 8 more matches

Graceful asynchronous programming with Promises - Learn web development
this is useful for setting up a sequence of async operations to work correctly. this article shows you how promises work, how you'll see them in use with web apis, and how to write your own. prerequisites: basic computer literacy, a reasonable understanding of javascript fundamentals. objective: to understand promises and how to use them. what are promises? we looked at promises briefly in the first article of the course, but here we'll look at them in a lot more depth. ...
...example. the trouble with callbacks to fully understand why promises are a good thing, it helps to think back to old-style callbacks and to appreciate why they are problematic. let's talk about ordering pizza as an analogy. there are certain steps that you have to take for your order to be successful, which doesn't really make sense to try to execute out of order, or in order but before each previous step has quite finished: you choose what toppings you want. this can take a while if you are indecisive, and may fail if you just can't make up your mind, or decide to get a curry instead. you then place your order. this can take a while to return a pizza and may fail if the restaurant does not have the required ingredients to cook it. you then collect your pizza and eat. this might fail...
...we're able to chain multiple asynchronous actions to occur one after another this way because each .then() block returns a new promise that resolves when the .then() block is done running. clever, right? using arrow functions, you can simplify the code even further: choosetoppings() .then(toppings => placeorder(toppings) ) .then(order => collectord...
...And 8 more matches

Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
a set number of times per second), discusses what they are useful for, and considers their inherent issues. prerequisites: basic computer literacy, a reasonable understanding of javascript fundamentals. objective: to understand asynchronous loops and intervals and what they are useful for. ...
...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 sayhi(who) { alert(`hello ${who}!`); } now, you can pass the name of the person into the settimeout() call as a third parameter: let mygreeting = settimeout(sayhi, 2000, 'mr. universe'); clearing timeouts finally, if a timeout has been created, you can cancel it before the specified time has elapsed by ...
...ee the source): function displaytime() { let date = new date(); 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. you'll probably want a way to stop such tasks, otherwise you may end up getting errors when the browser can't complete any further versions of the task, or if the animation being handled by the task has finished. you can do this the same way you stop timeouts — by passing the identifier returned by the setinterval() call to the clearinterval() function: con...
...And 8 more matches

Fetching data from the server - Learn web development
this seemingly small detail has had a huge impact on the performance and behavior of sites, so in this article, we'll explain the concept and look at technologies that make it possible, such as xmlhttprequest and the fetch api. prerequisites: javascript basics (see first steps, building blocks, javascript objects), the basics of client-side apis objective: to learn how to fetch data from the server and use it to update the contents of a web page. ...
...ew different text files and use them to populate a content area. this series of files will act as our fake database; in a real application, we'd be more likely to use a server-side language like php, python, or node to request our data from a database. here, however, we want to keep it simple and concentrate on the client-side part of this. xmlhttprequest xmlhttprequest (which is frequently abbreviated to xhr) is a fairly old technology now — it was invented by microsoft in the late '90s, and has been standardized across browsers for quite a long time. to begin this example, make a local copy of ajax-start.html and the four text files — verse1.txt, verse2.txt, verse3.txt, and verse4.txt — in a new directory on your computer. in this example, we will load a different verse of th...
...ct's value is changed, its value is passed to an invoked function updatedisplay() as a parameter. const versechoose = document.queryselector('select'); const poemdisplay = document.queryselector('pre'); versechoose.onchange = function() { const verse = versechoose.value; updatedisplay(verse); }; let's define our updatedisplay() function. first of all, put the following beneath your previous code block — this is the empty shell of the function. note: steps 4 - 9 will all be performed within this function. function updatedisplay(verse) { } we'll start our function by constructing a relative url pointing to the text file we want to load, as we'll need it later. the value of the <select> element at any time is the same as the text inside the selected <option> (unless you...
...And 8 more matches

A first splash into JavaScript - Learn web development
here you'll build up a simple "guess the number" game, step by step. prerequisites: basic computer literacy, a basic understanding of html and css, an understanding of what javascript is. objective: to have a first bit of experience at writing some javascript, and gain at least a basic understanding of what writing a javascript program involves. ...
...first bit of experience at writing some javascript, and gain at least a basic understanding of what writing a javascript program involves. you won't be expected to understand all of the code in detail immediately — we just want to introduce you to the high-level concepts for now, and give you an idea of how javascript (and other programming languages) work. in subsequent articles, you'll revisit all these features in a lot more detail! note: many of the code features you'll see in javascript are the same as in other programming languages — functions, loops, etc. the code syntax looks different, but the concepts are still largely the same. thinking like a programmer one of the hardest things to learn in programming is not the syntax you need to learn, but how to apply it to sol...
...k, experience with the programming syntax, and practice — plus a bit of creativity. the more you code, the better you'll get at it. we can't promise that you'll develop "programmer brain" in five minutes, but we will give you plenty of opportunity to practice thinking like a programmer throughout the course. with that in mind, let's look at the example we'll be building up in this article, and review the general process of dissecting it into tangible tasks. example — guess the number game in this article we'll show you how to build up the simple game you can see below: top hidden code <!doctype html> <html> <head> <meta charset="utf-8"> <title>number guessing game</title> <style> html { font-family: sans-serif; } body { w...
...And 8 more matches

Introducing a complete toolchain - Learn web development
we'll go all the way from setting up a sensible development environment and putting transformation tools in place to actually deploying your app on netlify. in this article we'll introduce the case study, set up our development environment, and set up our code transformation tools. prerequisites: familiarity with the core html, css, and javascript languages. objective: to solidify what we've learnt so far by working through a complete toolchain case study. ...
...efore adding them to the project. a couple of prerequisites besides the tools we're going to install that contribute to our toolchain, we mentioned two web services in the above list of tools. let's take this opportunity to make sure we are set up with them before we continue. you will need to create accounts with each of github and netlify if you wish to complete the tutorial. as mentioned previously, github is a source code repository service that adds community features such as issue tracking, following project releases and much more. in the next chapter we will push to a github code repository, which will cause a cascade effect that (should) deploy all the software to a home on the web. netlify is a hosting service for static websites (that is, websites that entirely consist of file...
... wifi, and usb ports! there might be important decorations or music that help with your mental state — these are all important to doing your best work possible, and they should also only need to be set up once, if done properly. in the same way, setting up your development environment, if done well, needs doing only once and should be reusable in many future projects. you will probably want to review this part of the toolchain semi-regularly and consider if there's any upgrades or changes you should introduce, but this shouldn't be required too often. your toolchain will depend on your own needs, but for this example of a (possible) complete toolchain, the tools that will be installed up front will be: library installation tools — for adding dependencies. code revision control. cod...
...And 8 more matches

Recording a media element - Web APIs
tton. 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="startbutton" class="button"> start </div> <h2>preview</h2> <video id="preview" width="160" height="120" autoplay muted></video> </div> we present our main interface in two columns. on the left is a start button and a <video> element 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, a...
...float: left; width: 160px; padding: 0px; } .right { margin-left: 10px; float: left; width: 160px; padding: 0px; } .bottom { clear: both; padding-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. ...
...ing: 0px; } .right { margin-left: 10px; float: left; width: 160px; padding: 0px; } .bottom { clear: both; padding-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, recordin...
...And 8 more matches

WebGL model view projection - Web APIs
depth : -1.5, // z color : [0.4, 0.4, 1, 1] // blue }); the results view on jsfiddle exercise a helpful exercise at this point is to move the boxes around the clip space by varying the code to get a feel for how points get clipped and moved around in clip space. try drawing a picture like a boxy smiley face with a background. homogeneous coordinates the main line of the previous clip space vertex shader contained this code: gl_position = vec4(position, 1.0); the position variable was defined in the draw() method and passed in as an attribute to the shader. this is a three dimensional point, but the gl_position variable that ends up getting passed down through the pipeline is actually 4 dimensional — instead of (x, y, z) it is (x, y, z, w). there is no letter aft...
...space and it can easily be demonstrated how to construct this type of coordinate through a pair of simple functions. function cartesiantohomogeneous(point) let x = point[0]; let y = point[1]; let z = point[2]; return [x, y, z, 1]; } function homogeneoustocartesian(point) { let x = point[0]; let y = point[1]; let z = point[2]; let w = point[3]; return [x/w, y/w, z/w]; } as previously mentioned and shown in the functions above, the w component divides the x, y, and z components. when the w component is a non-zero real number then homogeneous coordinate easily translates back into a normal point in cartesian space. now what happens if the w component is zero? in javascript the value returned would be as follows. homogeneoustocartesian([10, 4, 5, 0]); this evaluates to:...
... fact, the typical perspective projection matrix uses the division by the w component to achieve its transformation. the clipping of points and polygons from clip space actually happens after the homogeneous coordinates have been transformed back into cartesian coordinates (by dividing by w). this final space is known as normalized device coordinates or ndc. to start playing with this idea the previous example can be modified to allow for the use of the w component. //redefine the triangles to use the w component var data = new float32array([ //triangle 1 settings.left, settings.bottom, settings.depth, settings.w, settings.right, settings.bottom, settings.depth, settings.w, settings.left, settings.top, settings.depth, settings.w, //triangle 2 settings.left, settings.top,...
...And 8 more matches

Border-radius generator - CSS: Cascading Style Sheets
this tool can be used to generate css3 border-radius effects. ...
...order-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } #container { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /******************************************************************************/ /******************************************************************************/ /* * preview area */ #preview { height: 500px; border: 1px solid #ccc; border-radius: 3px; text-align: center; overflow: hidden; position: relative; } #preview .content { width: 100%; height: 100%; display: block; } #preview input { color: #333; border: 1px solid #ccc; border-radius: 3px; } #subject { width: 400px; height: 150px; margin: 0 auto; border: 3px solid #c60; background: #ff...
...{ top: 0; right: 0; } #top-right .radius { border-top-right-radius: 100%; top: 0; right: 0; } /* bottom right */ #bottom-right { bottom: 0; right: 0; } #bottom-right .radius { border-bottom-right-radius: 100%; bottom: 0; right: 0; } /* bottom left */ #bottom-left { bottom: 0; left: 0; } #bottom-left .radius { border-bottom-left-radius: 100%; bottom: 0; } /* input sliders */ #preview .ui-input-slider { margin: 10px; position: absolute; z-index: 10; } #radius-ui-sliders { width: 100%; height: 100%; min-height: 75px; min-width: 150px; padding: 20px 50px; top: -20px; left: -50px; position: relative; } #tlr { top: -30px; left: -50px; display: none; } #tlw { top: -30px; left: 30px; } #tlh { top: 20px; left: -50px; } #trr { top: -30px; right: -50px; dis...
...And 8 more matches

HTTP headers - HTTP
ate amount of ram client has. save-data a boolean that indicates the user agent's preference for reduced data usage. viewport-width a number that indicates the layout viewport width in css pixels. the provided pixel value is a number rounded to the smallest following integer (i.e. ceiling value). if viewport-width occurs in a message more than once, the last value overrides all previous occurrences. width the width request header field is a number that indicates the desired resource width in physical pixels (i.e. intrinsic size of an image). the provided pixel value is a number rounded to the smallest following integer (i.e. ceiling value). if the desired resource width is not known at the time of the request or the resource does not have a display width, t...
...e width in physical pixels (i.e. intrinsic size of an image). the provided pixel value is a number rounded to the smallest following integer (i.e. ceiling value). if the desired resource width is not known at the time of the request or the resource does not have a display width, the width header field can be omitted. if width occurs in a message more than once, the last value overrides all previous occurrences conditionals last-modified the last modification date of the resource, used to compare several versions of the same resource. it is less accurate than etag, but easier to calculate in some environments. conditional requests using if-modified-since and if-unmodified-since use this value to change the behavior of the request. etag a unique string identifying the version ...
...if-match and if-none-match use this value to change the behavior of the request. if-match makes the request conditional, and applies the method only if the stored resource matches one of the given etags. if-none-match makes the request conditional, and applies the method only if the stored resource doesn't match any of the given etags. this is used to update caches (for safe requests), or to prevent to upload a new resource when one already exists. if-modified-since makes the request conditional, and expects the entity to be transmitted only if it has been modified after the given date. this is used to transmit data only when the cache is out of date. if-unmodified-since makes the request conditional, and expects the entity to be transmitted only if it has not been modified after the ...
...And 8 more matches

XBL Example - Archive of obsolete content
a slideshow element let's construct a full example of an xbl element. this will be a widget that stores a deck of objects, each displayed one at a time. navigation buttons along the bottom will allow the user to cycle through the objects while a text widget between the buttons will display the current page. you could put anything within the pages, however, this widget might be useful for a set of images. we'll call this a slideshow element. content of the slideshow first, let's determine what elements need to go in the xbl content. because we want page flipping, a deck element would be the most suitable to hold the page content. ...
...nt. content of the slideshow first, let's determine what elements need to go in the xbl content. because we want page flipping, a deck element would be the most suitable to hold the page content. the content of the pages will be specified in the xul file, not in xbl, but we'll need to add it inside the deck. the children tag will need to be used. ...
...the flex attribute has been added to a number of elements so that it stretches in the right way. ...
...And 7 more matches

source-editor.jsm
sentially an implementation detail. its functionality is all exposed through source-editor.jsm. ...
...from your most recent save. in addition, when this value changes, the "dirtychanged" event is sent. editorelement element the element containing the editor. when using the default orion editor, this is a xul <xul:iframe> element. read only. lastfind object an object describing the result of the last find operation performed using the find(), findnext(), or findprevious() method. read only. this object has the following properties: property type description str string the last string that was searched for. index number an integer value indicating the result of the most recent find operation; this is the index into the text at which str was found...
...y type description str string the last string that was searched for. index number an integer value indicating the result of the most recent find operation; this is the index into the text at which str was found, or -1 if the string wasn't found. ...
...And 7 more matches

Mozilla Development Strategies
mozilla\config\fast-update.pl for a fast way to update your tree. you can update your main mozilla tree (minus nsprpub, etc) in 1-2 minutes. work on multiple bugs in parallel you should be working on the most important bugs first. but those might be difficult bugs (hard to reproduce crashers, big rewrites for performance, etc.) which can take several days or weeks to complete, plus the time for reviews. in your other trees, work on smaller, easier bugs. pick bugs that won't cause conflicts with the work you're doing in your primary tree. pick bugs that should only take you a few hours or a day to fix. in theory, fixes for these bugs will be quick to review. if you have problems finding smaller, easier bugs to work on, start by looking for crashers. maybe the problem can be turned into an a...
...g for crashers. maybe the problem can be turned into an assert, or fixed altogether. you can use talkback queries or bugzilla queries to find crashers. look for problems in existing code. find and fix string usage problems. find and fix bad xpcom macro usage. switch some code over to nscomptrs. look for xxx or todo in the code, verify the code still needs fixing, and fix it. smaller patches get reviewed faster if you find that you spend a lot of time waiting for reviews, keep in mind that patch size is not linear to time to review. a twenty line patch doesn't take twice as long to review as a ten line patch, it usually takes much more time. if you can divide and conquer what you are working on into smaller chunks, you will find you'll get faster reviews. of course, not everything can be di...
...oesn't take twice as long to review as a ten line patch, it usually takes much more time. if you can divide and conquer what you are working on into smaller chunks, you will find you'll get faster reviews. of course, not everything can be divided up. and, shorter fixes aren't necessarily better than longer ones. having parallel trees should allow you to work on other items while you are awaiting reviews. get advice before working on a patch or feature, instead of after if you are blocked, or stumped as to what to work on, talk to a lead sooner rather than later. most likely they will have a bug they can hand off to you, or they can help get you unblocked. since they are going to be reviewing your code later, run your plan of attack by them first. it's better to have an idea rejected, than ...
...And 7 more matches

Web Replay
build of firefox and a reasonably similar version of the operating system; otherwise the tab will probably crash. this feature has had little testing or polishing and there is not yet a good definition of 'reasonably similar'. time travel features this section describes extensions to the developer 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 forwar...
... 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 stepping, and so forth. timeline the timeline is shown above the developer tools and provides several features to help with navigating the recording: the timeline changes color depending on whether the tab is currently recording (red) or replaying (blue). the current position within the recording is shown on the timeline with a progress indicator. console error/messages are marked on t...
...tecture there are several main components to the project: the record/replay infrastructure records enough information during recording so that the replayed process can run and produce the same observable behaviors. ipc integration allows a replaying process to communicate with the chrome process using ipdl and shared memory. the rewind infrastructure allows a replaying process to restore a previous state, while still maintaining communication with the chrome process. debugger integration allows the js debugger to read the information it needs from a replaying process and control the process's execution (resume/rewind). the debugger is not allowed to change the replaying process's observable state. record/replay infrastructure broadly, reliable record/replay is achieved by controlli...
...And 7 more matches

nsIDOMWindowUtils
ko 9 void sendcompositionevent(in astring atype, in astring adata, in astring alocale); obsolete since gecko 38.0 void sendcontentcommandevent(in astring atype, [optional] in nsitransferable atransferable); void getclassname(in object aobj); boolean sendkeyevent(in astring atype, in long akeycode, in long acharcode, in long amodifiers, [optional] in boolean apreventdefault); obsolete since gecko 15.0 boolean sendkeyevent(in astring atype, in long akeycode, in long acharcode, in long amodifiers, [optional] in unsigned long aadditionalflags); deprecated since gecko 38.0 void sendmouseevent(in astring atype, in float ax, in float ay, in long abutton, in long aclickcount, in long amodifiers, [optional] in boolean aignorerootscrollframe); ...
...ong aoffset, in unsigned long alength, in long ax, in long ay); obsolete since gecko 31.0 nsiquerycontenteventresult sendquerycontentevent(in unsigned long atype, in unsigned long aoffset, in unsigned long alength, in long ax, in long ay, [optional] in unsigned long aadditionalflags); boolean sendselectionsetevent(in unsigned long aoffset, in unsigned long alength, in boolean areverse); obsolete since gecko 31.0 boolean sendselectionsetevent(in unsigned long aoffset, in unsigned long alength, [optional] in unsigned long aadditionalflags); void sendsimplegestureevent(in astring atype, in float ax, in float ay, in unsigned long adirection, in double adelta, in long amodifiers); void sendtextevent(in astring acompositionstring, in long afirstclau...
...unaccelerated; other types are accelerated. throws an error if there is no widget associated with this window. read only. outerwindowid unsigned long long the id of the window's outer window. read only. paintingsuppressed boolean true if painting is currently suppressed for this window; otherwise false. read only. this is used on mobile, for example, to prevent attempts to render content until enough of the page has been loaded to avoid content bouncing around excessively as more content is loaded. screenpixelspercsspixel float returns the number of screen pixels per css pixel. read only. audiomuted boolean with this it's possible to mute all the mediaelements in this window. we have audiomuted and audiovolume to pr...
...And 7 more matches

Window.open() - Web APIs
st create a new window. to open a new window on every call of window.open(), use the special value _blank for windowname. note on the use of window.open() to reopen an existing window with name windowname : this functionality is not valid for all browsers and more with variable conditions. firefox (50.0.1) functions as described: from the same domain+port reopen with same name will access the previously created window. google chrome (55.0.2883.87 m ) on the other hand will do it only from the same parent (as if the window was created dependent, which is the "opener"). this is a wide limitation and generates unbelievable complexity of development. firefox (51.) gets the handle but cannot run any element.focus() while chrome can run focus() from opener to child but not between siblings nor, ...
...iously created window. google chrome (55.0.2883.87 m ) on the other hand will do it only from the same parent (as if the window was created dependent, which is the "opener"). this is a wide limitation and generates unbelievable complexity of development. firefox (51.) gets the handle but cannot run any element.focus() while chrome can run focus() from opener to child but not between siblings nor, reverse, from child to opener. this function is the lonely key to get back the handle on a window if the developer has access only to its name (the name can be saved with cookies or local storage but not the window object handle). for now 10/01/2017 the differencies of behavior found recently have not still been tested for others browsers. window features windowfeatures is an optional string conta...
...ow is opened, javascript can't be used to change the features. if windowname does not specify an existing window and the windowfeatures parameter is not provided (or if the windowfeatures parameter is an empty string), then the new secondary window will render the default toolbars of the main window. tip: note that in some browsers, users can override the windowfeatures settings and enable (or prevent the disabling of) features position and size features windowfeatures parameter can specify the position and size of the new window. note on position and dimension error correction position if only one of them is specified, the behavior is implementation-dependent, and web author should not rely on it. left or screenx specifies the distance the new window is placed from the left sid...
...And 7 more matches

Box-shadow generator - CSS: Cascading Style Sheets
iner"> <div class="group section"> <div id="layer_manager"> <div class="group section"> <div class="button" data-type="add"> </div> <div class="button" data-type="move-up"> </div> <div class="button" data-type="move-down"> </div> </div> <div id="stack_container"></div> </div> <div id="preview_zone"> <div id="layer_menu" class="col span_12"> <div class="button" id="element" data-type="subject" data-title="element"> element </div> <div class="button" id="before" data-type="subject" data-title=":before"> :before <span class="delete" data-type="disable"></span> </div> <di...
...s="button" id="after" data-type="subject" data-title=":after"> :after <span class="delete" data-type="disable"></span> </div> <div class="ui-checkbox" data-topic='before' data-label=":before"></div> <div class="ui-checkbox" data-topic='after' data-label=":after"></div> </div> <div id="preview"> <div id="obj-element"> <div class="content"> </div> <div id="obj-before"> </div> <div id="obj-after"> </div> </div> </div> </div> </div> <div id="controls" class="group section"> <div class="wrap-left"> <div class="colorpicker category"> ...
...iv> <div class="info"> <div class="input" data-topic="r" data-title='r:' data-action="rgb"></div> <div class="input" data-topic="g" data-title='g:' data-action="rgb"></div> <div class="input" data-topic="b" data-title='b:' data-action="rgb"></div> </div> <div class="preview block"> <div id="output_color"> </div> </div> <div class="block info"> <div class="input" data-topic="a" data-title='alpha:' data-action="alpha"></div> <div class="input" data-topic="hexa" data-title='' data-action="hexa"></div> </div> </div> ...
...And 7 more matches

flex-direction - CSS: Cascading Style Sheets
the flex-direction css property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed). 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. note that the values row and row-reverse are affected by the directionality of the flex container. if its dir attribute is ltr, row represents the horizontal axis oriented from the left to the right, and row-reverse from the right to the left; if the dir attribute is rtl, row represents the axis oriented from the right to the left, and row-reverse from the left to the right. syntax /* the direction text is laid out in a ...
... of the flex container. if its dir attribute is ltr, row represents the horizontal axis oriented from the left to the right, and row-reverse from the right to the left; if the dir attribute is rtl, row represents the axis oriented from the right to the left, and row-reverse from the left to the right. ...
...ir attribute is ltr, row represents the horizontal axis oriented from the left to the right, and row-reverse from the right to the left; if the dir attribute is rtl, row represents the axis oriented from the right to the left, and row-reverse from the left to the right. syntax /* the direction text is laid out in a line */ flex-direction: row; /* like <row>, but reversed */ flex-direction: row-reverse; /* the direction in which lines of text are stacked */ flex-direction: column; /* like <column>, but reversed */ flex-direction: column-reverse; /* global values */ flex-direction: inherit; flex-direction: initial; flex-direction: unset; values the following values are accepted: row the flex container's main-axis is defined to be the same as the text direction. the main-start and m...
...And 7 more matches

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
for the image, displaying the value of the attribute if the image src is missing or otherwise fails to load. see the image input type. autocomplete (not a boolean attribute!) the autocomplete attribute takes as its value a space-separated string that describes what, if any, type of autocomplete functionality the input should provide. a typical implementation of autocomplete simply recalls previous values entered in the same input field, but more complex forms of autocomplete can exist. for instance, a browser could integrate with a device's contacts list to autocomplete email addresses in an email input field. see values in the html autocomplete attribute for permitted values. the autocomplete attribute is valid on hidden, text, search, url, tel, email, date, month, week, time, datet...
...enter into the field. this must be an integer value 0 or higher. if no maxlength is specified, or an invalid value is specified, the field has no maximum length. this value must also be greater than or equal to the value of minlength. the input will fail constraint validation if the length of the text entered into the field is greater than maxlength utf-16 code units long. by default, browsers prevent users from entering more characters than allowed by the maxlength attribute. see client-side validation for more information. min valid for date, month, week, time, datetime-local, number, and range, it defines the most negative value in the range of permitted values. if the value entered into the element is less than this this, the element fails constraint validation. if the value of th...
...dation. if the value of the min attribute isn't a number, then the element has no minimum value. this value must be less than or equal to the value of the max attribute. if the min attribute is present but is not specified or is invalid, no min value is applied. if the min attribute is valid and a non-empty value is less than the minimum allowed by the min attribute, constraint validation will prevent form submission. see client-side validation for more information. there is a special case: if the data type is periodic (such as for dates or times), the value of max may be lower than the value of min, which indicates that the range may wrap around; for example, this allows you to specify a time range from 10 pm to 4 am. minlength valid for text, search, url, tel, email, and password,...
...And 7 more matches

Cache-Control - HTTP
that can be used by the client in an http request. cache-control: max-age=<seconds> cache-control: max-stale[=<seconds>] cache-control: min-fresh=<seconds> cache-control: no-cache cache-control: no-store cache-control: no-transform cache-control: only-if-cached cache response directives standard cache-control directives that can be used by the server in an http response. cache-control: must-revalidate cache-control: no-cache cache-control: no-store cache-control: no-transform cache-control: public cache-control: private cache-control: proxy-revalidate cache-control: max-age=<seconds> cache-control: s-maxage=<seconds> extension cache-control directives extension cache-control directives are not part of the core http caching standards document. check the compatibility table for their s...
...: private cache-control: proxy-revalidate cache-control: max-age=<seconds> cache-control: s-maxage=<seconds> extension cache-control directives extension cache-control directives are not part of the core http caching standards document. check the compatibility table for their support; user-agents that don't recognize them should ignore them. ...
... has public, max-age or s-maxage in cache-control or has expires set public the response may be stored by any cache, even if the response is normally non-cacheable. private the response may be stored only by a browser's cache, even if the response is normally non-cacheable. if you mean to not store the response in any cache, use no-store instead. this directive is not effective in preventing caches from storing your response. no-cache the response may be stored by any cache, even if the response is normally non-cacheable. however, the stored response must always go through validation with the origin server first before using it, therefore, you cannot use no-cache in-conjunction with immutable. if you mean to not store the response in any cache, use no-store instead. this dire...
...And 7 more matches

Meta programming - JavaScript
property lookup, assignment, enumeration, function invocation, etc). with the help of these two objects you are able to program at the meta level of javascript. proxies introduced in ecmascript 6, proxy objects allow you to intercept certain operations and to implement custom behaviors. ...
... handler.setprototypeof() object.setprototypeof() reflect.setprototypeof() if target is not extensible, the prototype parameter must be the same value as object.getprototypeof(target). handler.isextensible() object.isextensible() reflect.isextensible() object.isextensible(proxy) must return the same value as object.isextensible(target). handler.preventextensions() object.preventextensions() reflect.preventextensions() object.preventextensions(proxy) only returns true if object.isextensible(proxy) is false. handler.getownpropertydescriptor() object.getownpropertydescriptor() reflect.getownpropertydescriptor() getownpropertydescriptor must return an object or undefined. a property cannot be reported...
... the result list must contain all the keys of the own properties of target and no other values. handler.apply() proxy(..args) function.prototype.apply() and function.prototype.call() reflect.apply() there are no invariants for the handler.apply method. handler.construct() new proxy(...args) reflect.construct() the result must be an object. ...
...And 7 more matches

Appendix: What you should know about open-source software licenses - Archive of obsolete content
requires no permission from the author. in some situations, such as education or citation, use in the strong, authorial sense is permitted to readers. any discussion of copyright eventually turns to the fact that some uses are prohibited, so it’s useful to understand what uses are unrestricted. range of uses restricted to author unrestricted book print, publish, revise read music record, perform, revise listen movie distribute, screen, revise watch software copy, distribute, modify execute licenses are a use permit in order to use (in the authorial sense) a copyrighted work, the user must either receive a use permit from the copyright holder, or must be assigned partial rights by the author. this use p...
...ying the software a typical software license will grant these permissions in return for a fee, and will still restrict some normally unrestricted uses. the software that microsoft sells, such as windows, comes with a license that permits only limited duplication in exchange for a fee, so, although customers can install it on their computers, they cannot modify it. and essential freedoms, such as reverse-engineering, are also restricted. this use permit is displayed when you install the software. when the user clicks “i agree,” the installation process finishes. software range of uses restricted to author unrestricted software license >> usable within permitted scope restricted use within permitted scope ...
...r; no additional licensing can be required when redistributing; license must not be specific to a product; license must not interfere with other software. the “no discrimination may be made against individuals or organizations” rule means that you cannot prohibit it from any particular country. the “no discrimination may be made based on field of endeavor” rule means that you cannot prevent it from being used in warfare. the “no additional licensing can be required when redistributing” rule means that you cannot prohibit the software’s use from anyone who does not buy a separate license. because the oss license is intended to foster source-code reuse and mutual development, it avoids restrictions on source-code duplication, distribution, and modification to the greatest ex...
...And 6 more matches

XUL Events - Archive of obsolete content
ence home the following tables and sections describe the event handler that are valid for most xul elements. the events listeners can be attached using addeventlistener and removed using removeeventlistener. some of the events can be attached using attributes as well. when attaching event listeners using attributes, be aware that only one listener can be attached at a time. any previously attached listeners are disconnected. the attribute name is the event name with an 'on' prefix. xul event reference subpages broadcastthe broadcast event is executed when the attributes of the element (such as a broadcaster) being listened to are changed. the event handler should be placed on an observer.checkboxstatechangethe checkboxstatechange event is executed when the st...
...o longer hovered or highlighted.popuphiddenthe popuphidden event is executed when a <menupopup>, <panel> or <tooltip> has become hidden.popuphidingthe popuphiding event is executed when a <menupopup>, <panel> or <tooltip> is about to be hidden.popupshowingthe popupshowing event is executed when a <menupopup>, <panel> or <tooltip> is about to become visible. the default action of the event can be prevented to prevent the popup to appear.popupshownthe popupshown event is executed when a <menupopup>, <panel> or <tooltip> has become visible.radiostatechangethe radiostatechange event is executed when the state of a <radio> element has changed.valuechangethe valuechange event is executed when the value of an element, <progress> for example, has changed. inherited dom events ...
... focus the focus event is sent to an element when it receives the focus. once an element has the focus, keyboard events are sent to it. the focus can be changed by clicking on another element, by pressing tab to switch to the next element in the tab order sequence, or by pressing 'back tab' to switch focus to the previous element in the tab order. attribute: onfocus keydown the keydown event is sent to an element that has the focus while a key is pressed but not released. attribute: onkeydown keypress the keypress eve...
...And 6 more matches

Special Condition Tests - Archive of obsolete content
parent tag tests sometimes you want to simply generate one block of content at the top level and different content at the recurisive level. for example, the bookmarks toolbar in a web browser might display buttons at the first level, but menus and submenus for content below that. templates have a means of allowing a rule to match only if the generated content would be inserted inside an element with a particular tag name. for instance, if the container was a <vbox>, a rule could be created that would only match a <vbox> element. this is useful for recursive templates, since the inner iterations may use different content. ...
...nd inner levels during template generation. for the bookmarks toolbar, the outer content is inserted into an <hbox>, but at lower levels, the content will be inserted into a <menu> in case you aren't clear, the tag that must match for the outer iteration is the root element, the one with the datasources attribute on it. ...
...e generation. for the bookmarks toolbar, the outer content is inserted into an <hbox>, but at lower levels, the content will be inserted into a <menu> in case you aren't clear, the tag that must match for the outer iteration is the root element, the one with the datasources attribute on it. for inner iterations, it will be the element with the uri attribute from the previous iteration. ...
...And 6 more matches

More Event Handlers - Archive of obsolete content
the event object every event handler is passed an event object. in the attribute form of the event handler, the event object is an implied argument to the script code which can be referred to using the name 'event'. in the addeventlistener form, the first argument passed to the listener function will be the event object. other arguments can be passed to a listener function, if required. the event object has a number of properties which can be examined during an event. for a full list, see the reference. we already saw the event's target property in the last section. it holds a reference to the element where the event occurred. ...
...t.getelementbyid("outerbox"); outerbox.addeventlistener('command',boxpressed,true); </script> here, an event listener has been added to the button and another event listener has been added to the box. the stoppropagation method has been called in the box's listener, so the button's listener never gets called. if this call was removed, both listeners would be called and both alerts would appear. prevent default action if no event handlers have been registered for an event, then after completing the capturing and bubbling phases, the element will handle the event in a default way. what will happen depends on the event and the type of element. for example, the 'popupshowing' event is sent to a popup just before it is displayed. the default action is to display the popup. if the default action i...
... default action if no event handlers have been registered for an event, then after completing the capturing and bubbling phases, the element will handle the event in a default way. what will happen depends on the event and the type of element. for example, the 'popupshowing' event is sent to a popup just before it is displayed. the default action is to display the popup. ...
...And 6 more matches

CSS and JavaScript accessibility best practices - Learn web development
or they can significantly harm accessibility if misused. this article outlines some css and javascript best practices that should be considered to ensure even complex content is as accessible as possible. prerequisites: basic computer literacy, a basic understanding of html, css, and javascript, and understanding of what accessibility is. objective: to gain familiarity with using css and javascript appropriately in your web documents to maximise accessibility and not detract from it. ...
...is called <strong>condensation</strong>.</p> you might want to add some simple coloring to your emphasised text: strong, em { color: #a60000; } you will however rarely need to style emphasis elements in any significant way. the standard conventions of bold and italic text are very recognisable, and changing the style can cause confusion. for more on emphasis, see emphasis and importance. ...
.../p> you might want to add some simple coloring to your emphasised text: strong, em { color: #a60000; } you will however rarely need to style emphasis elements in any significant way. the standard conventions of bold and italic text are very recognisable, and changing the style can cause confusion. for more on emphasis, see emphasis and importance. ...
...And 6 more matches

HTML: A good basis for accessibility - Learn web development
this article looks in detail at how html can be used to ensure maximum accessibility. prerequisites: basic computer literacy, a basic understanding of html (see introduction to html), and an understanding of what accessibility is. objective: to gain familiarity with the features of html that have accessibility benefits and how to use them appropriately in your web documents. html and accessibility as you learn more about html — read more resources, look at more examples, etc. ...
...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 like the following: <font size="7">my heading</font> <br><br> this is the first section of my document. <br...
...benefits people with cognitive or other disabilities; it benefits readers for whom the text is not written in their first language, younger people ... everyone, in fact! apart from this, you should try to avoid using language and characters that don't get read out clearly by the screen reader. for example: don't use dashes if you can avoid it. instead of writing 5–7, write 5 to 7. expand abbreviations — instead of writing jan, write january. expand acronyms, at least once or twice. instead of writing html in the first instance, write hypertext markup language. page layouts in the bad old days, people used to create page layouts using html tables — using different table cells to contain the header, footer, sidebar, main content column, etc. this is not a good idea because a scree...
...And 6 more matches

HTML: A good basis for accessibility - Learn web development
this article looks in detail at how html can be used to ensure maximum accessibility. prerequisites: basic computer literacy, a basic understanding of html (see introduction to html), and an understanding of what accessibility is. objective: to gain familiarity with the features of html that have accessibility benefits and how to use them appropriately in your web documents. html and accessibility as you learn more about html — read more resources, look at more examples, etc. ...
...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 like the following: <font size="7">my heading</font> <br><br> this is the first section of my document. <br...
...benefits people with cognitive or other disabilities; it benefits readers for whom the text is not written in their first language, younger people ... everyone, in fact! apart from this, you should try to avoid using language and characters that don't get read out clearly by the screen reader. for example: don't use dashes if you can avoid it. instead of writing 5–7, write 5 to 7. expand abbreviations — instead of writing jan, write january. expand acronyms, at least once or twice. instead of writing html in the first instance, write hypertext markup language. page layouts in the bad old days, people used to create page layouts using html tables — using different table cells to contain the header, footer, sidebar, main content column, etc. this is not a good idea because a scree...
...And 6 more matches

How to build custom form controls - Learn web development
its active state. the value does not change when: the user hits the up arrow key when the 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 i...
... to user input and make it possible to send the value along with form data. the easiest way to do this is to use a native control under the hood. such a control will keep track of the value with all the built-in controls provided by the browser, and the value will be sent as usual when a form is submitted. there's no point in reinventing the wheel when we can have all this done for us. as seen previously, we already use a native select control as a fallback for accessibility reasons; we can simply synchronize its value with that of our custom control: // this function updates the displayed value and synchronizes it with the native control. // it takes two parameters: // select : the dom node with the class `select` containing the value to update // index : the index of the value to be sel...
...es it with the native control. ...
...And 6 more matches

HTML text fundamentals - Learn web development
this article explains the way html can be used to structure a page of text by adding headings and paragraphs, emphasizing words, creating lists, and more. prerequisites: basic html familiarity, as covered in getting started with html. objective: learn how to mark up a basic page of text to give it structure and meaning—including paragraphs, headings, lists, emphasis, and quotations. the basics: headings and paragraphs most structured text consists of headings and paragraphs, whether you are reading a story, a newspaper, a college textbook, a magazine, etc. ...
...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).substring(0, caretpos); var back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caret...
...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 ...
...And 6 more matches

From object to iframe — other embedding technologies - Learn web development
previous overview: multimedia and embedding next by now you should really be getting the hang of embedding things into your web pages, including images, video and audio. at this point we'd like to take somewhat of a sideways step, looking at some elements that allow you to embed a wide variety of content types into your webpages: the <iframe>, <embed> and <object> elements. <iframe>s are for embedding other web pages, and the other two allow you to embed pdfs, svg, and even flash — a technology that is on the way out, but which you'll still see semi-regularly. ...
...ts. <iframe>s are for embedding other web pages, and the other two allow you to embed pdfs, svg, and even flash — a technology that is on the way out, but which you'll still see semi-regularly. prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, familiarity with html fundamentals (as covered in getting started with html) and the previous articles in this module. objective: to learn how to embed items into web pages using <object>, <embed>, and <iframe>, like flash movies and other webpages. a short history of embedding a long time ago on the web, it was popular to use frames to create websites — small parts of a website stored in individual html pages. these were embedded in a master document called a fr...
...k!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.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back;...
...And 6 more matches

Video and Audio APIs - Learn web development
this article shows you how to do common tasks such as creating custom playback controls. prerequisites: javascript basics (see first steps, building blocks, javascript objects), the basics of client-side apis objective: to learn how to use browser apis to control video and audio playback. html5 video and audio the <video> and <audio> elements allow us to embed video and audio into web pages. ...
... pages. as we showed in video and audio content, a typical implementation looks like this: <video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>your browser doesn't support html5 video. here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> </video> this creates a video player inside the browser like so: you can review what all the html features do in the article linked above; for our purposes here, the most interesting attribute is controls, which enables the default set of playback controls. if you don't specify this, you get no playback controls: this is not as immediately useful for video playback, but it does have advantages. one big issue with the native browser controls is that they are different i...
...", which is a "paused" icon, and invoke the htmlmediaelement.play() method to play the media. on the second click, the button will be toggled back again — the "play" icon will be shown again, and the video will be paused with htmlmediaelement.pause(). stopping the video next, let's add functionality to handle stopping the video. add the following addeventlistener() lines below the previous one you added: stop.addeventlistener('click', stopmedia); media.addeventlistener('ended', stopmedia); the click event is obvious — we want to stop the video by running our stopmedia() function when the stop button is clicked. we do however also want to stop the video when it finishes playing — this is marked by the ended event firing, so we also set up a listener to run the functio...
...And 6 more matches

Adding a new todo form: Vue events, methods, and models - Learn web development
what we really need next is the ability to allow our users to enter their own todo items into the app, and for that we'll need a text <input>, an event to fire when the data is submitted, a method to fire upon submission to add the data and rerender the list, and a model to control the data. this is what we'll cover in this article. prerequisites: familiarity with the core html, css, and javascript languages, knowledge of the terminal/command line. ...
... autocomplete="off" /> <button type="submit"> add </button> </form> </template> so we now have a form component into which we can enter the title of a new todo item (which will become a label for the corresponding todoitem when it is eventually rendered). let's load this component into our app. ...
...yntax: @event="method". we'll use the shorthand syntax 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: .
...And 6 more matches

Overview of Mozilla embedding APIs
microsoft com iunknown interface. interface status... none interface definition: nsisupportsutils.h nsiinterfacerequestor this interface provides an interface discovery mechanism which does not imply aggregation. interface status... none interface definition: nsiinterfacerequestor.idl nsiweakreference this interface is used to retern a proxy reference to a component. interface status... being reviewed interface definition: nsiweakreference.idl nsisimpleemunerator this interface provides a simple enumeration abstraction. interface status... being reviewed interface definition: nsisimpleenumerator.idl nsiservicemanager this interface allows access to global services within mozilla. interface status... none interface definition: nsiservicemanager.h nsishutdownlistener this interface is us...
...componentmanager.idl nsifactory this interface is used by the component manager to create new instances of a particular xpcom component. each component must provide a factory implementation for creating new instances. interface status... none interface definition: nsifactory.idl nsimemory this interface provides access to the global memory management functionality. interface status... ...
...e a factory implementation for creating new instances. interface status... none interface definition: nsifactory.idl nsimemory this interface provides access to the global memory management functionality. interface status... being reviewed interface definition: nsimemory.idl nsidomwindow this interface is used to represent the window containing a specific document. interface status... being reviewed interface definition: nsidomwindow.idl nsibasewindow this interface provides access to various window operations. interface status... ...
...And 6 more matches

Release phase
losed. if you don't see this message, try running the same command in a more verbose mode (with the debugging information): $ ssh -vvv hg.mozilla.org this should tell you why your connection is not succeeding. if you can't figure it out on your own, copy the output of the above command, paste it on http://pastebin.mozilla.org and ask in #l10n on the irc.mozilla.org server. ...
... and ask in #l10n on the irc.mozilla.org server. technical and sign-off reviews you've done some localization work and your ready for it to be released. the merge date for migrating from one product release channel to the next is rapidly approaching. you need to make sure that your work can effectively be compiled into a build for the next release channel. do you know whether to ask for technical review of your work or a sign-off review? do you know what what exactly is reviewed in each process? ...
...ready for it to be released. the merge date for migrating from one product release channel to the next is rapidly approaching. you need to make sure that your work can effectively be compiled into a build for the next release channel. do you know whether to ask for technical review of your work or a sign-off review? do you know what what exactly is reviewed in each process? technical and sign-off reviews apply to different localizations in different ways. here's the basic difference between the two. technical review sign-off review performed as a qa measure on a revision pushed to a new locale's l10n aurora repo in mercurial. very comprehensive. covers the entire product. focus is on technical accuracy and comp...
...And 6 more matches

NSS tools : crlutil
name crlutil — list, generate, modify, or delete crls within the nss security database file(s) and list, create, modify or delete certificates entries in a particular crl. synopsis crlutil [options] [[arguments]] status this documentation is still work in progress. please contribute to the initial review in mozilla nss bug 836477[1] description the certificate revocation list (crl) management tool, crlutil, is a command-line utility that can list, generate, modify, or delete crls within the nss security database file(s) and list, create, modify or delete certificates entries in a particular crl. the key and certificate management process generally begins with creating keys in the key database, then generating and managing certificates in the certificate database(see c...
...n list, generate, modify, or delete crls within the nss security database file(s) and list, create, modify or delete certificates entries in a particular crl. ...
...the nss security database file(s) and list, create, modify or delete certificates entries in a particular crl. the key and certificate management process generally begins with creating keys in the key database, then generating and managing certificates in the certificate database(see certutil tool) and continues with certificates expiration or revocation. this document discusses certificate revocation list management. ...
...And 6 more matches

Finishing the Component
the component will be recognized by xpcom and registered with the category manager so that it starts up when xpcom initializes. when the component starts up, it populates a list of urls read in from a file stored next to the gecko binary on the local system. using frozen interfaces the core functionality of blocking sites is still missing, however. the interfaces needed to block certain urls from loading are not frozen, and there is still some debate about how exactly this functionality should be exposed to embedders and component developers, so the apis are not ready to be published. ...
...ace has changed, the method testa does not exist in the nsifoo interface; the first entry in the v-table is in fact isprime(). when this method call is made, the code execution treats the isprime method as testa. needless to say, this is a bad thing. furthermore, there is no way easy way to realize this error at runtime. gecko developers could change the interface's iid, and some do. this can prevent many errors like this. but unfrozen interfaces are not supported in any formal way, and relying upon a different iid for any change in the interface is not a good idea either. when using frozen interfaces, you are guaranteed compatibility with future versions of gecko. the only trouble occurs when the compiler itself changes its v-table layout, which can happen when the compiler changes its a...
...ble for the code you're trying to use (i.e., module owners) and ask them how best to do what you are trying to do. be as precise you possibly can. they may be able to suggest a supported alternative, or they may be able to notify you about pending changes. the interface that we need for this project is something called nsicontentpolicy. at the time this book was written, this interface was under review. an interface reaches this state when a group of module owners and peers are actively engaged in discussion about how best to expose it. usually there are only minor changes to interfaces marked with such a tag. even with interfaces marked "under review," however, it's still a good idea to contact the module owners responsible for the interfaces you are interested in using. copying interfaces...
...And 6 more matches

Starting WebLock
we have already created a module that implements most of the generic component functionality (e.g. registration). this chapter will focus on the functionality that actually handles the web locking. getting called at startup no person is an island to himself, and neither are components. the sample component you've built up so far doesn't do anything. after having its registration procedure called, the component does nothing. in order to be started up or notified when some event happens, the sample component has to hook into mozilla, which it can do either by overriding an existing component or by registering for some event that will cause it to start up. ...
...ger interface also implements nsiservicemanager, all you have to do is queryinterface the nsicomponentmanager to nsiservicemanager to get the service manager. you can then use the service manager to add the component to the category: nsresult rv; nscomptr<nsiservicemanager> servman = do_queryinterface((nsisupports*)acompmgr, &rv); if (ns_failed(rv)) return rv; do_queryinterface the previous code uses the special nscomptr function do_queryinterface that lets you queryinterface without having to worry about reference counting, error handling, and other overhead. the do_queryinterface knows what interface to qi to based on the nscomptr that is being assigned into. we could have just as easily have used the raw queryinterface() method, but using nscomptr is much more economical (see...
... only services but component instances as well. for the app-startup notification, you must explicitly pass the string "service," prior to the component's contract id. if you do not, the component will be created and then released after the notification, which may cause the component to be deleted. ...
...And 6 more matches

SubtleCrypto.verify() - Web APIs
messagebox = document.queryselector(".rsassa-pkcs1 #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } /* fetch the encoded message-to-sign and verify it against the stored signature. * if it checks out, set the "valid" class on the signature. * otherwise set the "invalid" class. ...
... = messagebox.value; let enc = new textencoder(); return enc.encode(message); } /* fetch the encoded message-to-sign and verify it against the stored signature. * if it checks out, set the "valid" class on the signature. * otherwise set the "invalid" class. */ async function verifymessage(publickey) { const signaturevalue = document.queryselector(".rsassa-pkcs1 .signature-value"); signaturevalue.classlist.remove("valid", "invalid"); let encoded = getmessageencoding(); let result = await window.crypto.subtle.verify( "rsassa-pkcs1-v1_5", publickey, signature, encoded ); signaturevalue.classlist.add(result ? "valid" : "invalid"); } rsa-pss this code uses a public key to verify a signature. see the complete code on github. /* fetch the contents of the "messag...
...const messagebox = document.queryselector(".rsa-pss #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } /* fetch the encoded message-to-sign and verify it against the stored signature. * if it checks out, set the "valid" class on the signature. * otherwise set the "invalid" class. ...
...And 6 more matches

Establishing a connection: The WebRTC perfect negotiation pattern - Web APIs
ended way to negotiate a webrtc connection between peers, and provides sample code to demonstrate the technique. after the first deployments of webrtc-capable browsers, it was realized that parts of the negotiation process were more complicated than they needed to be for typical use cases. this was due to a small number of issues with the api and some potential race conditions that needed to be prevented. these issues have since been addressed, letting us simplify our webrtc negotiation significantly. the perfect negotiation pattern is an example of the ways in which negotiation have improved since the early days of webrtc. perfect negotiation concepts perfect negotiation makes it possible to seamlessly and completely separate the negotiation process from the rest of your application's log...
.... the best thing about perfect negotiation is that the same code is used for both the caller and the callee, so there's no repetition or otherwise added levels of negotiation code to write. perfect negotiation works by assigning each of the two peers a role to play in the negotiation process that's entirely separate from the webrtc connection state: a polite peer, which uses ice rollback to prevent collisions with incoming offers. a polite peer, essentially, is one which may send out offers, but then responds if an offer arrives from the other peer with "okay, never mind, drop my offer and i'll consider yours instead." an impolite peer, which always ignores incoming offers that collide with its own offers. it never apologizes or gives up anything to the polite peer. any time a collision...
...on(); signaler.send({ description: pc.localdescription }); } catch(err) { console.error(err); } finally { makingoffer = false; } }; we set makingoffer immediately before calling setlocaldescription() in order to lock against interfering with sending this offer, and we don't clear it back to false until the offer has been sent to the signaling server (or an error has occurred, preventing the offer from being made). this way, we avoid the risk of offers colliding. automatic rollback in setremotedescription() a key component to perfect negotiation is the concept of the polite peer, which always rolls itself back if it receives an offer while itself waiting for an answer to an offer. previously, triggering rollback involved manually checking for rollback conditions and trigg...
...And 6 more matches

Link types - HTML: Hypertext Markup Language
k> <form> author defines a hyperlink to a page describing the author or providing a way to contact the author. note: this may be a mailto: hyperlink, but this is not recommended on public pages as robot harvesters will quickly lead to a lot of spam sent to the address. in that case, it is better to lead to a page containing a contact form. although recognized, the rev attribute on <a>, <area> or<link> elements with a link type of made is incorrect and should be replaced by the rel attribute with this link type. <a>, <area>, <link> <form> bookmark indicates that the hyperlink is a permalink for the nearest ancestor <article> element. if none, it is a permalink for the section that the element is most closely associated to. this allows...
...section that the element is most closely associated to. this allows for bookmarking a single article in a page containing multiple articles, such as on a monthly summary blog page, or a blog aggregator. <a>, <area> <link>, <form> canonical from wikipedia, the free encyclopedia: canonical_link_element a canonical link element is an html element that helps webmasters prevent duplicate content issues by specifying the "canonical" or "preferred" version of a web page as part of search engine optimization. <link> <a>, <area>, <form> dns-prefetch hints to the browser that a resource is needed, allowing the browser to do a dns lookup and protocol handshaking before a user clicks the link. <link> <a>, <area>, <form> external indicat...
...nal indicates that the hyperlink leads to a resource outside the site of the current page; that is, following the link will make the user leave the site. <a>, <area>, <form> <link> first indicates that the hyperlink leads to the first resource of the sequence the current page is in. note: other link types related to linking resources in the same sequence are last, prev, next. although recognized, the synonyms begin and start are incorrect and must be avoided. <a>, <area>, <link> <form> help if the element is <a> or <area>, it indicates that the hyperlink leads to a resource giving further help about the parent of the element, and its descendants. if the element is <link> it indicates that the hyperlink leads to a resou...
...And 6 more matches

Index - HTTP
directive restricts the urls which can be used in a document's <base> element. if this value is absent, then any uri is allowed. if this directive is absent, the user agent will use the value in the <base> element. 30 csp: block-all-mixed-content csp, directive, http, mixed content, reference, security the http content-security-policy (csp) block-all-mixed-content directive prevents loading any assets using http when the page is loaded using https. 31 csp: child-src csp, directive, http, reference, security the deprecated http content-security-policy (csp) child-src directive defines the valid sources for web workers and nested browsing contexts loaded using elements such as <frame> and <iframe>. for workers, non-compliant requests are treated as fat...
...olicy require-sri-for directive instructs the client to require the use of subresource integrity for scripts or styles on the page. 46 csp: sandbox csp, directive, http, security the http content-security-policy (csp) sandbox directive enables a sandbox for the requested resource similar to the <iframe> sandbox attribute. it applies restrictions to a page's actions including preventing popups, preventing the execution of plugins and scripts, and enforcing a same-origin policy. 47 csp: script-src csp, directive, http, reference, security the http content-security-policy (csp) script-src directive specifies valid sources for javascript. this includes not only urls loaded directly into <script> elements, but also things like inline script event handlers ...
...ation reports consist of json documents sent via an http post request to the specified uri. 53 content-type content-type, http, reference, request header, header the content-type entity header is used to indicate the media type of the resource. 54 cookie cookies, http, reference, header, request the cookie http request header contains stored http cookies previously sent by the server with the set-cookie header. 55 cookie2 http, obsolete, reference, header, request the obsolete cookie2 http request header used to advise the server that the user agent understands "new-style" cookies, but nowadays user agents will use the cookie header instead, not this one. 56 dnt dnt, http, reference, header the dnt (do not tra...
...And 6 more matches

MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
filename", "mozilla.cfg");. file api that centralized preference file uses a javascript api that allows us to do what we need. that prefcalls.js is now archive in omni.jar file located at the root of the mozilla apps installation, example of tb5: # jar -tvf /usr/lib/thunderbird/omni.jar | grep prefcalls.js 7499 sat nov 05 09:21:34 cet 2011 defaults/autoconfig/prefcalls.js traditionally (previous apps versions) is was in mozilla_home/default/autoconfig/prefcalls.js. the presence of pref("general.config.filename", "mozilla.cfg"); in any appropriate .js file (here we use autoconf.js dedicated file) enables the read and execution of prefcalls.js. do not use the name all.js because it is reserved. ref: bug 690370 available functions are (see prefcalls.js file for details): function getp...
...layerror(funcname, message) function getenv(name) configure autoconfig two directives ask thunderbird to use autoconfig at startup: # cat /usr/lib/thunderbird/defaults/pref/tb-autoconf.js // 20100526 - modification autoconfig jehan. // pref("general.config.obscure_value", 0); // for mcd .cfg files pref('general.config.filename', 'thunderbird.cfg'); // for mcd .cfg files it used to be in previous releases (up until 7.0) in /usr/lib/thunderbird-x.0/default/pref/autoconf.js the first pref just tells us that we won't encode the file (no more rotary 13 or 7 cf below), the second pref is the name of the file to be read: /usr/lib/thunderbird/thunderbird.cfg. (or firefox.cfg if for firefox...) file encoding if needed, the encoding can be done with the perl script: moz-byteshift.pl avail...
...to process ldap results before we make the call function processldapvalues(queryresults) { if( queryresults ) { // build the userinfo object for later use for( var attr in ldapattrs ) { userinfo[ ldapattrs[attr] ] = getldapvalue( queryresults, ldapattrs[attr] ); } } else { throw( "no ldap results" ); } } // call upon ldap for the values in ldapattrs array, // uses the previous processldapvalues() getldapattributes( ldaphost, ldapbase, ldapfilter, ldapattrs.join(",") ); // create account // see also http://blog.deanandadie.net/2010/06/easy-thunderbird-account-management-using-mcd/ // identity defaultpref("mail.identity.id1.fullname", userinfo.cn ); defaultpref("mail.identity.id1.smtpserver", "smtp1" ); defaultpref("mail.identity.id1.useremail", userinfo.mail ); //...
...And 5 more matches

PopupEvents - Archive of obsolete content
and showing menu items based on context. however, this technique can be applied to any type of popup. in this example, a label within a panel is initialized with the current time. ...
...s technique can be applied to any type of popup. in this example, a label within a panel is initialized with the current time. ...
...howing="this.lastchild.value = (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. ...
...And 5 more matches

Table Reflow Internals - Archive of obsolete content
overview review of reflow table frames table reflow intro to paginated reflow table paginated reflow review of reflow reflow process starts when an html document starts loading (the frame tree contains only viewport, scroll(s), canvas, html, body). the initial chunk of an xml doc is loaded. the initial chunk of an html doc (or a subsequent chunk of an xml doc) is loaded. the container posts a dirty reflow command with itself as the target. content is inserted, appended, or deleted through the dom. the container posts a dirty reflow command with itself as the target. style changes through the dom - javascript, browser change font (ctrl+/-), a preference changes, etc. ...
...oc is loaded. the initial chunk of an html doc (or a subsequent chunk of an xml doc) is loaded. the container posts a dirty reflow command with itself as the target. content is inserted, appended, or deleted through the dom. the container posts a dirty reflow command with itself as the target. style changes through the dom - javascript, browser change font (ctrl+/-), a preference changes, etc. review of reflow reflow starts with pres shell which reflows the reflow root (usually the viewport frame), which reflows it children, etc. ususally it starts when the pres shell processes its queue of reflow commands. the reflower positions reflowee (if it can) before actually reflowing in case views are involved (e.g. absolutely positioned elements) reflows reflowee and passes a reflow state (i...
...es shell which reflows the reflow root (usually the viewport frame), which reflows it children, etc. ususally it starts when the pres shell processes its queue of reflow commands. the reflower positions reflowee (if it can) before actually reflowing in case views are involved (e.g. ...
...And 5 more matches

Building up a basic demo with Babylon.js - Game development
t: var engine = new babylon.engine(canvas); the babylon global object contains all the babylon.js functions available in the engine. creating a scene a scene is the place where all the game content is displayed. while creating new objects in the demo, we will be adding them all to the scene to make them visible on the screen. let's create a scene by adding the following lines just below our previous code: var scene = new babylon.scene(engine); scene.clearcolor = new babylon.color3(0.8, 0.8, 0.8); thus, the scene is created and the second line sets the background color to light gray. creating a rendering loop to make the 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 () { ...
...rs, colors, matrices etc. let there be light there are various light sources available in babylon.js. the most basic one is the pointlight, which works like a flashlight — shining a spotlight in a given direction. add the following line below your camera definition: var light = new babylon.pointlight("light", new babylon.vector3(10, 10, 0), scene); the parameters are very similar to the previously defined camera: the name of the light, a position in 3d space and the scene to which the light is added. geometry now the scene is properly rendering we can start adding 3d shapes to it. to speed up development babylon.js provides a bunch of predefined primitives that you can use to create shapes instantly in a single line of code. there are cubes, spheres, cylinders and more complicated ...
...eometry now the scene is properly rendering we can start adding 3d shapes to it. to speed up development babylon.js provides a bunch of predefined primitives that you can use to create shapes instantly in a single line of code. there are cubes, spheres, cylinders and more complicated shapes available. let's start by defining the geometry for a box shape — add the following new code below your previous additions: var box = babylon.mesh.createbox("box", 2, scene); a mesh is a way the engine creates geometric shapes, so material can be easily applied to them later on. in this case we're creating a box using the mesh.createbox method with it's own name, a size of 2, and a declaration of which scene we want it added to. note: the size or position values (e.g. for the box size) are unitless...
...And 5 more matches

UI pseudo-classes - Learn web development
this included some usage of pseudo-classes, for example using :checked to target a checkbox only when it is selected. in this article, we will explore in detail the different ui pseudo-classes available to us in modern browsers for styling forms in different states. prerequisites: basic computer literacy, and a basic understanding of html and css, including general knowledge of pseudo-classes and pseudo-elements. objective: to understand what parts of forms are hard to style, and why; to learn what can be done to customize them. ...
...nal by default, so you could just do your optional styling by default, and add styles on top for required controls. note: if one radio button in a same-named group of radio buttons has the required attribute, all the radio buttons will be invalid until one is selected, but only the one with the attribute assigned will actually match :required. using generated content with pseudo-classes in previous articles, we've seen the usage of generated content, but we thought now would be a good time to talk about it in a bit more detail. the idea is that we can use the ::before and ::after pseudo-elements along with the content property to make a chunk of content appear before or after the affected element. the chunk of content is not added to the dom, so is invisible to screenreaders; it is par...
...th) :invalid, but also matched by :out-of-range, as you'll see later on. there are some other ways to make an element matched by :valid/:invalid, as you'll see in the client-side form validation article. but we'll keep things simple for now. let's go in and look at a simple example of :valid/:invalid (see valid-invalid.html for the live version, and also check out the source code). ...
...And 5 more matches

Getting started with HTML - Learn web development
note: tags in html are case-insensitive. this means they can be written in uppercase or lowercase. for example, a <title> tag could be written as <title>, <title>, <title>, <title>, etc., and it will work. however, it is best practice to write all tags in lowercase for consistency, readability, and other reasons. anatomy of an html element let's further explore our paragraph element from the previous section: the anatomy of our element is: the opening tag: this consists of the name of the element (in this example, p for paragraph), wrapped in opening and closing angle brackets. this opening tag marks where the element begins or starts to take effect. in this example, it precedes the start of the paragraph text. the content: this is the content of the element. in this example, it is...
...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).substring(0, caretpos); var back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caret...
... two terms. note: the terms block and inline, as used in this article, should not be confused with the types of css boxes that have the same names. while the names correlate by default, changing the css display type doesn't change the category of the element, and doesn't affect which elements it can contain and which elements it can be contained in. one reason html5 dropped these terms was to prevent this rather common confusion. note: find useful reference pages that include lists of block and inline elements. see block-level elements and inline elements. empty elements not all elements follow the pattern of an opening tag, content, and a closing tag. some elements consist of a single tag, which is typically used to insert/embed something in the document. for example, the <img> elem...
...And 5 more matches

Introducing asynchronous JavaScript - Learn web development
previous overview: asynchronous next in this article we briefly recap the problems associated with synchronous javascript, and take a first look at some of the different asynchronous techniques you'll encounter, showing how they can help us solve such problems. prerequisites: basic computer literacy, a reasonable understanding of javascript fundamentals. objective: to gain familiarity with what asynchronous javascript is, how it differs from synchronous javascript, and what use cases it has. synchronous javascript to allow us to understand what asynchronous javascript is, we ought to start off by making sure we understand what synchronous javascript is. this section recaps some of the information we saw in the previous article. a lot of the function...
...t asynchronous javascript is, how it differs from synchronous javascript, and what use cases it has. synchronous javascript to allow us to understand what asynchronous javascript is, we ought to start off by making sure we understand what synchronous javascript is. this section recaps some of the information we saw in the previous article. a lot of the functionality we have looked at in previous learning area modules is synchronous — you run some code, and the result is returned as soon as the browser can do so. let's look at a simple example (see it live here, and see the source): const btn = document.queryselector('button'); btn.addeventlistener('click', () => { alert('you clicked me!'); let pelem = document.createelement('p'); pelem.textcontent = 'this is a newly-added p...
...he dom. we add a click event listener to it so that when the button is clicked: an alert() message appears. once the alert is dismissed, we create a <p> element. we then give it some text content. finally, we append the paragraph to the document body. while each operation is being processed, nothing else can happen — rendering is paused. this is because as we said in the previous article, javascript is single threaded. only one thing can happen at a time, on a single main thread, and everything else is blocked until an operation completes. so in the example above, after you've clicked the button the paragraph won't appear until after the ok button is pressed in the alert box. you can try it for yourself: <button>click me</button> note: it is important to remem...
...And 5 more matches

Introduction to events - Learn web development
for example, if the user selects a button on a webpage, you might want to respond to that action by displaying an information box. in this article, we discuss some important concepts surrounding events, and look at how they work in browsers. this won't be an exhaustive study; just what you need to know at this stage. prerequisites: basic computer literacy, a basic understanding of html and css, javascript first steps. ...
...ttp connect event docs provide a good example. you don't need to understand anything about other such environments at this stage in your learning; we just wanted to make it clear that events can differ in different programming environments. ways of using web events there are a number of ways to add event listener code to web pages so it runs when the associated event fires. in this section, we review the various mechanisms and discuss which ones you should use. event handler properties these are the properties that exist to contain event handler code we have seen most frequently during the course. returning to the above example: const btn = document.queryselector('button'); btn.onclick = function() { const rndcol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; ...
...ntlistener() function, in an anonymous function, like this: btn.addeventlistener('click', function() { var rndcol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundcolor = rndcol; }); this mechanism has some advantages over the older mechanisms discussed earlier. first, there is a counterpart function, removeeventlistener(), which removes a previously added listener. for example, this would remove the listener set in the first code block in this section: btn.removeeventlistener('click', bgchange); this isn't significant for simple, small programs, but for larger, more complex programs it can improve efficiency to clean up old unused event handlers. plus, this allows you to have the same button performing different actions in different ...
...And 5 more matches

Website security - Learn web development
this introductory article won't make you a website security guru, but it will help you understand where threats come from, and what you can do to harden your web application against the most common attacks. prerequisites: basic computer literacy. objective: to understand the most common threats to web application security and what you can do to reduce the risk of your site being hacked. what is website security? the internet is a dangerous place! with great regularity, we hear about websites becoming unavailable due to denial of service attacks, or displaying modified (and often damaging) information on their homepages. ...
... hear about websites becoming unavailable due to denial of service attacks, or displaying modified (and often damaging) information on their homepages. in other high-profile cases, millions of passwords, email addresses, and credit card details have been leaked into the public domain, exposing website users to both personal embarrassment and financial risk. the purpose of website security is to prevent these (or any) sorts of attacks. the more formal definition of website security is the act/practice of protecting websites from unauthorized access, use, modification, destruction, or disruption. effective website security requires design effort across the whole of the website: in your web application, the configuration of the web server, your policies for creating and renewing passwords, and...
... user could completely change the behavior of this sql statement to the new statement in the following example, by simply specifying the text in bold for the username. select * from users where name = 'a';drop table users; select * from userinfo where 't' = 't'; the modified statement creates a valid sql statement that deletes the users table and selects all data from the userinfo table (which reveals the information of every user). this works because the first part of the injected text (a';) completes the original statement. to avoid this sort of attack, you must ensure that any user data that is passed to an sql query cannot change the nature of the query. one way to do this is to escape all the characters in the user input that have a special meaning in sql. note: the sql statement t...
...And 5 more matches

React interactivity: Events and state - Learn web development
in this article we'll do this, digging into events and state along the way, and ending up with an app in which we can successfully add and delete tasks, and toggle tasks as completed. prerequisites: familiarity with the core html, css, and javascript languages, knowledge of the terminal/command line. objective: to learn about handling events and state in react, and use those to start making the case study app interactive. ...
...in javascript for a specific purpose, which is related but different — standard onclick handler properties). all browser events follow this format in jsx – on, followed by the name of the event. let's apply this to our app, starting in the form.js component. handling form submission at the top of the form() component function, create a function named handlesubmit(). ...
... apply this to our app, starting in the form.js component. handling form submission at the top of the form() component function, create a function named handlesubmit(). this function should prevent the default behavior of the submit event. after that, it should trigger an alert(), which can say whatever you’d like. it should end up looking something like this: function handlesubmit(e) { e.preventdefault(); alert('hello, world!'); } to use this function, add an onsubmit attribute to the <form> element, and set its value to the handlesubmit function: <form onsubmit={handlesubmit}> now if you head back to your browser and click on the "add" button, your browser will show you an alert dialog with the words "hello, world!" — or whatever you chose to write there. callback props in r...
...And 5 more matches

Componentizing our Svelte app - Learn web development
the central objective of this article is to look at how to break our app into manageable components and share information between them. we'll componentize our app, then add more functionality to allow users to update existing components. prerequisites: at minimum, it is recommended that you are familiar with the core html, css, and javascript languages, and have knowledge of the terminal/command line. you'll need a terminal with node + npm installed to compile and build your app. objective: to learn how to break our app into components and share information among them. ...
...he needed information as a parameter, and the handler will modify the parent's state. in our case, the filterbutton component will receive an onclick handler from its parent. whenever the user clicks on any filter button, the child will call the onclick handler, passing the selected filter as a parameter, back up to its parent. we will just declare the onclick prop assigning a dummy handler to prevent errors, like this: export let onclick = (clicked) => {} and we'll declare the following reactive statement — $: onclick(filter) — to call the onclick handler whenever the filter variable is updated. the <script> section of our filterbutton component should end up looking like this — update it now: <script> export let filter = 'all' export let onclick = (clicked) => {} $:...
...r) </script> now when we call filterbutton inside todos.svelte we'll need to specify the handler. update it like this: <filterbutton {filter} onclick={ (clicked) => filter = clicked }/> when any filter button is clicked, we just update the filter variable with the new filter. now our filterbutton component will work again. easier two-way data binding with the bind directive in the previous example we realized that our filterbutton component wasn't working because our application state was flowing down from parent to child through the filter prop — but it wasn't going back up. so we added an onclick prop to let the child component communicate the new filter value to its parent. it works ok, but svelte provides us an easier and more straightforward way to achieve two-way data ...
...And 5 more matches

Handling common accessibility problems - Learn web development
prerequisites: familiarity with the core html, css, and javascript languages; an idea of the high level principles of cross browser testing. objective: to be able to diagnose common accessibility problems, and use appropriate tools and techniques to fix them. ...
... more useful detail surrounding this topic. javascript javascript has the same kind of problems as css with respect to accessibility — it can be disastrous for accessibility if used badly, or overused. we've already hinted at some accessibility problems related to javascript, mainly in the area of semantic html — you should always use appropriate semantic html to implement functionality wherever it is available, for example use links and buttons as appropriate. don't use <div> elements with javascript code to fake functionality if at all possible — it is error prone, and more work than using the free functionality html gives you. simple functionality generally simple functionality should work with just the html in place — javascript should only be used to enhance functionality, n...
...ate pickers) and dynamic content that is updated often and incrementally. non-native complicated form controls are problematic because they tend to involve a lot of nested <div>s, and the browser does not know what to do with them by default. if you are inventing them yourself, you need to make sure that they are keyboard accessible; if you are using some kind of third-party framework, carefully review the options available to see how accessible they are before diving in. bootstrap looks to be fairly good for accessibility, for example, although making bootstrap a little more accessible by rhiana heath explores some of its issues (mainly related to color contrast), and looks at some solutions. regularly updated dynamic content can be a problem because screenreader users might miss it, espec...
...And 5 more matches

Contributing to the Mozilla code base
ront-end) javascript and/or html/css firefox developers documentation devtools javascript and/or html/css contribute to devtools add-ons javascript and/or html/css contribute to add-ons firefox focus for android java contribute to firefox focus for android firefox for fire tv java contribute to firefox for fire tv firefox preview (mobile browser, codename: "fenix") kotlin contribute to firefox preview firefox for ios swift contribute to firefox for ios firefox focus for ios swift contribute to firefox focus for ios mozilla hubs javascript and/or html/css, vr contribute to mozilla hubs servo rust contribute to servo there are even many ways to cont...
... find something to work on bugs listed as 'assigned' are not usually a good place to start unless you're sure you have something worthy to contribute. someone else is already working on it! even with no assignee, it is polite to check if someone has recently commented that they're looking at fixing the issue. once you have found something to work on, go ahead and comment! let the bug submitter, reviewer, and component owner know that you'd like to work on the bug. you might receive some extra information, perhaps also made the assignee. fix your pet peeve if there's something you'd like to fix about firefox, thunderbird, or your other favorite mozilla application, this can be a great place to start. there are a number of ways to do this: search bugzilla for relevant keywords. see pages...
...t having to use bugzilla's more perplexing search component. mozbugs step 2: fix the bug we leave this in your hands. here are some further resources to help: ask for help in a comment on the bug, or in #introduction:mozilla.org or #developers:mozilla.org check out https://developer.mozilla.org/docs/developer_guide and its parent document, https://developer.mozilla.org/docs/mozilla our reviewer checklist is very useful, if you have a patch near completion, and seek a favorable review utilize our build tool mach, its linting, static analysis, and other code checking features step 3: get your code reviewed once you fix the bug, you can advance to having your code reviewed. when you commit your code, please use the following format for your commit message: `bug number - what your...
...And 5 more matches

HTTP Cache
ache entry's output stream immediately, even before the output stream is closed. this is called concurrent read/write. concurrent read and write important difference in behavior from the old cache: the cache now supports reading a cache entry data while it is still being written by the first consumer - the writer. this can only be engaged for resumable responses that (bug 960902) don't need revalidation. reason is that when the writer is interrupted (by e.g. external canceling of the loading channel) concurrent readers would not be able to reach the remaning unread content. this could be improved by keeping the network load running and being stored to the cache entry even after the writing channel has been canceled. when the writer is interrupted, the first concurrent reader in line...
...ent writer. lifetime of an existing entry with only a partial content such a cache entry is first examined in the nsicacheentryopencallback.oncacheentrycheck callback, where it has to be checked for completeness. in this case, the content-length (or different indicator) header doesn't equal to the data size reported by the cache entry. the consumer then indicates the cache entry needs to be revalidated by returning entry_needs_revalidation from oncacheentrycheck. this consumer, from the point of view the cache, takes a role of the writer. other parallel consumers, if any, are blocked until the writer calls setvalid on the cache entry. the consumer is then responsible to validate the partial content cache entry with the network server and attempt to load the rest of the data. when th...
... partial content cache entry with the network server and attempt to load the rest of the data. when the server responds positively (in case of an http server with a 206 response code) the writer (in this order) opens the output stream on the cache entry and calls setvalid to unblock other pending openers. concurrent read/write is engaged. lifetime of an existing entry that doesn't pass server revalidation such a cache entry is first examined in the nsicacheentryopencallback.oncacheentrycheck callback, where the consumer finds out it must be revalidated with the server before use. the consumer then indicates the cache entry needs to be revalidated by returning entry_needs_revalidation from oncacheentrycheck. this consumer, from the point of view the cache, takes a role of the writer. ...
...And 5 more matches

Localizing with Koala
ion: 3.6. appname: browser. included locale: en-us (this is the original locale you're translating from). leave location empty for now. check the "mercurial" checkbox. note that you don't have to edit the location field, it automatically fills in when you check the "mercurial" checkbox: "c:\mozilla\l10n\application\firefox\3.6". url: http://hg.mozilla.org/releases/mozilla-1.9.2. branch: default. revision: leave empty. click "ok". koala will now try to clone the en-us source repository from http://hg.mozilla.org/releases/mozilla-1.9.2. it's almost 1 gb worth of download, so it may take a while. click "ok". on windows, if koala doesn't clone the repositories, you'll need to do it manually. the easy way involves opening the console and issuing the following commands: c:\users\stas> cd c:\moz...
...http://bitbucket.org/mozillal10n/x-testing or http://hg.mozilla.org/releases/l10n-....9.2/x-testing. new localizations: url: if you already have a reposit...
...y set up by l10n-drivers (on bitbucket), type the url of the remote repository, e.g. http://bitbucket.org/mozillal10n/x-testing. if you're starting a new localization, you may not have a remote repository set up yet. it is still recommended to use mercurial locally to version your local files. just type a single dot (".") in the url field to enable mercurial support in koala. branch: default. revision: leave empty. user: type your name and your e-mail address in the form: "firstname lastname <me@example.com>" (be sure to type the wrapping quotes: "") note that you no longer have to edit the location now, it automatically fills in when you check the "mercurial" checkbox (e.g. "c:\mozilla\l10n\locale\x-testing\3.6" if you enabled mercurial (recommended), koala will ask you if you wish to ...
...And 5 more matches

NSS_3.12_release_notes.html
on (see cert.h) cert_encodesubjectkeyid (see certdb/cert.h) cert_encodeusernotice (see cert.h) cert_findcrlentryreasonexten (see cert.h) cert_findcrlnumberexten (see cert.h) cert_findnameconstraintsexten (see cert.h) cert_getclassicocspdisabledpolicy (see cert.h) cert_getclassicocspenabledhardfailurepolicy (see cert.h) cert_getclassicocspenabledsoftfailurepolicy (see cert.h) cert_getpkixverifynistrevocationpolicy (see cert.h) cert_getusepkixforvalidation (see cert.h) cert_getvaliddnspatternsfromcert (see cert.h) cert_newtempcertificate (see cert.h) cert_setocsptimeout (see certhigh/ocsp.h) cert_setusepkixforvalidation (see cert.h) cert_pkixverifycert (see cert.h) hash_gettype (see sechash.h) nss_initwithmerge (see nss.h) pk11_createmergelog (see pk11pub.h) pk11_creategenericobject (see pk11pu...
... (see cryptohi.h) vfy_verifydigestdirect (see cryptohi.h) vfy_verifydigestwithalgorithmid (see cryptohi.h) new macros for camellia support (see blapit.h): nss_camellia nss_camellia_cbc camellia_block_size new macros for rsa (see blapit.h): rsa_max_modulus_bits rsa_max_exponent_bits new macros in certt.h: x.509 v3 ku_encipher_only cert_max_serial_number_bytes cert_max_dn_bytes 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_o...
...ng_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_cbc_128 the nssckbi pkcs #11...
...And 5 more matches

NSS tools : crlutil
name crlutil — list, generate, modify, or delete crls within the nss security database file(s) and list, create, modify or delete certificates entries in a particular crl. synopsis crlutil [options] arguments description the certificate revocation list (crl) management tool, crlutil, is a command-line utility that can list, generate, modify, or delete crls within the nss security database file(s) and list, create, modify or delete certificates entries in a particular crl. the key and certificate management process generally begins with creating keys in the key database, then generating and managing certificates in the certificate database(see certutil tool) and continues with certificates expiration or revocation. this document discusses...
...ty database file(s) and list, create, modify or delete certificates entries in a particular crl. the key and certificate management process generally begins with creating keys in the key database, then generating and managing certificates in the certificate database(see certutil tool) and continues with certificates expiration or revocation. this document discusses certificate revocation list management. ...
...each command takes one option. each option may take zero or more arguments. ...
...And 5 more matches

Event - Web APIs
mdn api reference. note that all event interfaces have names which end in "event". ...
... properties even...
...vent editingbeforeinputevent errorevent fetchevent focusevent gamepadevent hashchangeevent idbversionchangeevent inputevent keyboardevent mediastreamevent messageevent mouseevent mutationevent offlineaudiocompletionevent overconstrainederror pagetransitionevent paymentrequestupdateevent pointerevent popstateevent progressevent relatedevent rtcdatachannelevent rtcidentityerrorevent rtcidentityevent rtcpeerconnectioniceevent sensorevent 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 t...
...And 5 more matches

Using Pointer Events - Web APIs
e a finger (or elbow, ear, nose, whatever, but typically a finger), stylus, mouse, or any other method for specifying a single point on the surface. example the text below uses the term "finger" when describing the contact with the surface, but it could, of course, also be a stylus, mouse, or other method of pointing at a location. create a canvas the touch-action property is set to none to prevent the browser from applying its default touch behavior to the application. <canvas id="canvas" width="600" height="600" style="border:solid black 1px; touch-action:none"> your browser does not support canvas element. </canvas> <br> <button onclick="startup()">initialize</button> <br> log: <pre id="log" style="border: 1px solid #ccc;"></pre> setting up the event handlers when the page loads...
... processing, the start point is drawn as a small circle. we're using a 4-pixel wide line, so a 4 pixel radius circle will show up neatly. drawing as the pointers move each time one or more pointers moves, a pointermove event is delivered, resulting in our handlemove() function being called. its responsibility in this example is to update the cached touch information and to draw a line from the previous position to the current position of each touch. function handlemove(evt) { var el = document.getelementsbytagname("canvas")[0]; var ctx = el.getcontext("2d"); var color = colorfortouch(evt); var idx = ongoingtouchindexbyid(evt.pointerid); log("continuing touch: idx = " + idx); if (idx >= 0) { ctx.beginpath(); log("ctx.moveto(" + ongoingtouches[idx].pagex + ", " + ongoin...
...ientx + ", " + evt.clienty + ");"); ctx.lineto(evt.clientx, evt.clienty); ctx.linewidth = 4; ctx.strokestyle = color; ctx.stroke(); ongoingtouches.splice(idx, 1, copytouch(evt)); // swap in the new touch record log("."); } else { log("can't figure out which touch to continue: idx = " + idx); } } this function looks in our cached touch information array for the previous information about each touch to determine the starting point for each touch's new line segment to be drawn. this is done by looking at each touch's pointerevent.pointerid property. this property is a unique integer for each pointer event, and remains consistent for each event during the duration of each finger's contact with the surface. this lets us get the coordinates of the previous posit...
...And 5 more matches

WindowOrWorkerGlobalScope.setInterval() - Web APIs
t = "", asheets = [], amap = []; this.rate = nrate || 100; this.play = function () { if (btyping) { return; } if (bstart) { var aitems = document.queryselectorall(sselector); if (aitems.length === 0) { return; } for (var nitem = 0; nitem < aitems.length; nitem++) { asheets.push(new sheet(aitems[nitem])); /* uncomment the following line if you have previously hidden your elements via css: */ // aitems[nitem].style.visibility = "visible"; } bstart = false; } nintervid = setinterval(typewrite, this.rate); btyping = true; }; this.pause = function () { clearinterval(nintervid); btyping = false; }; this.terminate = function () { ocurrent.nodevalue += spart; spart = ""; for (nidx; nidx < ...
... faucibus erat, vel varius tortor ultricies ac. lorem ipsum dolor sit amet, consectetur adipiscing elit. sed nec libero nunc. nullam tortor nunc, elementum a consectetur et, ultrices eu orci. lorem ipsum dolor sit amet, consectetur adipiscing elit. pellentesque a nisl eu sem vehicula egestas.</p> </div> </body> </html> view this demo in action. see also: clearinterval(). callback arguments as previously discussed, internet explorer versions 9 and below do not support the passing of arguments to the callback function in either settimeout() or setinterval(). the following ie-specific code demonstrates a method for overcoming this limitation. to use, simply add the following code to the top of your script. /*\ |*| |*| ie-specific polyfill that enables the passage of arbitrary arguments to ...
...uctor. however, the daemon constructor itself is nothing but a clone of minidaemon with an added support for init and onstart functions declarable during the instantiation of the daemon. so the minidaemon framework remains the recommended way for simple animations, because daemon without its collection of methods is essentially a clone of it. minidaemon.js /*\ |*| |*| :: minidaemon :: |*| |*| revision #2 - september 26, 2014 |*| |*| /docs/web/api/window.setinterval |*| https://developer.mozilla.org/user:fusionchess |*| https://github.com/madmurphy/minidaemon.js |*| |*| this framework is released under the gnu lesser general public license, version 3 or later. |*| http://www.gnu.org/licenses/lgpl-3.0.html |*| \*/ function minidaemon (oowner, ftask, nrate, nlen) { if (!(this && this...
...And 5 more matches

Accessibility documentation index - Accessibility
this document provides a list of links to all accessibility articles on the mozilla developer network. found 105 pages: # page tags and summary 1 accessibility accessibility, landing accessibility (often abbreviated to a11y—as in "a" then 11 characters then "y") in web development means enabling as many people as possible to use web sites, even when those people's abilities are limited in some way. 2 aria aria, accessibility, html accessible rich internet applications (aria) is a set of attributes that define ways to make web content and web applications (especially those developed with javascript) more accessible to people with disabilities. it supplements html so that interactions and widgets commonly used in applications...
...ns, comments, details, suggestions wai-aria version 1.3 sees the addition of a set of new features, collectively known as aria annotations, which allow the creation of accessible annotations inside web documents. typical use cases include edit suggestions (i.e. an addition and/or deletion in an editable document), and comments (e.g. an editorial comment related to a part of a document under review). 6 aria guides aria accessible rich internet applications (aria) defines ways to make the web more accessible to people with disabilities. a few guidelines to follow that ensure better accessibility, like using drag and drop for placement of the widgets. 7 aria live regions aria, accessibility, arialive using javascript, it is possible to dynamically ...
...e status role and describes the effect it has on browsers and assistive technology. 39 using the toolbar role needscontent this technique demonstrates how to use the toolbar role and describes the effect it has on browsers and assistive technology. 40 x-ms-aria-flowfrom aria, microsoft, non-standard the x-ms-aria-flowfrom property specifies the id of the previous element in an alternative reading order, allowing assistive technology to override the general default of reading in document source order. the property serves to define element relationships utilizing aria relationship attributes and the aria-flowto property. 41 wai-aria roles aria, aria roles, accessibility, reference, rôles this page lists reference pages covering all...
...And 5 more matches

animation-direction - CSS: Cascading Style Sheets
for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. it is often convenient to use the shorthand property animation to set all animation properties at once. syntax /* single animation */ animation-direction: normal; animation-direction: reverse; animation-direction: alternate; animation-direction: alternate-reverse; /* multiple animations */ animation-direction: normal, reverse; animation-direction: alternate, reverse, normal; /* global values */ animation-direction: inherit; animation-direction: initial; animation-direction: unset; values normal the animation plays forwards each cycle. in other words, each time the animatio...
...mation-direction: normal, reverse; animation-direction: alternate, reverse, normal; /* global values */ animation-direction: inherit; animation-direction: initial; animation-direction: unset; values normal the animation plays forwards each cycle. in other words, each time the animation cycles, the animation will reset to the beginning state and start over again. this is the default value. reverse the animation plays backwards each cycle. in other words, each time the animation cycles, the animation will reset to the end state and start over again. animation steps are performed backwards, and timing functions are also reversed. for example, an ease-in timing function becomes ease-out. ...
...the count to determine if a cycle is even or odd starts at one. ...
...And 5 more matches

Event reference
on fired when... abort uievent dom l3 the loading of a resource has been aborted. abort progressevent progress and xmlhttprequest progression has been terminated (not due to an error). abort event indexeddb a transaction has been aborted. afterprint event html5 the associated document has started printing or the print preview has been closed. animationcancel animationevent css animations a css animation has aborted. animationend animationevent css animations a css animation has completed. animationiteration animationevent css animations a css animation is repeated. animationstart animationevent css animations a css animation has started...
... the input buffer of a scriptprocessornode is ready to be processed. audioend event web speech api the user agent has finished capturing audio for speech recognition. audiostart event web speech api the user agent has started to capture audio for speech recognition. beforeprint event html5 the associated document is about to be printed or previewed for printing. beforeunload beforeunloadevent html5 the window, the document and its resources are about to be unloaded. beginevent timeevent svg a smil animation element begins. blocked indexeddb an open connection to a database is blocking a versionchange transaction on the same database. blur focusevent dom l3 an el...
... websocket a websocket connection has been closed with prejudice (some data couldn't be sent for example). error event server sent events an event source connection has been failed. error event indexeddb a request caused an error and failed. error event web speech api a speech recognition error occurs. error speechsynthesiserrorevent web speech api an error occurs that prevents the utterance from being successfully spoken. focus focusevent dom l3 an element has received focus (does not bubble). focusin focusevent dom l3 an element is about to receive focus (bubbles). focusout focusevent dom l3 an element is about to lose focus (bubbles). fullscreenc...
...And 5 more matches

transform - SVG: Scalable Vector Graphics
use css transform functions. however, the compatibility isn't guaranteed. matrix the matrix(<a> <b> <c> <d> <e> <f>) transform function specifies a transformation in the form of a transformation matrix of six values. ...
...nction specifies a transformation in the form of a transformation matrix of six values. ...
...ies a transformation in the form of a transformation matrix of six values. ...
...And 5 more matches

Adding Toolbars and Toolbar Buttons - Archive of obsolete content
toolbars in firefox are very customizable. some users don't like extra toolbars, or they want to rearrange toolbar buttons to their liking, possibly merging multiple toolbars in the process. firefox allows all of this by default, and if you don't pay attention to the details we describe here, your toolbar may not be as easy to customize as the rest. the first thing you need to do is add your buttons to the toolbar palette. the toolbarpalette is a collection of all toolbar buttons and toolbar items in firefox, including those added by extensions. ...
...lbar buttons is one of the most difficult tasks when making extensions. it is not too hard to come up with some graphics for the buttons, but it can be hard to make them blend in with firefox on all operating systems. the way icons are handled in firefox changed considerably after firefox 4, so supporting older versions is not mentioned here (you can check this document's change history for older revisions, though). these are the current icon sets for firefox: windows mac os x (lion and above) mac os x linux (gnome) note: the images above are probably not distributable under the same cc license, unlike the rest of this material. here are the key similarities and differences between the 3 themes: all systems use small icons that are 16x16 pixels. only the gnome theme has ...
...n from using a single file. to get the region that corresponds to a specific state of an icon, the -moz-image-region css property is used. here are some examples of how the css for a toolbarbutton would look like on the 3 major platforms. this assumes that you've set the class xs-hw-toolbarbutton to all of your buttons. windows: /* the second and third selectors at the bottom are necessary to prevent conflicts with installed themes. */ toolbarbutton.xulschoolhello-toolbarbutton, window:not([active="true"]) toolbarbutton.xulschoolhello-toolbarbutton, toolbar[iconsize="small"] toolbarbutton.xulschoolhello-toolbarbutton { list-style-image: url("chrome://xulschoolhello-os/skin/toolbar.png"); } #xulschoolhello-hello-world-button { -moz-image-region: rect(0px, 16px, 16px, 0px); } mac ...
...And 4 more matches

Getting Started - Archive of obsolete content
the same way you open up zip files. mozilla currently comes with two skins, classic and modern. looking in the directory you'll also notice that there are classic.jar and modern.jar files. for this tutorial we are going to use the classic skin as a base. extract classic.jar into \classic (\mozilla\chrome\classic), but make sure to keep the directory structure. remember if at any point you wish to revert back to the original code again, just extract this jar over top of what you've modified. now all of the css and images are extracted, but if you make some changes and run mozilla as it is, you will not see them because it's still set to look at the files in the jar files. to point mozilla at the correct files we need to open up \mozilla\chrome\installed-chrome.txt in a text editor. you should ...
... by that change. after you've changed the images, launch mozilla and you should see them. creating the install script getting it ready for the installation before we can package everything up for installation, we need to remove all references to classic. copy everything in \mozilla\chrome\classic\skin\classic to a directory called \myskin. skin info when switching skins in mozilla, it displays a preview image and some information about the theme. this is what we're going to create now. take a screenshot of mozilla running your theme and create an image that is 438x89 pixels in size. place it in \myskin and call it preview.png (if it's a jpg or gif call it preview.jpg or preview.gif). make a copy of contents.rdf and place it in \myskin and open it up in your text editor. this file is a small x...
... the part listed above. change the blue part to whatever you want your theme called and then its version number. then scroll down to the next section. <rdf:description about="urn:mozilla:skin:myskin/1.0" chrome:displayname="my skin" chrome:accesskey="m" chrome:author="me" chrome:description="this is my custom skin for mozilla" chrome:name="myskin/1.0" chrome:image="preview.png"> the blue areas are explained below. the first line should match the line that you modified in the previous section. the display name. that is what the user sees in the preference panels list of themes. the access key is what key you can press to activate the skin in the preferences. replace the author section with your name. the description shows up below the preview image. place...
...And 4 more matches

Tamarin Build System Documentation - Archive of obsolete content
ox 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 minute is exceeded. the set of smoke tests can contain any shell build...
... all checkins since the last build each sandbox build occurs in the order they were submitted, the submitter may cancel a build. how do i build a sandbox build? create a user repository, instructions are https://developer.mozilla.org/en/publishing_mercurial_clones go to the request a sandbox build page http://tamarin-builds.mozilla.org/build_trigger/requestbuild.cfm enter the repository url, revision number, email address, and description. the description appears in the buildbot status page, please describe what you are trying to build and test after submitting a sandbox build view the build status page or the queue (if buildbot is busy) how do i view and change the queue? if buildbot is busy the queue is displayed http://tamarin-builds.mozilla.org/build_trigger/requestbuild.cfm th...
...ntel-10_5/scripts . ; cd scripts edit environment.sh, change the basedir and buildsdir settings (around line 51) basedir=~/hg/tamarin-redux (path to my test repository) (next line) buildsdir=~/hg/builds (a directory to store downloaded builds) always set current working directory to the scripts directory when running a script run a script (e.g.) ../all/run-acceptance-release.sh <optional hg revision number like 1902> how do i navigate the build status page? the page is divided into the phase table at the top and the waterfall table below the phase table shows all phases at the top of the page, each slave is shown as a box with a red,green, or yellow color: red means failed, green passed, and yellow has warnings. the phase state is idle or active click on the phase (e.g. compile, sm...
...And 4 more matches

Building accessible custom components in XUL - Archive of obsolete content
<code> @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); grid.spreadsheet { border: thin solid; } grid.spreadsheet label { border-bottom: 1px solid black; border-left: 1px solid black; margin: 0; padding: 3px; } grid.spreadshee...
...lodging" flex="1"/> <label x2:role="wairole:gridcell" value="dinner" flex="1"/> <label x2:role="wairole:gridcell" value="lodging" flex="1"/> <label x2:role="wairole:gridcell" value="breakfast" flex="1"/> <label x2:role="wairole:gridcell" value="lunch" flex="1"/> <label x2:role="wairole:gridcell" value="dinner" flex="1"/> </column> <-- several columns omitted for brevity --> </columns> </grid> </code> the resulting spreadsheet looks exactly the same visually, but the difference to an assistive technology is enormous. each label, which was previously exposed as a text label, is now exposed as a cell. <caption>cells are exposed as cells</caption> each column header, previously exposed as a text label, is now exposed to assistive technologies as an act...
...ce the individual cells are not in the tab order, clicking on a spreadsheet cell and tabbing off will move to the spreadsheet's next sibling control, which is what we want. the only remaining issue is that when the spreadsheet regains focus (by pressing shift-tab, or cycling all the way around the tab order and coming back into the spreadsheet), we need to programmatically reset the focus to the previously focused cell. this is handled in the spreadsheet_focus function, which is registered as a handler for the focus event. <code> var gfocuscell = null; function install_handlers() { var spreadsheet = window.document.getelementbyid('accjaxspreadsheet'); spreadsheet.addeventlistener('focus', spreadsheet_focus, true); spreadsheet.addeventlistener('click', spreadsheet_click, true); } ...
...And 4 more matches

Box Objects - Archive of obsolete content
about mozilla layout mozilla divides things into two sets of trees, the content tree and the layout tree. the content tree stores the nodes as they are found in the source code. the layout tree holds a different tree of nodes for each individual component that can be displayed. the layout tree holds the structure as the nodes are expected to be displayed there is not necessarily a one to one relationship between content and layout nodes. some content nodes may have several layout objects, for example, each line of a paragraph has a separate layout object. ...
... to determine the display order of elements, which may not be the same as the order in the source. recall that dom properties such as childnodes, firstchild, and nextsibling may be used to navigate the document tree. the box object also allows navigation in a similar means but retrieves the elements in display order. the box object provides several properties, firstchild, lastchild, nextsibling, previoussibling, and parentbox. their function should be self explanatory from their names. these properties return elements, for example, the firstchild property returns the first displayed child element. there is no corresponding childnodes property for box navigation; instead you must navigate by sibling using the nextsibling or previoussibling properties. unlike with navigating the dom tree, hidde...
...pear in the same order as in the source. if you then press the button labeled one again, its ordinal will increase to 3 and will move to the end. finally, pressing the button labeled three will increase its ordinal to 2 and it will appear in between the other two buttons. dir attribute the final box ordering attribute is the dir attribute, or the -moz-box-direction css property. ...
...And 4 more matches

Building up a basic demo with Three.js - Game development
colour, instead of the default black one. add this code into our second <script> element, just below the javascript comment. scene a scene is the place where everything happens. when creating new objects in the demo, we add them all inside the scene to become visible on the screen. in three.js, the scene is represented by a scene object. let's create it, by adding the following line below our previous lines: var scene = new three.scene(); later, we will be using the .add() method, to add objects to this scene. camera we have the rendered scene, but we still need to add a camera to view our handiwork — imagine a movie set without any cameras. the following lines put the camera in place in the 3d coordinate system, and point it in the direction of our scene, so we can finally see some...
...we still need to add a camera to view our handiwork — imagine a movie set without any cameras. the following lines put the camera in place in the 3d coordinate system, and point it in the direction of our scene, so we can finally see something: var camera = new three.perspectivecamera(70, width/height); camera.position.z = 50; scene.add(camera); add the above lines to your code, below those previously added. there are other types of camera available (cube, orthographic), but the simplest is perspective. to initialize it, we have to set its field of view and aspect ratio: the former is used to set how much is seen, and the latter is important for the objects on the screen to have the right proportions when rendered, and not look stretched. let's explain values we are setting for the code...
...stantly on every frame: function render() { requestanimationframe(render); renderer.render(scene, camera); } render(); on every new frame the render function is invoked, and the renderer renders the scene and the camera. right after the function declaration, we're invoking it for the first time to start the loop, after which it will be used indefinitely. again, add this new code below your previous additions. try saving the file and opening it in your browser. you should now see a gray window. congratulations! geometry now our scene is properly rendering, we can start adding 3d shapes. to speed up development, three.js provides a bunch of predefined primitives, which you can use to create shapes instantly in a single line of code. there's cubes, spheres, cylinders, and more complicate...
...And 4 more matches

How to structure a web form - Learn web development
prerequisites: basic computer literacy, and a basic understanding of html. objective: to understand how to structure html forms and give them semantics so they are usable and accessible. the flexibility of forms makes them one of the most complex structures in html; you can build any kind of basic form using dedicated form elements and attributes. using correct structure when building an html form will help ensure that the form is both usable and accessible. ...
...ible. the <form> element the <form> element formally defines a form and attributes that determine the form's behavior. each time you want to create an html form, you must start it by using this element, nesting all the contents inside. many assistive technologies and browser plugins can discover <form> elements and implement special hooks to make them easier to use. we already met this in the previous article. warning: it's strictly forbidden to nest a form inside another form. nesting can cause forms to behave in an unpredictable manner, so it is a bad idea. it's always possible to use a form control outside of a <form> element. if you do so, by default that control has nothing to do with any form unless you associate it with a form using the form attribute. this was introduced to let y...
...ieldsets improves usability. because of its influence over assistive technology, the <fieldset> element is one of the key elements for building accessible forms; however it is your responsibility not to abuse it. if possible, each time you build a form, try to listen to how a screen reader interprets it. if it sounds odd, try to improve the form structure. ...
...And 4 more matches

Advanced text formatting - Learn web development
the elements described in this article are less known, but still useful to know about (and this is still not a complete list by any means). here you'll learn about marking up quotations, description lists, computer code and other related text, subscript and superscript, contact information, and more. prerequisites: basic html familiarity, as covered in getting started with html. html text formatting, as covered in html text fundamentals. objective: to learn how to use lesser-known html elements to mark up advanced semantic features. ...
... <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.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back;...
...p://www.affirmationsforpositivethinking.com"><cite>affirmations for positive thinking</cite></a>.)</p>'; 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.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back;...
...And 4 more matches

HTML table advanced features and accessibility - Learn web development
prerequisites: the basics of html (see introduction to html). objective: to learn about more advanced html table features, and the accessibility of tables. adding a caption to your table with <caption> you can give your table a caption by putting it inside a <caption> element and nesting that inside the <table> element. you should put it just below the opening <table> tag. <table> <caption>dinosaurs in the jurassic period</caption> ... ...
...ectly beneath the <table> tag. note: the summary attribute can also be used on the <table> element to provide a description — this is also read out by screenreaders. we'd recommend using the <caption> element instead, however, as summary is deprecated by the html5 spec, and can't be read by sighted users (it doesn't appear on the page.) active learning: adding a caption let's try this out, revisiting an example we first met in the previous article. open up your language teacher's school timetable from the end of html table basics, or make a local copy of our timetable-fixed.html file. add a suitable caption for the table. save your code and open it in a browser to see what it looks like. note: you can find our version on github — see timetable-caption.html (see it live also).
... the <thead> element must wrap the part of the table that is the header — this is usually the first row containing the column headings, but this is not necessarily always the case. if you are using <col>/<colgroup> element, the table header should come just below those. the <tfoot> element needs to wrap the part of the table that is the footer — this might be a final row with items in the previous rows summed, for example. you can include the table footer right at the bottom of the table as you'd expect, or just below the table header (the browser will still render it at the bottom of the table). the <tbody> element needs to wrap the other parts of the table content that aren't in the table header or footer. it will appear below the table header or sometimes footer, depending on how y...
...And 4 more matches

Index - Learn web development
ript. you should understand these concepts before working through the other articles in the module. 53 graceful asynchronous programming with promises beginner, codingscripting, guide, javascript, learn, promises, async, asynchronous, catch, finally, then promises are a comparatively new feature of the javascript language that allow you to defer further actions until after a previous action has completed, or respond to its failure. 54 introducing asynchronous javascript beginner, codingscripting, guide, introducing, javascript, learn, promises, async, asynchronous, await, callbacks in this article we briefly recap the problems associated with synchronous javascript, and take a first look at some of the different asynchronous techniques you'll encounte...
...uage, therefore we've provided this module to help you. here we teach object theory and syntax in detail, then look at how to create your own objects. 65 adding features to our bouncing balls demo assessment, beginner, codingscripting, javascript, learn, oojs, object-oriented, objects, l10n:priority in this assessment, you are expected to use the bouncing balls demo from the previous article as a starting point, and add some new and interesting features to it. 66 inheritance in javascript article, beginner, codingscripting, constructor, function, getter, inheritance, javascript, learn, oojs, oop, object, object member, prototype, extends, l10n:priority, setter this article has covered the remainder of the core oojs theory and syntax that we think you ...
...ocks such as conditional statements, loops, functions, and events. you've seen this stuff already in the course, but only in passing — here we'll discuss it all explicitly. 90 build your own function article, beginner, codingscripting, functions, guide, javascript, learn, tutorial, build, invoke, l10n:priority, parameters with most of the essential theory dealt with in the previous article, this article provides practical experience. here you will get some practice building your own, custom function. along the way, we'll also explain some useful details of dealing with functions. 91 function return values article, beginner, codingscripting, functions, guide, javascript, learn, return, return values, l10n:priority there's one last essential concept a...
...And 4 more matches

Looping code - Learn web development
here we'll look at the loop structures available in javascript that handle such needs. prerequisites: basic computer literacy, a basic understanding of html and css, javascript first steps. objective: to understand how to use loops in javascript. keep me in the loop loops, loops, loops. as well as being associated with popular breakfast cereals, roller coasters, and musical production, they are also a critical concept in programming. ...
...+= 'and ' + cats[i] + '.'; } else { info += cats[i] + ', '; } } note: you can find this example code on github too (also see it running live). important: with for — as with all loops — you must make sure that the initializer is incremented or, depending on the case, decremented, so that it eventually reaches the point where the condition is not true. ...
...ing on the case, decremented, so that it eventually reaches the point where the condition is not true. if not, the loop will go on forever, and either the browser will force it to stop, or it will crash. this is called an infinite loop. exiting loops with break if you want to exit a loop before all the iterations have been completed, you can use the break statement. we already met this in the previous article when we looked at switch statements — when a case is met in a switch statement that matches the input expression, the break statement immediately exits the switch statement and moves onto the code after it. it's the same with loops — a break statement will immediately exit the loop and make the browser move on to any code that follows it. say we wanted to search through an array...
...And 4 more matches

Drawing graphics - Learn web development
this article provides an introduction to canvas, and further resources to allow you to learn more. prerequisites: javascript basics (see first steps, building blocks, javascript objects), the basics of client-side apis objective: to learn the basics of drawing on <canvas> elements using javascript. ...
... now try drawing some more rectangles of your own; have fun! strokes and line widths so far we've looked at drawing filled rectangles, but you can also draw rectangles that are just outlines (called strokes in graphic design). to set the color you want for your stroke, you use the strokestyle property; drawing a stroke rectangle is done using strokerect. ...
...ectangles of your own; have fun! strokes and line widths so far we've looked at drawing filled rectangles, but you can also draw rectangles that are just outlines (called strokes in graphic design). to set the color you want for your stroke, you use the strokestyle property; drawing a stroke rectangle is done using strokerect. ...
...And 4 more matches

Arrays - Learn web development
here we look at why this is useful, then explore how to create an array, retrieve, add, and remove items stored in an array, and more besides. prerequisites: basic computer literacy, a basic understanding of html and css, an understanding of what javascript is. objective: to understand what arrays are and how to manipulate them in javascript. what is an array? arrays are generally described as "list-like objects"; they are basically single objects that contain multiple values stored in a list. ...
... didn't have arrays, we'd have to store every item in a separate variable, then call the code that does the printing and adding separately for each item. this would be much longer to write out, less efficient, and more error-prone. if we had 10 items to add to the invoice it would already be annoying, but what about 100 items, or 1000? we'll return to this example later on in the article. as in previous articles, let's learn about the real basics of arrays by entering some examples into browser developer console. creating arrays arrays consist of square brackets and elements that are separated by commas. suppose we want to store a shopping list in an array. paste the following code into the console: let shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles']; shopping; in the ...
... note: we've said it before, but just as a reminder — computers start counting from 0! note that an array inside an array is called a multidimensional array. you can access an item inside an array that is itself inside another array by chaining two sets of square brackets together. for example, to access one of the items inside the array that is the third item inside the random array (see previous section), we could do something like this: random[2][2]; try making some more modifications to your array examples before moving on. play around a bit, and see what works and what doesn't. finding the length of an array you can find out the length of an array (how many items are in it) in exactly the same way as you find out the length (in characters) of a string — by using the leng...
...And 4 more matches

Introduction to automated testing - Learn web development
to handle this efficiently, you should become familiar with automation tools. in this article, we look at what is available, how to use task runners, and how to use the basics of commercial browser test automation apps such as lambdatest, sauce labs, browserstack, and testingbot. prerequisites: familiarity with the core html, css, and javascript languages; an idea of the high level principles of cross-browser testing. ...
...r. automation makes things easy throughout this module we have detailed loads of different ways in which you can test your websites and apps, and explained the sort of scope your cross-browser testing efforts should have in terms of what browsers to test, accessibility considerations, and more. sounds like a lot of work, doesn't it? we agree — testing all the things we've looked at in previous articles manually can be a real pain. fortunately, there are tools to help us automate some of this pain away. there are two main ways in which we can automate the tests we've been talking about in this module: use a task runner such as grunt or gulp, or npm scripts to run tests and clean up code during your build process. this is a great way to perform tasks like linting and minifying cod...
...": "1.0.0", "description": "test for npm projects", "main": "index.js", "scripts": { "test": "test" }, "author": "chris mills", "license": "mit" } with this, you are ready to move on. setting up gulp automation let's look at setting up gulp and using it to automate some testing tools. to begin with, create a test npm project using the procedure detailed at the bottom of the previous section. next, you'll need some sample html, css and javascript content to test your system on — make copies of our sample index.html, main.js, and style.css files in a subfolder with the name src inside your project folder. you can try your own test content if you like, but bear in mind that such tools won't work on internal js/css — you need external files. first, install gulp globall...
...And 4 more matches

Setting up your own test automation environment - Learn web development
prerequisites: familiarity with the core html, css, and javascript languages; an idea of the high-level principles of cross browser testing, and automated testing. objective: to show how to set up a selenium testing environment locally and run tests with it, and how to integrate it with tools like lambdatest, sauce labs, and browserstack. ...
... prerequisites: familiarity with the core html, css, and javascript languages; an idea of the high-level principles of cross browser testing, and automated testing. objective: to show how to set up a selenium testing environment locally and run tests with it, and how to integrate it with tools like lambdatest, sauce labs, and browserstack. ...
...um's official selenium-webdriver, as the documentation seems fairly up-to-date and it is well-maintained. if you want different options, webdriver.io and nightwatch.js are also good choices. to install selenium-webdriver, run the following command, making sure you are inside your project folder: npm install selenium-webdriver note: it is still a good idea to follow these steps even if you previously installed selenium-webdriver and downloaded the browser drivers. you should make sure that everything is up-to-date. next, you need to download the relevant drivers to allow webdriver to control the browsers you want to test. you can find details of where to get them from on the selenium-webdriver page (see the table in the first section.) obviously, some of the browsers are os-specific, ...
...And 4 more matches

Package management basics - Learn web development
prerequisites: familiarity with the core html, css, and javascript languages. objective: to understand what package managers and package repositories are, why they are needed, and the basics of how to use them. a dependency in your project a dependency is a third-party bit of software that was probably written by someone else and ideally solves a single problem for you. ...
...y dependency will likely have been tested in a lot of different situations, making it more robust and cross-browser compatible than your own solution. a project dependency can be an entire javascript library or framework — such as react or vue — or a very small utility like our human-readable date library, or it can be a command line tool such as prettier or eslint, which we talked about in previous articles. without modern build tools, dependencies like this might be included in your project using a simple <script> element, but this might not work right out of the box and you will likely need some modern tooling to bundle your code and dependencies together when they are released on the web. a bundle is the term that’s generally used to refer to a single file on your web server that ...
...of which there could be tens, or hundreds. removing all the files again if you want to remove the packages. in addition, package managers handle duplicate dependencies (something that becomes important and common in front-end development). in the case of npm (and javascript- and node-based package managers) you have two options for where you install your dependencies. as we touched on in the previous article, dependencies can be installed globally or locally to your project. although there tend to be more pros for installing globally, the pros for installing locally are more important — such as code portability and version locking. for example, if your project relied on webpack with a certain configuration, you'd want to ensure that if you installed that project on another machine or r...
...And 4 more matches

IME handling guide
this is a technical term from windows but these days, this is used on other platforms as well. ime is a helper application of a user's text input. it handles native key events before or after focused application (depending on the platform) and creates a composition string (a.k.a. preedit string), suggests a list of what the user attempts to input, commits composition string as a selected item off the list and commits composition string without any conversion. ...
...s ascii control characters from dispatching composition event's data in the default settings. although, this can be disabled with "dom.compositionevent.allow_control_characters" pref. finally, this class guarantees that requesting to commit or cancel current composition to ime is perefored synchronously. see forcibly committing composition section for the detail. editor/libeditor mozilla::editoreventlistener listens for trusted dom compositionstart, text and compositionend events and notifies mozilla::editorbase and mozilla::texteditor of the events. when editorbase receives an ecompositionstart (dom "compositionstart") event, it looks for a proper textcomposition instance and stores it. when texteditor receives an ecompositionchange (dom "text") event, it creates or modifies a text node...
...tart from highet priority notification again. additionally, all notifications except notify_ime_of_blur should be sent only when it's safe to run script since the notification may cause querying content and/or dispatching composition events. notify_ime_of_focus when an editable editor gets focus and imecontentobserver starts to observe it, this is sent to widget. this must be called after the previous imecontentobserver notified widget of notify_ime_of_blur. note that even if there are pending notifications, they are canceled when notify_ime_of_focus is sent since querying content with following notifications immediately after getting focus does not make sense. the result is always same as the result of querying contents at receiving this notfication. notify_ime_of_blur when an imeconte...
...And 4 more matches

NSS API Guidelines
ut the code) is: the relationship of the certificate library with just about every other component (most noticeably pkcs #12, pkcs #7, and pkcs #11) splitting low key and high key components more clearly the crypto wrappers (pkcs #11 wrappers) and high key pkcs #12 and pkcs #5 libraries nss compiles into the libraries described below. the layer indicates the main layer, seen in the previous diagram, in which the library operates. the directory is the location of the library code in the nss source tree. the public headers is a list of header files that contain types, and functions, that are publicly available to higer-level apis. library description layer directory public headers certdb provides all certificate handling functions and types. the c...
...ta in java archive (jar) format, including zlib compression. port lib/jar jar-ds.h, jar.h, jarfile.h nss provides high-level initialiazation and shutdown of security services. specifically, this library provides nss_init() for establishing default certificate, key, module databases, and initializing a default random number generator. nss_shutdown() closes these databases, to prevent further access by an application. above high cert, high key lib/nss nss.h pk11wrap provides access to pkcs #11 modules, through a unified interface. the pkcs11wrap library provides functions for selecting/finding pkcs #11 modules and slots. it also provides functions that invoke operations in selected modules and slots, such as key selection and generation, signing, encryp...
...em.h, secoid.h, secoidt.h, secport.h, secrng.h, secrngt.h, secerr.h, watcomfx.h naming conventions this section describes the rules that (ideally) should be followed for naming and identifying new files, functions, and data types. cvs id each file should include a cvs id string for identification. the preferred format is: "@(#) $rcsfile: nss-guidelines.html, v $ $revision: 48936 $ $date: 2009-08-11 07:45:57 -0700 (tue, 11 aug 2009) $ $name$" you can put the string in a comment or in a static char array. use #ifdef debug to include the array in debug builds only. the advantage of using an array is that you can use strings(1) to pull the id tags out of a (debug) compiled library. you can even put them in header files; the header files are protected from doubl...
...And 4 more matches

sslerr.html
tem has reported that it received a message with a bad message authentication code from the local system. this may indicate that an attack on that server is underway. ssl_error_bad_cert_alert -12271 "ssl peer cannot verify your certificate." the remote system has received a certificate from the local system, and has rejected it for some reason. ssl_error_revoked_cert_alert -12270 "ssl peer rejected your certificate as revoked." the remote system has received a certificate from the local system, and has determined that the certificate has been revoked. ssl_error_expired_cert_alert -12269 "ssl peer rejected your certificate as expired." the remote system has received a certificate from the local system, an...
... security library: invalid ava. sec_error_invalid_time -8184 security library: invalid time. sec_error_bad_der -8183 security library: improperly formatted der-encoded message. sec_error_bad_signature -8182 peer's certificate has an invalid signature. sec_error_expired_certificate -8181 peer's certificate has expired. sec_error_revoked_certificate -8180 peer's certificate has been revoked. sec_error_unknown_issuer -8179 peer's certificate issuer is not recognized. sec_error_bad_key -8178 peer's public key is invalid sec_error_bad_password -8177 the password entered is incorrect. sec_error_retry_password -8176 new password entered incorrectly. sec_err...
... xp_sec_fortezza_person_error -8135 couldn't initialize fortezza personalities. sec_error_no_krl -8134 no krl for this site's certificate has been found. sec_error_krl_expired -8133 the krl for this site's certificate has expired. sec_error_krl_bad_signature -8132 the krl for this site's certificate has an invalid signature. sec_error_revoked_key -8131 the key for this site's certificate has been revoked. sec_error_krl_invalid -8130 new krl has an invalid format. sec_error_need_random -8129 security library: need random data. sec_error_no_module -8128 security library: no security module can perform the requested operation. sec_error_no_token -8127 the security car...
...And 4 more matches

nsIMsgFolder
e, in boolean newvalue); void notifypropertyflagchanged(in nsimsgdbhdr item, in nsiatom property, in unsigned long oldvalue, in unsigned long newvalue); void notifyunicharpropertychanged(in nsiatom property, in astring oldvalue, in astring newvalue); void notifyitemadded(in nsisupports item); void notifyitemremoved(in nsisupports item); void notifyfolderevent(in nsiatom event); void listdescendents(in nsisupportsarray descendents); void shutdown(in boolean shutdownchildren); void setinvfeditsearchscope(in boolean asearchthisfolder, in boolean asetonsubfolders); void copydatatooutputstreamforappend(in nsiinputstream aistream, in long alength, in nsioutputstream outputstream); void copydatadone(); ...
...d setinvfeditsearchscope(in boolean asearchthisfolder, in boolean asetonsubfolders); void copydatatooutputstreamforappend(in nsiinputstream aistream, in long alength, in nsioutputstream outputstream); void copydatadone(); void setjunkscoreformessages(in nsisupportsarray amessages, in acstring ajunkscore); void applyretentionsettings(); boolean fetchmsgpreviewtext([array, size_is (anumkeys)] in nsmsgkey akeystofetch, in unsigned long anumkeys, in boolean alocalonly, in nsiurllistener aurllistener); void addkeywordstomessages(in nsisupportsarray amessages, in acstring akeywords); void removekeywordsfrommessages(in nsisupportsarray amessages, in acstring akeywords); autf8string getmsgtextfromstream(in nsimsgdbhdr amsghdr, in...
...ue id to the folder, it is not a globally unique identifier. will return nsmsgkey_none if there was no last message loaded. note: does not persist across sessions. uri acstring readonly: old nsifolder properties and methods. name astring old nsifolder properties and methods. prettyname astring old nsifolder properties and methods. abbreviatedname astring readonly: old nsifolder properties and methods. parent nsimsgfolder old nsifolder properties and methods. parentmsgfolder nsimsgfolder readonly: handy accessor when we want a msg folder. dbtransferinfo nsidbfolderinfo subfolders nsisimpleenumerator readonly: returns an enumerator containing a list of nsimsgfolder ...
...And 4 more matches

Drawing and Event Handling - Plugins
when it comes to determining the way a plug-in instance appears in a web page, you (and the web page author) have many options. the content provider who writes the web page determines its display mode: whether the plug-in is embedded, or displayed in its own separate page. you determine whether a plug-in is windowed or windowless by the way you define the plug-in itself. a windowed plug-in is drawn into its own native window (or portion of a native window) on a web page. a windowed plug-in is opaque, hiding the part of the page beneath its display window. ...
...all npp_setwindow again whenever the size or position of the instance changes, passing it the same npwindow object each time, but with different values. the browser can also call npp_setwindow multiple times with different values for the window, including null. for example, if a user removes an instance from the page, the browser should call npp_setwindow with a window value of null. this value prevents the instance from drawing further until it is pasted back on the page and npp_setwindow is called again with a new value. mac os windows unix mac os on mac os, the browser passes an np_port structure in the window field of the npwindow structure. this structure contains a pointer to the graphics port (cgraphptr) into which the plug-in instance should draw and the x - and y - coordinat...
...gion to the region of the plug-in currently visible (not scrolled off the page, obscured by floating palettes, or otherwise hidden). however, for the plug-in to draw at any other time, for example, to highlight on a mouse-down event or draw animation at idle time, it must save the current setting of the port, set up its drawing environment as appropriate, draw, and then restore the port to the previous settings. in this case, the plug-in makes it unnecessary for the browser to save and restore its port settings before and after every call into the plug-in. the browser and the plug-in can both install drag manager handlers for the shared port. because the drag manager calls both handlers no matter where the cursor is, the browser does not show the drag highlight when the cursor is over an i...
...And 4 more matches

FileReader.readAsDataURL() - Web APIs
ring. note: the blob's result cannot be directly decoded as base64 without first removing the data-url declaration preceding the base64-encoded data. to retrieve only the base64 encoded string, first remove data:*/*;base64, from the result. syntax instanceoffilereader.readasdataurl(blob); parameters blob the blob or file from which to read. ...
...ed as base64 without first removing the data-url declaration preceding the base64-encoded data. to retrieve only the base64 encoded string, first remove data:*/*;base64, from the result. syntax instanceoffilereader.readasdataurl(blob); parameters blob the blob or file from which to read. ...
... the data-url declaration preceding the base64-encoded data. to retrieve only the base64 encoded string, first remove data:*/*;base64, from the result. syntax instanceoffilereader.readasdataurl(blob); parameters blob the blob or file from which to read. ...
...And 4 more matches

File drag and drop - Web APIs
ach file; otherwise the datatransfer interface's files property is used to access each file. this example shows how to write the name of each dragged file to the console. in a real application, an application may want to process a file using the file api. note that in this example, any drag item that is not a file is ignored. ...
...tatransfer interface's files property is used to access each file. this example shows how to write the name of each dragged file to the console. in a real application, an application may want to process a file using the file api. note that in this example, any drag item that is not a file is ignored. function drophandler(ev) { console.log('file(s) dropped'); // prevent default behavior (prevent file from being opened) ev.preventdefault(); if (ev.datatransfer.items) { // use datatransferitemlist interface to access the file(s) for (var i = 0; i < ev.datatransfer.items.length; i++) { // if dropped items aren't files, reject them if (ev.datatransfer.items[i].kind === 'file') { var file = ev.datatransfer.items[i].getasfile(); console.log('... file...
...datatransfer.items[i].kind === 'file') { var file = ev.datatransfer.items[i].getasfile(); console.log('... file[' + i + '].name = ' + file.name); } } } else { // use datatransfer interface to access the file(s) for (var i = 0; i < ev.datatransfer.files.length; i++) { console.log('... ...
...And 4 more matches

Using the Permissions API - Web APIs
code is simple and unremarkable — below we'll just be walking through the permissions api-related code, so check the code yourself if you want to study any of the other parts. accessing the permissions api the navigator.permissions property has been added to the browser to allow access to the global permissions object. this object will eventually include methods for querying, requesting, and revoking permissions, although currently it only contains permissions.query(); see below. querying permission state in our example, the permissions functionality is handled by one function — handlepermission(). this starts off by querying the permission status using permissions.query(). depending on the value of the state property of the permissionstatus object returned when the promise resolves...
...promise resolves, it reacts differently: "granted" the "enable geolocation" button is hidden, as it isn't needed if geolocation is already active. "prompt" the "enable geolocation" button is hidden, as it isn't needed if the user will be prompted to grant permission for geolocation. the geolocation.getcurrentposition() function is then run, which prompts the user for permission; it runs the revealposition() function if permission is granted (which shows the map), or the positiondenied() function if permission is denied (which makes the "enable geolocation" button appear). "denied" the "enable geolocation" button is revealed (this code needs to be here too, in case the permission state is already set to denied for this origin when the page is first loaded). function handlepermission(...
...in when the page is first loaded). ...
...And 4 more matches

Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
ied. with no orientation data included in the transform, the orientation of arefspace is unaffected. converting between webxr session types another common reason you may need to convert positional information from one reference space to another is when it's necessary to change the session type from inline to immersive-vr or back. this commonly happens when your user interface provides a way to preview the scene inline within the context of a web page, with a button or other control to switch to immersive mode. since most users would prefer that you maintain the same viewer position and facing direction while performing this transition, you can use the xrframe method getviewerpose() to obtain the current xrviewerpose, switch the session, then use the saved viewer pose to restore the viewer'...
... the one you've been using, you can use a combination of getviewerpose() and some matrix computations to transition everything in your scene to be based at the new reference frame's origin. because getviewerpose() is only available in an xrframe, you will need to begin this process in your rendering callback, possibly using a worker to do the computations in order to reduce frame dropping. ...
...egin this process in your rendering callback, possibly using a worker to do the computations in order to reduce frame dropping. ...
...And 4 more matches

Web APIs
micscompressornode e ext_blend_minmax ext_color_buffer_float ext_color_buffer_half_float ext_disjoint_timer_query ext_float_blend ext_frag_depth ext_srgb ext_shader_texture_lod ext_texture_compression_bptc ext_texture_compression_rgtc ext_texture_filter_anisotropic eckeygenparams eckeyimportparams ecdhkeyderiveparams ecdsaparams effecttiming element elementcssinlinestyle elementtraversal errorevent event eventlistener eventsource eventtarget extendableevent extendablemessageevent f featurepolicy federatedcredential fetchevent file fileentrysync fileerror fileexception filelist filereader filereadersync filerequest filesystem filesystemdirectoryentry filesystemdirectoryreader filesystementry filesystementrysync filesystemfileentry filesystemflags filesystemsyn...
...aconfiguration mediadecodingconfiguration mediadeviceinfo mediadevices mediaelementaudiosourcenode mediaencodingconfiguration mediaerror mediaimage mediakeymessageevent mediakeysession mediakeystatusmap mediakeysystemaccess mediakeysystemconfiguration mediakeys medialist mediametadata mediapositionstate mediaquerylist mediaquerylistevent mediaquerylistlistener mediarecorder mediarecordererrorevent mediasession mediasessionactiondetails mediasettingsrange mediasource mediastream mediastreamaudiodestinationnode mediastreamaudiosourcenode mediastreamaudiosourceoptions mediastreamconstraints mediastreamevent mediastreamtrack mediastreamtrackaudiosourcenode mediastreamtrackaudiosourceoptions mediastreamtrackevent mediatrackconstraints mediatracksettings mediatracksupportedconstraints mer...
...rformanceeventtiming performanceframetiming performancelongtasktiming performancemark performancemeasure performancenavigation performancenavigationtiming performanceobserver 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 rt...
...And 4 more matches

Cognitive accessibility - Accessibility
3.1 states "make text content readable and understandable." for some users, it is difficult to infer the meaning of a word or phrase from context, especially when the word or phrase is used in an unusual way, or has been given a specialized meaning. for these users, the ability to read and understand may depend on the availability of specific definitions or the expanded forms of acronyms or abbreviations. some users may experience great difficulty in recognizing written words yet they understand extremely complex and sophisticated documents when the text is read aloud, or when key processes and ideas are illustrated visually. declare the language of the page and any content not in that main language. the language of every page must be declared by using the lang attribute on the <h...
...ifficult to understand nonliteral word usage, such as idioms, colloquialisms, and specialized jargon. non-native language speakers may also struggle with these terms. if a word or phrase has a unique meaning, in the document provide a definition inline or linked, within a glossary, or to an online dictionary. if a word or phrase is used to mean more than one thing, define each use. ...
...tand nonliteral word usage, such as idioms, colloquialisms, and specialized jargon. non-native language speakers may also struggle with these terms. if a word or phrase has a unique meaning, in the document provide a definition inline or linked, within a glossary, or to an online dictionary. if a word or phrase is used to mean more than one thing, define each use. ...
...And 4 more matches

Cross-browser Flexbox mixins - CSS: Cascading Style Sheets
box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; } %inline-flex { @include inline-flex; } flexbox direction the flex-direction property specifies how flex items are placed in the flex container, by setting the direction of the flex container's main axis. this determines the direction in which flex items are laid out in. ...
...line-flex; display: -ms-inline-flexbox; display: inline-flex; } %inline-flex { @include inline-flex; } flexbox direction the flex-direction property specifies how flex items are placed in the flex container, by setting the direction of the flex container's main axis. this determines the direction in which flex items are laid out in. ...
...-direction property specifies how flex items are placed in the flex container, by setting the direction of the flex container's main axis. this determines the direction in which flex items are laid out in. ...
...And 4 more matches

<input type="date"> - HTML: Hypertext Markup Language
february), // this part of the code ensures that the highest day available ...
...daynum = 28; } // inject the right number of new <option> elements into the day <select> for(i = 1; i <= daynum; i++) { var option = document.createelement('option'); option.textcontent = i; dayselect.appendchild(option); } // if previous day has already been set, set dayselect's value // to that day, to avoid the day jumping back to 1 when you // change the year if(previousday) { dayselect.value = previousday; // if the previous day was set to a high number, say 31, and then // you chose a month with less total days in it (e.g. february), // this part of the code ensures that the highest day available // is selected, rather than showing a blank dayselect if(dayselect.value === "") { dayselect.value = previousday - 1; } if(...
...// if the previous day was set to a high number, say 31, and then // you chose a month with less total days in it (e.g. ...
...And 4 more matches

<input type="datetime-local"> - HTML: Hypertext Markup Language
february), // this part of the code ensures that the highest day available ...
...daynum = 28; } // inject the right number of new <option> elements into the day <select> for(i = 1; i <= daynum; i++) { var option = document.createelement('option'); option.textcontent = i; dayselect.appendchild(option); } // if previous day has already been set, set dayselect's value // to that day, to avoid the day jumping back to 1 when you // change the year if(previousday) { dayselect.value = previousday; // if the previous day was set to a high number, say 31, and then // you chose a month with less total days in it (e.g. february), // this part of the code ensures that the highest day available // is selected, rather than showing a blank dayselect if(dayselect.value === "") { dayselect.value = previousday - 1; } if(...
...// if the previous day was set to a high number, say 31, and then // you chose a month with less total days in it (e.g. ...
...And 4 more matches

HTML documentation index - HTML: Hypertext Markup Language
e. if the value of the element is greater than this, the element fails constraint validation. this value must be greater than or equal to the value of the min attribute. if the max attribute is present by is not specified or is invalid, no max value is applied. if the max attribute is valid and a non-empty value is greater than the maximum allowed by the max attribute, constraint validation will prevent form submission. 41 html attribute: maxlength attribute, attributes, constraint validation the maxlength attribute defines the maximum number of characters (as utf-16 code units) the user can enter into an <input> or <textarea>. this must be an integer value 0 or higher. 42 html attribute: min attribute, attributes, constraint validation, min the min a...
... content, element, html, html text-level semantics, html:flow content, html:interactive content, html:palpable content, html:phrasing content, inline element, reference, web the html <a> element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a url can address. 56 <abbr>: the abbreviation element acronym, definitions, element, html, html text-level semantics, html:flow content, html:palpable content, html:phrasing content, reference, web, abbr, abbreviation, semantics the html abbreviation element (<abbr>) represents an abbreviation or acronym; the optional title attribute can provide an expansion or description for the abbreviation. 57 <acronym> ele...
... 58 <address>: the contact address element address, author, contact, contact information, element, email, email address, html, html sections, html:flow content, html:palpable content, reference, web the html <address> element indicates that the enclosed html provides contact information for a person or people, or for an organization. ...
...And 4 more matches

Firefox user agent string reference - HTTP
d is common to almost every browser today. platform describes the native platform the browser is running on (e.g. windows, mac, linux or android), and whether or not it's a mobile phone. firefox os phones simply say "mobile"; the web is the platform. note that platform can consist of multiple "; "-separated tokens. see below for further details and examples. though fixed in firefox 69, previous 32-bit versions of firefox running on 64-bit processors would report that the system is using a 32-bit cpu. rv:geckoversion indicates the release version of gecko (such as "17.0"). in recent browsers, geckoversion is the same as firefoxversion. gecko/geckotrail indicates that the browser is based on gecko. on desktop, geckotrail is the fixed string "20100101" firefox/firefoxversion i...
... starting in version 6, users can opt into using a geckoview-based focus for android with a hidden preference: it uses a geckoview ua string to advertise gecko compatibility. focus version (rendering engine) ...
... starting in version 6, users can opt into using a geckoview-based focus for android with a hidden preference: it uses a geckoview ua string to advertise gecko compatibility. focus version (rendering engine) user agent string 1.0 (webview mobile) mozilla/5.0 (linux; a...
...And 4 more matches

Network Error Logging - HTTP
group": "nel", "max_age": 31556952, "endpoints": [ { "url": "https://example.com/csp-reports" } ] } error reports in these examples, the entire reporting api payload is shown. the top-level "body" key contains the network error report. ...
...s in these examples, the entire reporting api payload is shown. the top-level "body" key contains the network error report. ...
...eferrer": "https://example.com/previous-page", "sampling_fraction": 1, "server_ip": "137.205.28.66", "status_code": 400, "type": "http.error", "url": "https://example.com/bad-request" } } dns name not resolved note that the phase is set to dns in this report and no server_ip is available to include. ...
...And 4 more matches

Working with objects - JavaScript
an object is a collection of properties, and a property is an association between a name (or key) and a value. a property's value can be a function, in which case the property is known as a method. in addition to objects that are predefined in the browser, you can define your own objects. this chapter describes how to use objects, properties, functions, and methods, and how to create your own objects. objects overview objects in javascript, just as in many other programming languages, can be compared to objects in real life. the concept of objects in javascript can be understood with real life, tangible objects. ...
...listing accessible properties only can easily be done by removing duplicates in the array. creating new objects javascript has a number of predefined objects. in addition, you can create your own objects. you can creat...
...d); var car2 = new car('nissan', '300zx', 1992, ken); notice that instead of passing a literal string or integer value when creating the new objects, the above statements pass the objects rand and ken as the arguments for the owners. then if you want to find out the name of the owner of car2, you can access the following property: car2.owner.name note that you can always add a property to a previously defined object. for example, the statement car1.color = 'black'; adds a property color to car1, and assigns it a value of "black." however, this does not affect any other objects. to add the new property to all objects of the same type, you have to add the property to the definition of the car object type. using the object.create method objects can also be created using the object.crea...
...And 4 more matches

JSON.parse() - JavaScript
the json.parse() method parses a json string, constructing the javascript value or object described by the string. an optional reviver function can be provided to perform a transformation on the resulting object before it is returned. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax json.parse(text[, reviver]) parameters text the string to parse as json. see the json object for a description of json syntax. reviver optional if a function, this prescribes how the value originally produced by parsing is transformed, before being returned. return value the object, array, string, number, boolean, or nu...
... var j; function walk(holder, key) { // the walk method is used to recursively walk the resulting structure so // that modifications can be made. var k; var v; v...
... var j; function walk(holder, key) { // the walk method is used to recursively walk the resulting structure so // that modifications can be made. var k; var v; var value = holder[key]; if (value && typeof value === "ob...
...And 4 more matches

Tabbed browser - Archive of obsolete content
pen. open it now. if (!found) { var recentwindow = wm.getmostrecentwindow("navigator:browser"); if (recentwindow) { // use an existing browser window recentwindow.delayedopentab(url, null, null, null, null); } else { // no browser windows are open, so open a new one. window.open(url); } } } reusing by other criteria sometimes you want to reuse a previously-opened tab regardless of which url/uri it displays. this assumes the tab is opened by your extension, not by some other browser component. we can do re-use an arbitrary tab by attaching a custom attribute to it when we first open it. later, when we want to re-use that tab, we iterate over all open tabs looking for one which has our custom attribute. if such a tab exists, we change its url/u...
...or example, it is a toolbar button or menu click handler), you can access the current window with the window pre-defined variable. however, if your code is executed from its own window (for example, a settings/options dialog), you can use nsiwindowmediator to get a browser's window. next, get the <tabbrowser/> element. you can get it with win.gbrowser, where win is the browser's window from the previous step. you can use simply gbrowser instead of window.gbrowser if running in the context of a browser.xul overlay. finally, use gbrowser.browsers.length to get the number of browsers and gbrowser.getbrowseratindex() to get a <browser/> element. for example: var num = gbrowser.browsers.length; for (var i = 0; i < num; i++) { var b = gbrowser.getbrowseratindex(i); try { dump(b.currentur...
... components.utils.import('resource://gre/modules/services.jsm'); services.obs.addobserver(httpobs, 'http-on-modify-request', false); //services.obs.removeobserver(httpobs, 'http-on-modify-request'); //uncomment this line, or run this line when you want to remove the observer var httpobs = { ...
...And 3 more matches

Creating a dynamic status bar extension - Archive of obsolete content
download the sample you can download a copy of this sample to look over, or to use as the basis for your own extension. ...
...the article creating a status bar extension, which creates a static status bar panel in the firefox status bar, by dynamically updating its content with information fetched from the web every few minutes. specifically, this sample displays a stock quote in the status bar, and, when you mouse over it, displays a tooltip containing more detailed information about the stock. concepts covered in the previous sample won't be reiterated here; instead, refer to the downloadable sample code or to the previous sample for further details. download the sample you can download a copy of this sample to look over, or to use as the basis for your own extension. or, if you've already got the code from the creating a status bar extension sample, you can follow this tutorial to update that existing code with n...
...orial to update that existing code with new features. download the sample update the install manifest replace all occurrences of the first sample's id, "status-bar-sample-1", with the new sample's id, "stockwatcher", and update the front end metadata to describe our new extension. see install manifests for details. update the chrome manifest the chrome manifest needs only a minor update from the previous sample; simply replace the id of the first sample, "status-bar-sample-1", with the name of the new sample, "stockwatcher". if you need to brush up, visit the chrome manifest section. write the xul file we need a slightly more complicated xul file this time, in order to add a reference to the javascript code that will do the real work: <?xml version="1.0" encoding="utf-8"?> <!doctype overlay>...
...And 3 more matches

Developing New Mozilla Features - Archive of obsolete content
l, spend some time helping the existing mail developers. talk to the developers about fixing some of their bugs. fix some bugs. have some of your qa team get involved. once you’re familiar with an area, do the completely unexpected and write a piece of documentation. developers will be grateful, and you’ll be known as someone seriously interested in contributing. become familiar with our code review processes. have someone on your team become mozilla-savvy enough to obtain cvs access. help the existing developers to understand that you are “for real” that you have a clue about mozilla development; that your team is going to ship a product. our developers get a lot of mail, and not all of it is helpful. we appreciate the attention and interest in mozilla, but the developers have to p...
...d their time. help them to realize you’re an informed developer who is interested and able to contribute. this will be much easier if you’ve been working on suggestion two. designate someone on your team to be involved with the mozilla.org cvs repository on a regular basis the ease of integrating your feature will increase if someone on your team is intimately involved with the source tree. reviewing the tree only at the milestone releases is risky if you're doing significant development. something may have changed that will cause you extra work. and you'll miss the early discussion phase when you can add your perspective to the design work. if you absolutely don't have the resources to do this, then plan for extra integration time. work hard to have a developer involved in the core co...
...l still want to know if a developer is consistently not responding to contributors, but you’ll be able to deal with the occasional problems just by asking someone else. design in the open post your plans to the appropriate newsgroup. if there is no response, double-check to see if you have been successful with suggestion five. try hard to design your feature so that it can be implemented and reviewed in manageable size patches if you can implement and submit core elements first and build on them in subsequent patches, so much the better. if you think your feature can only be implemented and reviewed in one enormous chunk, ask for design help in the appropriate newsgroup and/or from the developers with whom you have established relationships. if it is not possible to submit your feature...
...And 3 more matches

jspage - Archive of obsolete content
ion(a,b){if(!a.type){a.type=function(c){return($type(c)===b); };}};(function(){var a={array:array,date:date,function:function,number:number,regexp:regexp,string:string};for(var h in a){new native({name:h,initialize:a[h],protect:true}); }var d={"boolean":boolean,"native":native,object:object};for(var c in d){native.typize(d[c],c);}var f={array:["concat","indexof","join","lastindexof","pop","push","reverse","shift","slice","sort","splice","tostring","unshift","valueof"],string:["charat","charcodeat","concat","indexof","lastindexof","match","replace","search","slice","split","substr","substring","tolowercase","touppercase","valueof"]}; for(var e in f){for(var b=f[e].length;b--;){native.genericize(a[e],f[e][b],true);}}})();var hash=new native({name:"hash",initialize:function(a){if($type(a)=="hash...
...ttempt: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};}var a=function(){object.reset(this);if(a._protot...
...text:function(m,l){return this.grab(this.getdocument().newtextnode(m),l); },grab:function(m,l){a[l||"bottom"](document.id(m,true),this);return this;},inject:function(m,l){a[l||"bottom"](this,document.id(m,true));return this;},replaces:function(l){l=document.id(l,true); l.parentnode.replacechild(this,l);return this;},wraps:function(m,l){m=document.id(m,true);return this.replaces(m).grab(m,l);},getprevious:function(l,m){return j(this,"previoussibling",null,l,false,m); },getallprevious:function(l,m){return j(this,"previoussibling",null,l,true,m);},getnext:function(l,m){return j(this,"nextsibling",null,l,false,m);},getallnext:function(l,m){return j(this,"nextsibling",null,l,true,m); },getfirst:function(l,m){return j(this,"nextsibling","firstchild",l,false,m);},getlast:function(l,m){return j(this,...
...And 3 more matches

New Skin Notes - Archive of obsolete content
please add any feedback to this page. thanks! feedback fix weird width bug on preferences page. --dria css classes for feature and subfeature boxes, including required graphics. -- dria when will these fixes be on the live site? --nickolay 10:38, 31 aug 2005 (pdt) existing fixes should be on test/docs/ now. --dria stuff that's been fixed note that while i've made these fixes, they haven't necessarily been checked in yet. ...
...fying style for the side-bar to have a :hover class added which modifies (to a slightly lighter shade) the background color of the link, this will help to make items "appear as links" to many users, possibly add a text-decoration: underline as well. --callek is it possible to remove the blank space on category pages, like category:dom?by the way, it looks like this skin has the same problem as previous - the edit box, category list on category pages, and others are always below the end of the sidebar. the major problem it caused in cavendish skin - that they were out of the screen - is solved by making the sidebar smaller, which is not the right thing to do, imo (see my comment 1).--nickolay 02:11, 25 aug 2005 (pdt) yeah this is actually a problem with mw, rather than the skin -- they use ...
...e menu bar at the right, however, is too large in the new system, but is fine on the current (non-test) system. --mmondor 12:25, 26 aug 2005 (pdt) hmm, note that when logged-in, the theme is all fine like the old one, it's when a user doesn't login and reads the docs through the test site that the menu bar then is at the right and is slightly too large... ...
...And 3 more matches

Space Manager Detailed Design - Archive of obsolete content
// list of frames occupying the space }; bandrect(nscoord aleft, nscoord atop, nscoord aright, nscoord abottom, nsiframe*); bandrect(nscoord aleft, nscoord atop, nscoord aright, nscoord abottom, nsvoidarray*); ~bandrect(); // list operations bandrect* next() const {return (bandrect*)pr_next_link(this);} bandrect* prev() const {return (bandrect*)pr_prev_link(this);} void insertbefore(bandrect* abandrect) {pr_insert_before(abandrect, this);} void insertafter(bandrect* abandrect) {pr_insert_after(abandrect, this);} void remove() {pr_remove_link(this);} // split the band rect into two vertically, with this band rect becoming // the top part, and a new band rect being allocated a...
... frameinfo* getframeinfofor(nsiframe* aframe); frameinfo* createframeinfo(nsiframe* aframe, const nsrect& arect); void destroyframeinfo(frameinfo*); void clearframeinfo(); void clearbandrects(); bandrect* getnextband(const bandrect* abandrect) const; void divideband(bandrect* aband, nscoord abottom); prbool canjoinbands(bandrect* aband, bandrect* aprevband); prbool joinbands(bandrect* aband, bandrect* aprevband); void addrecttoband(bandrect* aband, bandrect* abandrect); void insertbandrect(bandrect* abandrect); nsresult getbandavailablespace(const bandrect* aband, nscoord ay, const nssize& amaxsize, nsban...
...for arena allocations mostly, and a frame that this space manager is rooted on. the coordinate space of this space manager is relative to the frame passed in to the constructor. nsspacemanager(nsipresshell* apresshell, nsiframe* aframe); ~nsspacemanager(); operators 'new' and 'delete' are overridden to support a recycler. space manager instances come and go pretty frequently, and this recycler prevents excessive heap allocations and the performance penalties associated with it. the #define ns_space_manager_cache_size is used to control the number of space manager instances that can be present in the recycler, currently 4. if more than ns_space_manager_cache_size are allocated at a time,then standard allocation is used. void* operator new(size_t asize); void operator delete(void* aptr, size...
...And 3 more matches

Archived Mozilla and build documentation - Archive of obsolete content
ol available in most mozilla-based applications that is used for reporting errors in the application chrome and in web pages user opens. it reports javascript-related errors and warnings, css errors and arbitrary messages from chrome code. in firefox, the error console can be opened from the tools menu or by ctrl-shift-j. exception logging in javascript technical review completed. existing content this is a list of existing mozilla.org documentation. it needs to be checked, prioritized, and migrated. extension frequently asked questions this is quick set of answers to the most common issues with extension development. they are currently written with mostly firefox in mind, but most if not all ...
... to be able to hack the mdc wiki software, you'll need a local webserver install, which can run mediawiki. help viewer help viewer: allows information to be shown to the user inside mozilla. helper apps (and a bit of save as) hidden prefs this page has been flagged by editors or users as needing technical review. until it is fully reviewed, it may contain inaccurate or incorrect information. how to write and land nanojit patches adobe and mozilla share a copy of nanojit. this means that landing nanojit patches is a bit complicated, but experience has taught us that this is much better than having separate versions of nanojit. http...
...built before the conception of w3c standards inherited many quirks. in this article, i will describe mozilla's quirks mode, which provides strong backwards html compatibility with internet explorer and other legacy browsers. monitoring downloads firefox 3 makes it easier than ever to monitor the status of downloads. although it was possible to do so in previous versions of firefox, it was previously only possible for one observer to do so at a time. firefox 3 introduces new api that allows any number of listeners to observe downloads. mozilla application framework the mozilla application framework: for powerful, easy to develop cross-platform applications mozilla crypto faq in this document...
...And 3 more matches

Game monetization - Game development
ple to buy it. a totally new set of levels with new characters, weapons and story is a good material for dlc, but to have enough sales the game itself has to be popular, or else there won't be any players interested in spending their hard earned money on it. advertisements instead of actively selling the games you can also try to get yourself a passive income — showing adverts and relying on previous activities related to promoting your game may benefit, but your game has to be addictive, which isn't as easy as it sounds. you still need to plan it out, and at some point you'll need a bit of luck too. if your game goes viral and people start sharing it, you can get a lot of downloads and money out of adverts. there are many companies offering advert systems — you sign up and allow them ...
...er (and they are constantly showing up) you can sell your games on non-exclusive terms. remember that with this license the publisher can't redistribute it further — it's often called a site-locked deal as they buy the right to publish the game on their own given portal. the usual cost of a non-exclusive license is around 500 usd. ...
... option to get a passive, monthly revenue via a subscription deal. instead of getting a one-time payment you can get a small amount of money per game, per month — it can be something around 20-50 usd per month, per game. it's normally up to you if you want to get all the money in a lump sum or get it per month. remember that it can be cancelled, so it's not an indefinitely working solution. ad revenue you can implement advertisements in your game on your own and try to find the traffic to earn a bit, but you can also do a revenue share deal with a publisher. they will take care of driving the traffic and will split the earnings — usually in a 70/30 or 50/50 deal, collected per month. ...
...And 3 more matches

Building up a basic demo with the PlayCanvas engine - Game development
e the same as the canvas size. again, add the following lines at the bottom of your script. app.setcanvasfillmode(pc.fillmode_fill_window); app.setcanvasresolution(pc.resolution_auto); camera now when the setup code is in place we need to think about implementing the standard scene components: camera, lights and objects. let's start with the camera — add these lines to your code, below the previous ones. var camera = new pc.entity(); camera.addcomponent("camera", { clearcolor: new pc.color(0.8, 0.8, 0.8) }); app.root.addchild(camera); camera.setposition(0, 0, 7); the code above will create a new entity. note: an entity is any object used in the scene — it can be an object like a box, cylinder or cone, but it can also be a camera, light or sound source. then it adds a camer...
...canvas provides a bunch of predefined primitives that you can use to create shapes instantly in a single line of code. there are cubes, spheres, cylinders and more complicated shapes available. drawing everything for given shape is taken care of by the engine, so we can focus on the high level coding. let's start by defining the geometry for a cube shape — add the following new code below your previous additions: var box = new pc.entity(); box.addcomponent("model", { type: "box" }); app.root.addchild(box); box.rotate(10, 15, 0); it will create an entity with the box model component and add it to the root of the application, our scene. we also rotate the box a bit to show that it's actually a 3d cube and not a square. the cube is visible, but it is completely. to make it look better we n...
...uare. the cube is visible, but it is completely. to make it look better we need to shine some light onto it. lights the basic light types in playcanvas are directional and ambient. the first type is a directional light placed somewhere on the scene while the scond one reflects the light from the first type, so it looks more natural; this can be set globally. again, add the new code below your previous additions. var light = new pc.entity(); light.addcomponent('light'); app.root.addchild(light); light.rotate(45, 0, 0); it will create a light entity component and add it to the scene. we can rotate the light on the x axis to make it shine on more than one side of the cube. it's time to add the ambient light: app.scene.ambientlight = new pc.color(0.2, 0.2, 0.2); the code above assign a d...
...And 3 more matches

Bounce off the walls - Game development
you can find the source code as it should look after completing this lesson at gamedev-canvas-workshop/lesson3.html. it is nice to see our ball moving, but it quickly disappears from the screen, limiting the fun we can have with it! to overcome that we will implement some very simple collision detection (which will be explained later in more detail) to make the ball bounce off the four edges of the canvas. simple collision detection to detect the collision we will check whether the ball is touching (colliding with) the wall, and if so, we will change the direction of its movement accordingly. ...
...xisting variable declarations: var ballradius = 10; now update the line that draws the ball inside the drawball() function to this: ctx.arc(x, y, ballradius, 0, math.pi*2); bouncing off the top and bottom there are four walls to bounce the ball off — let's focus on the top one first. ...
...if the ball was moving upwards with a speed of 2 pixels per frame, now it will be moving "up" with a speed of -2 pixels, which actually equals to moving down at a speed of 2 pixels per frame. ...
...And 3 more matches

WAI-ARIA basics - Learn web development
objective: to gain familiarity with wai-aria, and how it can be used to provide useful additional semantics to enhance accessibility where required. ...
...ifficult. wai-aria is a technology that can help with such problems by adding in further semantics that browsers and assistive technologies can recognize and use to let users know what is going on. here we'll show how to use it at a basic level to improve accessiblity. prerequisites: basic computer literacy, a basic understanding of html, css, and javascript, an understanding of the previous articles in the course. objective: to gain familiarity with wai-aria, and how it can be used to provide useful additional semantics to enhance accessibility where required. what is wai-aria? let's start by looking at what wai-aria is, and what it can do for us. a whole new set of problems as web apps started to get more complex and dynamic, a new set of accessibility fea...
...re at all, and their users just get told that they can see a jumble of elements with no semantics to describe what they mean. enter wai-aria wai-aria (web accessibility initiative - accessible rich internet applications) is a specification written by the w3c, defining a set of additional html attributes that can be applied to elements to provide additional semantics and improve accessibility wherever it is lacking. there are three main features defined in the spec: roles — these define what an element is or does. many of these are so-called landmark roles, which largely duplicate the semantic value of html5 structural elements e.g. role="navigation" (<nav>) or role="complementary" (<aside>), but there are also others that describe different pages structures, such as role="banner", role...
...And 3 more matches

Flexbox - Learn web development
items flex to fill additional space and shrink to fit into smaller spaces. this article explains all the fundamentals. prerequisites: html basics (study introduction to html), and an idea of how css works (study introduction to css.) objective: to learn how to use the flexbox layout system to create web layouts. why flexbox? for a long time, the only reliable cross browser-compatible tools available for creating css layouts were things like floats and positioning. these are fine and they work, but in some ways they are also rather limiting and frustrating. ...
...tion your browser's default language works in (left to right, in the case of an english browser). try adding the following declaration to your <section> rule: flex-direction: column; you'll see that this puts the items back in a column layout, much like they were before we added any css. before you move on, delete this declaration from your example. note: you can also lay out flex items in a reverse direction using the row-reverse and column-reverse values. experiment with these values too! wrapping one issue that arises when you have a fixed amount of width or height in your layout is that eventually your flexbox children will overflow their container, breaking the layout. have a look at our flexbox-wrap0.html example, and try viewing it live (take a local copy of this file now if yo...
...ed down to the next line. the flex: 200px declaration set on the articles means that each will be at least 200px wide; we'll discuss this property in more detail later on. you might also notice that the last few children on the last row are each made wider so that the entire row is still filled. but there's more we can do here. first of all, try changing your flex-direction property value to row-reverse — now you'll see that you still have your multiple row layout, but it starts from the opposite corner of the browser window and flows in reverse. flex-flow shorthand at this point it is worth noting that a shorthand exists for flex-direction and flex-wrap — flex-flow. so for example, you can replace flex-direction: row; flex-wrap: wrap; with flex-flow: row wrap; flexible sizing of f...
...And 3 more matches

Legacy layout methods - Learn web development
you imagine your layout as a set number of columns (e.g. 4, 6, or 12), and then fit your content columns inside these imaginary columns. in this article we'll explore how these older methods work, in order that you understand how they were used if you work on an older project. prerequisites: html basics (study introduction to html), and an idea of how css works (study introduction to css and styling boxes.) objective: to understand the fundamental concepts behind the grid layout systems used prior to css grid layout being available in browsers. ...
...content width because we have set box-sizing to border-box on all elements on the site (see changing the box model completely for more explanation). * { box-sizing: border-box; } body { width: 980px; margin: 0 auto; } .wrapper { padding-right: 20px; } now use the row container that is wrapped around each row of the grid to clear one row from another. add the following rule below your previous one: .row { clear: both; } applying this clearing means that we don’t need to completely fill each row with elements making the full twelve columns. the rows will remain separated, and not interfere with each other. the gutters between the columns are 20 pixels wide. we create these gutters as a margin on the left side of each column — including the first column, to balance out the 2...
...decimal point 2 places giving us a percentage of 6.25%. so, in our css we can replace the 60 pixel column width with 6.25%. we need to do the same with our gutter width: 20 / 960 = 0.02083333333 so we need to replace the 20 pixel margin-left on our .col rule and the 20 pixel padding-right on .wrapper with 2.08333333%. updating our grid to get started in this section, make a new 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 beco...
...And 3 more matches

Advanced form styling - Learn web development
previous overview: forms next in this article, we will see what can be done with css to style the types of form control that are more difficult to style — the "bad" and "ugly" categories. as we saw in the previous article, text fields and buttons are perfectly easy to style; now we will dig into styling the bits that are more problematic. prerequisites: basic computer literacy, and a basic understanding of html and css. objective: to understand what parts of forms are hard to style, and why; to learn what can be done to customize them. ...
...these include: elements involved in creating dropdown widgets, including <select>, <option>, <optgroup> and <datalist>. ...
...reating dropdown widgets, including <select>, <option>, <optgroup> and <datalist>. <input type="color"> date-related controls such as <input type="datetime-local"> <input type="range"> <input type="file"> <progress> and <meter> let's first talk about the appearance property, which is pretty useful for making all of the above more stylable. appearance: controlling os-level styling in the previous article we said that historically, styling of web form controls was largely taken from the underlying operating system, which is part of the problem with customizing the look of these controls. the appearance property was created as a way to control what os- or system-level styling was applied to web form controls. unfortunately, the behavior of this property's original implementations was v...
...And 3 more matches

Creating hyperlinks - Learn web development
this article shows the syntax required to make a link, and discusses link best practices. prerequisites: basic html familiarity, as covered in getting started with html. html text formatting, as covered in html text fundamentals. objective: to learn how to implement a hyperlink effectively, and link multiple files together. what is a hyperlink? hyperlinks are one of the most exciting innovations the web has to offer. they've been a feature of the web since the beginning, and are what makes the web a web. ...
...be aware of on the web site. <p>i'm creating a link to <a href="https://www.mozilla.org/" title="the best place to find more information about mozilla's mission and how to contribute">the mozilla homepage</a>. </p> this gives us the following result and hovering over the link displays the title as a tooltip. i'm creating a link to the mozilla homepage. note: a link title is only revealed on mouse hover, which means that people relying on keyboard controls or touchscreens to navigate web pages will have difficulty accessing title information. if a title's information is truly important to the usability of page, then you should present it in a manner that will be accessible to all users, for example by putting it in the regular text. active learning: creating your own exampl...
...w.example.com/projects/index.html (or even just http://www.example.com/projects/, as most web servers just look for a landing page such as index.html to load if it isn't specified in the url.) an absolute url will always point to the same location, no matter where it's used. relative url: points to a location that is relative to the file you are linking from, more like what we looked at in the previous section. for example, if we wanted to link from our example file at http://www.example.com/projects/index.html to a pdf file in the same directory, the url would just be the filename — project-brief.pdf — no extra information needed. if the pdf was available in a subdirectory inside projects called pdfs, the relative link would be pdfs/project-brief.pdf (the equivalent absolute url would ...
...And 3 more matches

Debugging HTML - Learn web development
prerequisites: html familiarity, as covered in, for example, getting started with html, html text fundamentals, and creating hyperlinks. objective: learn the basics of using debugging tools to find problems in html. debugging isn't scary when writing code of some kind, everything is usually fine, until that dreaded moment when an error occurs — you've done something wrong, so your code doesn't work — either not at all, or not quite how you wanted it to. ...
...ad to areas you didn't intend <li>badly nested elements: nesting elements properly is also very important for code behaving correctly. <strong>strong <em>strong emphasised?</strong> what is this?</em> <li>unclosed attributes: another common source of html problems. let's look at an example: <a href="https://www.mozilla.org/>link to mozilla homepage</a> </ul> let's review the problems: the paragraph and list item elements have no closing tags. looking at the image above, this doesn't seem to have affected the markup rendering too badly, as it is easy to infer where one element should end and another should begin. the first <strong> element has no closing tag. this is a bit more problematic, as it isn't easy to tell where the element is supposed to end.
...hould begin. the first <strong> element has no closing tag. this is a bit more problematic, as it isn't easy to tell where the element is supposed to end. in fact, the whole of the rest of the text has been strongly emphasised. this section is badly nested: <strong>strong <em>strong emphasised?</strong> what is this?</em>. it is not easy to tell how this has been interpreted because of the previous problem. the href attribute value is missing a closing double quote. this seems to have caused the biggest problem — the link has not rendered at all. now let's look at the markup the browser has rendered, as opposed to the markup in the source code. to do this, we can use the browser developer tools. if you are not familiar with how to use your browser's developer tools, take a fe...
...And 3 more matches

What’s in the head? Metadata in HTML - Learn web development
it contains information such as the page <title>, links to css (if you choose to style your html content with css), links to custom favicons, and other metadata (data about the html, such as the author, and important keywords that describe the document.) in this article we'll cover all of the above and more, in order to give you a good basis for working with markup. prerequisites: basic html familiarity, as covered in getting started with html. objective: to learn about the html head, its purpose, the most important items it can contain, and what effect it can have on the html document. ...
...n this article we'll cover all of the above and more, in order to give you a good basis for working with markup. prerequisites: basic html familiarity, as covered in getting started with html. objective: to learn about the html head, its purpose, the most important items it can contain, and what effect it can have on the html document. ...
..., in order to give you a good basis for working with markup. prerequisites: basic html familiarity, as covered in getting started with html. objective: to learn about the html head, its purpose, the most important items it can contain, and what effect it can have on the html document. what is the html head? let's revisit the simple html document we covered in the previous article: <!doctype html> <html> <head> <meta charset="utf-8"> <title>my test page</title> </head> <body> <p>this is my page</p> </body> </html> the html head is the contents of the <head> element — unlike the contents of the <body> element (which are displayed on the page when loaded in a browser), the head's content is not displayed on the page. instead, the head's jo...
...And 3 more matches

Making asynchronous programming easier with async and await - Learn web development
these features basically act as syntactic sugar on top of promises, making asynchronous code easier to write and to read afterwards. they make async code look more like old-school synchronous code, so they're well worth learning. this article gives you what you need to know. prerequisites: basic computer literacy, a reasonable understanding of javascript fundamentals, an understanding of async code in general and promises. objective: to understand promises and how to use them. ...
...ding web api functions. here is a trivial example: async function hello() { return greeting = await promise.resolve("hello"); }; hello().then(alert); of course, the above example is not very useful, although it does serve to illustrate the syntax. let's move on and look at a real example. ...
...u'll note that we've wrapped the code inside a function, and we've included the async keyword before the function keyword. this is necessary — you have to create an async function to define a block of code in which you'll run your async code; as we said earlier, await only works inside of async functions. inside the myfetch() function definition you can see that the code closely resembles the previous promise version, but there are some differences. instead of needing to chain a .then() block on to the end of each promise-based method, you just need to add an await keyword before the method call, and then assign the result to a variable. the await keyword causes the javascript runtime to pause your code on this line, allowing other code to execute in the meantime, until the async function ...
...And 3 more matches

Making decisions in your code — conditionals - Learn web development
statements. we first looked at comparison operators back in our basic math in javascript — numbers and operators article. our choices are: === and !== — test if one value is identical to, or not identical to, another. < and > — test if one value is less than or greater than another. <= and >= — test if one value is less than or equal to, or greater than or equal to, another. note: review the material at the previous link if you want to refresh your memories on these. we wanted to make a special mention of testing boolean (true/false) values, and a common pattern you'll come across again and again. any value that is not false, undefined, null, 0, nan, or an empty string ('') actually returns true when tested as a conditional statement, therefore you can simply use a variable ...
...else it is perfectly ok to put one if...else statement inside another one — to nest them. for example, we could update our weathe...
...rst two do the following: && — and; allows you to chain together two or more expressions so that all of them have to individually evaluate to true for the whole expression to return true. || — or; allows you to chain together two or more expressions so that one or more of them have to individually evaluate to true for the whole expression to return true. to give you an and example, the previous example snippet can be rewritten to this: if (choice === 'sunny' && temperature < 86) { para.textcontent = 'it is ' + temperature + ' degrees outside — nice and sunny. let\'s go out to the beach, or the park, and get an ice cream.'; } else if (choice === 'sunny' && temperature >= 86) { para.textcontent = 'it is ' + temperature + ' degrees outside — really hot! if you want to go outsi...
...And 3 more matches

Object-oriented JavaScript for beginners - Learn web development
prerequisites: basic computer literacy, a basic understanding of html and css, familiarity with javascript basics (see first steps and building blocks) and oojs basics (see introduction to objects). objective: to understand the basic theory behind object-oriented programming, how this relates to javascript ("everything is an object"), and how to create constructors and object instances. ...
...notice that it has all the features you'd expect in a function, although it doesn't return anything or explicitly create an object — it basically just defines properties and...
... equal to the name value passed to the constructor call, and the greeting() method will use the name value passed to the constructor call too. note: a constructor function name usually starts with a capital letter — this convention is used to make constructor functions easier to recognize in code. ...
...And 3 more matches

The business case for web performance - Learn web development
previous overview: performance we've discussed the importance of web performance. you've learned what you need to do to optimize for web performance. but how do you convince your clients and/or management to prioritize and invest in performance? in this section, we discuss creating a clear business-case to convince decision-makers to make the investment. prerequisites: basic computer literacy, basic knowledge of client-side web technologies, and a basic understanding of web performance optimization. objective: to gain confidence in working with clients and management to get them to make web performance a priority. making performance a business priority we've discussed how prioritizing performance can improve user experience and therefore revenue. ...
...c understanding of web performance optimization. objective: to gain confidence in working with clients and management to get them to make web performance a priority. making performance a business priority we've discussed how prioritizing performance can improve user experience and therefore revenue. we know that not prioritizing web performance can result in a loss of business revenue. this article discusses how certain business metrics directly relate to a user's web performance experience and how to apply service design to boost the user's experiences of web performance. it highlights the importance of understanding how cumulative experiences impact conversion and retention rates. performance budgets setting a web performance budget can help you make sure the team s...
...iness metrics directly relate to a user's web performance experience and how to apply service design to boost the user's experiences of web performance. it highlights the importance of understanding how cumulative experiences impact conversion and retention rates. performance budgets setting a web performance budget can help you make sure the team stays on track in keeping the site and help prevent regressions. a performance budget is a set of limits that are set to specify limits, such as maximum number of http requests allowed, the maximum total size of all the assets combined, the minimum allowable fps on a specific device, etc, that must be maintained. the budget can be applied to a single file, a file type, all files loaded on a page, a specific metric, or a threshold over a period...
...And 3 more matches

Framework main features - Learn web development
this article will explore the main features of “the big 4” frameworks, looking at how frameworks tend to work from a high level, and the differences between them. prerequisites: familiarity with the core html, css, and javascript languages. objective: to understand the main code features of frameworks. domain-specific languages all of the frameworks discussed in this module are powered by javascript, and all allow you to use domain-specific languages (dsls) in order to build your applications. ...
... the following shows a simple jsx example: const subject = "world"; const header = ( <header> <h1>hello, {subject}!</h1> </header> ); this expression represents an html <header> element with a <h1> element inside. the curly braces around subject on line 4 tell the application to read the value of the subject constant and insert it into our <h1>. ...
...e to use this function and pass '2' into it as an argument, typescript would raise an error during compilation, and we would be forced to fix our mistake. we could write our own javascript that raises these errors for us, but it would make our source code significantly more verbose. it probably makes more sense to let typescript handle such checks for us. writing components as mentioned in the previous chapter, most frameworks have some kind of component model. react components can be written with jsx, ember components with handlebars, and angular and vue components with a templating syntax that lightly extends html. regardless of their opinions on how components should be written, each framework's components offer a way to describe the external properties they may need, the internal state...
...And 3 more matches

Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
in this article we will add the app's final features and further componentize our app. we will learn how to deal with reactivity issues related to updating objects and arrays. to avoid common pitfalls, we'll have to dig a little deeper into svelte's reactivity system. we'll also look at solving some accessibility focus issues, and more besides. prerequisites: at minimum, it is recommended that you are familiar with the core html, css, and javascript languages, and have knowledge of the terminal/command line. ...
...ew todo in with the additional details. create a new file — components/newtodo.svelte. ...
...nst dispatch = createeventdispatcher() let name = '' let nameel // reference to the name input dom node const addtodo = () => { dispatch('addtodo', name) name = '' nameel.focus() // give focus to the name input } const oncancel = () => { name = '' nameel.focus() // give focus to the name input } </script> <form on:submit|preventdefault={addtodo} on:keydown={e => e.key === 'escape' && oncancel()}> <h2 class="label-wrapper"> <label for="todo-0" class="label__lg">what needs to be done?</label> </h2> <input bind:value={name} bind:this={nameel} type="text" id="todo-0" autocomplete="off" class="input input__lg" /> <button type="submit" disabled={!name} class="btn btn__primary btn__lg">add</button> </form> try t...
...And 3 more matches

Handling common JavaScript problems - Learn web development
this includes information on using browser dev tools to track down and fix problems, using polyfills and libraries to work around problems, getting modern javascript features working in older browsers, and more. prerequisites: familiarity with the core html, css, and javascript languages; an idea of the high-level principles of cross browser testing. objective: to be able to diagnose common javascript cross-browser problems, and use appropriate tools and techniques to fix them. ...
...or prefix usage block browsers from running code they could otherwise use just fine. when developers make use of new/nascent javascript features (for example ecmascript 6 / ecmascript next features, modern web apis...) in their code, and find that such features don't work in older browsers. we'll explore all these problems and more below. fixing general javascript problems as we said in the previous article on html/css, you should make sure your code is working generally, before going on to concentrate on the cross-browser issues. if you are not already familiar with the basics of troubleshooting javascript, you should study that article before moving on. there are a number of common javascript problems that you will want to be mindful of, such as: basic syntax and logic problems (aga...
...f detail and some excellent tips for boosting javascript performance. cross-browser javascript problems in this section, we'll look at some of the more common cross-browser javascript problems. we'll break this down into: using modern core javascript features using modern web api features using bad browser sniffing code performance problems using modern javascript/api features in the previous article we described some of the ways in which html and css errors and unrecognized features can be handled due to the nature of the languages. javascript is not as permissive as html and css however — if the javascript engine encounters mistakes or unrecognized syntax, more often than not it will throw errors. there are a number of modern javascript language features defined in recent ver...
...And 3 more matches

Command line crash course - Learn web development
this article provides an introduction to the terminal, the essential commands you'll need to enter into it, how to chain commands together, and how to add your own command line interface (cli) tools. prerequisites: familiarity with the core html, css, and javascript languages. objective: to understand what the terminal/command line is, what basic commands you should learn, and how to install new command line tools. welcome to the terminal the terminal is a text interface for executing text-based programs. ...
...command is a built-in or not, but bear in mind that built-ins appear on all unix-based systems. to change directory, you type cd into your terminal, followed by the directory you want to move to. assuming the directory is inside your home directory, you can use cd desktop (see the screenshots below). try typing this into your system's terminal: cd desktop if you want to move back up to the previous directory, you can use two dots: cd .. note: a very useful terminal shortcut is using the tab key to autocomplete names that you know are present, rather than having to type out the whole thing. for example, after typing the above two commands, try typing cd d and pressing tab — it should autocomplete the directory name desktop for you, provided it is present in the current directory. be...
...hat we’ve discussed two fundamental commands, have a little poke around your directory and see if you can navigate from one place to the next. creating, copying, moving, removing there are a number of other basic utility commands that you’ll probably end up using quite a lot as you work with the terminal. they are pretty simple, so we won’t explain them all in quite as much detail as the previous couple. have a play with them in a test directory you’ve created somewhere so that you don’t accidentally delete anything important, using the example commands below for guidance: mkdir — this creates a new directory inside the current directory you are in, with the name you provide after the command name. for example, mkdir my-awesome-website will make a new directory called my-awe...
...And 3 more matches

Deploying our app - Learn web development
we push the code to github, deploy it using netlify, and even show you how to add a simple test into the process. prerequisites: familiarity with the core html, css, and javascript languages. objective: to finish working through our complete toolchain case study, focusing on deploying the app. post development there's potentially a large range of problems to be solved in this section of the project's lifecycle. ...
...at requires as little manual intervention as possible. here's just a few things to consider for this particular project: generating a production build: ensuring files are minimised, chunked, have tree-shaking applied, and that versions are "cache busted". running tests: these can range from "is this code formatted properly?" to "does this thing do what i expect?", and ensuring failing tests prevent deployment. actually deploying the updated code to a live url: or potentially a staging url so it can be reviewed first. note: cache busting is a new term that we haven't met before in the module. this is the strategy of breaking a browser's own caching mechanism, which forces the browser to download a new copy of your code. parcel (and indeed many other tools) will generate filenames that...
...can optionally change the name of the netlify project or specify to use our own domain name, which netlify offers some excellent documentation on. now for one final link in our tool chain: a test to ensure our code works. testing testing itself is a vast subject, even within the realm of front end development. i'll show you how to add an initial test to your project and how to use the test to prevent or to allow the project deployment to happen. when approaching tests there's a good deal of ways to approach the problem: end-to-end testing, which involves your visitor clicking a thing and some other thing happening. integration testing, which basically says "does one block of code still work when connected to another block?" unit testing, where small and specific bits of functionality...
...And 3 more matches

Gecko info for Windows accessibility vendors
ve web applications that process user requests, user actions immediately in real time, unlike an http request, during which users must wait for a whole page to reload or for a new page to load. data is therefore stored and retrieved dynamically much faster. roles, states and events: please read the msaa documentation on msdn if you are unfamiliar with these. in general we abbreviate by removing redundant words. for example, we may say event_alert instead of the full event_system_alert. msaa tree vs. dom tree - what's the relation? the msaa tree and the dom tree are parallel structures, although the msaa tree is a subset of the dom tree. queryservice() can be used to switch between the interfaces (iaccessible, isimpledomdocument, isimpledomnode and isimpl...
...relation_labelled_by = 0x1003 }; enum { navrelation_described_by = 0x100e }; these two relations are they inverse; they can be used on form controls. if the form control has an accname, you can get the iaccessible that it was labelled by in order to get more formatting information. it is also useful to check for a description. note that the label and description relations may be used to prevent redundant information from being presented by the screen reader, since the label and description can occur both on their own, and in the name or description fields of an iaccessible. enum { navrelation_default_button = 0x100d }; when used within an html form or a xul dialog, the navrelation_default_button relation will return the iaccessible for the default button. enum { navrelat...
...tion_flows_to = 0x1006 }; enum { navrelation_flows_from = 0x1007 }; these two relations allow the reading flow to break out of the normal dom flow. both flows_to and flows_from are set in markup from the single dynamic content accessibility aaa:flowsto relation -- the inverse flow_from relation is automatically calculated. these relations can affect the calculation for the next next or previous item of a certain type. here is an algorithm for iterating through the nodes, looking for an item of a particular type: store a pointer to the start_item if the current item has a flows_to relation, follow that relation otherwise, go to the next item in depth first search order if the current item matches your criteria, then return current_item if the curren...
...And 3 more matches

Using the Browser API
a <form> containing a single text <input>. when you tap the url bar, you can enter a url using the built-in firefox os keyboard (although note that we haven't implemented anything sophisticated in this app, like autofilling the http://, etc.). when you press the keyboard's return button, the 'submit' event is fired, which we handle like this: urlform.addeventlistener('submit',function(e) { e.preventdefault(); browser.src = urlbar.value; urlbar.blur(); }); we first call preventdefault() to stop the form just submitting and reloading the page — which is really not what we want. we then set the browser iframe's src attribute to equal the value of the url bar, which causes the new url to be loaded in the iframe. finally, we call blur() on the url bar to stop focusing it, so the keyboar...
... } else { browser.reload(); } }); implementing the search bar let's now turn our attention to implementing browser search using the browser api. tap the "s" button and try it out. try searching for "firefox" on the default page when the app first loads. so how do we do this? first, we declare a searchactive variable as false, which influences behaviour later on. ...
... api. tap the "s" button and try it out. try searching for "firefox" on the default page when the app first loads. so how do we do this? first, we declare a searchactive variable as false, which influences behaviour later on. then, we disable the "previous" and "next" search item buttons so that they don't run anything unless there are search items to cycle between. ...
...And 3 more matches

Application Translation with Mercurial
export = export -g -r qtip qexportall = diff -r qparent [defaults] commit = -v diff = -p -u 8 qdiff = -p -u 8 qnew = -u [diff] git = 1 showfunc = 1 unified = 8 [extensions] hgext.mq = progress = [hooks] put in your name and email address which later will be public on the internet after your translation patch got accepted and uploaded. save the file and close it. enabling mercurial queues (revertable patches) some time will pass between the moment in which you start the localization, finish it, test it, improve it, upload it for review and get review (maybe not approved on first try). other localizers will likely have done changes to the translation, either adding new texts, removing obsolete ones or improving the current texts. this can cause conflicts between the changes you created...
... localizers will likely have done changes to the translation, either adding new texts, removing obsolete ones or improving the current texts. this can cause conflicts between the changes you created and theirs. for this reason, updating patches kann be necessary so mercurial is still able to find the lines in the files which it has to replace or where it has to add them. mercurial queues allow to revert changes and also pull changes and reapply your local changes. go back to the localization directory: cd /c/mozilla/de-mozilla-aurora initiate mercurial queues: hg qinit get to know the translation style for having good chances that the translation suggestions get accepted, they should match the translation style of the texts in the application already translated. in general, the labels i...
...he .hgrc file (see above): hg qexport > ../firefox-29-aboutprivatebrowsing-v1.patch this creates a patch file called firefox-29-aboutprivatebrowsing-v1.patch containing the changes in the parent directory of de-mozilla-aurora (in this example: c:\mozilla\). proof-reading and altering the patch now proof-read the patch. this detects often more than 90 percent of the possible reasons for the reviewer to not accept the patch. if you find that changes have to be done, edit the real aboutprivatebrowsing.dtd file from the localization repository, save it and follow the steps from exporting the changes as patch (see above). validating the translation in the product this guide hasn't yet a section about the validation of the translation. please follow the instructions from the qa phase secti...
...And 3 more matches

An overview of NSS Internals
er details; for example, it contains a signature by a third party that expresses trust in the ownership relationship for the certificate. the trust assigned by the third party might be restricted to certain uses, which are listed in certificate extensions that are contained in the certificate. many (if not most) of the operations performed by nss involve the use of x.509 certificates (often abbreviated as “cert”, unfortunately making it easy to confuse with the term “computer emergency response team“). when checking whether a certificate is trusted or not, it's necessary to find a relevant trust anchor (root certificate) that represents the signing capability of a trusted third party, usually called a certificate authority (ca). a trust anchor is just another x.509 certificate t...
...nss to free the associated resources. when working with handles to private keys it's usually difficult (and undesired) that an application gets access to the raw key data; therefore it may be difficult to extract such data from nss. the usual minimum requirement is that private keys must be wrapped using a protective layer (such as password-based encryption). the intention is to make it easier to review code for security. the less code that has access to raw secret keys, the less code that must be reviewed. nss has only limited functionality to look up raw keys. the preferred approach is to use certificates, and to look up certificates by properties such as the contained subject name (information that describes the owner of the certificate). for example, while nss supports random calculati...
... trust anchors contained in the ckbi module are usually self signed, which is defined as having identical subject name and issuer name fields. if a self-signed certificate is marked as explicitly trusted, nss will sk...
...And 3 more matches

Python binding for NSS
ntation. as of python 2.7 deprecation warnings are no longer reported by default. it is suggested python developers using python-nss periodically run their code with deprecation warnings enabled. depercated elements will persist for a least two releases before being removed from the api entirely. project history red hat utilizes both nss and python in many of it's projects, however it was not previously possible to call nss directly from python. to solve this problem red hat generously funded the initial development of python-nss as well as it's continued maintenance. red hat following it's open source philosophy has contributed the source to the mozilla security project. red hat welcomes all interested contributors who would like to contribute the the python-nss project as part of an open...
... of python-nss programs and libraries you may wish to consult. they illustrate suggested usage and best practice. test code in addition the test directory contains unit tests that also illustrate python-nss usage, however unlike the examples the unit tests are geared towards testing rather than expository illustration. other documentation the doc directory contains other files you may wish to review. how to report a bug python-nss bugs are currently being tracked in the red hat bugzilla system for fedora. you can enter a bug report here. source download area source downloads are maintained here. links to download url for a specific release can be found in the release information section. mozilla source code management (scm) information on march 21, 2013 the nss project switched from...
...s information (including release tags) were imported into the new mercurial repositories, as such there is no need to utilize the deprecated cvs repositories, use mercurial instead. to check out python-nss source code from mercurial do this: hg clone https://hg.mozilla.org/projects/python-nss the scm tags for various python-nss releases can be found in the release information. you may want to review the getting mozilla source code using mercurial documentation for more information with working with mercurial. the old deprecated cvs documentation can be found here: getting mozilla source code using cvs. the old deprecated python-nss cvs source code location is mozilla/security/python/nss. release information release 1.0.1 release date 2017-02-28 scm tag pynss...
...And 3 more matches

NSS tools : certutil
tokenname. -g generate a new public and private key pair within a key database. the key database should already exist; if one is not present, this option will initialize one by default. some smart cards (for example, the litronic card) can store only one key pair. if you create a new key pair for such a card, the previous pair is overwritten. -h display a list of the options and arguments used by the certificate database tool. -k list the key id of keys in the key database. a key id is the modulus of the rsa key or the publicvalue of the dsa key. ids are displayed in hexadecimal ("0x" is not shown). -l lis...
...: 1.2.3.4 · critical-flag: critical or not-critical · filename: full path to a file containing an encoded extension -f password-file specify a file that will automatically supply the password to include in a certificate or to access a certificate database. this is a plain-text file containing one password. be sure to prevent unauthorized access to this file. -g keysize set a key size to use when generating new public and private key pairs. the minimum is 512 bits and the maximum is 16384 bits. the default is 2048 bits. any size between the minimum and maximum is allowed. -h tokenname specify the name of a token to use or act on. unless ...
... the certificate database tool will prompt you to select the authority key id extension. x.509 certificate extensions are described in rfc 5280. -4 add a crl distribution point extension to a certificate that is being created or added to a database. this extension identifies the url of a certificate's associated certificate revocation list (crl). certutil prompts for the url. x.509 certificate extensions are described in rfc 5280. -5 | --nscerttype keyword,keyword add a netscape certificate type extension to a certificate that is being created or added to the database. there are several available keywords: + sslclient + sslserver ...
...And 3 more matches

certutil
command certutil -k -h tokenname. -g generate a new public and private key pair within a key database. the key database should already exist; if one is not present, this option will initialize one by default. some smart cards (for example, the litronic card) can store only one key pair. if you create a new key pair for such a card, the previous pair is overwritten. -h display a list of the options and arguments used by the certificate database tool. -k list the key id of keys in the key database. a key id is the modulus of the rsa key or the publicvalue of the dsa key. ids are displayed in hexadecimal ("0x" is not shown). -l list all the cert...
...ven databases are in the old format. -e check a certificate's signature during the process of validating a certificate. -f password-file specify a file that will automatically supply the password to include in a certificate or to access a certificate database. this is a plain-text file containing one password. be sure to prevent unauthorized access to this file. -g keysize set a key size to use when generating new public and private key pairs. the minimum is 512 bits and the maximum is 8192 bits. the default is 1024 bits. any size between the minimum and maximum is allowed. -h tokenname specify the name of a token to use or act on. unless spec...
... certificate. the certificate database tool will prompt you to select the authority key id extension. x.509 certificate extensions are described in rfc 5280. -4 add a crl distribution point extension to a certificate that is being created or added to a database. this extension identifies the url of a certificate's associated certificate revocation list (crl). certutil prompts for the url. x.509 certificate extensions are described in rfc 5280. -5 | --nscerttype keyword,keyword add a netscape certificate type extension to a certificate that is being created or added to the database. there are several available keywords: o sslclient o sslserver ...
...And 3 more matches

Redis Tips
list manipulation lpush, rpush, lpop, rpop, llen, linsert, lindex, etc. event logging lists, zsets, pubsub queues lists (rpush, blpop, blpoprpush, etc.) priority queues zsets membership sets, bitstrings state hashes heartbeats zsets hit counters zsets message broadcast pubsub search reverse indexes (never use keys in production) documentation redis has fantastic documentation. yet redis is so easy to learn and use that you'll seldom feel you need to consult it. there are three reasons to look at the docs for every command you use. time complexity - each command's complexity is given in big-o notation. this is immensely helpful. related commands - an ever-growing...
...t work for hash fields nor for fields of other operations. you can watch a hash, but not its subfields. lists and queues lists make great queues. use commands like blpop rpush blpoprpush the commands that start with b are blocking. they will sit there and quietly do nothing until there is a value available on the list for them to pop. you can specify a timeout, or have them block forever (timeout = 0). the r in rpush means to push on the right-hand side of the list. an l is the left-hand side. suum cuique. try this in two separate redis-cli sessions. first here: redis1> blpop myqueue 0 that redis client should just look like it's hanging. it is. ok, now in a different shell, and another redis-cli, do this: redis2> rpush myqueue 42 now if you look back at the fi...
...able of doing anything but listen for messages. now in a second redis-cli, do this: redis2> publish message-channel "i like pie" publish message-channel "i like pie" (integer) 1 cast your eager gaze back to the first shell and you will see: redis1> 1) "message" 2) "message-channel" 3) "i like pie" well strip my gears and call me shiftless! some things to notice: the subscriber blocks forever - not just for the first message. so subscribers are dedicated clients. the message channel doesn't have to be created in any way. the subscriber tells you the name of the channel as well as the message it received. i like pie. the return value from publish tells you how many subscribers received your message! so if that's 0, you know nobody's listening. you might use psubscribe in a ...
...And 3 more matches

Handling Mozilla Security Bugs
eports related to security vulnerabilities: security bug reports can be treated as special and handled differently than "normal" bugs. in particular, the mozilla.org bugzilla system will allow bug reports related to security vulnerabilities to be marked as "security-sensitive," and will have special access control features specifically for use with such bug reports. however, a security bug can revert back to being a normal bug by having the "security-sensitive" flag removed, in which case the access control restrictions will no longer be in effect. full information about security bugs will be restricted to a known group of people, using the bugzilla access control restrictions described above. however, that group can and will be expanded as necessary and appropriate. as noted above, info...
...developers (i.e., those whose bugs are often singled out as security-relevant or who have security-relevant bugs assigned to them), and security qa people who are the qa contacts for those bugs. exploit hunters with a good track record of finding significant mozilla security vulnerabilities. representatives of the various companies and groups actively distributing mozilla-based products. super-reviewers and drivers. the bugzilla administrators will technically be in the mozilla security bug group as well, mainly because they already have visibility into all bugzilla data hosted through mozilla.org. the mozilla security bug group will have a private mailing list, security-group@mozilla.org, to which everyone in the security bug group will be subscribed. this list will act as a forum for ...
... particular security bug, by someone else (who does have access) adding them to the cc list for that bug. thus someone reporting a security bug essentially becomes a member of the overall group of people working to investigate and fix that particular vulnerability, and anyone else may be easily invited to assist as well, if and when it makes sense. expanding the mozilla security bug group as previously described, the mozilla security module owner can select one or more peers to share the core work of coordinating investigation and resolution of mozilla security vulnerabilities, and will work with them to create some agreed-upon ground rules for how this work can be most effectively shared among themselves. as with other mozilla modules, we intend that this core group (module owner plus pe...
...And 3 more matches

Using the Places history service
to maintain backwards compatibility, each version has implemented the older interfaces, resulting in functionality spread across many interfaces. ...
...ice: complex query functions, more fine-grained getters and setters. nsiautocompletesearch: url-bar autocomplete from history from 1.9.1 (firefox3.1) on, don't use any places service on (or after) quit-application has been notified, since the database connection will be closed to allow the last sync, and changes will most likely be lost. use quit-application-granted instead. differences from previous implementations the previous nsglobalhistory service stored one entry for each page in history. this entry contained the url, title, visit count, last visit date, first visit date, host name, last referrer, flags for typed, hidden, and gecko flags (gecko flags is trunk only). the navhistory service has broken this into two tables (see history service design). the main url table stores the i...
...ing, adduri and adddocumentredirect will infer this information for you. modifying pages in history nsiglobalhistory2.setpagetitle: called by gecko when the <title> element is encountered. nsiglobalhistory3.setgeckoflags: called by gecko to store rendering information about a page. currently, this is used to store whether there was a scrollbar, which allows more efficient layout if the page is revisited. however, this is not yet supported by the navhistory implementation. nsibrowserhistory.removepage: removes a given uri and all of its visits from the history database. this is called by the ui when the user deletes a history entry. nsibrowserhistory.removepagesfromhost: called from the ui when the user deletes a group associated with a host or domain. this function allows you to delete p...
...And 3 more matches

Creating the Component Code
having the component found and registered properly is the goal of this first chapter of the tutorial. in the subsequent chapters, we can begin to work on the example weblock component functionality itself. use the calculator (after learning long division) you have to write a fair amount of code to create a component library that gets loaded into xpcom. an xpcom component needs to implement at least three interfaces that xpcom requires, and often others as well. there is more code in this chapter than you'll eventually need, however. ...
...r is more about learning the basics. as in grade school when you learned long division, better tools like calculators come after you figure out what's actually happening. in this case, the long-hand implementation gives us an opportunity to talk about various features of xpcom. what we'll be working on the component we'll be working on in this book controls a special mode in your browser that prevents users from leaving the current domain or a set of safe domains. once enabled, this "weblock" mode is password protected and persists until it is turned off by the password holder. it can be used to implement parental controlled browsing for children, or for targeted "kiosk browsing," where the content is restricted to a particular server. web lock user interface shows the icon that is used to...
...s to register xpcom components. xpinstall, the cross-platform installation technology that mozilla uses to install the browser and other components, is one such alternative. it is described further in packaging weblock. you should consult with the authors of the application you wish to extend to see if there are other supported ways. overview of the weblock module source as we mentioned in the previous section, components have layers. there are three main parts to every xpcom component. from the innermost and moving outward, the first object is the xpcom object. this is the object that contains the business logic, that implements functionality such as starting a network download, implementing interfaces that listen to the download progress, or providing a new content type handler. in webloc...
...And 3 more matches

Mozilla internal string guide
o the given length. complete documentation can be found in the appendix. read-only strings the const attribute on a string determines if the string is writable. if a string is defined as a const nsastring then the data in the string cannot be manipulated. if one tries to call a non-const method on a const string the compiler will flag this as an error at build time. for example: void nsfoo::reversecharacters(nsastring& str) { ... str.assign(reversedstr); // modifies the string } this should not compile, because you're assigning to a const class: void nsfoo::reversecharacters(const nsastring& str) { ... str.assign(reversedstr); } as function parameters for methods which are exposed across modules, use nsastring references to pass strings. for example: // when...
... if (cur < end) memmove(cur, cur + 1, (end - cur) * sizeof(char16_t)); } else { cur += 1; } } data.setlength(len); } note that using beginwriting() to make a string longer is not ok. beginwriting() must not be used to write past the logical length of the string indicated by endwriting() or length(). calling setcapacity() before beginwriting() does not affect what the previous sentence says. to make the string longer, call setlength() before beginwriting() or use the bulkwrite() api described below. bulk write bulkwrite() allows capacity-aware cache-friendly low-level writes to the string's buffer. capacity-aware means that the caller is made aware of how the caller-requested buffer capacity was rounded up to mozjemalloc buckets. this is useful when initially re...
...eserved. it's up to you to skip past it so as to not overwrite it. if there's a need to request a different capacity before you are ready to call finish(), you can call restartbulkwrite() on the handle. it takes three arguments that match the first three arguments of bulkwrite(). it returns mozilla::result<mozilla::ok, nsresult> to indicate success or oom. calling restartbulkwrite() invalidates previously-obtained span, raw pointer or length. once you are done writing, call finish(). it takes two arguments: the new logical length of the string (which must not exceed the capacity retuned by the length() method of the handle) and a boolean indicating whether it's ok to attempt to reallocate a smaller buffer in case a smaller mozjemalloc bucket could accommodate the new logical length. helper...
...And 3 more matches

nsIDocShell
to tie in to handle dom events that may be of interest to chrome. contentviewer nsicontentviewer content viewer that is currently loaded for this docshell. this may change as the underlying content changes. read only. currentdocumentchannel nsichannel gets the channel for the currently loaded document, if any. for a new document load, this will be the channel of the previous document until after onlocationchange fires. read only. documentcharsetinfo nsidocumentcharsetinfo the document character set info. this is used by a load to determine priorities for charset detection and so on. obsolete since gecko 12.0 note: the properties of the old nsidocumentcharsetinfo interface were merged into nsidocshell in gecko 12.0. ...
... but before the new document has been set up) read only. isoffscreenbrowser boolean if true, this docshell is not visible in the traditional sense, but is being actively rendered to the screen (such as by being painted to a canvas), and should be treated accordingly. layouthistorystate nsilayouthistorystate loadedtransindex long keeps track of the previous shtransaction index and the current shtransaction index at the time that the doc shell begins to load. used for contentviewer eviction. read only. loadtype unsigned long load type for the document. valid states are defined in constants. note that nsidocshell may use other states internally so you should check for the specific state bit. marginheight long the val...
...nted and is assumed to be nulled out by the parent when the parent is going away. obsolete since gecko 1.8 prescontext nsprescontext presentation context for the currently loaded document. this may be null. read only. native code only! presshell nsipresshell presentation shell for the currently loaded document. this may be null. read only. native code only! previoustransindex long keeps track of the previous shtransaction index and the current shtransaction index at the time that the doc shell begins to load. used for contentviewer eviction. read only. printpreview nsiwebbrowserprint if the current content viewer is not initialized for print preview, it is replaced with one which is and to which an about:blank document is loaded. re...
...And 3 more matches

Debugger.Object - Firefox Developer Tools
e it gets or sets an accessor property whose handler is debuggee code, or because the referent is a proxy whose traps are debuggee code), the call throws a debugger.debuggeewouldrun exception. getproperty(name) return the value of the referent's property namedname, or undefined if it has no such property.name must be a string. the result is a debuggee value. setproperty(name,value) storevalue as the value of the referent's property namedname, creating the property if it does not exist.name must be a string;value must be a debuggee value. getownpropertydescriptor(name) return a property descriptor for the property namedname of the referent. if the referent has no such property, return undefined. (this function behaves like the standard object.getownpropertydescriptor function...
... the referent. (this function behaves like object.defineproperties, except that the target object is implicit, and in a different compartment from theproperties argument.) deleteproperty(name) remove the referent's property namedname. return true if the property was successfully removed, or if the referent has no such property. return false if the property is non-configurable. seal() prevent properties from being added to or deleted from the referent. return this debugger.object instance. (this function behaves like the standard object.seal function, except that the object to be sealed is implicit and in a different compartment from the caller.) freeze() prevent properties from being added to or deleted from the referent, and mark each property as non-writable. return this d...
... be sealed is implicit and in a different compartment from the caller.) freeze() prevent properties from being added to or deleted from the referent, and mark each property as non-writable. return this debugger.object instance. (this function behaves like the standard object.freeze function, except that the object to be sealed is implicit and in a different compartment from the caller.) preventextensions() prevent properties from being added to the referent. (this function behaves like the standard object.preventextensions function, except that the object to operate on is implicit and in a different compartment from the caller.) issealed() return true if the referent is sealed—that is, if it is not extensible, and all its properties have been marked as non-configurable. (t...
...And 3 more matches

Applying styles and colors - Web APIs
here we will explore the canvas options we have at our disposal to make our drawings a little more attractive. you will learn how to add different colors, line styles, gradients, patterns and shadows to your drawings. colors up until now we have only seen methods of the drawing context. if we want to apply colors to a shape, there are two important properties we can use: fillstyle and strokestyle. fillstyle = color sets the style used when filling shapes. strokestyle = color sets the style for shapes' outlines. color is a string representing a css <color>, a gradient object, or a pattern object. we'll look at gradient and pattern objects later. ...
...the actual area to be filled (dark blue) only extends halfway into the pixels on either side of the path. an approximation of this has to be rendered, which means that those pixels being only partially shaded, and results in the entire area (the light blue and dark blue) being filled in with a color only half as dark as the actual stroke color. this is what happens with the 1.0 width line in the previous example code. to fix this, you have to be very precise in your path creation. knowing that a 1.0 width line will extend half a unit to either side of the path, creating the path from (3.5,1) to (3.5,5) results in the situation in the third image—the 1.0 line width ends up completely and precisely filling a single pixel vertical line. note: be aware that in our vertical line example, the ...
...for odd-width lines, by setting the linecap style to square, so that the outer border of the stroke around the endpoint will be automatically extended to cover the whole pixel exactly). note also that only start and final endpoints of a path are affected: if a path is closed with closepath(), there's no start and final endpoint; instead, all endpoints in the path are connected to their attached previous and next segment using the current setting of the linejoin style, whose default value is miter, with the effect of automatically extending the outer borders of the connected segments to their intersection point, so that the rendered stroke will exactly cover full pixels centered at each endpoint if those connected segments are horizontal and/or vertical). see the next two sections for demonst...
...And 3 more matches

Drawing shapes with canvas - Web APIs
to the right, you see this canvas with the default grid overlayed. normally 1 unit in the grid corresponds to 1 pixel on the canvas. ...
...s. by the end of this article, you will have learned how to draw rectangles, triangles, lines, arcs and curves, providing familiarity with some of the basic shapes. working with paths is essential when drawing objects onto the canvas and we will see how that can be done. the grid before we can start drawing, we need to talk about the canvas grid or coordinate space. our html skeleton from the previous page had a canvas element 150 pixels wide and 150 pixels high. to the right, you see this canvas with the default grid overlayed. normally 1 unit in the grid corresponds to 1 pixel on the canvas. the origin of this grid is positioned in the top left corner at coordinate (0,0). all elements are placed relative to this origin. so the position of the top left corner of the blue square becomes x ...
...idth, height) draws a rectangular outline. clearrect(x, y, width, height) clears the specified rectangular area, making it fully transparent. each of these three functions takes the same parameters. x and y specify the position on the canvas (relative to the origin) of the top-left corner of the rectangle. width and height provide the rectangle's size. below is the draw() function from the previous page, but now it is making use of these three functions. rectangular shape example <html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html> function draw() { var canvas = document.getelementbyid('canvas'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); ctx.fillrect(25, 25, 100, 100); ctx.clearrect(45, 45, 60...
...And 3 more matches

Document.cookie - Web APIs
in timeout instead of relying on the browser to do it. many browsers let users specify that cookies should never expire, which is not necessarily safe. see date.toutcstring() for help formatting this value. ;secure cookie to only be transmitted over secure protocol as https. before chrome 52, this flag could appear with cookies from http domains. ...
...rotocol as https. before chrome 52, this flag could appear with cookies from http domains. ;samesite samesite prevents the browser from sending this cookie along with cross-site requests. possible values are lax, strict or none. the lax value value will send the cookie for all same-site requests and top-level navigation get requests. this is sufficient for user tracking, but it will prevent many csrf attacks. this is the default value in modern browsers. the strict value will prevent the cookie from being sent by the browser to the target site in all cross-site browsing contexts, even when following a regular link. the none value explicitly states no restrictions will be applied. the cookie will be sent in all requests—both cross-site and same-site. the...
...ie in requests transmitted over a secure channel. __host- signals to the browser that in addition to the restriction to only use the cookie from a secure origin, the scope of the cookie is limited to a path attribute passed down by the server. if the server omits the path attribute the "directory" of the request uri is used. it also signals that the domain attribute must not be present, which prevents the cookie from being sent to other domains. for chrome the path attribute must always be the origin. the dash is considered part of the prefix. these flags are only settable with the secure attribute. note: as you can see from the code above, document.cookie is an accessor property with native setter and getter functions, and consequently is not a data property with a value: wha...
...And 3 more matches

Using the Gamepad API - Web APIs
the gamepad api is a way for developers and designers to access and use gamepads and other game controllers. the gamepad api introduces new events on the window object for reading gamepad and controller (hereby referred to as gamepad) state. ...
...gamepad when a new gamepad is connected to the computer, the focused page first receives a gamepadconnected event. if a gamepad is already connected when the page loaded, the gamepadconnected event is dispatched to the focused page when the user presses a button or moves an axis. in firefox, gamepads are only exposed to a page when the user interacts with one with the page visible. this helps prevent gamepads being used for fingerprinting the user. once one gamepad has been interacted with, other gamepads that are connected will automatically be visible. you can use gamepadconnected like this: window.addeventlistener("gamepadconnected", function(e) { console.log("gamepad connected at index %d: %s. %d buttons, %d axes.", e.gamepad.index, e.gamepad.id, e.gamepad.buttons.length, ...
...ow.addeventlistener("gamepadconnected", function(e) { console.log("gamepad connected at index %d: %s. %d buttons, %d axes.", e.gamepad.index, e.gamepad.id, e.gamepad.buttons.length, e.gamepad.axes.length); }); each gamepad has a unique id associated with it, which is available on the event's gamepad property. disconnecting a gamepad when a gamepad is disconnected, and if a page has previously received data for that gamepad (e.g. gamepadconnected), a second event is dispatched to the focused window, gamepaddisconnected: window.addeventlistener("gamepaddisconnected", function(e) { console.log("gamepad disconnected from index %d: %s", e.gamepad.index, e.gamepad.id); }); the gamepad's index property will be unique per-device connected to the system, even if multiple controll...
...And 3 more matches

HTML Drag and Drop API - Web APIs
n will be created between the source and drop locations. during the drag operation, drag effects may be modified to indicate that certain effects are allowed at certain locations. the following example shows how to use this property. ...
...ser prevents anything from happening when dropping something onto most html elements. to change that behavior so that an element becomes a drop zone or is droppable, the element must have both ondragover and ondrop event handler attributes. the following example shows how to use those attributes, and includes basic event handlers for each attribute. ...
...hange that behavior so that an element becomes a drop zone or is droppable, the element must have both ondragover and ondrop event handler attributes. the following example shows how to use those attributes, and includes basic event handlers for each attribute. ...
...And 3 more matches

Intersection Observer API - Web APIs
or this kind of information has grown. intersection information is needed for many reasons, such as: lazy-loading of images or other content as a page is scrolled. implementing "infinite scrolling" web sites, where more and more content is loaded and rendered as you scroll, so that the user doesn't have to flip through pages. reporting of visibility of advertisements in order to calculate ad revenues. deciding whether or not to perform tasks or animation processes based on whether or not the user will see the result. implementing intersection detection in the past involved event handlers and loops calling methods like element.getboundingclientrect() to build up the needed information for every element affected. since all this code runs on the main thread, even one of these can cause p...
...l"; } .extra { width: 350px; height: 350px; margin-top: 10px; border: 4px solid rgb(20, 20, 120); text-align: center; padding: 20px; } javascript finally, let's take a look at the javascript code that uses the intersection observer api to make things happen. setting up first, we need to prepare some variables and install the observer. ...
...ngcolor = "rgba(40, 40, 190, ratio)"; let decreasingcolor = "rgba(190, 40, 40, ratio)"; // set things up window.addeventlistener("load", (event) => { boxelement = document.queryselector("#box"); createobserver(); }, false); the constants and variables we set up here are: numsteps a constant which indicates how many thresholds we want to have between a visibility ratio of 0.0 and 1.0. prevratio this variable will be used to record what the visibility ratio was the last time a threshold was crossed; this will let us figure out whether the target element is becoming more or less visible. increasingcolor a string defining a color we'll apply to the target element when the visibility ratio is increasing. the word "ratio" in this string will be replaced with the target's current visi...
...And 3 more matches

Signaling and video calling - Web APIs
eo> elements, one for your self-view, one for the connection, and the <button> element. the <video> element with the id "received_video" will present video received from the connected user. we specify the autoplay attribute, ensuring once the video starts arriving, it immediately plays. this removes any need to explicitly handle playback in our code. the "local_video" <video> element presents a preview of the user's camera; specifiying the muted attribute, as we don't need to hear local audio in this preview panel. finally, the "hangup-button" <button>, to disconnect from a call, is defined and configured to start disabled (setting this as our default for when no call is connected) and apply the function hangupcall() on click. this function's role is to close the call, and send a signalling...
...r notification to the other peer, requesting it also close. the javascript code we'll divide this code into functional areas to more easily describe how it works. the main body of this code is found in the connect() function: it opens up a websocket server on port 6503, and establishes a handler to receive messages in json object format. this code generally handles text chat messages as it did previously. sending messages to the signaling server throughout our code, we call sendtoserver() in order to send messages to the signaling server. this function uses the websocket connection to do its work: function sendtoserver(msg) { var msgjson = json.stringify(msg); connection.send(msgjson); } the message object passed into this function is converted into a json string by calling json.st...
...adevices.enumeratedevices() to get a list of devices, filtering the resulting list based on our desired criteria, then using the selected devices' deviceid values in the deviceid field of the the mediaconstraints object passed into getusermedia(). in practice, this is rarely if ever necessary, since most of that work is done for you by getusermedia(). we attach the incoming stream to the local preview <video> element by setting the element's srcobject property. since the element is configured to automatically play incoming video, the stream begins playing in our local preview box. we then iterate over the tracks in the stream, calling addtrack() to add each track to the rtcpeerconnection. even though the connection is not fully established yet, you can begin sending data when you feel it's...
...And 3 more matches

Movement, orientation, and motion: A WebXR example - Web APIs
this will help to solidify your understanding of how the geometry of 3d graphics and vr work, as well as to help ensure you understand the way the functions and data that are used during xr rendering work together. screenshot of this example in action the core of this example—the spinning, textured, lighted cube—is taken from our webgl tutorial series; namely, the penultimate article in the series, covering lighting in webgl. ...
...) { let refspacetype; xrsession = session; xrbutton.innertext = "exit webxr"; xrsession.addeventlistener("end", sessionended); let canvas = document.queryselector("canvas"); gl = canvas.getcontext("webgl", { xrcompatible: true }); if (allowmouserotation) { canvas.addeventlistener("pointermove", handlepointermove); canvas.addeventlistener("contextmenu", (event) => { event.preventdefault(); }); } if (allowkeyboardmotion) { document.addeventlistener("keydown", handlekeydown); } shaderprogram = initshaderprogram(gl, vssource, fssource); programinfo = { program: shaderprogram, attriblocations: { vertexposition: gl.getattriblocation(shaderprogram, 'avertexposition'), vertexnormal: gl.getattriblocation(shaderprogram, 'avertexnormal'), ...
...ontextmenu_event, but only if the allowmouserotation constant is true. the mousemove handler will deal with the pitching and yawing of the view based upon the movement of the mouse. since the "mouselook" feature functions only while the right mouse button is held down, and clicking using the right mouse button triggers the context menu, we add a handler for the contextmenu event to the canvas to prevent the context menu fom appearing when the user initially begins their drag of the mouse. next, we compile the shader programs; get references to its variables; initialize the buffers that store the array of each position; the indexes into the position table for each vertex; the vertex normals; and the texture coordinates for each vertex. this is all taken directly from the webgl sample code, so...
...And 3 more matches

Understandable - Accessibility
ds (aaa) where technical terms, jargon, or idioms/slang are used, definitions should be provided for such phrases/words. your site should provide a glossary that contains definitions of such words/terms that you can then link to when they appear, or at the very least provide definitions somewhere in the surrounding text, or in a description list at the bottom of the page. 3.1.4 abbreviations (aaa) where abbreviations are used, you should provide an expansion of them, or a definition as required. the <abbr> element is often thought of as the preferred way to provide an expansion for an abbreviation — it takes a title attribute that contains the expansion, and this appears when the acronym is moused over. however, the title contents are not accessible via keyboard...
...bute that contains the expansion, and this appears when the acronym is moused over. however, the title contents are not accessible via keyboard, nor are they reliably read out by screenreaders. a better way to handle this is to again provide links to glossary pages containing the acronym expansion and explanation, or at the very least include them in the surrounding text in context. see abbreviations. 3.1.5 reading level (aaa) if text is provided that requires a higher reading level that lower secondary education level (typically children around 11-14 years old), provide supplementary explainer material to help people who can't read it, or provide an alternative version that is written at lower secondary level. this doesn't mean that all subject matter should be u...
... question in a quiz app). in such cases, when this is appropriate, you'll probably use a combination of javascript and server-side functionality to check if the entry is correct, and if not, what viable suggestions can be given to the user. such suggestions should be displayed usefully in context, just like error messages (see 3.3.1). no tutorial suggestions yet. 3.3.4 error prevention (legal, financial, data) (aa) in the case of forms involved with entry of sensitive data (such as legal agreements, e-commerce transactions, or personal data), at least one of the following should be true: submissions are reversible. data is checked for errors, and the user is given an opportunity to correct them. a mechanism is available for confirming and corr...
...And 3 more matches

Ordering Flex Items - CSS: Cascading Style Sheets
new layout methods such as flexbox and grid bring with them the possibility of controlling the order of content. in this article we will take a look at ways in which you can change the visual order of your content when using flexbox. we will also consider the implications of reordering items from an accessibility point of view. reverse the display of the items the flex-direction property can take one of four values: row column row-reverse column-reverse the first two values ​​keep the items in the same order that they appear in the document source order and display them sequentially from the start line. the second two values ​​reverse the items by switching the start and end lines. remember that the start line relates to writing modes. the row-related examples abo...
...umn row-reverse column-reverse the first two values ​​keep the items in the same order that they appear in the document source order and display them sequentially from the start line. the second two values ​​reverse the items by switching the start and end lines. remember that the start line relates to writing modes. the row-related examples above demonstrate how row and row-reverse work in a left-to-right language such as english. if you are working in a right-to-left language like arabic then row would start on the right, row-reverse on the left. this can seem like a neat way to display things in reverse order however you should be mindful that the items are only visually displayed in reverse order. the specification says the following on this matter: “note: the...
... to manipulate the visual presentation while leaving the source order intact for non-css uas and for linear models such as speech and sequential navigation.” - ordering and orientation if your items were links or some other element that the user could tab to, then the tabbing order would be the order that these items appear in the document source — not your visual order. ...
...And 3 more matches

<img>: The Image Embed element - HTML: Hypertext Markup Language
mage formats the html standard doesn't list what image formats to support, so each user agent supports different formats. a complete guide to image formats supported by web browsers is available. below is a list of the image formats that are most commonly used on the web, as well as some older formats that should no longer be used, despite existing content possibly still using them. ...
... image loading errors if an error occurs while loading or rendering an image, and an onerror event handler has been set on the error event, that event han...
...d later. image loading errors if an error occurs while loading or rendering an image, and an onerror event handler has been set on the error event, that event handler will get called. this can happen in a number of situations, including: the src attribute is empty ("") or null. the src url is the same as the url of the page the user is currently on. the image is corrupted in some way that prevents it from being loaded. the image's metadata is corrupted in such a way that it's impossible to retrieve its dimensions, and no dimensions were specified in the <img> element's attributes. the image is in a format not supported by the user agent. attributes this element includes the global attributes. alt defines an alternative text description of the image. note: browsers do not al...
...And 3 more matches

Proxy servers and tunneling - HTTP
of the internet, proxy servers and http tunnels are facilitating access to content on the world wide web. a proxy can be on the user's local computer, or anywhere between the user's computer and a destination server on the internet. this page outlines some basics about proxies and introduces a few configuration options. there are two types of proxies: forward proxies (or tunnel, or gateway) and reverse proxies (used to control and protect access to a server for load-balancing, authentication, decryption or caching). forward proxies a forward proxy, or gateway, or just "proxy" provides proxy services to a client or a group of clients. there are likely hundreds of thousands of open forward proxies on the internet. they store and forward internet services (like the dns, or web pages) to redu...
...of open forward proxies on the internet. they store and forward internet services (like the dns, or web pages) to reduce and control the bandwidth used by the group. forward proxies can also be anonymous proxies and allow users to hide their ip address while browsing the web or using other internet services. tor (the onion router), routes internet traffic through multiple proxies for anonymity. ...
... they store and forward internet services (like the dns, or web pages) to reduce and control the bandwidth used by the group. forward proxies can also be anonymous proxies and allow users to hide their ip address while browsing the web or using other internet services. tor (the onion router), routes internet traffic through multiple proxies for anonymity. ...
...And 3 more matches

Functions - JavaScript
a function in javascript is similar to a procedure—a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output. to use a function, you must define it somewhere in the scope from which you wish to call it. see also the exhaustive reference chapter about javascript functions to get to know the details. defining functions function declarations a function definition (also called a function declaration, or function statement) consists of the function keyword, followed by: the name of the function. ...
...); } a(1); // logs 6 (1 + 2 + 3) in this example, c accesses b's y and a's x. this can be done because: b forms a closure including a (i.e. b can access a's arguments and variables). c forms a closure including b. because b's closure includes a, c's closure includes a, c can access both b and a's arguments and variables. in other words, c chains the scopes of b and a, in that order. the reverse, however, is not true. a cannot access c, because a cannot access any argument or variable of b, which c is a variable of. thus, c remains private to only b. name conflicts when two arguments or variables in the scopes of a closure have the same name, there is a name conflict. more nested scopes take precedence. so, the inner-most scope takes the highest precedence, while the outer-most sco...
...ameters do. without default parameters (pre-ecmascript 2015) in the past, the general strategy for setting defaults was to test parameter values in the body of the function and assign a value if they are undefined. in the following example, if no value is provided for b, its value would be undefined when evaluating a*b, and a call to multiply would normally have returned nan. however, this is prevented by the second line in this example: function multiply(a, b) { b = typeof b !== 'undefined' ? b : 1; return a * b; } multiply(5); // 5 with default parameters (post-ecmascript 2015) with default parameters, a manual check in the function body is no longer necessary. you can simply put 1 as the default value for b in the function head: function multiply(a, b = 1) { return a * b; ...
...And 3 more matches

TypeError: can't define property "x": "obj" is not extensible - JavaScript
usually, an object is extensible and new properties can be added to it. ...
...as marked as non-extensible. message typeerror: cannot create property for a non-extensible object (edge) typeerror: can't define property "x": "obj" is not extensible (firefox) typeerror: cannot define property: "x", object is not extensible. (chrome) error type typeerror what went wrong? usually, an object is extensible and new properties can be added to it. however, in this case object.preventextensions() marked an object as no longer extensible, so that it will never have properties beyond the ones it had at the time it was marked as non-extensible. examples adding new properties to a non-extensible objects in strict mode, attempting to add new properties to a non-extensible object throws a typeerror. in sloppy mode, the addition of the "x" property is silently ignored. 'use st...
...ct as no longer extensible, so that it will never have properties beyond the ones it had at the time it was marked as non-extensible. examples adding new properties to a non-extensible objects in strict mode, attempting to add new properties to a non-extensible object throws a typeerror. in sloppy mode, the addition of the "x" property is silently ignored. ...
...And 3 more matches

Array.prototype.reduceRight() - JavaScript
te to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. see also array.prototype.reduce() for left-to-right. syntax arr.reduceright(callback(accumulator, currentvalue[, index[, array]])[, initialvalue]) parameters callback function to execute on each value in the array, taking four arguments: accumulator the value previously returned in the last invocation of the callback, or initialvalue, if supplied. (see below.) currentvalue the current element being processed in the array. indexoptional the index of the current element being processed in the array. arrayoptional the array reduceright() was called upon. initialvalueoptional value to use as accumulator to the first call of the callback. if n...
...last element in the array will be used and skipped. calling reduce or reduceright on an empty array without an initial value creates a typeerror. return value the value that results from the reduction. description reduceright executes the callback function once for each element present in the array, excluding holes in the array, receiving four arguments: the initial value (or value from the previous callback call), the value of the current element, the current index, and the array over which iteration is occurring. the call to the reduceright callback would look something like this: array.reduceright(function(accumulator, currentvalue, index, array) { // ... }); the first time the function is called, the accumulator and currentvalue can be one of two values. if an initialvalue was ...
...it’s a flowing right-to-left, calling each function with the output of the last one. /** * function composition is way in which...
...And 3 more matches

Autoplay guide for media and Web Audio APIs - Web media technologies
s, see the auto-play policies for google chrome and webkit. note: put another way, playback of any media that includes audio is generally blocked if the playback is programmatically initiated in a tab which has not yet had any user interaction. browsers may additionally choose to block under other circumstances. autoplay of media elements now that we've covered what autoplay is and what can prevent autoplay from being allowed, we'll look at how your web site or app can automatically play media upon page load, how to detect when autoplay fails to occur, and tips for coping when autoplay is denied by the browser. the autoplay attribute the simplest way to automatically play content is to add the autoplay attribute to your <audio> or <video> element. this sets the autoplay property on the...
...by a function called handlefirstplay(), which receives as input the play event. handlefirstplay() looks like this: function handlefirstplay(event) { let vid = event.target; vid.onplay = null; // start whatever you need to do after playback has started } after getting a reference to the video element from the event object's target, the element's onplay handler is set to null. this will prevent any future play events from being delivered to the handler. that could happen if the video is paused and resumed by the user or automatically by the browser when the document is in a background tab. at this point, your site or app can begin whatever it needs to do that relies upon the video having been started up. note: this approach doesn't differentiate between autoplay and the user start...
...on(videoelem); } else { // handle a load or playback error } }); } the first thing we do with the result of play() is make sure it's not undefined. we check for this because in earlier versions of the html specification, play() didn't return a value. returning a promise to allow you to determine success or failure of the operation was added more recently. checking for undefined prevents this code from failing with an error on older versions of web browsers. if the promise returned by play() is resolved without error, the then() clause is run and can begin whatever needs to be done when autoplay has begun. we then add a catch() handler to the promise. this looks at the error's name to see if it's notallowederror. this indicates that playback failed due to a permission issue...
...And 3 more matches

Paths - SVG: Scalable Vector Graphics
it can be used to create lines, curves, arcs, and more. paths create complex shapes by combining multiple straight lines or curved lines. complex shapes composed only of straight lines can be created as <polyline>s. while <polyline>s and <path>s can create similar-looking shapes, <polyline>s require a lot of small straight lines to simulate curves, and don't scale well to larger sizes. a good understanding of paths is important when drawing svgs. while creating complex paths using an xml editor or text editor is not recommended, understanding how they work will allow to identify and repair display issues in svgs. ...
...200" height="200" xmlns="http://www.w3.org/2000/svg"> <path d="m10 10"/> <!-- points --> <circle cx="10" cy="10" r="2" fill="red"/> </svg> there are three commands that draw lines. the most generic is the "line to" command, called with l. l takes two parameters—x and y coordinates—and draws a line from the current position to a new position. l x y (or) l dx dy there are two abbreviated forms for drawing horizontal and vertical lines. h draws a horizontal line, and v draws a vertical line. both commands only take one parameter since they only move in one direction. h x (or) h dx v y (or) v dy an easy place to start is by drawing a shape. we will start with a rectangle (the same type that could be more easily made with a <rect> element). it's composed of horizontal...
... a reflection of the control point used on the other side to keep the slope constant. in this case, a shortcut version of the cubic bézier can be used, designated by the command s (or s). s x2 y2, x y (or) s dx2 dy2, dx dy s produces the same type of curve as earlier—but if it follows another s command or a c command, the first control point is assumed to be a reflection of the one used previously. if the s command doesn't follow another s or c command, then the current position of the cursor is used as the first control point. in this case the result is the same as what the q command would have produced with the same parameters. an example of this syntax is shown below, and in the figure to the left the specified control points are shown in red, and the inferred control point in bl...
...And 3 more matches

ui - Archive of obsolete content
refox 29 you can only add frames to toolbars. a toolbar gives you a horizontal strip of space which you can use for presenting a more complex user interface. ...
...toolbars. a toolbar gives you a horizontal strip of space which you can use for presenting a more complex user interface. ...
... gives you a horizontal strip of space which you can use for presenting a more complex user interface. ...
...And 2 more matches

How to convert an overlay extension to restartless - Archive of obsolete content
e loaded differently. next, what's the minimum version of firefox we should require (preferably an esr)? this guide targets firefox 17 esr or later (or anything else gecko 17+, such as seamonkey 2.14+). this is two esrs back (as of this writing), which should be plenty. using the current firefox esr, stable version, or nightly is generally a better idea if given the option, but some users take forever to upgrade. there will be no usage of the add-on sdk or any other external libraries here. everything will use apis available in firefox 17+ or code provided here. step 1: use services.jsm if you load one of mozilla's internal jsm files, for example services.jsm, you'll do so via privileged javascript code like this: components.utils.import("resource://gre/modules/services.jsm"); from here...
...way to modularize your code that's been available since firefox 3. you can use chrome:// uris with "components.utils.import()" just fine; in fact you've been able to since firefox 4. however, because it was implemented first for only file:// and resource:// but not chrome://, everyone who learned of this new feature learned that you had to load jsm from resource:// uris and just stuck with that forever. it does still work if you don't have restartlessness to worry about, though the protocol (or scheme, or whatever term you prefer) really should be avoided at this point. the resource:// protocol actually bleeds into content which allows webpages to detect installed add-ons using the protocol, which is not particularly fantastic (just the static file contents, not any loaded script/data). step...
...t. the resource:// protocol actually bleeds into content which allows webpages to detect installed add-ons using the protocol, which is not particularly fantastic (just the static file contents, not any loaded script/data). step 2a: load your jsm from chrome:// now with that preface out of the way, this part is easy: drop support for firefox 3.x if you haven't already, move your jsm files to wherever you've got your chrome mapping to for your xul overlay and/or windows, import your files from that new chrome mapped path instead of the old resource one, and remove your "resource" line from your chrome.manifest file. it's probably a good idea to do this even if you aren't going fully restartless / extractionless due to the previously mentioned exposure to content of resource mappings. also, ...
...And 2 more matches

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
and was originally published in japanese for the firefox developers conference summer 2007. shimoda-san is a co-author of firefox 3 hacks (o'reilly japan, 2008). before you learn how to develop extensions, let's learn about xul, the xml-based user-interface language, which is one of the building blocks for extensions. introduction an overview of xul xul is an xml-based language, and was developed to be the gui markup language for the mozilla browser. ...
... for example, firefox uses the windowtype navigator:browser for its browser window and browser:preferences for its options dialog. using methods we will cover in chapter 4, we will see how windows can be acquired using these values as keys. a window's dimensions and location on screen can be specified using the attributes width, height, screenx, and screeny (all using pixels as units). with the previously discussed persist attribute, you can easily store a window's size and location. firefox uses this method to store its own window sizes and locations as well. general root elements window the window element that has appeared in examples so far is a root element used to define an ordinary window. this displays the same kind of window used for the firefox browser window, the bookmark manage...
...e space-delimited values. also, in order to actually read in a history for autocomplete, you will need xpconnect privileges, which we will cover in chapter 4. menu list use the menulist element to create a control for making selections from a drop-down list. as shown in listing 17, this is implemented in combination with the menupopup element; it produces output as shown in figure 14. a click reveals the drop-down list; when an item is selected, the values of that item’s label and value attributes are copied to the label and value attributes of the menulist element itself. by default, the first menu item is selected, but any menu can be preselected by adding selected="true" to it. <menulist> <menupopup> <menuitem label="item 1" value="1"/> <menuitem label="item 2" value="2"/>...
...And 2 more matches

Intercepting Page Loads - Archive of obsolete content
some of the techniques presented here apply only to content loaded in the main browser area, while others detect content being loaded in other xul windows, or even detect xul content being loaded. also, the different techniques tap into different steps of the load process. which one you should use solely depends on your needs. we will start with the simplest one, which is also the most common to use. note: performance is very important when it comes to add-ons and page loads. ...
...load events, since these notifications are triggered before the response arrives and is parsed into dom tree, so this is not the best approach for the typical greasemonkey-style extensions. notes on usage: efficiency is very important when adding http observers. remember that your observe method will be called for every http request made by firefox, usually several dozen per page visit. in the previous example, one of the first things we do is check if the url is of interest to us, otherwise we let it go. avoid heavy, time-consuming operations, or the user's browsing experience will become exasperating. . you have to take into account that a page load may involve several http requests, specially when redirects are involved. if you enter gmail.com in your browser, you will probably be redi...
...ate validation if condition. there may be other cases where accessing this property will throw an exception. canceling the request works just like with onlocationchange. see "recognizing page load failure" at mozilla.dev.extensions for tips on detecting connection failures and http response codes. xpcom solutions there are a couple more solutions you may be interested in trying if the previous ones are insufficient. these require creating xpcom components that implement existing firefox interfaces. they may be useful in case you have most of your application logic in xpcom, or if you absolutely need a single point of inspection for loads. the previously explained solutions are enough for most cases, so these ones will be mentioned briefly. document loader service nsidocumentloade...
...And 2 more matches

Setting Up a Development Environment - Archive of obsolete content
in regards to code editing, there's no official mozilla ide. on the other hand, extensions use the same (or similar) languages that are used for web development, so most text editors and ides are up to the task. most xul tools and plugins you'll find online are merely templates that generate the folder structure for the project, and that's not much help. we recommend komodo edit. it's free, open source, and cross-platform. it's based on the mozilla xulrunner platform, so it has support for some of the particularities in firefox extension development. ...
...here all the resulting build files will be created, and where you'll find the extension xpi file once you get it to build. open the project file (helloworld2.komodoproject) from the src directory in komodo edit. in the projects tab you should be able to see the directory structure inside the src directory. this structure should be familiar, as it is almost identical to the unpacked xpi from the previous section. the only notable additions is a file named makefile under src. this is the file that make uses to build the xpi. you should take some time to read it and understand it, or at least identify the parts that you should change to get a project of your own going. this gnu make manual is a very good reference to get to know make and makefiles. in most cases you'll only need to change the...
...so a way to set up "shortcuts". you can do this by opening the automator application, choosing run shell script and then entering the profile-loading script in the textbox: /applications/firefox.app/contents/macos/firefox-bin -no-remote -p myprofile > /dev/null & you can change "/dev/null" to a file location, in case you want to see dump output from firefox, or other extensions. the last & prevents automator from waiting for your firefox session to finish. save this as an application, not a workflow. and you probably want to have these on your desktop or dock, for easy access. there are also some configuration changes you should make in your testing profiles, so that you get detailed error information in case something fails. the firefox error console (tools > error console) normally d...
...And 2 more matches

List of Mozilla-Based Applications - Archive of obsolete content
kompozer wysiwyg html editor unofficial bug-fix release of nvu kylo video browser uses gecko biofortis labmatrix web-accessible software application used for information management and integration of patient clinical, specimen, genetic and molecular assay data based on xul liaison groupware client for novell’s email and collaboration server previously called mozngw linbox kiosk browser (fr) web browser dedicated browser for french prefecture and town hall litl internet computer for home uses spidermonkey and gecko lizilayers gis application 3liz also creates some gis firefox add-ons logitech harmony remote software software for remote control device uses gre or xulrunner ...
...t's possible to create your own python web browser with hulahop, and much much more besides. ...
... part of instant-on operating system sqlite-manager database manager standalone version of add-on stealthsurfer secure internet tools on usb key uses firefox and thunderbird streambase complex event processing platform seems to use xulrunner stylizer css editor css editor css editor with built-in firebug-like diagnostics and gecko 1.8 preview sun java enterprise system server products uses nss sundial browser with advanced domain name technology based on firefox surfeasy private and secure web browsing sweet16 apple ii computer emulator uses spidermonkey as a scriptable debugger for software running in the emulator mozilla sunbird/mozilla lightning calendar ...
...And 2 more matches

Editor Embedding Guide - Archive of obsolete content
boolean) docommand no parameters note this is logical style. most browsers display it the same as bold. cmd_cite toggles cite on selection. getcommandstate "state_all"(boolean), "state_begin"(boolean), "state_end"(boolean), "state_mixed"(boolean), "state_enabled" (boolean) docommand no parameters note this is logical style. it is visually the same as italics. cmd_abbr toggles abbreviation on selection. getcommandstate "state_all"(boolean), "state_begin"(boolean), "state_end"(boolean), "state_mixed"(boolean), "state_enabled" (boolean) docommandblock >all string cmd_acronym toggles acronym on selection. getcommandstate "state_all"(boolean), "state_begin"(boolean), "state_end"(boolean), "state_mixed"(boolean), "state_enabled" (boolean) docommand no parameters n...
...any concrete information on the state of the command. cmd_selectlinenext scrolls relative to the current selection end point. getcommandstate "state_enabled" (boolean) docommand no parameter note getcommandstate in these cases will return whether or not it is possible to call docommand. this will not really give you any concrete information on the state of the command. cmd_selectlineprevious scrolls relative to the current selection end point. getcommandstate "state_enabled" (boolean) docommand no parameter note getcommandstate in these cases will return whether or not it is possible to call docommand. this will not really give you any concrete information on the state of the command. cmd_selectcharprevious scrolls relative to the current selection end point. getco...
... any concrete information on the state of the command. cmd_selectendline scrolls relative to the current selection end point. getcommandstate "state_enabled" (boolean) docommand no parameter note getcommandstate in these cases will return whether or not it is possible to call docommand. this will not really give you any concrete information on the state of the command. cmd_selectwordprevious scrolls relative to the current selection end point. getcommandstate "state_enabled" (boolean) docommand no parameter note getcommandstate in these cases will return whether or not it is possible to call docommand. this will not really give you any concrete information on the state of the command. cmd_selectwordnext scrolls relative to the current selection end point. getcomman...
...And 2 more matches

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
many browsers, such as internet explorer, also support pre-w3c apis and have never added extensive support for the w3c-compliant ones. before i go into the differences between...
...devalue returns the value of the current node. for nodes that contain text, such as text and comment nodes, it will return their string value. for attribute nodes, the attribute value is returned. for all other nodes, null is returned. ownerdocument returns the document object containing the current node. parentnode returns the parent node of the current node. previoussibling returns the node immediately preceding the current one. removeattribute( aname ) removes the specified attribute from the current node. setattribute( aname, avalue ) sets the value of the specified attribute with the specified value. internet explorer has a nonstandard quirk, where many of these apis will skip white space text nodes that are generated,...
...owever, this is not guaranteed. to be sure that all elements exist, you should use the onload event handler on the <body> tag: <body onload="dofinish();"> <div id="foo">loading...</div> <script> function dofinish() { var element = document.getelementbyid("foo"); element.innerhtml = "done."; } </script> ... such timing-related issues are also hardware-related -- slower systems can reveal bugs that faster systems hide. one concrete example is window.open, which opens a new window: <script> function doopenwindow(){ var mywindow = window.open("about:blank"); mywindow.location.href = "http://www.ibm.com"; } </script> the problem with the code is that window.open is asynchronous -- it does not block the javascript execution until the window has finished loading. ther...
...And 2 more matches

confirm - Archive of obsolete content
int confirm( string atext, string adialogtitle, number abuttonflags, string abutton0title, string abutton1title, string abutton2title, string acheckmsg, object acheckstate ); parameters the second, extended confirm() method is supported starting with gecko 1.8. it accepts any number of parameters up to 8. previous gecko versions only support the first, one-parameter method and will throw an error on occuring the extended form. see the notes at the end of this document for a safe way to implement a fallback. atext the string to be displayed in the confirmation dialog. this string is typically in the form of a prompt for the user (e.g., "are you sure you want to delete the selected file(s)...
...unless specified otherwise, this is the default. button_pos_1_default: specifies button 1 as the default button. button_pos_2_default: specifies button 2 as th...
...unless specified otherwise, this is the default. button_pos_1_default: specifies button 1 as the default button. button_pos_2_default: specifies button 2 as the default b...
...And 2 more matches

Multiple Rules - Archive of obsolete content
the builder supports the use of multiple rules as well. this involves using additional rule elements after the first. in addition, conditions may be applied to each rule. only those results that match the conditions have content generated for them. for each result, the conditions associated with each rule are examined to see if they match. the first rule that matches causes content to be generated for that result. for example, the first rule might match directories or folders, whereas the second rule might match files. in this situtation, you would want to use different output for each type. ...
...o rules. the query generates a list of the photos and assigns the title of each photo to the variable '?title'. note that the full query syntax must be used to use conditions within rules. the first rule contains a new element, where which is used to define a condition. the second rule does not contain a where element, so it matches results unconditionally, or any result that wasn't matched by a previous rule. in this example, the where element in the first rule defines a condition which matches results that have a title of 'canal'. three attributes are used for this purpose. the subject is the variable from the result that want to compare. in this case, '?title' is used to compare the title. the rel specifies a relation operator to compare with. here 'equals' is the operator used so an exact...
... likely be simpler and faster to just filter these out using the query xpath expression rather than generating the results then using a condition to filter them. rules and conditions are more useful when using multiple rules. we can add multiple where elements if we want to check additional conditions. when multiple conditions are present, they must all match for the rule to apply. adding to the previous example, here we check for people with a space in their name, and a total number of letters less than 15. note the assign element in the example above, used to calculate the '?letters' variable from the length of the name, minus one for the space character. naturally, this won't work for people with more than two names (joan of arc for instance), but rule conditions allow a number of useful w...
...And 2 more matches

Adding Event Handlers to XBL-defined Elements - Archive of obsolete content
in that example, oncommand handlers were added to some buttons. handler element however, you may want to add an event handler to the entire contents, that is, all the elements defined in the content tag. this could be useful when trapping the focus and blur events. to define an event handler, use the handler element. ...
...in that example, oncommand handlers were added to some buttons. handler element however, you may want to add an event handler to the entire contents, that is, all the elements defined in the content tag. this could be useful when trapping the focus and blur events. to define an event handler, use the handler element. ...
...similarly, you may wish to change a property when the element is focused. you might have a need to change whether an element can have the focus or not. for this, you can use a special style property -moz-user-focus. this property controls whether an element can be focused. (see focus and selection) handling mouse events for mouse events, you can use the button attribute to have the handler ...
...And 2 more matches

Tree Box Objects - Archive of obsolete content
it is used to indicate that one or more rows have been added to the tree or removed from the tree. the tree will redraw the affected area. you don't need to call the rowcountchanged() function when a row has simply changed in some way, for example if a cell's label changes. in this case, there are other drawing functions that can be used. ...
... » this section will describe the tree box object used to handle how a tree is displayed. about the tree box object box objects were described in an earlier section. the tree box object is a specialized box object used specifically for trees. the tree box implements the treeboxobject interface. redrawing the tree we already saw the rowcountchanged() function of the tree box object in the previous section. it is used to indicate that one or more rows have been added to the tree or removed from the tree. the tree will redraw the affected area. you don't need to call the rowcountchanged() function when a row has simply changed in some way, for example if a cell's label changes. in this case, there are other drawing functions that can be used. the simplest is to call invalidaterow() which...
... if the column is a string, we are running on mozilla 1.7 or earlier, but for later versions we get the column id from the column object. if you are writing code for multiple versions, you should check for this as above. the last argument to getcellat() is the child type which is filled in with a string depending on what part of the cell the coordinate is at. if you move the mouse around in the previous example, you might notice the label change between 'text' and 'cell'. the value 'text' indicates the area where the text would be drawn and the value 'cell' indicates the area around the text, for example, the margin on the left side where the open and close twisties are normally drawn. if there was a twisty, however, the value would be 'twisty' instead. this is convenient since you could det...
...And 2 more matches

Mozilla release FAQ - Archive of obsolete content
similar to a bsd-style license. take a look at mozilla.org's npl area for details. what are all of the codenames given to various netscape/mozilla projects? gecko (formerly raptor) is the new html rendering engine in mozilla. it features speed improvements, a more modular nature, and significantly less platform-dependant code. ...
... at mozilla.org's npl area for details. what are all of the codenames given to various netscape/mozilla projects? gecko (formerly raptor) is the new html rendering engine in mozilla. it features speed improvements, a more modular nature, and significantly less platform-dependant code. it is more suitable for being embedded in other applications than the previous rendering engine. ...
...ecause you're not using a recognized version of your os. go dig through the makefiles in config and remove the offending portions, and see if that fixes things. if not, post to netscape.public.mozilla.builds problems of this sort are currently most likely to happen in nspr, as it still uses the classic build system. it's doubtful that this will happen in the main tree. /usr/include/stdlib.h:196: previous declaration of `seed48' see section 3.7 nothing looks much like an error, except something returned error status your compiler has a switch (probably) that prints everything it's doing (i.e. programs spawned), which might help you find out what arguments it's passing to ld, or whatever, and thus perhaps enlighten you as to the problem. on gcc, try gcc -v (rest of command line). how long will...
...And 2 more matches

Reference - Archive of obsolete content
values for the script's language attribute no longer work, e.g. <script language="javascript1.2"> will execute the script in the latest js version rather than js 1.2. so how should this be documented? in fx 1.0, js 1.2 is available, but not in the upcoming fx 1.5. there are 5 cases where "javascript1.2" is mentioned in this reference: special:search?search=javascript1.2&go=go. how should they be revised? --maian 23:43, 21 september 2005 (pdt) i think we need a new section in the reference that specifies the differences between versions, collecting this information into a single location rather than leaving it scattered haphazardly throughout the reference as it currently is. once that is done, the various code samples should be updated to reflect current practices and code if they cannot b...
....2 engine. --maian 05:41, 22 september 2005 (pdt) this is true. the wording should be changed with the javascript 1.x examples, as well as refer to the versions in the past tense. i also support the use of a deprecated pre box with these examples. since it's been 9 months since the last comment on this, i think i'll go ahead and change all of the examples. if anyone disagrees, you can always revert. sevenspade 13:19, 2 july 2006 (pdt) after some thought, i removed the references to using language="javascript1.2", and all references are merely presented as information detailing past behavior. the "backwards compatibility" sections have been renamed to "behavior in older versions." however, i think this is only appropriate if we are going to document the evolution of everything, or a...
...available in object which again suggests that object is not function. wich means that object actually doesn't inherit from function , but function inherits from object which is exactly the oppisite as my first thought (see picture above). i say this because now the function is not available in object, as if the inheritance is : object->function->instance but... while also holding in account the previous example where it was avalable in both instances when prototyping object it should be : function->object->instance or (function=object)->instance and ofcourse function == object return false ;) and the following statements also tells me that function == object although math is only an instance of object... which basicly says function != object alert(function instanceof object) //true alert...
...And 2 more matches

Desktop gamepad controls - Game development
it brings a console-like experience to your web games. the gamepad api gives you the ability to connect a gamepad to your computer and detect pressed buttons directly from the javascript code thanks to the browsers implementing such feature. an api exposes all the information you need to hook up your game's logic and successfully control the user interface and gameplay. api status, browser and hardware support the gamepad api is still in working draft status, although browser support is already quite good — around 63% global coverage, according to caniuse.com. ...
...y are fired when the gamepad is connected and disconnected respectively. the next function is update(), which updates the information about the pressed buttons and axes. the buttons variable contains the layout of a given controller (for example which buttons are where, because an xbox 360 layout may be different to a generic one), the cache containing the information about the buttons from the previous frame and the status containing the information from the current frame. the pressed() function gets the input data and sets the information about it in our object, and the axes property stores the array containing the values signifying the amount an axis is pressed in the x and y directions, represented by a float in the (-1, 1) range. after the gamepad is connected, the information about t...
...next, the button status is cleared and the new information is added. the same goes for the axes information — looping through axes adds the values to the array. received values are assigned to the proper objects and returns the pressed info for debugging purposes. the button.pressed() function detects the actual button presses: pressed: function(button, hold) { var n...
...And 2 more matches

Mobile accessibility - Learn web development
objective: to understand what problems exist with accessibility on mobile devices, and how to overcome them. accessibility on mobile devices the state of accessibility — and support for web standards in general — is good in modern mobile devices. ...
...evices being so popular and renowned platforms such as ios and android having full-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms. this article looks at mobile-specific accessibility considerations. prerequisites: basic computer literacy, a basic understanding of html, css, and javascript, and an understanding of the previous articles in the course. objective: to understand what problems exist with accessibility on mobile devices, and how to overcome them. accessibility on mobile devices the state of accessibility — and support for web standards in general — is good in modern mobile devices. long gone are the days when mobile devices ran completely different web technologies to desktop brow...
...ou can do a two-finger swipe up from the bottom of the lock screen. if you've set a passcode or pattern for unlocking your device, you will then be taken to the relevant entry screen to enter it. you can also explore by touch to find the unlock button at the bottom middle of the screen, and then double-tap. global and local menus talkback allows you to access global and local context menus, wherever you have navigated to on the device. the former provides global options relating to the device as a whole, and the latter provides options relating just to the current app/screen you are in. to get to these menus: access the global menu by quickly swiping down, and then right. access the local menu by quickly swiping up, and then right. swipe left and right to cycle between the different ...
...And 2 more matches

How CSS is structured - Learn web development
prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works. objective: to learn css's fundamental syntax structures in detail. applying css to html first, let's examine three methods of applying css to a document: with an external stylesheet, with an internal stylesheet, and with inline styles. external stylesheet an external stylesheet contains css in a separate file with a .css extension. this is the most common and useful method of bringing css to a document. ...
...ay encounter scenarios where two selectors select the same html element. consider the stylesheet below, with a p selector that sets paragraph text to blue. however, there is also a class that sets the text of selected elements to red. .special { color: red; } p { color: blue; } suppose that in our html document, we have a paragraph with a class of special. both rules apply. which selector prevails? do you expect to see blue or red paragraph text? <p class="special">what color am i?</p> the css language has rules to control which selector is stronger in the event of a conflict. these rules are called cascade and specificity. in the code block below, we define two rules for the p selector, but the paragraph text will be blue. this is because the declaration that sets the paragraph text...
...aph text will be blue. this is because the declaration that sets the paragraph text to blue appears later in the stylesheet. later styles replace conflicting styles that appear earlier in the stylesheet. this is the cascade rule. p { color: red; } p { color: blue; } however, in the case of our earlier example with the conflict between the class selector and the element selector, the class prevails, rendering red paragraph text. how can this happen even though a conflicting style appears later in the stylesheet? a class is rated as being more specific, as in having more specificity than the element selector, so it cancels the other conflicting style declaration. try this experiment for yourself! add html, then add the two p { ... } rules to your stylesheet. next, change the first p sel...
...And 2 more matches

Fundamental text and font styling - Learn web development
ext line, until all the content has been placed in the box. text content effectively behaves like a series of inline elements, being laid out on lines adjacent to one another, and not creating line breaks until the end of the line is reached, or unless you force a line break manually using the <br> element. note: if the above paragraph leaves you feeling confused, then no matter — go back and review our box model article, to brush up on the box model theory, before carrying on. the css properties used to style text generally fall into two categories, which we'll look at separately in this article: font styles: properties that affect the font that is applied to the text, affecting what font is applied, how big it is, whether it is bold, italic, etc. text layout styles: properties tha...
...ething approximately suitable. to emphasise this point, paragraphs are given the browser's default serif font if no other option is available — which is usually times new roman — this is no good for a sans-serif font! note: font names that have more than one word — like trebuchet ms — need to be surrounded by quotes, for example "trebuchet ms". a font-family example let's add to our previous example, giving the paragraphs a sans-serif font: p { color: red; font-family: helvetica, arial, sans-serif; } this gives us the following result: <h1>tommy the cat</h1> <p>well i remember it as though it were a meal ago...</p> <p>said tommy the cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. many a fat alley rat had met its d...
...at as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine. truly a wonder of nature this urban predator — tommy the cat had many a story to tell. but it was a rare occasion such as this that he did.</p> font size in our previous module's css values and units article, we reviewed length and size units. font size (set with the font-size property) can take values measured in most of these units (and others, such as percentages), however the most common units you'll use to size text are: px (pixels): the number of pixels high you want the text to be. this is an absolute unit — it results in the same final computed v...
...And 2 more matches

Styling lists - Learn web development
this article explains all. prerequisites: basic computer literacy, html basics (study introduction to html), css basics (study introduction to css), css text and font fundamentals. objective: to become familiar with the best practices and properties related to styling lists. a simple list example to begin with, let's look at a simple list example. throughout this article, we'll look at unordered, ordered, and description lists — all have styling features that are similar, and some that are particular to their type of list. ...
...tart attribute allows you to start the list counting from a number other than 1. ...
... allows you to start the list counting from a number other than 1. ...
...And 2 more matches

JavaScript basics - Learn web development
this happens in games, in the behavior of responses when buttons are pressed or with data entry on forms; with dynamic styling; with animation, etc. this article helps you get started with javascript and furthers your understanding of what is possible. what is javascript? javascript ("js" for short) is a full-fledged dynamic programming language that can add interactivity to a website. it was invented by brendan eich (co-founder of the mozilla project), the mozilla foundation, and the mozilla corporation. javascript is versatile and beginner-friendly. ...
...e comparison is not true, the second block of code—after the else statement—runs instead. functions functions are a way of packaging functionality that you wish to reuse. it's possible to define a body of code as a function that executes when you call the function name in your code. this is a good alternative to repeatedly writing the same code. you have already seen some uses of functions previously. for example: let myvariable = document.queryselector('h1'); alert('hello!'); these functions, document.queryselector and alert, are built into the browser. if you see something which looks like a variable name, but it's followed by parentheses— () —it is likely a function. functions often take arguments: bits of data they need to do their job. arguments go inside the p...
...e 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.onclick = function() {}; it's just shorter. supercharging our example website with this review of javascript basics completed (above), let's add some new features to our example site. adding an image changer in this section, you will learn how to use javascript and dom api features to alternate the display of one of two images. this change will happen as a user clicks the displayed image. choose an image you want to feature on your example site. ideally, the image will be the same ...
...And 2 more matches

Handling text — strings in JavaScript - Learn web development
in this article, we'll look at all the common things that you really ought to know about strings when learning javascript, such as creating strings, escaping quotes in strings, and joining strings together. prerequisites: basic computer literacy, a basic understanding of html and css, an understanding of what javascript is. objective: to gain familiarity with the basics of strings in javascript. the power of words words are very important to humans — they are a large part of how we communicate. ...
...far in the course have involved some string manipulation. strings — the basics strings are dealt with similarly to numbers at first glance, but when you dig deeper you'll start to see some notable differences. let's start by entering some basic lines into the browser developer console to familiarize ourselves. creating a string to start with, enter the following lines: let string = 'the revolution will not be televised.'; string; just like we did with numbers, we are declaring a variable, initializing it with a string value, and then returning the value. the only difference here is that when writing a string, you need to surround the value with quotes. if you don't do this, or miss one of the quotes, you'll get an error. try entering the following lines: let badstring = this is...
... then an error is raised (e.g. "missing; before statement"). if the browser can see where a string starts, but can't find the end of the string, as indicated by the 2nd quote, it complains with an error (with "unterminated string literal"). if your program is raising such errors, then go back and check all your strings to make sure you have no missing quote marks. the following will work if you previously defined the variable string — try it now: let badstring = string; badstring; badstring is now set to have the same value as string. single quotes vs. double quotes in javascript, you can choose single quotes or double quotes to wrap your strings in. both of the following will work okay: let sgl = 'single quotes.'; let dbl = "double quotes"; sgl; dbl; there is very little dif...
...And 2 more matches

Useful string methods - Learn web development
prerequisites: basic computer literacy, a basic understanding of html and css, an understanding of what javascript is. objective: to understand that strings are objects, and learn how to use some of the basic methods available on those objects to manipulate strings. strings as objects most things are objects in javascript. ...
...\'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.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back;...
...lement(\'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.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back;...
...And 2 more matches

Introduction to the server side - Learn web development
on information provided by the user or stored preferences and can perform other operations as part of returning a response (e.g. sending notifications). most of the code to support a dynamic website must run on the server. creating this code is known as "server-side programming" (or sometimes "back-end scripting"). the diagram below shows a simple architecture for a dynamic website. as in the previous diagram, browsers send http requests to the server, then the server processes the requests and returns appropriate http responses. requests for static resources are handled in the same way as for static sites (static resources are any files that don't change —typically: css, javascript, images, pre-created pdf files etc). requests for dynamic resources are instead forwarded (2) to serv...
...ther very useful tools. what can you do on the server-side? server-side programming is very useful because it allows us to efficiently deliver information tailored for individual users and thereby create a much better user experience. companies like amazon use server-side programming to construct search results for products, make targeted product suggestions based on client preferences and previous buying habits, simplify purchases, etc. banks use server-side programming to store account information and allow only authorized users to view and make transactions. other services like facebook, twitter, instagram, and wikipedia use server-side programming to highlight, share, and control access to interesting content. some of the common uses and benefits of server-side programming are lis...
...s store credit cards so that details don't have to be entered again. sites like google maps can use saved or current locations for providing routing information, and search or travel history to highlight local businesses in search results. a deeper analysis of user habits can be used to anticipate their interests and further customize responses and notifications, for example providing a list of previously visited or popular locations you may want to look at on a map. note: google maps saves your search and visit history. frequently visited or frequently searched locations are highlighted more than others. google search results are optimized based on previous searches. go to google search. search for "football". now try typing "favourite" in the search box and observe the autocompl...
...And 2 more matches

TypeScript support in Svelte - Learn web development
we also had a look at using the transition directive to implement animations on dom elements in svelte. we will now learn how to use typescript in svelte applications. first we'll learn what typescript is and what benefits it can bring us. then we'll see how to configure our project to work with typescript files. finally we will go over our app and see what modifications we have to make to fully take advantage of typescript features. ...
... todos.svelte we will also use the filter enum in the todos.svelte component. first add the lang='ts' attribute to it, as before. next, import the filter enum — add the following import statement below your existing ones: import { filter } from '../types/filter.enum' now we will use it whenever we reference the current filter. replace your two filter-related blocks ...
... the following error reported, related to where we set the tabindex attribute. that's because typescript is type-checking the <h2> element and expects tabindex to be of type number. to fix it, replace tabindex="-1" with tabindex={-1}, like this: <h2 id="list-heading" bind:this={headingel} tabindex={-1}>{completedtodos} out of {totaltodos} items completed</h2> this way typescript can prevent us from incorrectly assigning it to a string variable. newtodo.svelte next we will take care of newtodo.svelte. as usual, add the lang='ts' attribute. the warning will indicate that we have to specify a type for the nameel variable. set its type to htmlelement like this: let nameel: htmlelement // reference to the name input dom node last for this file, we need to...
...And 2 more matches

Deployment and next steps - Learn web development
in this final article we will look at how to deploy your application and get it online, and also share some of the resources that you should go on to, to continue your svelte learning journey. prerequisites: at minimum, it is recommended that you are familiar with the core html, css, and javascript languages, and have knowledge of the terminal/command line. you'll need a terminal with node + npm installed to compile and build your app. objective: learn how to prepare our svelte app for production, and what learning resources you should visit next. ...
...5/5), done. writing objects: 100% (5/5), 541 bytes | 541.00 kib/s, done. total 5 (delta 3), reused 0 (delta 0) to gitlab.com:opensas/mdn-svelte-todo.git 7dac9f3..5725f46 master -> master whenever there's a job running gitlab will display an icon showing the process of the job. clicking on it will let you inspect the output of the job. you can also check the progress of the current and previous jobs from the ci / cd > jobs menu option of your gitlab project. once gitlab finishes building and publishing your app, it will be accessible at https://your-user.gitlab.io/mdn-svelte-todo/; in my case it's https://opensas.gitlab.io/mdn-svelte-todo/. you can check your page's url in gitlab's ui — see the settings > pages menu option. with this configuration, whenever you push changes to...
...ifficult to make a recommendation. nevertheless, svelte.js — the complete guide by academind is a very popular option with great ratings. the svelte handbook, by flavio copes, is also a useful reference for learning the main svelte concepts. if you prefer to read books, there's svelte and sapper in action by mark volkman, expected to be published in september 2020, but which you can already preview online for free. if you want dive deeper and understand the inner working of svelte's compiler you should check tan li hau's compile svelte in your head blog posts. here's part 1, part 2, and part 3. interacting with the community there are a number of different ways to get support and interact with the svelte community: svelte.dev/chat: svelte's discord server. @sveltejs: the official...
...And 2 more matches

Working with Svelte stores - Learn web development
in this article we will show another way to handle state management in svelte — stores. stores are global global data repositories that hold values. components can subscribe to stores and receive notifications when their values change. prerequisites: at minimum, it is recommended that you are familiar with the core html, css, and javascript languages, and have knowledge of the terminal/command line. ...
...= value) ondestroy(unsubscribe) </script> {mystorecontent} that's too much boilerplate for svelte! being a compiler, svelte has more resources to make our lives easier. in this case svelte provides the reactive $store syntax, also known as auto-subscription. in simple terms, you just prefix the store with the $ sign and svelte will generate the code to make it reactive automatically. so our previous code block can be replaced with this: <script> import mystore from './stores.js' </script> {$mystore} and $mystore will be fully reactive. this also applies to your own custom stores. if you implement the subscribe() and set() methods, like we'll do later, the reactive $store syntax will also apply to your stores. let's apply this to our alert component. update the <script> and mar...
...nt it's a bit annoying having to click on the alert to get rid of it. it would be better if the notification just disappeared after a couple of seconds. lets see how to do that. we'll specify a prop with the milliseconds to wait before clearing the notification, and we'll define a timeout to remove the alert. we'll also take care of clearing the timeout when the alert component is unmounted to prevent memory leaks. update the <script> section of your alert.svelte component like so: <script> import { ondestroy } from 'svelte' import { alert } from '../stores.js' export let ms = 3000 let visible let timeout const onmessagechange = (message, ms) => { cleartimeout(timeout) if (!message) { // hide alert if message is empty visible = false } ...
...And 2 more matches

Implementing feature detection - Learn web development
this article details how to write your own simple feature detection, how to use a library to speed up implementation, and native features for feature detection such as @supports. prerequisites: familiarity with the core html, css, and javascript languages; an idea of the high-level principles of cross-browser testing. ...
...ative feature detection mechanism introduced — the @supports at-rule. this works in a similar manner to media queries (see also responsive design problems) — except that instead of selectively applying css depending on a media feature like a resolution, screen width or aspect ratio, it selectively applies css depending on whether a css feature is supported. for example, we could rewrite our previous example to use @supports — see supports-feature-detect.html and supports-styling.css. if you look at the latter, you'll see a couple of @supports blocks, for example: @supports (flex-flow: row) and (flex: 1) { main { display: flex; } main div { padding-right: 4%; flex: 1; } main div:last-child { padding-right: 0; } } this at-rule block applies the css rule ...
... for each condition to work, you need to include a complete declaration (not just a property name) and not include the semi-colon on the end. @supports also has or and not logic available — the other block applies the float layout if the flexbox properties are not available: @supports not (flex-flow: row) and (flex: 1) { /* rules in here */ } this may look a lot more convenient than the previous example — we can do all of our feature detection in css, no javascript required, and we can handle all the logic in a single css file, cutting down on http requests. the problem here is browser support — @supports is not supported at all in ie, and only supported in very recent versions of safari/ios webkit (9+/9.2+), whereas the javascript version should work in much older browsers (prob...
...And 2 more matches

Introduction to cross browser testing - Learn web development
es occur? there are many different reasons why cross browser issues occur, and note that here we are talking about issues where things behave different across different browsers / devices / browsing preferences. before you even get to cross browser issues, you should have already fixed out bugs in your code (see debugging html, debugging css, and what went wrong? troubleshooting javascript from previous topics to refresh your memory if needed). cross browser issues commonly occur because: sometimes browsers have bugs, or implement features differently. this situation is a lot less bad than it used to be; back when ie4 and netscape 4 were competing to be the dominant browser in the 1990s, browser companies deliberately implemented things differently to each other to try to gain competitiv...
...consuming and scary, but it needn't be — you just need to plan carefully for it, and make sure you do enough testing in the right places to make sure you don't run into unexpected problems. if you are working on a large project, you should be testing it regularly, to make sure that new features work for your target audience, and that new additions to the code don't break old features that were previously working. if you leave all the testing to the end of a project, any bugs you uncover will be a lot more expensive and time consuming to fix than if you uncover them and fix them as you go along. the workflow for testing and bug fixes on a project can be broken down into roughly the following four phases (this is only very rough — different people may do things quite differently to this):...
...go into much detail about this, but cross-browser issues can have a serious effect on such planning. once you've got an idea of the required featureset, and what technologies you will likely build these features with, you should start exploring the target audience — what browsers, devices, etc. will the target audience for this site be using? the client might already have data about this from previous research they've done, e.g. from other web sites they own, or from previous versions of the web site you are now working on. if not, you will be able to get a good idea by looking at other sources, such as usage stats for competitors, or countries the site will be serving. you can also use a bit of intuition. so for example, you might be building an e-commerce site that serves customers in n...
...And 2 more matches

Storage access policy: Block cookies from trackers
sources. the tracking protection list is maintained by disconnect. when the list is applied in firefox, we make two important changes: first, we only use the "basic protection" version of the list, which excludes some categories of trackers. in the future, we may expand our protections to use the "strict protection" version of the list. second, firefox uses an additional "entity list", which prevents domains from being classified as trackers when they are loaded on a top-level site owned by the same organization. firefox uses the built-in tracking protection url classifier to determine which resources match the tracking protection list. domains are matched against the list in accordance with the safebrowsing v4 specification. specifically, we check the exact hostname of the resource aga...
... a.b.example.com yes blah.example.com example.com no a.b.example.com c.d.example.com no blah.example.com foo.blah.example.com yes what does the storage access policy block? the storage access policy blocks resources identified as trackers from accessing their cookies and other site storage when they are loaded in a third-party context. this prevents those resources from retrieving tracking identifiers stored in cookies or site storage and using them to identify users across visits to multiple first parties. specifically, firefox does this by imposing the following restrictions: cookies: block cookie request headers and ignore set-cookie response headers. return an empty string for calls to document.cookie and ignore requests to set ...
...r third-party resources classified as trackers is set to strict-origin-when-cross-origin. what is not blocked by the policy? this policy does not currently restrict third-party storage access for resources that are not classified as tracking resources. we may choose to apply additional restrictions to third-party storage access in the future. the restrictions applied by the policy will not prevent third-party scripts classified as tracking resources from accessing storage in the main context of the page. these scripts can continue to use storage scoped to the top-level origin. origins classified as trackers will have access to their own storage when they are loaded in a first-party context. cross-origin resources loaded from the same etld+1 as the top-level context will still have acc...
...And 2 more matches

SVN for Localizers
arn the process of using svn to obtain mozilla website source files from the mozilla servers and pushing your localizations right back to them. first things first, we need to give you a brief introduction to what svn is and where you can find the necessary tools to get started. if you're already familiar with this information, skip ahead to mozilla's svn repositories. brief intro to svn svn (abbreviation for subversion) is a free and open source repository tool we use to manage the localized mozilla web pages. it's a handy tool that allows us to grab, change, and store versions of source files in one location. you should know that when we say svn we are referring to either the svn server and the svn client. this may seem confusing, but don't fret because we'll make sure to differentiate bet...
...nd directories that are in the testing stage (i.e., staging). all file modifications belong in trunk because they are seen most frequently. inside mozilla.com/trunk/locales, there are separate directories for each locale that is localizing mozilla.com. in each of those locale directories are other directories with files to be localized in .lang format. note: we use the terms stage and prod (abbreviations of the terms staging and production) to refer to testing and publicly visible websites, respectively. working with svn now that you understand the mozilla svn repository layout (in particular the layout for mozilla.com), let's get some files into your hands to start localizing! the first thing you need to do is copy the mozilla repository you want to work on to your computer. enter t...
... your local svn repository (i.e., working directory) will be updated with the newest files from the url you initially cloned your repository from. it's very important that you do this often. as a general rule, you should at least do it before translating anything. sometimes mistakes happen and you need to start over. go back to the root of your working directory and execute this command: svn revert * this is a really helpful command because it reverts all of your changes to your working directory's last updated state. this is a huge blessing if you have been updating frequently. it's a nightmare if you haven't because it throws away all of your recent hard work. keep this in mind because if you did a lot of work and you made some errors in just one file, maybe it would be wiser to simp...
...And 2 more matches

NSS 3.12.4 release notes
ss_3_12_4_rtm nss see the documentation section for the build instructions. nss 3.12.4 source is also available on ftp.mozilla.org for secure https download: source tarball: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_12_4_rtm/src/. major changes in nss 3.12.4 nss 3.12.4 is the version that we submitted to nist for fips 140-2 validation. currently nss 3.12.4 is in the "review pending" state in the fips 140-2 pre-validation list at http://csrc.nist.gov/groups/stm/cmvp/documents/140-1/140inprocess.pdf added crl distribution point support (see cert.h). cert_decodecrlissuingdistributionpoint cert_findcrlissuingdistpointexten the old documentation of the expression matching syntax rules was incorrect, and the new corrected documentation is as follows for public ns...
... 470500: firefox 3.1b2 crash report [[@ nssutil3.dll@0x34c0 ] bug 482742: enable building util independently of the rest of nss bug 483653: unable to build certutil.exe for fennec/wince bug 485145: miscellaneous crashes in signtool on windows bug 485155: nss_enable_pkix_verify=1 causes sec_error_unknown_issuer errors bug 485527: rename the _x86_ macro in lib/freebl bug 485658: vfychain -p reports revoked cert bug 485745: modify fipstest.c to support cavs 7.1 drbg testing bug 486304: cert7.db/cert8.db corruption when importing a large certificate (>64k) bug 486405: allocator mismatches in pk12util.c bug 486537: disable execstack in freebl x86_64 builds on linux bug 486698: facilitate the building of major components independently and in a chain manner by downstream distributions bug 486999: ca...
...whenever value exceeds 384 bytes bug 487736: libpkix passes wrong argument...
...And 2 more matches

NSS PKCS11 Functions
"secmod.h" extern secstatus secmod_unloadusermodule(secmodmodule *module); parameters this function has the following parameters: module is the module to be unloaded. returns the function returns one of these values: if successful, secsuccess. if unsuccessful, secfailure. description secmod_unloadusermodule detaches a module from the nss trust domain and unloads it. the module should have previously been loaded by secmod_loadusermodule. secmod_closeuserdb close an already opened user database. note: the database must be in the internal token, and must be one created with secmod_openuserdb(). once the database is closed, the slot will remain as an empty slot until it's used again with secmod_openuserdb(). syntax #include <pk11pub.h> secstatus secmod_closeuserdb(pk11slotinfo *slot) p...
...b - don't try to open a certificate database. nokeydb - don't try to open a key database. forceopen - don't fail to initialize the token if thedatabases could not be opened. passwordrequired - zero length passwords are not acceptable(valid only if there is a keydb). optimizespace - allocate smaller hash tables and lock tables.when this flag is not specified, softoken will allocatelarge tables to prevent lock contention. for more info on module strings see pkcs11_module_specs. this function will return a reference to a slot. the caller is responsible for freeing the slot reference when it is through. freeing the slot reference will not unload the slot. that happens with the corresponding secmod_closeuserdb() function. until the secmod_closeuserdb function is called, the newly opened database ...
...certfromnickname( char *nickname, void *passwordarg); parameters this function has the following parameters: nickname a pointer to the nickname in the certificate database or to the nickname in the token. passwordarg a pointer to application data for the password callback function. this pointer is set with ssl_setpkcs11pinarg during ssl configuration. to retrieve its current value, use ssl_revealpinarg. returns the function returns one of these values: if successful, a pointer to a certificate structure. if unsuccessful, null. description when you are finished with the certificate structure returned by pk11_findcertfromnickname, you must free it by calling cert_destroycertificate. the pk11_findcertfromnickname function calls the password callback function set with pk11_setpasswordfun...
...And 2 more matches

NSS_3.12.3_release_notes.html
s's ability to interoperate with cryptographic hardware and software from other sources. most of these changes should cause no problems for nss users, but in some cases, some customers' software, hardware and/or certificates may be dependent on the old behaviors, and may have difficulty with the new behaviors. in anticipation of that, the nss team has provided ways to easily cause nss to revert to its previous behavior through the use of environment variables. here is a table of the new environment variables introduced in nss 3.12.3 and information about how they affect these new behaviors. the information in this table is excerpted from https://developer.mozilla.org/en/nss_reference/nss_environment_variables environment variable ...
...ompatibility (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 allows nickname conflicts in merged db bug 439199: sse2 instructions for bignum are not implemented on windows 3...
...clared isatty bug 471539: stop honoring digital signatures in certificates and crls based on weak hashes bug 471665: nss reports incorrect sizes for (aes) symmetric keys bug 471715: add cert to nssckbi to override rogue md5-collision ca cert bug 472291: crash in libpkix object leak tests due to null pointer dereferencing in pkix_build.c:3218. bug 472319: vfychain validates chain even if revoked certificate. bug 472749: softoken permits aes keys of any length to be created bug 473147: pk11mode tests fails on aix when using shareable dbs. bug 473357: ssltap incorrectly parses handshake messages that span record boundaries bug 473365: incompatible argument in pkix_validate.c. bug 473505: softoken's c_initialize and c_finalize should succeed after a fork in a child process b...
...And 2 more matches

SpiderMonkey 1.8.5
platform support spidermonkey 1.8.5 is supported on all the platforms where firefox 4 runs. spidermonkey 1.8.5 includes a just-in-time compiler (jit) (several, actually) that compiles javascript to machine code, for a significant speed increase. it is supported only on x86, x86_64 and arm architectures. on other platforms, the jit is simply disabled; javascript code runs in an interpreter, as in previous versions. it's the same language, just not as fast. migrating to spidermonkey 1.8 the following features in earlier versions of spidermonkey have been dropped. support for extended class methods (in particular, jsequalityop) has been removed. multithreaded js programs that race against the same objects are now explicitly not supported. multithreaded programs are allowed, but each thread mu...
...threaded programs are allowed, but each thread must operate on objects in a separate compartment, isolated from the other threads. the old build system (using makefile.ref) is no longer supported. spidermonkey 1.8.5 includes a new configure-based build system, introduced shortly after active development on the engine moved from cvs to mercurial. spidermonkey 1.8.5 is not binary-compatible with previous releases, nor is it source-code compatible. many jsapi types, functions, and callback signatures have changed, though most of them still have the same names and do the same things. applications will need significant changes, but most of those changes will be detected by the c/c++ compiler, so they are easy to detect and updating the code is a fairly straightforward job. here is a list of the ...
...ce-code compatible. many jsapi types, functions, and callback signatures have changed, though most of them still have the same names and do the same things. applications will need significant changes, but most of those changes will be detected by the c/c++ compiler, so they are easy to detect and updating the code is a fairly straightforward job. here is a list of the most significant changes. previous versions of spidermonkey supported two types of native functions: jsnative and jsfastnative. all support for the slow native function type has been removed, and the fast signature has been renamed to jsnative. embeddings that defined jsnatives in previous versions must update all those functions to the new signature. getters and setters of type jspropertyop took an id parameter of type jsval...
...And 2 more matches

SpiderMonkey 38
it also contains new language and api features described in detail below. ...
...m supported version is msvc10/2010. spidermonkey 38 includes a just-in-time compiler (jit) that compiles javascript to machine code, for a significant speed increase. it is supported on x86, x86_64, and arm architectures. on some other platforms (sparc, mips), the jit is provided but not supported. on all other platforms the jit is simply disabled; javascript code runs in an interpreter, as in previous versions. it's the same language, just not as fast. migrating to spidermonkey 38 .... xxx will need updating for actual new gc stuff at time! a major change to spidermonkey in 38 is that its apis support a moving garbage collector. this entailed changing the vast majority of the jsapi from raw types, such as js::value or js::value*, to js::handle and js::mutablehandle template types that...
...es have been specialized to implement the same interface as js::value, for simplicity and to ease migration pain. changes to introduce handles to the jsapi are not individually documented, because of the breadth of the changes involved. the following features in earlier versions of spidermonkey have been dropped. xxx list removed features here spidermonkey 38 is not binary-compatible with previous releases, nor is it source-code compatible. many jsapi types, functions, and callback signatures have changed, though most functions that have changed still have the same names and implement essentially unchanged functionality. applications will need significant changes, but most of those changes will be detected by the c/c++ compiler, so they are easy to detect and updating the code is a fai...
...And 2 more matches

Shell global objects
s are unwrapped first, so this can be used on objects from different globals. sleep(dt) sleep for dt seconds. compile(code) compiles a string to bytecode, potentially throwing. parsemodule(code) parses source text as a module and returns a module object. setmoduleresolvehook(function(module, specifier) {}) set the hostresolveimportedmodule hook to function. this hook is used to look up a previously loaded module object. it should be implemented by the module loader. getmoduleloadpath() return any --module-load-path argument passed to the shell. used by the module loader. parse(code) parses a string, potentially throwing. syntaxparse(code) check the syntax of a string, returning success value offthreadcompilescript(code[, options]) compile code on a helper thread. to wait for t...
...return whether js caching is enabled. setcachingenabled(b) enable or disable js caching. cacheentry(code) return a new opaque object which emulates a cache entry of a script. this object encapsulates the code and its cached content. the cache entry is filled and read by the evaluate function by using it in place of the source, and by setting savebytecode and loadbytecode options. printprofilerevents() register a callback with the profiler that prints javascript profiler events to stderr. callback is only registered if profiling is enabled. enablesinglestepprofiling() this function will fail on platforms that don't support single-step profiling (currently everything but arm-simulator). when enabled, at every instruction a backtrace will be recorded and stored in an array. adjacent dupl...
...ed as a result of the given operation. each element is the name of the function invoked, or the string 'eval:filename' if the code was invoked by eval or something similar. drainjobqueue() take jobs from the shell's job queue in fifo order and run them until the queue is empty. setpromiserejectiontrackercallback() sets the callback to be invoked whenever a promise rejection is unhandled or a previously-unhandled rejection becomes handled. functions available only in debug build disassemble([fun/code]) return the disassembly for the given function or code. all disassembly functions take these options as leading string arguments: -r disassemble recursively -l show line numbers -s omit source notes dis([fun/code]) disassemble functions into bytecodes. disfile('foo.
...And 2 more matches

Introduction to XPCOM for the DOM
this document is an introduction to the use of xpcom in the context of the dom code. the use of xpcom and nscomptr's described in this document covers about 80% of what you need to know to read the dom code, and even write some. for more advanced topics, please see the xpcom page. the tracking bug for this document is bug 99592. target audience: people who would like a quick introduction to the use of c++ and xpcom in the dom code. the understanding of the content of this document is a requirement to read the rest of the dom hacking guide. ...
... to those methods throughout your code. as opposed to a concreate class, an interface is supposed to be more stable through time. indeed, many interfaces in the mozilla code are frozen (this is indicated by the comment @frozen at the beginning of the interface definition). that means that the interface will never change anymore. the good thing is that your code will (in the best condition) last forever. the bad thing is that we have to find a way to improve those interfaces, and freezing them obliges implementers to create new interfaces. in summary, manipulate an interface rather than its implementation whenever possible! a pointer to an interface nsifoo implemented by nsfoo can be declared as follows nsifoo *fooptr = new nsfoo; a pointer such as fooptr is then called a "pointer to an int...
..., i really mean a "pointer to an interface implemented by an instance of a concrete c++ class". the important thing to note is that a pointer to nsifoo can only call the methods defined on the nsifoo interface, and on its parents. for instance, if nsfoo implements two different interfaces, nsifoo and nsibar, a pointer to nsifoo cannot call the methods defined on nsibar and vice-versa. note: the previous paragraph is extremely important. if you haven't grasped it completely, there is no need to read further. reference counting basics xpcom uses a reference counting mechanism (refcount in short) to make sure that no object is deleted while interface pointers still point at that object. indeed, dereferencing a pointer that points to a deleted object can have bad consequences. that is why each...
...And 2 more matches

nsIAnnotationService
tant. type_double 2 double type constant. type_string 3 string type constant. type_binary 4 binary type constant. type_int64 5 int64 type constant. note: use of value "1" is omitted due to it's temporary use as expire_never in bug 319455. methods setpageannotation() this method sets an annotation for given uri, overwriting any previous annotation with the same url/name. it is your job to namespace your annotation names. use the form "namespace/value", so your name would be like "bills_extension/page_state" or "history/thumbnail". do not use characters that are not valid in urls such as spaces, ":", commas, or most other symbols. you should stick to ascii letters and numbers plus "_", "-", and "/". the annotation "favicon"...
...ntially violating their privacy expectations about actions such as clear history. if there is an important annotation that the user or extension wants to keep, you should add a bookmark for the page and use an expire_never annotation. this will ensure the annotation exists until the item is removed by the user. setitemannotation() this method sets an annotation for given item, overwriting any previous annotation with the same url/name. it is your job to namespace your annotation names. use the form "namespace/value", so your name would be like "bills_extension/page_state" or "history/thumbnail". do not use characters that are not valid in urls such as spaces, ":", commas, or most other symbols. you should stick to ascii letters and numbers plus "_", "-", and "/". the annotation "favicon"...
...aname the annotation name. avalue the annotation value. aflags should be "0" for now, some flags will be defined in the future. aexpiration one of the expire_* constant value defined above. note: all item annotations will get deleted when the bookmark is removed. setpageannotationstring() this method sets an annotation for given uri by taking a string as input value, overwriting any previous annotation with the same url/name. it is your job to namespace your annotation names. use the form "namespace/value", so your name would be like "bills_extension/page_state" or "history/thumbnail". do not use characters that are not valid in urls such as spaces, ":", commas, or most other symbols. you should stick to ascii letters and numbers plus "_", "-", and "/". the annotation "favicon"...
...And 2 more matches

nsMsgNavigationType
r nsmsgviewcommandtype = components.interfaces.nsmsgviewcommandtype; mailnews/base/public/nsimsgdbview.idlscriptable please add a summary to this article. last changed in gecko 1.9 (firefox 3) constants name value description firstmessage 1 go to the first message in the view. nextmessage 2 go to the next message in the view. will wrap around if the wrap flag is set to true. previousmessage 3 go to the previous message in the view. will wrap around if the wrap flag is set to true. lastmessage 4 go to the last message in the view. togglethreadkilled 5 must match nsmsgviewcommandtype togglethreadkilled. firstunreadmessage 6 go to the first unread message in the view. nextunreadmessage 7 go to the next unread message in the view. will wrap around if the wrap fla...
...the previous message in the view. will wrap around if the wrap flag is set to true. lastmessage 4 go to the last message in the view. togglethreadkilled 5 must match nsmsgviewcommandtype togglethreadkilled. firstunreadmessage 6 go to the first unread message in the view. nextunreadmessage 7 go to the next unread message in the view. will wrap around if the wrap flag is set to true. previousunreadmessage 8 go to the previous unread message in the view. will wrap around if the wrap flag is set to true. lastunreadmessage 9 go to the last unread message in the view. ...
...dmessage 7 go to the next unread message in the view. will wrap around if the wrap flag is set to true. previousunreadmessage 8 go to the previous unread message in the view. will wrap around if the wrap flag is set to true. lastunreadmessage 9 go to the last unread message in the view. ...
...And 2 more matches

Thunderbird Binaries
described below are three types of generally available thunderbird packages - releases, early preview releases, and nightly builds (including trunk development builds) - and their downloaded locations. additionally, ad-hoc packages called try builds are made available on an as-needed basis to allow for testing of certain patches, and are typically announced in related bug reports. releases thunderbird releases have been extensively tested and are made available for anyone to download and use it. ...
...esting of certain patches, and are typically announced in related bug reports. releases thunderbird releases have been extensively tested and are made available for anyone to download and use it. ...
...eleases thunderbird releases have been extensively tested and are made available for anyone to download and use it. thunderbird current release can be downloaded from https://www.mozilla.org/thunderbird/ past thunderbird releases can be downloaded from https://releases.mozilla.org/pub/thunderbird/releases/ early preview releases whilst writing new versions of thunderbird, developers release preview versions, known as betas. ...
...And 2 more matches

Mozilla
an important aspect of developing code for any browser, including firefox, as well as any web-oriented project, is its security. these articles provide important guides and references to ensuring the code you write is secure, including both design recommendations and testing guidelines. bugzilla bugzilla.mozilla.org (often abbreviated b.m.o) is mozilla.org's bug-tracking system, a database for recording bugs and enhancement requests for firefox, thunderbird, seamonkey, camino, and other mozilla.org projects. building mozilla in this article, we list documents that will guide you in building firefox or other projects based upon mozilla code. building spidermonkey wit...
... url, and the parameters that need to be passed to that url. creating reftest-based unit tests the reftest harness compares the display of two web pages. if the bitmaps resulting from displaying the two files in an 800x1000 window are identical, the test passes. if they differ, the test fails. or, alternatively, the conditions can be reversed (a != test rather than an == test). the power of the tool comes from the fact that there is more than one way to achieve any given visual effect in a browser. so, if the effect of complex markup is being tested, put that complex markup into a page and create another page that uses simple markup to achieve the same visual effect. reftest will then compare them and verify whether t...
...about the mailnews backend which is also used in other projects such as eudora/penelope, thunderbird, correo, etc. setting up an update server the goal of this document is to provide instructions for installing a locally-served firefox update. signing mozilla apps for mac os x mac os x's gatekeeper functionality prevents users from launching applications that haven't been code-signed, in order to help keep their computers secure. firefox and thunderbird releases are both signed before shipping; this article describes the process. supported build targets page moved to the in-tree documentation: https://firefox-source-docs.mozilla.org/build/builds...
...And 2 more matches

Debugger.Object - Firefox Developer Tools
on at all, this is undefined. boundarguments if the referent is a bound debuggee function, this is an array (in the debugger object’s compartment) that contains the debuggee values of the arguments object it was bound to. if the referent is either not a bound function, not a debuggee function, or not a function at all, this is undefined. isproxy if the referent is a (scripted) proxy, either revoked or not, return true. if the referent is not a (scripted) proxy, return false. proxytarget if the referent is a non-revoked (scripted) proxy, return a debugger.object instance referring to the ecmascript [[proxytarget]] of the referent. if the referent is a revoked (scripted) proxy, return null. if the referent is not a (scripted) proxy, return undefined. proxyhandler if the referent is a ...
...if the referent is not a (scripted) proxy, return undefined. ...
...if the referent is not a (scripted) proxy, return undefined. promisestate if the referent is a promise, return a string indicating whether the promise is pending, or has been fulfilled or rejected. ...
...And 2 more matches

Transformations - Web APIs
until now, we only used the default grid and changed the size of the overall canvas for our needs. with transformations there are more powerful ways to translate the origin to a different position, rotate the grid and even scale it. saving and restoring state before we look at the transformation methods, let's look at two other methods which are indispensable once you start generating ever more complex drawings. save() saves the entire state of the canvas. restore() restores the most recently saved canvas state. canvas states are stored on a stack. every time the save() method is called, the current drawing state is pushed onto the stack. ...
...next we save this state and make cha...
...anvas" width="150" height="150"></canvas> draw(); the first step is to draw a large rectangle with the default settings. next we save this state and make changes to the fill color. we then draw the second and smaller blue rectangle and save the state. again we change some drawing settings and draw the third semi-transparent white rectangle. so far this is pretty similar to what we've done in previous sections. however once we call the first restore() statement, the top drawing state is removed from the stack, and settings are restored. if we hadn't saved the state using save(), we would need to change the fill color and transparency manually in order to return to the previous state. this would be easy for two properties, but if we have more than that, our code would become very long, very...
...And 2 more matches

CustomEvent - Web APIs
tomevent. 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 currently registered target for the event. this is the object to which the event is ...
...bubble across the boundary between the shadow dom and the regular dom. event.currenttarget read only a reference to the currently registered target for the event. this is the object to which the event is currently slated to be sent. it's possible this has been changed along the way through retargeting. event.deeppath an array of dom nodes through which the event has bubbled. event.defaultprevented read only indicates whether or not the call to event.preventdefault() canceled the event. event.eventphase read only indicates which phase of the event flow is being processed. event.explicitoriginaltarget read only the explicit original target of the event (mozilla-specific.) event.originaltarget read only the original target of the event, before any retargetings. (mozilla-sp...
...d only the explicit original target of the event (mozilla-specific.) event.originaltarget read only the original target of the event, before any retargetings. (mozilla-specific.) event.returnvalue a historical property introduced by internet explorer and eventually adopted into the dom specification in order to ensure existing sites continue to work. ideally, you should try to use event.preventdefault() and event.defaultprevented instead, but you can use returnvalue if you choose to do so. event.srcelement a non-standard alias (from old versions of microsoft internet explorer) for event.target. some other browsers are starting to support it for web compatibility purposes. event.target read only a reference to the target to which the event was originally dispatched. event.time...
...And 2 more matches

Element: auxclick event - Web APIs
a non-primary pointing device button (any mouse button other than the primary—usually leftmost—button) has been pressed and released both within the same element. auxclick is fired after the mousedown and mouseup events have been fired, in that order. ...
... after the mousedown and mouseup events have been fired, in that order. bubbles yes cancelable yes interface mouseevent event handler property onauxclick preventing default actions for the vast majority of browsers that map middle click to opening a link in a new tab, including firefox, it is possible to cancel this behavior by calling preventdefault() from within an auxclick event handler. ...
... additionally, you may need to avoid opening a system context menu after a right click. ...
...And 2 more matches

KeyboardEvent.getModifierState() - Web APIs
e modifiers except shift are active. if (event.getmodifierstate("control") + event.getmodifierstate("alt") + event.getmodifierstate("meta") > 1) { return; } // handle shortcut key with standard modifier if (event.getmodifierstate("accel")) { switch (event.key.tolowercase()) { case "c": if (event.getmodifierstate("shift")) { // handle accel + shift + c event.preventdefault(); // consume the key event } break; case "k": if (!event.getmodifierstate("shift")) { // handle accel + k event.preventdefault(); // consume the key event } break; } return; } // do somethig different for arrow keys if scrolllock is locked. if ((event.getmodifierstate("scrolllock") || event.getmodifierstate("scroll") /* hack...
...; } // do somethig different for arrow keys if scrolllock is locked. ...
...difierstate("control") && !event.getmodifierstate("alt") && !event.getmodifierstate("meta")) { switch (event.key) { case "arrowdown": case "down": // hack for ie and old gecko event.preventdefault(); // consume the key event break; case "arrowleft": case "left": // hack for ie and old gecko // do something different if scrolllock is locked. event.preventdefault(); // consume the key event break; case "arrowright": case "right": // hack for ie and old gecko // do something different if scrolllock is locked. ...
...And 2 more matches

Pointer events - Web APIs
events (mousedown/pointerdown, mousemove/pointermove, etc.). consequently, pointer event types are intentionally similar to mouse event types. additionally, a pointer event contains the usual properties present in mouse events (client coordinates, target element, button states, etc.) in addition to new properties for other forms of input: pressure, contact geometry, tilt, etc. in fact, the pointerevent interface inherits all of the mouseevent properties, thus facilitating the migration of content from mouse events to pointer events. terminology active buttons state the condition when a pointer has a non-zero value for the buttons property. for example, in the case of a pen, when the pen has physical contact with the digitizer, or at least one button is depressed while hovering. active ...
...ific coordinate (or set of coordinates) on a screen. examples of pointer input devices are mouse, pen/stylus, and touch contacts. pointer capture pointer capture allows the events for a pointer to be retargeted to a particular element other than the normal hit test result of the pointer's location. pointer event a dom event fired for a pointer. interfaces the primary interface is the pointerevent interface which has a constructor plus several event types and associated global event handlers. the standard also includes some extensions to the element and navigator interfaces. the following sub-sections contain short descriptions of each interface and property. pointerevent interface the pointerevent interface extends the mouseevent interface and has the following properties. (all of ...
... receives pointer capture. lostpointercapture onlostpointercapture fired after pointer capture is released for a pointer. element extensions there are three extensions to the element interface: setpointercapture() designates a specific element as the capture target of future pointer events. releasepointercapture() this method releases (stops) pointer capture that was previously set for a specific pointer event. navigator extension the navigator.maxtouchpoints property is used to determine the maximum number of simultaneous touch points that are supported at any single point in time. examples this section contains examples of basic usage of using the pointer events interfaces. registering event handlers this example registers a handler for every event type f...
...And 2 more matches

SVGTransformList - Web APIs
_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. initialize(in svgtransform newitem) svgtransform clears all existing current items from the list and re-initializes the list to hold the single item specified by the parameter. if the inserted item is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. the return value is the item inserted into the list. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. getitem(in unsigned long index) svgtransfor...
...ception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. insertitembefore(in svgtransform newitem, in unsigned long index) svgtransform inserts a new item into the list at the specified position. the first item is number 0. if newitem is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. if the item is already in this list, note that the index of the item to insert before is before the removal of the item. if the index is equal to 0, then the new item is inserted at the front of the list. if the index is greater than or equal to numberofitems, then the new item is appended to the e...
...t. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. replaceitem(in svgtransform newitem, in unsigned long index) svgtransform replaces an existing item in the list with a new item. if newitem is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. if the item is already in this list, note that the index of the item to replace is before the removal of the item. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. ...
...And 2 more matches

Screen Wake Lock API - Web APIs
it allows for a simple platform based solution which up until now could only be achieved via workarounds which were potentially power hungry. only visible (active) documents can acquire the screen wake lock. ...
...es from dimming or locking the screen when an application needs to keep running. concepts and usage most devices by default turn off their screen after a specified amount of time to prolong the life of the hardware. modern devices do this to save on battery power. whilst this is a useful feature, some applications need the screen to stay awake to be their most useful. the screen wake lock api prevents the screen from turning off, dimming or locking. it allows for a simple platform based solution which up until now could only be achieved via workarounds which were potentially power hungry. only visible (active) documents can acquire the screen wake lock. there are plenty of use cases for keeping a screen on, including reading an ebook, map navigation, following a recipe, presenting to an a...
...ore a reference to the sentinel object to control release later and also to reacquire the lock if need be. the screen wake lock api should be used to keep the screen on to benefit usability. it's a good idea to show some feedback on the interface to show if wake lock is active and a way for the user to disable it if they wish. screen wake lock api interfaces wakelock the wakelock interface prevents device screens from dimming or locking when an application needs to keep running. wakelocksentinel provides a handle to the underlying platform wake lock and if referenced can be manually released and reacquired. get an instance of the object by calling wakelock.request. navigator.wakelock returns a wakelock object instance, from which all other functionality can be accessed. examples ...
...And 2 more matches

Multi-touch interaction - Web APIs
ependent as well as application specific var pinch_threshhold = ev.target.clientwidth / 10; if (diff1 >= pinch_threshhold && diff2 >= pinch_threshhold) ev.target.style.background = "green"; } else { // empty tpcache tpcache = new array(); } } } touch start handler the touchstart event handler caches touch points to support 2-touch gestures. it also calls preventdefault() to keep the browser from applying further event handling (for example, mouse event emulation). function start_handler(ev) { // if the user makes simultaneous touches, the browser will fire a // separate touchstart event for each touch point. thus if there are // three simultaneous touches, the first touchstart event will have // targettouches length of one, the second event will ...
...ying further event handling (for example, mouse event emulation). function start_handler(ev) { // if the user makes simultaneous touches, the browser will fire a // separate touchstart event for each touch point. thus if there are // three simultaneous touches, the first touchstart event will have // targettouches length of one, the second event will have a length // of two, and so on. ...
... function move_handler(ev) { // note: if the user makes more than one "simultaneous" touches, most browsers // fire at least one touchmove event and some will fire several touchmoves. // consequently, an application might want to "ignore" some touchmoves. ...
...And 2 more matches

Supporting both TouchEvent and MouseEvent - Web APIs
in response to the same user input. this section describes the requirement that may affect an application. if the browser fires both touch and mouse events because of a single user input, the browser must fire a touchstart before any mouse events. ...
...oth touch and mouse events because of a single user input, the browser must fire a touchstart before any mouse events. consequently, if an application does not want mouse events fired on a specific touch target element, the element's touch event handlers should call preventdefault() and no additional mouse events will be dispatched. here is a code snippet of the touchmove event handler calling preventdefault(). ...
... touchstart before any mouse events. consequently, if an application does not want mouse events fired on a specific touch target element, the element's touch event handlers should call preventdefault() and no additional mouse events will be dispatched. here is a code snippet of the touchmove event handler calling preventdefault(). ...
...And 2 more matches

A basic 2D WebGL animation example - Web APIs
canvas = null; // aspect ratio and coordinate system // details let aspectratio; let currentrotation = [0, 1]; let currentscale = [1.0, 1.0]; // vertex information let vertexarray; let vertexbuffer; let vertexnumcomponents; let vertexcount; // rendering data shared with the // scalers. ...
...in this case, we set the viewport based on the size of the <canvas>, call clearcolor() to set the color ...
...in this case, we set the viewport based on the size of the <canvas>, call clearcolor() to set the color to use when clearing content, then we clear the buffer with clear(). next, the current rotation vector is compute...
...And 2 more matches

Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
\\ -2 \\ 0 \end{matrix} \right ] webxr automatically normalizes vectors to have a length of 1 meter; however, you may find that it makes sense to do it yourself for various reasons, such as to improve performance of calculations by not having to repeatedly perform normalization. once you've determined the matrix representing the combination of movements you wish the camera to make, you need to reverse it, because you're not moving the camera. since you're actually moving everything except the camera, take the inverse of the transform matrix to get an inverse transform matrix. this inverse matrix can then be applied to the objects in the world to alter their positions and orientations to simulate the desired camera position. this is why the xrrigidtransform object used by webxr to represen...
...her than horizontally. panning is great for establishing a setting or providing a sense of scope in a vast space or on a vast object. or just for looking left and right, like simulating the player turning their head in an immersive or vr scenario. to do this, then, we need to rotate around the y axis, to simulate the left and right rotation of the camera. using the glmatrix library we've used previously, this can be performed using the rotatey() method on the mat4 class, which represents a standard 4x4 matrix. to rotate the viewpoint defined by the matrix viewmatrix by panangle radians: mat4.rotatey(viewmatrix, viewmatrix, panangle); if panangle is positive, this transform will pan the camera to the right; a negative value for panangle will pan to the left. tilting (pitching up or down...
... as waves or turbulence, but can also be used for dramatic effect. to accomplish this rotation around the z axis using glmatrix: mat4.rotatez(viewmatrix, viewmatrix, cantangle); combining movements you can perform multiple movements at once, such as zooming while panning, or tilting and canting at the same time. translating along multiple axes translating along multiple axes is quite easy. previously, we performed our translations like this: mat4.translate(viewmatrix, viewmatrix, [-trackdistance, 0, 0]); mat4.translate(viewmatrix, viewmatrix, [0, -pedestaldistance, 0]); mat4.translate(viewmatrix, viewmatrix, [0, 0, dollyydistance]); the solution here is obvious. since the translation is expressed as a vector providing the distance to move along each axis, we can combine them like thi...
...And 2 more matches

Geometry and reference spaces in WebXR - Web APIs
nstodegrees(), which convert back and forth between the two units for measuring angles. const radians_per_degree = math.pi / 180.0; let degreestoradians = (deg) => deg * radians_per_degree; let radianstodegrees = (rad) => rad / radians_per_degree; times and durations note that for security reasons, domhighrestimestamp usually introduces a small amount of imprecision to the clock in order to prevent it from being used in fingerprinting and timing-based attacks. all times and durations in webxr are measured using the domhighrestimestamp type, which is a double-precision floating-point value specifying the time in milliseconds relative to the starting time. since the value is a floating-point number, it may be accurate to well better than the millisecond level, depending on the platform an...
...re measured using the domhighrestimestamp type, which is a double-precision floating-point value specifying the time in milliseconds relative to the starting time. since the value is a floating-point number, it may be accurate to well better than the millisecond level, depending on the platform and hardware. time is primarily used to determine the amount of time that's elapsed since the scene's previous animation frame was drawn. as such the time is typically in alignment with the refresh rate of the display, or some fraction thereof if the frame rate needs to be constrained due to performance issues. this means that the time will usually step in 1/60th of a second intervals, assuming a 60 fps frame rate. doing the math, we find that this means that each frame will ideally be rendered 16.666...
...nted reality (ar), this is because of the need to insert virtual objects into the real world, not only placing them correctly but also ensuring that they don't seem to wander around on their own as the user's perspective shifts. in virtual reality (vr), it's all about creating a sense of space in which the user's movements are precisely matched by the imagery presented on the virtual display, to prevent disjoints and disconnects that could cause discomfort or worse. thus it's all about creating a sense of space. from the perspective of an xr developer, designing the stage is the part that matters most to your users. like an architect or a set designer, you have the power to create moods and experiences through a physical environment. how you structure that space will both depend on and influ...
...And 2 more matches

Using the Web Animations API - Web APIs
cally set values from properties to durations. for building custom animation libraries and creating interactive animations, the web animations api might be the perfect tool for the job. let's see what it can do! browser support the basic web animations api features discussed in this article are available by default in firefox 48+ and chrome 36+. safari supports web animations in its technology preview version and there is also a handy polyfill that tests for feature support and adds it where necessary. writing css animations with the web animations api one of the more familiar ways to approach learning the web animations api is to start with something most web developers have played with before: css animations. css animations have a familiar syntax that breaks down nicely for demonstratio...
...the web animations api provides several useful methods for controlling playback. let’s take a look at pausing and playing animations in the growing/shrinking alice game (check out the full code on codepen): in this gam...
...mation later, but for now, let’s look closer at the cupcake’s animation: var nommingcake = document.getelementbyid('eat-me_sprite').animate( [ { transform: 'translatey(0)' }, { transform: 'translatey(-80%)' } ], { fill: 'forwards', easing: 'steps(4, end)', duration: alicechange.effect.timing.duration / 2 }); the element.animate() method will immediately run after it is called. to prevent the cake from eating itself up before the user has had the chance to click on it, we call animation.pause() on it immediately after it is defined, like so: nommingcake.pause(); we can now use the animation.play() method to run it whenever we’re ready: nommingcake.play(); specifically, we want to link it to alice’s animation, so she gets bigger as the cupcake gets eaten. we can achieve ...
...And 2 more matches

Using XMLHttpRequest - Web APIs
ts.join(odata.technique === 2 ? "\r\n" : "&")); } } } function processstatus (odata) { if (odata.status > 0) { return; } /* the form is now totally serialized! do something before sending it to the server... */ /* dosomething(odata); */ /* console.log("ajaxsubmit - the form is now serialized. ...
...} } } function processstatus (odata) { if (odata.status > 0) { return; } /* the form is now totally serialized! do something before sending it to the server... */ /* dosomething(odata); */ /* console.log("ajaxsubmit - the form is now serialized. ...
... transmitted data is in the same format the form's submit() method uses to send data, if the form's encoding type were set to "multipart/form-data". formdata objects can be utilized in a number of ways with an xmlhttprequest. for examples, and explanations of how one can utilize formdata with xmlhttprequests, see the using formdata objects page. ...
...And 2 more matches

ARIA Test Cases - Accessibility
est files could be used as an "aria test file". new tests for internet explorer 8 rc1 on this msdn page the aria state/role mapping in ie8 to msaa roles can be directly checked. also, as a clever feature for at testing, the firing of events (like event_object_statechange) can be invoked from the examples. finally, a list of currently non-mapped aria roles is given. documenting and filing bugs review the information on how to file a bug on an aria implementation. when documenting an issue, please also list it in the relevant compatibility table below. when possible provide a link to the bug in the database so that its status can be reviewed. widget test cases alert simple alert complex alert real alert example with aria-required and aria-invalid -- type in a email address without an...
...s pass zoomtext - - - - orca - - - - description description for groupbox and for button (al) note: the description role is no longer necessary as long as aria-describedby is used; however, this test case is still useful for testing aria-describedby. expected at behavior: when any control is focused inside the groupbox, where focus was previously outside of the groupbox, the description for the entire groupbox should be read by a screen reader. when the button is focused, the description of the button should be read after the button's label and role are read by the screen reader. regression testers should test both tabbing forward and back, to make sure that the groupbox description and button description are both read when the bu...
... upon initial focus, the label (if present), and role of the tree itself should be spoken, followed by the current tree item's information. when a tree item is read, the screen reader should announce its label, role, state and "item n of m" positional information. the state includes whether it is expandable and expanded/open. as focus is moved, outp...
...And 2 more matches

Basic concepts of flexbox - CSS: Cascading Style Sheets
you need to think in terms of two axes — the main axis and the cross axis. the main axis is defined by the flex-direction property, and the cross axis runs perpendicular to it. everything we do with flexbox refers back to these axes, so it is worth understanding how they work from the outset. the main axis the main axis is defined by flex-direction, which has four possible values: row row-reverse column column-reverse should you choose row or row-reverse, your main axis will run along the row in the inline direction. choose column or column-reverse and your main axis will run from the top of the page to the bottom — in the block direction. the cross axis the cross axis runs perpendicular to the main axis, therefore if your flex-direction (main axis) is set to row or row-r...
... understanding which axis is which is important when we start to look at aligning and justifying flex items; flexbox features properties that align and justify content along one axis or the other. ...
...ll items will stretch along the cross axis to fill its full size. you can see in the live example below how this looks. try editing the items or adding additional items in order to test the initial behavior of flexbox. changing flex-direction adding the flex-direction property to the flex container allows us to change the direction in which our flex items display. ...
...And 2 more matches

Variable fonts guide - CSS: Cascading Style Sheets
at it is up to date. for example linux oses need the latest linux freetype version, and macos prior to 10.13 does not support variable fonts. if your operating system is not up to date, you will not be able to use variable fonts in web pages or the firefox developer tools. variable fonts: what they are, and how they differ to better understand what's different about variable fonts, it is worth reviewing what non-variable ones are like and how they compare. standard (or static) fonts in the past, a typeface would be produced as a number of individual fonts, and each font would represent one specific width/weight/style combination. so you would have separate files for 'roboto regular', 'roboto bold', and 'roboto bold italic' — meaning that you could end up with 20 or 30 different font fi...
...h a variable font, all of those permutations can be contained in a single file. that file would be larger than a single font, but in most cases smaller or about the same size as the 4 you might load for body copy. the advantage in choosing the variable font is that you have access to the entire range of weights, widths, and styles available, rather than being constrained to only the few that you previously would have loaded separately. this allows for common typographic techniques such as setting different size headings in different weights for better readability at each size, or using a slightly narrower width for data-dense displays. for comparison, it is typical in a typographic system for a magazine to use 10–15 or more different weight and width combinations throughout the publication...
...th the standard and lower-level syntax are included. the lower-level syntax (font-variation-settings) was the first mechanism implemented in order to test the early implementations of variable font support, and is necessary to utilize new or custom axes beyond the five registered ones. however, the w3c’s intent was for this syntax not to be used when other attributes are available. therefore wherever possible, the appropriate property should be used, with the lower-level syntax of font-variation-settings only being used to set values or axes not available otherwise. notes when using font-variation-settings it is important to note that axis names are case-sensitive. the registered axis names must be in lower case, and custom axes must be in upper case. for example: font-variation-s...
...And 2 more matches

all - CSS: Cascading Style Sheets
to the values specified in another stylesheet origin. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* global values */ all: initial; all: inherit; all: unset; /* css cascading and inheritance level 4 */ all: revert; the all property is specified as one of the css global keyword values. note that none of these values affect the unicode-bidi and direction properties. values initial specifies that all the element's properties should be changed to their initial values. inherit specifies that all the element's properties should be changed to their inherited values. unset specifies that all the elem...
...de-bidi and direction properties. values initial specifies that all the element's properties should be changed to their initial values. inherit specifies that all the element's properties should be changed to their inherited values. unset specifies that all the element's properties should be changed to their inherited values if they inherit by default, or to their initial values if not. revert specifies behavior that depends on the stylesheet origin to which the declaration belongs: user-agent origin equivalent to unset. user origin rolls back the cascade to the user-agent level, so that the specified values are calculated as if no author-level or user-level rules were specified for the element. author origin rolls back the cascade to the user level, so that the speci...
...r-agent origin equivalent to unset. user origin rolls back the cascade to the user-agent level, so that the specified values are calculated as if no author-level or user-level rules were specified for the element. author origin rolls back the cascade to the user level, so that the specified values are calculated as if no author-level rules were specified for the element. for purposes of revert, the author origin includes the override and animation origins. formal definition initial valuethere is no practical initial value for it.applies toall elementsinheritednocomputed valueas the specified value applies to each property this is a shorthand for.animation typeas each of the properties of the shorthand (all properties but unicode-bidi and direction) formal syntax initial | i...
...And 2 more matches

animation-fill-mode - CSS: Cascading Style Sheets
ed to it. this is the default value. forwards the target will retain the computed values set by the last keyframe encountered during execution. ...
...the first relevant keyframe depends on the value of animation-direction: animation-direction first relevant keyf...
...the first relevant keyframe depends on the value of animation-direction: animation-direction first relevant keyframe normal or alternate 0% or f...
...And 2 more matches

<color> - CSS: Cascading Style Sheets
hite #ffffff maroon #800000 red #ff0000 purple #800080 fuchsia #ff00ff green #008000 lime #00ff00 olive #808000 yellow #ffff00 navy #000080 blue #0000ff teal #008080 aqua #00ffff css level 2 (revision 1) orange #ffa500 css color module level 3 aliceblue #f0f8ff antiquewhite #faebd7 aquamarine #7fffd4 azure #f0ffff beige #f5f5dc bisque #ffe4c4 blanchedalmond #ffebcd blueviolet #8a2be2 brown #a52a2a burlywood #deb887 ...
...eat #f5deb3 whitesmoke #f5f5f5 yellowgreen #9acd32 css color module level 4 rebeccapurple #663399 transparent keyword the transparent keyword represents a fully transparent color. this makes the background behind the colored item completely visible. technically, transparent is a shortcut for rgba(0,0,0,0). compatibility note: to prevent unexpected behavior, such as in a <gradient>, the current css spec states that transparent should be calculated in the alpha-premultiplied color space. however, be aware that older browsers may treat it as black with an alpha value of 0. historical note: transparent wasn't a true color in css level 2 (revision 1). it was a special keyword that could be used instead of a regular <color> valu...
... currentcolor keyword the currentcolor keyword represents the value of an element's color property. this lets you use the color value on properties that do not receive it by default. ...
...And 2 more matches

flex-wrap - CSS: Cascading Style Sheets
that lines are stacked. 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. see using css flexible boxes for more properties and information. syntax flex-wrap: nowrap; /* default value */ flex-wrap: wrap; flex-wrap: wrap-reverse; /* global values */ flex-wrap: inherit; flex-wrap: initial; flex-wrap: unset; the flex-wrap property is specified as a single keyword chosen from the list of values below. values the following values are accepted: nowrap the flex items are laid out in a single line which may cause the flex container to overflow. the cross-start is either equivalent to start or before depending on th...
...id out in a single line which may cause the flex container to overflow. the cross-start is either equivalent to start or before depending on the flex-direction value. this is the default value. wrap the flex items break into multiple lines. the cross-start is either equivalent to start or before depending flex-direction value and the cross-end is the opposite of the specified cross-start. ...
...s. the cross-start is either equivalent to start or before depending flex-direction value and the cross-end is the opposite of the specified cross-start. wrap-reverse behaves the same as wrap but cross-start and cross-end are permuted. ...
...And 2 more matches

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
ss. let's look at this from two sides: using color within a stylesheet, and adding and changing color using javascript code to alter the styles of elements. specifying colors in stylesheets the easiest way to apply color to elements—and the way you'll usually do it—is to simply specify colors in the css that's used when rendering elements. while we won't use every single property mentioned previously, we'll look at a couple of examples. the concept is the same anywhere you use color. let's take a look at an example, starting by looking at the results we're trying to achieve: html the html responsible for creating the above example is shown here: <div class="wrapper"> <div class="box boxleft"> <p> this is the first box. </p> </div> <div class="box boxright"> ...
...econd box. </p> </div> </div> this is pretty simple, using a <div> as a wrapper around the contents, which consists of two more <div>s, each styled differently with a single paragraph (<p>) in each box. the magic happens, as usual, in the css, where we'll apply colors define the layout for the html above. css we'll look at the css to create the above results a piece at a time, so we can review the interesting parts one by one. .wrapper { width: 620px; height: 110px; margin: 0; padding: 10px; border: 6px solid mediumturquoise; } the .wrapper class is used to assign styles to the <div> that encloses all of our other content. this establishes the size of the container using width and height as well as its margin and padding. of more interest to our discussion here is the u...
...boxright { float: right; background-color: hsl(270deg, 50%, 75%); outline: 4px dashed rgb(110, 20, 120); color: hsl(0deg, 100%, 100%); text-decoration: underline wavy #88ff88; text-shadow: 2px 2px 3px black; } finally, the .boxright class describes the unique properties of the box that's drawn on the right. it's configured to float the box to the right so that it appears next to the previous box. then the following colors are established: the background-color is set using the hsl value specified using hsl(270deg, 50%, 75%). this is a medium purple color. the box's outline is used to specify that the box should be enclosed in a four pixel thick dashed line whose color is a somewhat deeper purple (rgb(110, 20, 120)). the foreground (text) color is specified by setting the colo...
...And 2 more matches

<link>: The External Resource Link element - HTML: Hypertext Markup Language
t makes more sense to separate your <link> elements from your body content, putting them in the <head>. when using <link> to establish a favicon for a site, and your site uses a content security policy (csp) to enhance its security, the policy applies to the favicon. if you encounter problems with the favicon not loading, verify that the content-security-policy header's img-src directive is not preventing access to it. the html and xhtml specifications define event handlers for the <link> element, but it is unclear how they would be used. under xhtml 1.0, empty elements such as <link> require a trailing slash: <link />. webtv supports the use of the value next for rel to preload the next page in a document series. attributes this element includes the global attributes. as this attr...
...ith a credential sent (i.e. a cookie, certificate, and/or http basic authentication is performed). if the server does not give credentials to the origin site (through access-control-allow-credentials http header), the resource will be tainted and its usage restricted. if the attribute is not present, the resource is fetched without a cors request (i.e. without sending the origin http header), preventing its non-tainted usage. if invalid, it is handled as if the enumerated keyword anonymous was used. see cors settings attributes for additional information. disabled for rel="stylesheet" only, the disabled boolean attribute indicates whether or not the described stylesheet should be loaded and applied to the document. if disabled is specified in the html when it is loaded, the stylesheet ...
...ow the rendering of any linked resource. obsolete attributes charset this attribute defines the character encoding of the linked resource. the value is a space- and/or comma-delimited list of character sets as defined in rfc 2045. the default value is iso-8859-1. usage note: to produce the same effect as this obsolete attribute, use the content-type http header on the linked resource. rev the value of this attribute shows the relationship of the current document to the linked document, as defined by the href attribute. the attribute thus defines the reverse relationship compared to the value of the rel attribute. link type values for the attribute are similar to the possible values for rel. note: this attribute is considered obsolete by the whatwg html living standard (whi...
...And 2 more matches

Using HTTP cookies - HTTP
rom the server to the user agent. a simple cookie is set like this: set-cookie: <cookie-name>=<cookie-value> this shows the server sending headers to tell the client to store a pair of cookies: http/2.0 200 ok content-type: text/html set-cookie: yummy_cookie=choco set-cookie: tasty_cookie=strawberry [page content] then, with every subsequent request to the server, the browser sends back all previously stored cookies to the server using the cookie header. get /sample_page.html http/2.0 host: www.example.org cookie: yummy_cookie=choco; tasty_cookie=strawberry note: here's how to use the set-cookie header in various server-side applications: php node.js python ruby on rails define the lifetime of a cookie the lifetime of a cookie can be defined in two ways: session cookies ar...
... the max-age attribute. for example: set-cookie: id=a3fwa; expires=wed, 31 oct 2021 07:28:00 gmt; note: when an expires date is set, the time and date set is relative to the client the cookie is being set on, not the server. if your site authenticates users, it should regenerate and resend session cookies, even ones that already exist, whenever the user authenticates. this technique helps prevent session fixation attacks, where a third party can reuse a user's session. restrict access to cookies there are a couple of ways to ensure that cookies are sent securely and are not accessed by unintended parties or scripts: the secure attribute and the httponly attribute. a cookie with the secure attribute is sent to the server only with an encrypted request over the https protocol, never w...
...rties or scripts: the secure attribute and the httponly attribute. a cookie with the secure attribute is sent to the server only with an encrypted request over the https protocol, never with unsecured http, and therefore can't easily be accessed by a man-in-the-middle attacker. insecure sites (with http: in the url) can't set cookies with the secure attribute. however, do not assume that secure prevents all access to sensitive information in cookies; for example, it can be read by someone with access to the client's hard disk. a cookie with the httponly attribute is inaccessible to the javascript document.cookie api; it is sent only to the server. for example, cookies that persist server-side sessions don't need to be available to javascript, and should have the httponly attribute. this pre...
...And 2 more matches

Details of the object model - JavaScript
because of this different basis, it can be less apparent how javascript allows you to create hierarchies of objects and to have inheritance of properties and their values. this chapter attempts to clarify the situation. this chapter assumes that you are already somewhat familiar with javascript and that you have used javascript functions to create simple objects. class-based vs. prototype-based languages class-based object-oriented languages, such as java and c++, are founded on the concept of two distinct entities: classes and instances. ...
...alues: mark.name = ''; mark.dept = 'general'; mark.projects = []; the mark object is assigned local values for the name and dept properties by the employee constructor. it is assigned a local value for the projects property by the workerbee constructor. this gives you inheritance of properties and their values in javascript. some subtleties of this process are discussed in property inheritance revisited. because these constructors do not let you supply instance-specific values, this information is generic. the property values are the default ones shared by all new objects created from workerbee. you can, of course, change the values of any of these properties. so, you could give specific information for mark as follows: mark.name = 'doe, mark'; mark.dept = 'admin'; mark.projects = ['navi...
...gical or operator (||) evaluates its first argument. if that argument converts to true, the operator returns it. otherwise, the operator returns the value of the second argument. therefore, this line of code tests to see if name has a useful value for the name property. if it does, it sets this.name to that value. otherwise, it sets this.name to the empty string. this chapter uses this idiom for brevity; however, it can be puzzling at first glance. note: this may not work as expected if the constructor function is called with arguments which convert to false (like 0 (zero) and empty string (""). in this case the default value will be chosen. with these definitions, when you create an instance of an object, you can specify values for the locally defined properties. you can use the followin...
...And 2 more matches

Object.freeze() - JavaScript
freeze() returns the same object that was passed in. the source for this interactive example is stored in a github repository. ...
...freeze() returns the same object that was passed in. the source for this interactive example is stored in a github repository. ...
...freeze() returns the same object that was passed in. the source for this interactive example is stored in a github repository. ...
...And 2 more matches

Object.isFrozen() - JavaScript
ible, all its properties are non-configurable, and all its data properties (that is, properties which are not accessor properties with getter or setter components) are non-writable. examples using object.isfrozen // a new object is extensible, so it is not frozen. object.isfrozen({}); // === false // an empty object which is not extensible // is vacuously frozen. ...
...en // a new object is extensible, so it is not frozen. object.isfrozen({}); // === false // an empty object which is not extensible // is vacuously frozen. var vacuouslyfrozen = object.preventextensions({}); object.isfrozen(vacuouslyfrozen); // === true // a new object with one property is also extensible, // ergo not frozen. var oneprop = { p: 42 }; object.isfrozen(oneprop); // === false // preventing extensions to the object still doesn't // make it frozen, because the property is still // configurable (and writable). object.preventextensions(oneprop); object.isfrozen(oneprop); // === false // ...but then deleting that property makes the object // vacuously frozen. delete oneprop.p; object.isfrozen(oneprop); // === true // a non-extensible object with a non-writable // but still confi...
...the property is still // configurable (and writable). object.preventextensions(oneprop); object.isfrozen(oneprop); // === false // ...but then deleting that property makes the object // vacuously frozen. delete oneprop.p; object.isfrozen(oneprop); // === true // a non-extensible object with a non-writable // but still configurable property is not frozen. var nonwritable = { e: 'plep' }; object.preventextensions(nonwritable); object.defineproperty(nonwritable, 'e', { writable: false }); // make non-writable object.isfrozen(nonwritable); // === false // changing that property to non-configurable // then makes the object frozen. object.defineproperty(nonwritable, 'e', { configurable: false }); // make non-configurable object.isfrozen(nonwritable); // === true // a non-extensible object w...
...And 2 more matches

String.prototype.split() - JavaScript
lt if separator is a regular expression that contains capturing parentheses (), matched results are included in the array. const mystring = 'hello 1 word. sentence number 2.' const splits = mystring.split(/(\d)/) console.log(splits) this script displays the following: [ "hello ", "1", " word. sentence number ", "2", "." ] note: \d matches the character class for digits between 0 and 9. ...
...g parentheses (), matched results are included in the array. const mystring = 'hello 1 word. sentence number 2.' const splits = mystring.split(/(\d)/) console.log(splits) this script displays the following: [ "hello ", "1", " word. sentence number ", "2", "." ] note: \d matches the character class for digits between 0 and 9. ...
...e array. const mystring = 'hello 1 word. sentence number 2.' const splits = mystring.split(/(\d)/) console.log(splits) this script displays the following: [ "hello ", "1", " word. sentence number ", "2", "." ] note: \d matches the character class for digits between 0 and 9. ...
...And 2 more matches

Lexical grammar - JavaScript
ich are tokens, control characters, line terminators, comments or white space. ecmascript also defines certain keywords and literals and has rules for automatic insertion of semicolons to end statements. control characters control characters have no visual representation but are used to control the interpretation of the text. unicode format-control characters code point name abbreviation description u+200c zero width non-joiner <zwnj> placed between characters to prevent being connected into ligatures in certain languages (wikipedia). u+200d zero width joiner <zwj> placed between characters that would not normally be connected in order to cause the characters to be rendered using their connected form in certain languages (wikipedia...
...yte order (wikipedia). white space white space characters improve the readability of source text and separate tokens from each other. these characters are usually unnecessary for the functionality of the code. minification tools are often used to remove whitespace in order to reduce the amount of data that needs to be transferred. white space characters code point name abbreviation description escape sequence u+0009 character tabulation <ht> horizontal tabulation \t u+000b line tabulation <vt> vertical tabulation \v u+000c form feed <ff> page breaking control character (wikipedia). \f u+0020 space <sp> normal space u+00a0 no-break space <nbsp> normal space,...
...o affect the process of automatic semicolon insertion. line terminators are matched by the \s class in regular expressions. only the following unicode code points are treated as line terminators in ecmascript, other line breaking characters are treated as white space (for example, next line, nel, u+0085 is considered as white space). line terminator characters code point name abbreviation description escape sequence u+000a line feed <lf> new line character in unix systems. \n u+000d carriage return <cr> new line character in commodore and early mac systems. \r u+2028 line separator <ls> wikipedia u+2029 paragraph separator <ps> wikipedia comments comments are used to a...
...And 2 more matches

Authoring MathML - MathML
to get woff fonts and sample css stylesheets to use on your web site and check its test page. mathml in xml documents (xhtml, epub, etc) if for some reason you need to use mathml in xml documents, be sure to satisfy the usual requirements: well-formed document, use of correct mime type, mathml namespace "http://www.w3.org/1998/math/mathml" on <math> roots. ...
...is a convenient add-on for thunderbird to insert such mathml expressions using the asciimath input syntax. moreover, a latex-to-mathml input box has also been integrated into seamonkey since version 2.28 and into thunderbird since version 31. again, the way mathml is handled and the quality of the mathml rendering depends on the mail client. even if your browser supports mathml, your webmail may prevent you to send or receive mails with mathml inside. gecko-based instant messaging clients can integrate a javascript-based text-to-mathml converter (mentioned below) and then render the mathml expressions generated from the (plaintext) instant messages. for example, there is an instantbird add-on that handles latex expressions. conversion from a simple syntax there are many simple notations (e...
...ke syntax but which also accepts non-ascii characters like √{∑↙{n=1}↖{+∞} 6/n^2} = π to write ∑ n = 1 + ∞ 6 n 2 = π . the installation is similar: download and copy the relevant javascript and css files on your web site and reference them in your page header (see the copy-me.html file from the zip archive for an example). one of the advantage of jqmath over the previous scripts is that it will automatically add some simple css rules to do the mathematical layout and make the formulas readable on browsers with limited mathml support. command-line programs an alternative way is to parse the simple syntax before publishing your web pages. that is, you use command-line programs to generate them and publish these static pages on your server. pros: you ...
...And 2 more matches

Interacting with page scripts - Archive of obsolete content
or functions being, or doing, what you expect. any of them, even setters and getters, could have been redefined by a page script. don't use it unless you trust the page, and even then be careful. also, unsafewindow isn't a supported api, so it could be removed or changed in a future version of the sdk. ...
...xports greetme() as a member of foo. now the page script can call the function as foo.greetme(): <html> <head> </head> <body> <input id="test" type="button" value="click me"/> <script> var test = document.getelementbyid("test"); test.addeventlistener("click", function() { alert(window.foo.greetme("page script")); }, false); </script> </body> </html> reverting to the old behavior you can switch firefox back to the old behavior in which content scripts could expose objects and functions to page scripts using unsafewindow. to do this, add an option called “unsafe-content-script” under the “permissions” key in package.json, and set it to true. "permissions": { "unsafe-content-script": true } this is only a temporary migration aid, and...
... here "main.js" creates a page-mod that attaches "listen.js" to the web page: var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "http://my-domain.org/talk.html", contentscriptfile: data.url("listen.js") }); the web page "talk.html" embeds a script that uses window.postmessage() to send the content script a message when the user cli...
...also, there's no need to clone the message when using custom dom events in this direction. in this example, "main.js" creates a page-mod to target the page we are interested in: var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "http://my-domain.org/talk.html", contentscriptfile: data.url("listen.js") }); the web page "talk.html" ...

Content Scripts - Archive of obsolete content
include: "*.mozilla.org", contentscriptfile: "./content-script.js" }); unless your content script is extremely simple and consists only of a static string, don't use 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. you can load multiple scripts by passing an array of strings to either contentscript or contentscriptfile: // main.js var tabs = require("sdk/tabs"); tabs.on('ready', function(tab) { tab.attach({ contentscript: ['document.body.style.border = "5px solid red";', 'window.alert("hi");'] }); }); // main.js var data = require("sdk/self").data; var pagemod = require("sdk/page-mod")...
...tscript: contentscriptstring, contentscriptfile: data.url("jquery.js") }); unless your content script is extremely simple and consists only of a static string, don't use 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. controlling when to attach the script the contentscriptwhen option specifies when the content script(s) should be loaded. it takes one of: "start": load the scripts immediately after the document element for the page is inserted into the dom. at this point the dom content hasn't been loaded yet, so the script won't be able to interact with it. "ready": load the scripts after the dom fo...
...e dom content scripts can access the dom of a page, of course, just like any scripts that the page has loaded (page scripts). but content scripts are insulated from page scripts: content scripts don't see any javascript objects added to the page by page scripts if a page script has redefined the behavior of some dom object, the content script sees the original behavior. the same applies in reverse: page scripts can't see javascript objects added by content scripts. for example, consider a page that adds a variable foo to the window object using a page script: <!doctype html"> <html> <head> <script> window.foo = "hello from page script" </script> </head> </html> another script loaded into the page after this script will be able to access foo. but a content script will...
...'], 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 communicate with the content sc...

panel - Archive of obsolete content
pointing to a script file saved under your add-on's data directory. warning: unless your content script is extremely simple and consists only of a static string, don't use 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. getting user input note: this example uses the action button api, which is only available from firefox 29 onwards. the following add-on adds a button which displays a panel when clicked. the panel just contains a <textarea> element: when the user presses the return key, the contents of the <textarea> is sent to the main add-on code. the add-on consists of six files: main.js: the m...
...() api or the port api. the crucial difference is that these scripts access the postmessage and port objects through the addon object, whereas content scripts access them through the self object. to show the difference, we can easily convert the text-entry add-on above to use normal page scripts instead of content scripts. the main add-on code is exactly the same as the main add-on code in the previous example, except that we don't attach a content script: var data = require("sdk/self").data; // construct a panel, loading its content from the "text-entry.html" // file in the "data" directory, and loading the "get-text.js" script // into it. var textentrypanel = require("sdk/panel").panel({ contenturl: data.url("text-entry.html") }); // create a button require("sdk/ui/button/action").act...
...// of the content window // - a height of 400px require("sdk/panel").panel({ position: { top: 40, bottom: 100, }, height: 400 }).show(); // this is equivalent to: require("panel").panel({ position { top: 40 }, height: 400 }).show(); the same principle is applied in the horizontal axis with width, left and right. focus boolean set to false to prevent taking the focus away when the panel is shown. only turn this off if necessary, to prevent accessibility issue. optional, default to true. contenturl string,url the url of the content to load in the panel. that is, they can't refer to remote scripts. the urls are usually constructed using self.data.url(). from firefox 34, you can use "./my-file.html" as an ali...
...ptions : object optional options: name type 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...

Creating annotations - Archive of obsolete content
because this code ...
... activateselectors(); return annotatorison; } we'll be using this url in all our screenshots. because cfx run doesn't preserve browsing history, if you want to play along it's worth taking a note of the url. save the file and execute cfx run again. ...
...e annotator by clicking the widget and load a page: the screenshot below uses http://blog.mozilla.com/addons/2011/02/04/ overview-amo-review-process/. you should see the highlight appearing when you move the mouse over certain elements: click on the highlight and you should see something like this in the console output: info: show info: http://blog.mozilla.com/addons/2011/02/04/overview-amo-review-process/, post-2249,when you submit a new add-on, you will have to choose between 2 review tracks: full review and preliminary review. annotation editor panel so far we have a page-mod that can highlight elements and send information about them to the main add-on code. next we will create the editor panel, which enables the user to enter an annotation associated with the selected elemen...
...etach', function () { detachworker(this, selectors); }); } }); execute cfx run again, activate the annotator, move your mouse over an element and click the element when it is highlighted. you should see a panel with a text area for a note: enter the note and press the return key: you should see console output like this: info: http://blog.mozilla.com/addons/2011/02/04/overview-amo-review-process/, post-2249,when you submit a new add-on, you will have to choose between 2 review tracks: full review and preliminary review. info: we should ask for full review if possible. that's a complete annotation, and in the next section we'll deal with storing it. ...

Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
aimed at presenting alternatives to common eval uses in add-ons and other javascript code. add-on authors are strongly encouraged to update their code to eliminate all instances of eval, no matter if the add-on is to be hosted in the mozilla add-ons gallery or not. in order to host your add-on with mozilla it is crucial to minimize or completely eliminate eval use in order to receive a positive review and have your add-on made public. if it cannot be easily proven that an eval() call is benign and necessary because there are no viable alternatives, a mozilla add-ons gallery reviewer will generally reject the submission! parsing json mozilla provides native json support since firefox 3. there is simply no need to parse json using eval. additionally, parsing json retrieved from a remote lo...
...afterbracket) + "myaddon.onaddtab(auri);" + functionbody.substring(afterbracket); eval("gbrowser.addtab = " + functionbody); of course, this not only looks messy, but can be quite error prone. other extensions might do something similar, trying to hook the same functions, but a little different, ending up with completely broken code. the code is hard to read and by that hard to maintain and review. (the example is a quite simple one. in real life such code is often far more complex) the code might break in the future, as certain assumptions might not longer be true, for example the function signature may change (auri from above becomes aurl) or the function is replaced by a short-hand/arrow function: function addtab(auri) tabbrowser.addtab(auri); var addtab = (auri) => tabbrowser.add...
...he same function. again, this is a problem with the "string-patch" method, too. how to handle this is inter-add-on specific and not addressed in this article. overriding/extending/amending existing objects (or object properties) again, you might be tempted to uneval(), string replace and eval() existing objects to override them (or at least some properties). ...
... properties) again, you might be tempted to uneval(), string replace and eval() existing objects to override them (or at least some properties). of course, the issues given in the previous section about functions remain. alternative: just assign most of the time, assigning properties will just work. someexistingobject.someproperty = "abc"; // we already demonstrated with with functions in a previous example alternative: object.defineproperty() for most objects it is possible to (re-)define properties with the object.defineproperty() api, which allows to not override values, but also lets you define getters and setters. alternative: proxy if you cannot override objects or properties easily, e.g. because the object is frozen or sealed, then creating a proxy around the object might be ...

Handling Preferences - Archive of obsolete content
preferences are used to store settings and information to change their default behavior. to open the preferences window in firefox, select the following from the main menu: on windows, tools > options on mac, firefox > preferences on linux, edit > preferences note: keep in mind the usage of the terms "preferences" and "options" in different platforms. if you need to refer to the term "preference" in any of your locale files, you must change the string depending on the operating system. tip: you can use window.navigator.platform in your chrome code to figure out the operating system firefox is running on. you can use the hidden dom window in non-chrome code. ...
...he warning message states, you should be very careful when changing preferences. incorrect values can make firefox behave oddly or break altogether. you can type on the "filter" textbox to search for specific preferences. if you type the word "homepage", it will filter all the preferences and display only the ones which include the word "homepage" in its name or value. right-clicking on the list reveals several options that allow you to modify preference values and add new ones. preferences with non-default values are highlighted in bold. all changes done in about:config are saved to the prefs.js file. the list in about:config is not complete. some firefox preferences have no default value, so they are left out unless you add them manually. an extensive specification of firefox preferences ...
...ref("extensions.xulschoolhello.message.count"); this._prefservice.setintpref("extensions.xulschoolhello.message.count", currentcount + 1); } one important thing to keep in mind is that the "get" methods of the service can throw an exception if the preference is not found. if you are going to use xpcom, you should always set a default value to your preferences, or use a try / catch block to prevent unhandled errors. preference listeners the xpcom way to add a listener was mentioned in the xpcom section when describing the queryinterface method: this._prefservice.queryinterface(ci.nsiprefbranch2); this._prefservice.addobserver(prefname, this, false); this._prefservice.queryinterface(ci.nsiprefbranch); all the qi'ing is necessary because the addobserver method is in a different int...
... css file that is included in it (chrome://browser/skin/preferences/preferences.css). this way you don't have to rewrite all the css rules defined for firefox. you should also look at the class values set to elements in the xul file, so that your preferences window is just like the one in firefox and your extension is better integrated into the application and the native os look and feel. « previousnext » this tutorial was kindly donated to mozilla by appcoast. ...

Local Storage - Archive of obsolete content
it is very common for an extension to require some kind of local persistent storage. we recommend that you at least keep an error log, so that you can request error data from your users when you encounter problems that are hard to debug. we'll discuss logging in this section, but first let's look at the right (or at least, common and scalable) way of managing local files. it is strongly recommended that you keep your local files inside the firefox profile directory. otherwise you may run into problems if the same extension is installed in multiple profiles. ...
...r system language your extension is running on. a full list of these flags can be found in the firefox source. having that function in place, we do something like the following: let myfile = xulschool.getlocaldirectory(); myfile.append("somefile.txt"); // do stuff with the file. files are handled with the nsifile interface. an nsifile doesn't necessarily represent an existing file, as in the previous examples. you first specify the file using nsifile and then use nsifile.create() to actually write it out to disk. you can also check if an nsifile exists using nsifile.exists(). to read and write information in files, you need to use stream objects. you can read more about reading and writing files here. in general you won't need to do this directly, but it's always useful to know. finally...
...ut reading and writing files here. in general you won't need to do this directly, but it's always useful to know. finally, there's the issue of deleting local files when the extension is going to be uninstalled. whether this is necessary or not is a matter of preference. some extension developers prefer to leave the data there, so that if the user chooses to install the extension again, all the previous data will be recovered. this is the default behavior when firefox is uninstalled: the profile information remains intact and it will be there waiting for you if firefox is installed again. others feel concerned about privacy and storing private information locally without deleting it. a good argument can be done for both, so it is up to you to choose what to do in this case. the fuel library ...
...icated, but it is worth the effort if you need to display long lists or trees with complex data. if you manage to get your display code to use templates, you will have saved a lot of coding. since templates are not necessary for most extensions and they're a complicated subject, it's better that you read it from the experts. there's a very detailed xul template guide here. as mentioned before, it revolves around rdf, so you may need to take some time to understand how rdf works. there's a section about sqlite templates in the guide, but there are some concepts in it that will require you to read at least some of the rest of it. « previousnext » this tutorial was kindly donated to mozilla by appcoast. ...

Mozilla Documentation Roadmap - Archive of obsolete content
there's a great deal of free online documentation available on xul and extension development, but finding it and turning it into useful information can be a daunting task. knowing where to look is critical and non trivial. this tutorial was aimed at compiling all the right resources for extension development and putting them in the right context, but there's much more to learn, and knowing how to find it is part of what we felt was necessary to teach. let's look into the resources that have helped us the most. ...
...cludes the highlights of what is posted at planet mozilla. it is a good alternative if you feel planet mozilla is too much. you can also subscribe to receive it by email if you prefer that. posts on about:mozilla also make it to planet mozilla. the mozilla add-ons blog. this blog is maintained by the add-ons team at mozilla, and it's a great way to stay up to date with amo development and add-on review policies. this blog is also part of planet mozilla. irc and newsgroups mozilla developers use their irc channels heavily. there are several help and development channels where you can discuss problems and other topics in real time with the people that have the answers. you'll need an irc client in order to do this, and the chatzilla extension works well for this purpose. problems using irc ...
...r irc channels heavily. there are several help and development channels where you can discuss problems and other topics in real time with the people that have the answers. you'll need an irc client in order to do this, and the chatzilla extension works well for this purpose. problems using irc include: finding help when you have a big timezone difference with the united states, and no records of previously asked questions and their answers. another somewhat obscure communication channel is the mozilla newsgroups. they are also very diverse and active, and there's a good chance you'll get your queries answered. thunderbird also comes in handy for reading and posting to the newsgroups. another advantage is that discussions are archived and searchable through google groups. other and finally,...
... ...

Useful Mozilla Community Sites - Archive of obsolete content
« previous the mozilla community is very rich and active. it's a very powerful tool you have when developing on top of the mozilla platform, and you should take advantage of it in order to create a truly successful add-on . amo amo (mozilla add-ons) is the official mozilla repository for add-ons. it allows you to upload, search and download all types of add-ons for mozilla applications. this is the best way to get your extension to users from all around the world. adding your extension to amo is easy. all you need is your xpi, a few screenshots (good ones will make your extension much more appealing), and a few minutes to fill a couple of forms. but this won't make your extension public right away. ...
...ad, search and download all types of add-ons for mozilla applications. this is the best way to get your extension to users from all around the world. adding your extension to amo is easy. all you need is your xpi, a few screenshots (good ones will make your extension much more appealing), and a few minutes to fill a couple of forms. but this won't make your extension public right away. amo has a review process that prevents malicious, insecure or low quality extensions to make it to the public site. your extension begins in a sandbox with limited access, and once you nominate it an editor will review it and see if it is appropriate for the public amo site, where everyone can see it and install it. the review process often takes a few weeks. just be patient and make sure your extension follow...
...s. developers submit their extensions using the web translation system (wts) and volunteers around the world translate them to different languages. the community is very active, and you can be sure to get translations for the most commonly used languages within a few days of submitting your extension. you'll also receive feedback that you wouldn't notice by testing only in one language, which can reveal other bugs in your locale handling. there's a significant portion of users that use a localized version of firefox, so you shouldn't neglect them. using babelzilla takes little time and is very valuable. mozdev mozdev.org provides free project hosting and software development tools for mozilla applications and add-ons. it is the only hosting service tailored to the needs of the mozilla comm...
... ...

Adding preferences to an extension - Archive of obsolete content
download the sample you can download a copy of this sample to look over, or to use as the basis for your own extension. ...
... download the sample you can download a copy of this sample to look over, or to use as the basis for your own extension. ...
...function(newsymbol) { this.prefs.setcharpref("symbol", newsymbol); }, the only new information for us here is the call to the preference object's setcharpref() function, which sets the value of the "symbol" preference. note that this call results in our stockwatcher.observe() method being invoked and displayed stock information being updated. refreshinformation() this method is slightly revised from previous versions, in that it needs to fetch the preference for the stock to watch and use that to construct the url to monitor, as well as to construct the string to be displayed in the status bar panel. refreshinformation: function() { // because we may be called as a callback, we can't rely on // "this" referring to the right object, so we need to reference // it by it...
...command property, which indicates the javascript code to execute when the user selects that item. the refresh now option calls the stockwatcher.refreshinformation() function, to refresh the display. the rest of the options call the stockwatcher.watchstock() function to start watching a different stock. for a more detailed tutorial on creating popup menus, see xul tutorial:popup menus. « previousnext » override chrome://myaddon/content/options.xul chrome://myaddon/content/oldoptions.xul application={ec8030f7-c20a-464f-9b0e-13a3a9e97384} appversion<=6.* examples github - gist :: _ff-addon-template-bootstrapprefsskeleton - this gist here is a fully working example of a fully funcitonal preferences skeleton, it uses the observer example from above. this example also uses a te...

Localizing an extension - Archive of obsolete content
« previousnext » this article expands upon the previous samples on extension writing by adding localization support to our stock watcher extension. performing a few simple steps makes your extension much easier to localize into various languages without having to edit the xul or javascript files themselves. if you haven't already created an extension, or would like to refresh your memory, take a look at the previous articles in this series: creating a status bar extension creating a dynamic status bar extension adding preferences to an extension download the sample you can download this article's sample code so you can look at it side-by-side with the article, or to use it as a basis for your own extension. download the sample localizing strings in xul files create the n...
...with the corresponding entity. for example, in stockwatcher2.xul, we change this line: <menuitem label="refresh now" oncommand="stockwatcher.refreshinformation()"/> to <menuitem label="&menu_refresh_now.label;" oncommand="stockwatcher.refreshinformation()"/> do this for every string used in each xul file. update the chrome manifest to let firefox know about the locale files, we need to make a revision to our chrome.manifest file, adding one line for each localization: locale stockwatcher2 en-us chrome/locale/ this instructs firefox that the en-us localization is located in the chrome/locale/en-us directory. localizing strings in javascript code if your javascript code contains literal strings that need to be localized, as does our stock watcher sample, we need to make those localizable ...
...perties"/> </stringbundleset> this establishes a new string bundle, referenced by the id "string-bundle", whose keys and values are to be loaded from the stockwatcher2.properties file we've already created. note: you should use a unique id for each string bundle element for each file you use to avoid conflicts. (e.g. id="myextensionname-filename") update the javascript code now we're ready to revise the javascript code to load the strings from the string bundle instead of using literal strings. this involves rewriting the refreshinformation() function to load the strings, and its enclosed inforeceived() function to use the loaded, localized, strings instead of string literals. we add to refreshinformation() the following code: var stringsbundle = document.getelementbyid("string-bundle");...
...e files should map the same tags to the spanish translations of the strings used by the extension. ...

MMgc - Archive of obsolete content
escendant of gcfinalizedobject... see below.) class myobject : public mmgc::gcobject { ~myobject() { assert(!"this will never be hit (unless we also descend from gcfinalizedobject)"); } }; gcobject::getweakref gcweakref *getweakref() const; the getweakref method returns a weak reference to the object. normally, a pointer to the object is considered a hard reference -- any such reference will prevent the object from being destroyed. sometimes, it is desirable to hold a pointer to a gcobject, but to let the object be destroyed if there are no other references. gcweakref can be used for this purpose. it has a get method which returns the pointer to the original object, or null if that object has already been destroyed. gcfinalizedobject base class: gcobject a garbage collected object with fi...
...gc suffices. it is possible that a future version of mmgc might do exact marking. this would be needed for a generational collector. deferred reference counting (drc) mmgc uses deferred reference counting (drc). drc is a scheme for getting more immediate reclamation of objects, while still achieving high performance and getting the other benefits of garbage collection. classic reference counting previous versions of the flash player, up to flash player 7, used reference counting to track object lifetimes. class object { public: object() { refcount = 0; } void addref() { refcount++; } void release() { if (!--refcount) delete this; } int refcount; } reference counting is a kind of automatic memory management. reference counting can track relationships between objects, and as long...
...another point to consider is whether marking should always be on or should be turned on and off at some point based on memory allocation patterns. i think we want the later because: all wb's take the fast path when we're not marking, so the more time we spend out of the marking phase the bett...
... from it as needed. by doing this, we're more likely to get contiguous regions in memory for our heap. gcheap serves up 4k blocks to the size class allocators or groups of contiguous 4k blocks for requests from the large allocator. it maintains a free list and blocks are coalesced with their neighbors when freed. if we use up the 16mb reserved chunk, we reserve another one, contiguously with the previous if possible. when memory mapping is not available gcheap can fall back on a malloc/free approach for obtaining memory if a memory mapping api like virtualalloc or mmap is not available. in this case, gcheap will allocate exactly as much memory as is requested when the heap is expanded and not try to reserve additional memory pages to expand into. gcheap won't attempt to allocate contiguous re...

Mozilla Application Framework in Detail - Archive of obsolete content
core element to the framework, allows you to define dynamic elements in your ui (elements that may change after you have completed the application, such as a "history" menu item). xslt could be used to translate information from web services, rss, soap, or other xml-based languages and convert them into a form that you might display in your user interface. the gecko rendering engine gecko is the revolutionary rendering engine that offers advanced features for internet browsing anywhere across applications, computing platforms and devices. this innovation in browser technology offers small size, speed and industry leading standards support. gecko is the premier cross-platform, full-featured, mature and well-tested layout engine available, providing robust and high quality support for a massiv...
... gecko browser engine offers several key benefits including: size: gecko has been designed to be lean and modular, bringing full-functionality browsing to a variety of new consumer devices. because it is small, gecko can be embedded on devices with limited footprints and it minimizes download size for desktop browsers. speed: gecko has been designed for speed and is several times faster than previous versions of internet browsing software. standards support: gecko is the first browser technology to fully implement the latest w3c standards and enables developers to build rich, dynamic web pages and web-based applications that look and run as intended across a variety of platforms and devices. this saves developers time and money while allowing them to deliver state-of-the-art content and ...
...ko features include support for asynchronous i/o, a generic disk and memory cache service, asynchronous caching dns resolution, web proxies, and https. the following architectural diagram depicts necko and its interaction with subsystems: necko is powerful, stable and robust, with current development focused on performance and standards-compliance. it has gone through extensive field testing and revision to maximize web site compatibility. xpcom, the cross platform component object model the cross platform component object model (xpcom) is one of the main things that makes the mozilla application environment an actual framework. it is a development environment that provides the following features for the cross-platform software developer: component management file abstraction object mes...
... original document information author(s): myk melez, ian oeschger original document: http://www.mozill...

New Security Model for Web Services - Archive of obsolete content
securing resources from untrusted scripts behind firewalls introduction this page describes an alternative mechanism which can be used to protect all internal resources against requests from sandboxed scripts. this should especially be implemented for soap calls by untrusted scripts. when an attempt is made to access a resource at a previously-unknown uri, the sandbox reads a file at that domain with declarations to determine whether access is permitted to the script. if the file is not there, access is denied. the problem external untrusted scripts loaded behind a firewall are executed in a sandbox. these scripts may legitimately require access to external resources, but permitting them to access internal resources permits the compromise of these resources that would normally not be ava...
... a sandbox. these scripts may legitimately require access to external resources, but permitting them to access internal resources permits the compromise of these resources that would normally not be available to applications outside of the firewall. the sandbox must distinguish and protect internal resources. client-controlled solutions several client-controlled solutions have been designed to prevent sandboxed applications loaded behind a firewall from compromising other resources protected behind the firewall. same source restriction by restricting sandboxed scripts to access only resources in the domain from which they were loaded, any script loaded from one domain into another is prevented from accessing resources in the domain into which it has been loaded. this policy has generally ...
...n into which it has been loaded. this policy has generally been successful in sandboxing javascript and java applets across the web. if the sandbox is unable to distinguish the common uri substring of the domain to be trusted from similar uris of untrusted domains, then it could allow a script loaded from an indistinguishable domain to exploit firewall-protected resources. also, this technique prevents the script from accessing many legitimate external resources not provided in the same domain as the script. this prevents a script from accessing web services and data published from any domain besides its own. white-listing by creating a white list of trusted uris from which scripts are trusted to not compromise internal resources, it is possible to release domains from the stricter same-s...
...tion soap messages have a distinct processing model allowing a header to be added that the recipient is required to understand and accept, which identifies the untrusted source of a script making a request. soap services which have not been cleared for access by untrusted scripts will reject the requests. this is offered in the mozilla implementation of soap today. unfortunately, this does not prevent soap messages from being sent to non-soap addresses, which is a big enough problem that the verification cannot stand alone to guarantee that untrusted service requests are always properly rejected by services that should be firewall-protected. it may also be inconvenient to modify a soap service to ignore the specific verification header. using a declarations file a more robust solution is...

Tamarin build documentation - Archive of obsolete content
hell 1.0 build cyclone ... the avmplus executable is avmshell. optional flags: --enable-debugger - debugger build --enable-debug - debug build for verbose build of tamarin, you can pass cppflags to make. $ make cppflags=-davmplus_verbose additional instructions for non-android cross-platform tamarin-redux build on osx 10.6 (snow leopard) (to build tamarin-central on mac please see previous cross-platform instructions here: https://developer.mozilla.org/index.php?title=en/tamarin/tamarin_build_documentation&revision=21 the bug when building on snow leopard (bug 537817) has been fixed in the tamarin-redux repo. the work for that fix also included some changes to the configure.py default behavior to decouple the --target switch from sdk choice: there is a new switch, --mac-sd...
...guration your build will be under \tamarin-redux\platform\win32\obj_9\shell\debug_debugger by default. building the x64 release_debugger configuration will create avm.exe under \tamarin-redux\platform\win32\x64\release_debugger. note the "\obj9" directory under \platform\win32 for the win32 builds and "\x64" directory under \platform\win32 for 64-bit builds; this looks a little odd but preserves previous behavior as much as possible to avoid initial disruption from the shell rename fix. you must install vs2008 with x64 support to build the 64-bit configurations. if you installed the windows mobile 6 sdk, you can build for windows mobile (arm) targets. apple xcode the project files are designed for xcode 3.0. see "platform/mac/avmplus/avmplus.xcodeproj/". xcode 2.2, 2.3, and 2.4 will not...
...es this to find asc.jar $ python builtin.py building builtin.abc, builtin.cpp, builtin.h builtin: 26795 files: 6 time: 1709ms you can now use asc.jar to compile applications. $ cd tamarin-central $ echo 'print("hello, world")' > hello.as $ java -jar ./utils/asc.jar -import ./core/builtin.abc hello.as hello.abc, 86 bytes written use the avmplus standalone executable (avmshell) built previously to run the application: $ avmshell hello.abc hello, world use the -help options of asc.jar and avmshell for more details. running tamarin tests see running tamarin acceptance tests and running tamarin performance tests building tamarin windows mobile utilities the tamarin windows mobile utilities allows the existing acceptance and performance testsuites to be run on a windows mobil...
... the form at http://tamarin-builds.mozilla.org/build_trigger/requestbuild.cfm user email: your email address. an email with the build status will be sent to this address when a builder completes whether it is passes or fails. mercurial repository: give the location of the repository that will be used for the build. note: only repositories hosted on http://hg.mozilla.org/ are accepted. revision: specify the revision number that will be built. currently this only accepts the change number and not the hash. branch: which branch of tamarin the repository is based on, tamarin-central or tamarin-tracing. description: self explanatory check the status of the build @ http://tamarin-builds.mozilla.org/tamarin-redux/ , you can also see your build request in the queue at http://t...

onFindAgainCommand - Archive of obsolete content
« xul reference home onfindagaincommand( findprevious ) return type: no return value call this method to handle your application's "find next" and "find previous" commands. ...
... « xul reference home onfindagaincommand( findprevious ) return type: no return value call this method to handle your application's "find next" and "find previous" commands. ...
... « xul reference home onfindagaincommand( findprevious ) return type: no return value call this method to handle your application's "find next" and "find previous" commands. ...
...mmand( findprevious ) return type: no return value call this method to handle your application's "find next" and "find previous" commands. ...

Additional Navigation - Archive of obsolete content
however, a string value may be used instead. since the subject of an rdf arc is always a resource, the subject may be a resource uri. the object attribute may be a resource uri or a literal value. using a literal as the object of a triple is a common way to filter out specific items. for instance, if items were identified with a type, the data could be filtered to include only items of a particular type. ...
...iables can be filled in so the builder doesn't know what to generate. the builder won't generate any output in this situation. the member tag must have variables for both the container and child attributes. it wouldn't be very common to filter for a specific child anyway. source navigation triples may also be used to navigate up the graph as well as downwards, following the graph arrows in the reverse direction. for instance, in the original example, we could start at node d and navigate upwards to a and c. the syntax for the triple is the same except that the known variable should be placed in the triple's object attribute and the unknown variable should be placed in the triple's subject variable. <query> <content uri="?start"/> <triple subject="?relateditem" predicate="htt...
...we can then display these results using the following action body. <vbox uri="?photo" class="box-padded"> <image src="?photo"/> <label value="?title"/> <label value="country: ?countrytitle"/> </vbox> a label for the country will be displayed as well. naturally, it will have the same value for every photo. some paddin...
... way. ...

Containment Properties - Archive of obsolete content
however, the simple query syntax may also iterate over a single predicate pointing out of a resource, rather than use the children. this allows you to iterate over a non-container. to do this, use the containment attribute on the root node, set to the predicate to iterate over. let's look back at the very first example again. it doesn't have any containers, but we may want to iterate over the relateditem predicate using the simple query syntax. we can add the containment attribute to do this. ...
...ta, the builder will use it in addition to checking if it is a container. note the distinction here. the containment attribute doesn't replace the existing container checking. if the resource 'http://www.xulplanet.com/rdf/a' was also an rdf seq with some children, then those children would also be added to the results. this next example demonstrates this. the only difference between this and the previous example is a a couple of additional lines added to the rdf/xml: <rdf:seq rdf:about="http://www.xulplanet.com/rdf/a"> <rdf:li rdf:resource="http://www.xulplanet.com/rdf/e"/> <rdf:li rdf:resource="http://www.xulplanet.com/rdf/f"/> </rdf:seq> the effect is that there are five results instead of three. three generated via the use of the containment attribute, and two generated because the st...
...u can specify multiple predicates in the containment attribute by separating them with spaces. each will be applied in sequence. the containment attribute also applies to member tests when using the extended template syntax. that is, in addition to iterating over the children, it will iterate over the predicates listed in the containment attribute. for example, the following is equivalent to the previous example, except that the full query syntax is used. <vbox datasources="template-guide-ex3.rdf" ref="http://www.xulplanet.com/rdf/a" containment="http://www.xulplanet.com/rdf/relateditem"> <template> <query> <content uri="?start"/> <member container="?start" child="?child"/> </query> <action> <label uri="?child" value="?child"/> </action> ...
...rdf/relateditem"> <template> <query> <content uri="?start"/> <member container="?start" child="?child"/> </query> <action> <label uri="?child" value="?child"/> </action> </template> </vbox> try this example. what happens is that the builder generates additional possible values for the ?child variable, so it creates an additional result for each one. « previousnext » ...

Multiple Queries - Archive of obsolete content
however, it is possible to use multiple queries. this may be used to combine the results from several queries together, or may be used to generate different types of results when recursive iterations. to use multiple queries, place each query element along with its rules inside a queryset element. the queryset element is a bit of a misnomer, it actually only contains one query each. the following is the basic structure of a template with multiple queries: <listbox datasources="..." ref="..."> <queryset> <query> ... </query> <rule> ... </rule> </queryset> <queryset> <query> ... </query> <rule> ... ...
...otices that the photos are in an rdf seq in the datasource and arranges them in the order they appear in the seq. this and other automated sorting done by the template builder is a fairly complicated process that will be discussed in more detail later. multiple queries using the rdf simple syntax you can also use multiple queries with rdf datasources using the simple query syntax. ...
...you can also mix simple and extended queries in one template, although you may prefer to use the same style in all queries for consistency. however, if you are going to be using a number of queries, the template builder is more efficient when using multiple queries using the simple query syntax. this is because all simple queries will iterate over the same data, usually the children ...
...m/rdf/myphotos" xmlns:dc="http://purl.org/dc/elements/1.1/"> <template dc:title="canal"> <button uri="rdf:*" image="rdf:*" label="view" orient="vertical"/> </template> </hbox> this example shows only a single photo since a condition is used to filter out the other two photos. note that in this shorthand, the query conditions are placed directly on the <template> element. « previousnext » ...

Simple Example - Archive of obsolete content
in this situation, an rdf container will be used to hold the list of images. ...
...f:about="http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg" dc:title="obelisk"/> </rdf:rdf> in this example, we have three images, which can be identified by urls. the resource uris correspond to their actual urls although this isn't necessary. each image also has one property, the image's title. a template which displays this information is very simple to create. unlike previous examples where we iterated over a property to navigate the graph, here we want to iterate over the children of an rdf container. the container, an rdf seq, has the uri 'http://www.xulplanet.com/rdf/myphotos'. this will be the starting point of the navigation. we want the endpoints to be the three images. first, we set the datasources and ref attributes as needed: <vbox datasources="template-...
...ide-ex2.rdf" ref="http://www.xulplanet.com/rdf/myphotos"> this time, we need to use a new statement, the member condition as well as a triple. <query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="?title"/> </query> the seed is set in a similar manner as the previous examples, effectively creating a single result with the ?start variable set to the reference resource 'http://www.xulplanet.com/rdf/myphotos'. the same starting variable is used in this example, but you can of course use any variable you wish. (?start = http://www.xulplanet.com/rdf/myphotos) the member element is used to iterate over the children of a container (or the reverse). first, any ...
...e image using its url and title in a label. ...

textbox (Toolkit autocomplete) - Archive of obsolete content
accesskey, autocompletepopup, autocompletesearch, autocompletesearchparam, completedefaultindex, completeselectedindex,crop, disableautocomplete, disabled, disablekeynavigation, enablehistory, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputtooltiptext, label, maxlength, maxrows, minresultsforpopup, nomatch, onchange, oninput, onsearchcomplete, ontextentered, ontextreverted, open, readonly,showcommentcolumn, showimagecolumn, size, tabindex, tabscrolling, timeout, type, value properties accessibletype, completedefaultindex, controller, crop, disableautocomplete, disablekeynavigation, disabled, editable, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputfield, label, maxlength, maxrows, minresultsforpopup, open, popup, popupope...
...this should be one of the characters that appears in the label attribute for the element. autocompletepopup type: id the id of a popup element used to...
...complete search is finished and results are available. note: for firefox 12 and above, this event handler must be set as an initial attribute. ontextentered new in thunderbird 3requires seamonkey 2.0 type: script code this event handler is called when a result is selected for the textbox. note: for firefox 12 and above, this event handler must be set as an initial attribute. ontextreverted new in thunderbird 3requires seamonkey 2.0 type: script code this event handler is called when the user presses escape to revert the textbox to its original uncompleted value. note: for firefox 12 and above, this event handler must be set as an initial attribute. open type: boolean for the menu type buttons, the open attribute is set to true when the menu is open. the open attribu...
...ring returns the search component with the given index. the components are set with the autocompletesearch attribute. onsearchcomplete() return type: no return value calls the onsearchcomplete event handler. you should not call this method yourself. ontextentered() return type: event result calls the ontextentered event handler. you should not call this method yourself. ontextreverted() return type: event result calls the ontextreverted event handler. you should not call this method yourself. select() return type: no return value selects all the text in the textbox. setselectionrange( start, end ) return type: no return value sets the selected portion of the textbox, where the start argument is the index of the first chara...

Element Positioning - Archive of obsolete content
the size of an element is determined by two factors, the size that the element wants to be and the size you specify. the size that an element wants to be is determined by what is in the element. ...
...itioning so far, we know how to position elements either horizontally or vertically inside a box. we will often need more control over the position and size of elements within the box. for this, we first need to look at how a box works. the position of an element is determined by the layout style of its container. for example, the position of a button in a horizontal box is to the right of the previous button, if any. the size of an element is determined by two factors, the size that the element wants to be and the size you specify. the size that an element wants to be is determined by what is in the element. for example, a button's width is determined by the amount of text inside the button. an element will generally be as large as it needs to be to hold its contents, and no larger. some ...
...attribute is applied to the box containing the elements to be packed, not to the elements themselves. we can change the earlier example to center the elements as follows: example 4: source view <box flex="1" pack="center"> <button label="happy"/> <button label="sad"/> </box> now, when the window is resized, the buttons center themselves horizontally. compare this behavior to that of the previous example. box alignment if you resize the window in the happy-sad example above horizontally, the box will grow in width. if you resize the window vertically however, you will note that the buttons grow in height. this is because the flexibility is assumed by default in the other direction. you can control this behavior with the align attribute. for horizontal boxes, it controls the positio...
...t use the label attribute for labels. ...

Manipulating Lists - Archive of obsolete content
list manipulation the listbox element provides numerous methods to retrieve and manipulate its items. although listboxes may be manipulated using the standard dom functions as well, it is recommended that the specialized listbox functions be used instead when possible. these functions are bit simpler and will do the right thing. the appenditem() function is used to append a new item to the end a list. similar to the dom appendchild() function except that it takes a string label, and you do not have to worry about where to add it in the list structure. ...
...d a removeitemat() function which inserts a new item and removes an existing item respectively. the syntax is as follows: list.insertitemat(3, "thursday", "thu"); list.removeitemat(3); the insertitemat() function takes an additional argument, the position to insert the new item. the new item is inserted at this index, so, in the example, the new item will be added at position 3 while the item previously at that position will now be at position 4. remember that the first item is 0. the removeitemat() function will remove the item at a specific index. these three methods are also available for several other xul elements and work in the same manner. in fact, these methods are part of the nsidomxulselectcontrolelement interface so any xul elements which implement this interface have these met...
...e first get the selecteditem at index 0. the first selected item is always retrieved as the size of the array will decrease as the items are removed. next, we remove the item using the removeitemat() function. since this function requires an index we can convert between an item and an index using the getindexofitem() function. there is also a corresponding getitematindex() function to do the reverse. the nsidomxulmultiselectcontrolelement interface also provides methods for modifying the selected items. for instance, the additemtoselection() function adds a new item to the set of selected items, without clearing the existing selection. the removeitemfromselection() function removes a single item from the selection. list scrolling if there are more rows in the listbox than can be disp...
...svisible(4);"/> <listbox id="thelist" rows="5"> <listitem label="1"/> <listitem label="2"/> <listitem label="3"/> <listitem label="4"/> <listitem label="5"/> <listitem label="6"/> <listitem label="7"/> <listitem label="8"/> <listitem label="9"/> <listitem label="10"/> <listitem label="11"/> <listitem label="12"/> </listbox> next, we'll look at xul box objects. « previousnext » ...

More Button Features - Archive of obsolete content
adding an image you can add an image to a button by specifying a url in the image attribute. the image is loaded from the url, which can be a relative or absolute url, and then the image is displayed on the button. the button below will have both a label and the image 'happy.png'. the image will appear to the left of the label. you can change this position by using two other attributes. this will be explained in a moment. example 1 : source view <button label="help" image="happy.png"/> button with css image another way to specify the image is by using the css list-style-image style property on the button. ...
...n general, it can be used on all xul elements. note that you really should put the style declarations in a separate style sheet. positioning the images by default, the image on a button will appear to the left of the text label. there are two attributes that can be used to control this position. the dir attribute controls the direction of the image and text. by setting this attribute to the value reverse, the image will be placed on the right side of the text. by using the value normal, or leaving the attribute out entirely, the image will be placed on the left side of the text. the orient attribute can be used to place the image above or below the text. the default value is horizontal which is used to place the image on the left or right. you can also use the value vertical to place the imag...
...of the text. the orient attribute can be used to place the image above or below the text. the default value is horizontal which is used to place the image on the left or right. you can also use the value vertical to place the image above or below. in this case, the dir attribute controls the placement above or below. the same values are used, where normal means place the image above the text, and reverse means place the image below the text. example 3 : source view <button label="left" image="happy.png"/> <button label="right" image="happy.png" dir="reverse"/> <button label="above" image="happy.png" orient="vertical"/> <button label="below" image="happy.png" orient="vertical" dir="reverse"/> the example here shows all four types of alignment of buttons. note that the two attributes are ...
...the image to the right shows the difference. ...

Trees and Templates - Archive of obsolete content
« previousnext » the following describes how to use a template with a tree. adding datasources to trees when using a tree, you will often use a template to build its content, to handle a large amount of hierarchial data. using a template with a tree uses very much the same syntax as with other elements. you need to add a datasources and a ref attribute to the tree element, which specify the datasource and root node to display. multiple rules can be used to indicate different content for different types of data. ...
... with other elements. you need to add a datasources and a ref attribute to the tree element, which specify the datasource and root node to display. multiple rules can be used to indicate different content for different types of data. the following example uses the history datasource: <tree datasources="rdf:history" ref="nc:historybydate" flags="dont-build-content"> as described in the previous section, the tree may use a tree builder for template generation instead of the normal content builder. this means that elements will not be created for every row in the tree, making it more efficient. the flags attribute set to the value dont-build-content, as used in the example above, indicates that the tree builder should be used. if you leave the attribute out, the content builder will b...
...y based on the available rdf data. an interesting part of rdf datasources is that the resource values are only determined when the data is needed. this means that values that are deeper in the resource hierarchy are not determined until the user navigates to that node in the tree. this becomes useful for certain datasources where the data is determined dynamically. sorting columns if you try the previous example, you might note that the list of files is not sorted. trees which generate their data from a datasource have the optional ability to sort their data. you can sort either ascending or descending on any column. the user may change the sort column and direction by clicking the column headers. this sorting feature is not available for trees with static content, although you can write a sc...
... an empty one as well. ...

tooltip - Archive of obsolete content
<vbox> <button label="simple" tooltiptext="a simple popup"/> <button label="more" tooltip="moretip"/> </vbox> attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. an ellipsis will be used in place of the cropped text. if the box direction is reversed, the cropping is reversed. start the text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text will b...
...nu2 item 2"/> </menupopup> </menu> <menupopup/> onpopuphiding type: script code this event is sent to a popup when it is about to be hidden. onpopupshowing type: script code this event is sent to a popup just before it is opened. this handler is usually used to dynamically set the contents when the user requests to display it. returning false from this event handler prevents the popup from appearing. onpopupshown type: script code this event is sent to a popup after it has been opened, much like the onload event is sent to a window when it is opened. page type: boolean setting the page attribute to true will result in the tooltip being filled automatically as appropriate for a browser content area tooltip, i.e. the tooltip text is set acco...
...e: no return value closes the popup immediately. moveto( x, y ) return type: no return value moves the popup to a new location defined by screen coordinates (and not client coordinates). if both x and y have the value -1 the call will realign the popup with its anchor node. openpopup( anchor , position , x , y , iscontextmenu, attributesoverride, triggerevent ) return type: no return value opens the popup relative to a specified node at a specific location. anchor the popup may be either anchored to another node or opened freely. to anchor a popup to a node, supply an anchor node and set the position to a string indicating the manner in which the popup should be anchored. the anchor node does not need to be in the same docum...
...it affects menu item highlighting; that is, while a context menu is open, menus opened earlier do not highlight or execute their items. attributesoverride if the attributesoverride argument is true, the position attribute on the popup node overrides the position value argument. if attributesoverride is false, the attribute is only used if the position argument is empty. triggerevent the event that triggered the popup (such as a mouse click, if the user clicked something to open the popup). openpopupatscreen( x, y, iscontextmenu ) return type: no return value open the popup at a specific screen position specified by x and y. this position may be adjusted if it would cause the popup to be off of the screen. the x and y coordinates are measured ...

Version - Archive of obsolete content
rss. some rss formats are xml-based formats. and some rss formats are rdf-based formats. the list below is of all known rss versions. they are listed in chronological order of when they were released. note: in the list below, although rss 1.0 seems to be out of place, it is actually in the correct place chronologically. note: there are 3 different versions of rss 0.91. ...
...sed formats. and some rss formats are rdf-based formats. the list below is of all known rss versions. they are listed in chronological order of when they were released. note: in the list below, although rss 1.0 seems to be out of place, it is actually in the correct place chronologically. note: there are 3 different versions of rss 0.91. netscape's rss 0.91 (revision 1), netscape's rss 0.91 revision 3 and userland's rss 0.91. ...
...ersions of rss 0.91. netscape's rss 0.91 (revision 1), netscape's rss 0.91 revision 3 and userland's rss 0.91. note: rss 0.93 and rss 0.94 were only ever released as "drafts" and never became "final" and thus were not meant to actually be used. ...
...0.91 revision 3 and userland's rss 0.91. note: rss 0.93 and rss 0.94 were only ever released as "drafts" and never became "final" and thus were not meant to actually be used. ...

Create Your Own Firefox Background Theme - Archive of obsolete content
the tab strip. it will be anchored to the top-right corner of the browser window. view a sample theme header here. image requirements dimensions should be 3000px wide × 200px high png or jpg file format image must be no larger than 300 kb in file size tips subtle, soft contrast images and gradients work best; highly detailed images will compete with the browser ui. firefox may reveal more of the lower portion of the image if another toolbar or other ui element is added to the top of the window. the upper right-hand side of the image should have the most important information—as a user increases the width of the browser window, the browser reveals more of the left-hand side of the image. online image editor resources pixlr — pixlr offers professional and easy-to-u...
...hored to the bottom-left corner of the browser window. footer images are optional. view a sample theme footer here. image requirements dimensions should be 3000px wide × 100px high png or jpg file format image must be no larger than 300 kb in file size tips subtle, soft contrast images and gradients work best; highly detailed images will compete with the browser ui. firefox may reveal more of the upper portion of the image if the find bar is open or if an extension adds more height to the bottom of the window. the left-hand side of the image should have the most important information—as a user increases the width of the browser window, the browser reveals more of the right-hand side of the image. submitting your theme images to get started submitting your images, go t...
...ght-hand side of the image. submitting your theme images to get started submitting your images, go to the theme submission page: name your theme — pick a unique name for your theme. duplicate names are not allowed, so you may need to try a few times to find a unique name. pick a category and tags — select a category and enter some tags that best describe your theme. keep in mind that a reviewer may reject your theme if it is obvious that your category and/or tags are unrelated to your theme. describe your theme — write a short description of your theme. keep in mind that a reviewer may reject your theme if your description is not an accurate representation of your theme. select a license for your theme — decide on a copyright license for your work. read more about the types o...
...ht license for your work. read more about the types of creative common licenses. important: please be sure you have the rights to use the image in your theme! upload your images — make sure they are under 300 kb in size and jpg or png format! select text and tab colors — you can choose the tab ("background") color and foreground text color that work best with your header image. preview your theme — you're ready to preview your theme! simply mouse over the image above the submit theme button, and see how it looks instantly. submit your theme — if everything looks right, click the submit theme button, and you're done! you can see all the themes you've authored on your profile page. tip: to ensure that your theme is approved for the gallery, be sure it complies with ...

Using workers in extensions - Archive of obsolete content
« previous this article shows you how to use worker threads in extensions to perform tasks in the background without blocking the user interface. if you haven't already created an extension, or would like to refresh your memory, take a look at the previous articles in this series: creating a status bar extension creating a dynamic status bar extension adding preferences to an extension localizing an extension updating an extension to support multiple mozilla applications download the sample you may download the complete example: download the example. ...
...ould like to refresh your memory, take a look at the previous articles in this series: creating a status bar extension creating a dynamic status bar extension adding preferences to an extension localizing an extension updating an extension to support multiple mozilla applications download the sample you may download the complete example: download the example. how this differs from previous versions this version of the stock ticker extension moves the xmlhttprequest call that fetches updated stock information into a worker thread, which then passes that information back to the main body of the extension's code to update the display in the status bar. this demonstrates not only how to use workers in an extension, but also how to perform xmlhttprequest in a worker, and how worker...
...itialize the worker, and to change which stock is being monitored. if there is no data field, the refreshinformation() method is called to fetch the latest information about the stock and pass it back to the main thread. this provides a way for the main thread to specifically request that the worker update the stock information at once. the refreshinformation() method is fairly similar to the previous versions, with two notable exceptions: if the ticker symbol has not been set yet, an exception is thrown (lines 4-6). when the result is received from xmlhttprequest, instead of immediately updating the displayed information in the status bar, a message is sent to the main thread using the worker's postmessage() method. this is because only the main thread is allowed to access the user in...
...sh'. this.worker.postmessage(""); }, the onworkermessage() method this method is called when the worker posts a message back to the main thread. its job is to update the ticker information that's currently displayed in the status bar, as well as to update the tooltip that appears while the mouse cursor is hovering over the ticker. this code is essentially identical to what's done in the previous version, except that it's done in response to an event instead of within the refreshinformation() method. a note about chromeworkers requires gecko 2.0(firefox 4 / thunderbird 3.3 / seamonkey 2.1) gecko 2.0 added the new chromeworker object, which provides a special chrome-only worker that can be used by applications and extensions. this worker object has access to js-ctypes, whic...

Browser Detection and Cross Browser Support - Archive of obsolete content
and is not on par with current standards. this article is outdated, do not follow it. have a look to the more current article writing forward-compatible websites to find modern informations. improper browser detection can lead to web maintenance nightmares. rethinking the basics of when and how to detect user agents is crucial to creating maintainable, cross browser web content. this article reviews several approaches to browser detection, their usefulness in specific circumstances to arrive at a common sense approach to browser detection. quick tip if you must determine if a visitor is using a gecko-based browser, simply test navigator.product == 'gecko' or look for the string 'gecko/' in the navigator.useragent. note that some other browsers such as safari are reporting (like gecko...
... the vendor/version. we can rewrite the earlier example which illustrated problems with using objects to determine vendor/version to use feature detection instead. if (document.body && typeof(document.body.offsetheight) == 'number') { height = document.body.offsetheight; } else if (typeof(window.innerheight) == 'number') { height = window.innerheight; } else { height = 0; } note how the previous example does not make assumptions about which browser is being used. instead, it only tests for the objects which it wishes to use. since the numeric values could potentially be zero, the script tests the type of the objects to make sure they are numbers instead. gecko and navigator 4 gecko is the replacement for navigator 4 rendering engine and as such retains many features from navigato...
...studying how other authors use browser detection and cross browser coding techniques is the best way to learn. example 1 - object based feature detection this example illustrates the use of feature detection. not...
...hese older browsers, users will not have a compelling reason to upgrade. by ceasing to support older browsers, you can provide a reason for users to upgrade. this will benefit not only them, but yourself as well. supporting only standards based browsers can reduce development and maintanance costs as well as increase the dynamic and compelling content which will attract visitors and increase your revenue. the choice is yours... decide to support the standards today! see also window.navigator.useragent links gecko compatibility handbook gecko user agent string reference object cross reference - navigator browser feature detection gecko user agent strings rfc 1945 - hypertext transfer protocol -- http 1.0 rfc 2068 - hypertext transfer protocol -- http 1.1 [mozilla's quirks mode] ...

Array comprehensions - Archive of obsolete content
efox implementation. do not use it! syntax [for (x of iterable) x] [for (x of iterable) if (condition) x] [for (x of iterable) for (y of iterable) x + y] description inside array comprehensions, these two kinds of components are allowed: for...of and if the for-of iteration is always the first component. multiple for-of iterations or if statements are allowed. array comprehension was previously proposed to be standardized in ecmascript 2016, it provide a useful shortcut for constructing a new array based on the contents of another. comprehensions can often be used in place of calls to map() and filter(), or as a way of combining the two. the following comprehension takes an array of numbers and creates a new array of the double of each of those numbers. var numbers = [1, 2, 3, 4...
...generators can also be used. even strings may be used as input; to achieve the filter and map actions (under array-like objects) above: var str = 'abcdef'; var consonantsonlystr = [for (c of str) if (!(/[aeiouaeiou]/).test(c)) c].join(''); // 'bcdf' var interpolatedzeros = [for (c of str) c + '0' ].join(''); // 'a0b0c0d0e0f0' again, the input form is not preserved, so we have to use join() to revert back to a string. examples simple array comprehensions [for (i of [1, 2, 3]) i * i ]; // [1, 4, 9] var abc = ['a', 'b', 'c']; [for (letters of abc) letters.tolowercase()]; // ["a", "b", "c"] array comprehensions with if statement var years = [1954, 1974, 1990, 2006, 2010, 2014]; [for (year of years) if (year > 2000) year]; // [2006, 2010, 2014] [for (year of years) if (year > 2000) if (y...
... ...
... ...

Implementation Status - Archive of obsolete content
ork. 292333; 3.4 extension module unsupported 300760; 3.5 mustunderstand module unsupported 300757; 4. processing model (events) section title status notes bugs 4 processing model (events) partial the xforms-recalculate, xforms-revalidate, and xforms-refresh events are not as separated as they should be. 278448; 338146; 4.2 initialization events supported 4.2.1 xforms-model-construct supported 4.2.2 xforms-model-construct-done supported 4.2.3 xforms-ready suppo...
...ms-model-construct-done supported 4.2.3 xforms-ready supported 4.2.4 xforms-model-destruct supported 4.3.1 xforms-rebuild supported 4.3.2 xforms-recalculate supported 4.3.3 xforms-revalidate supported 4.3.4 xforms-refresh supported 4.3.5 xforms-reset supported 4.3.6 xforms-next xforms-previous supported 4.3.7 xforms-focus supported 4.3.8 xforms-help xforms-hint...
...datatypes section title status notes bugs 5.1 xml schema built-in datatypes partial whitespace face...
...ported 10.9 rebuild partial is dispatching events instead of calling directly 332231; 10.10 recalculate partial is dispatching events instead of calling directly. recalculate won't properly mark nodes as dirty if they were changed using javascript interfaces. ...

Implementing controls using the Gamepad API - Game development
connected. querying the gamepad object beside connect() and disconnect(), there are two more methods in the gamepadapi object: update() and buttonpressed(). ...
...then it loops through buttons and axes to get their actual states and values. detecting button presses the buttonpressed() method is also placed in the main game loop to listen for button presses. it takes two parameters — the button we want to listen to and the (optional) way to tell the game that...
... var newpress = false; // loop through pressed buttons for(var i=0,s=gamepadapi.buttonsstatus.length; i<s; i++) { // if we found the button we're looking for... if(gamepadapi.buttonsstatus[i] == button) { // set the boolean variable to true newpress = true; // if we want to check the single press if(!hold) { // loop through the cached states from the previous frame for(var j=0,p=gamepadapi.buttonscache.length; j<p; j++) { // if the button was already pressed, ignore new press if(gamepadapi.buttonscache[j] == button) { newpress = false; } } } } } return newpress; }, there are two types of action to consider for a button: a single press and a hold. the newpress boolean variable...
...e press and a hold. the newpress boolean variable will indicate whether there's a new press of a button or not. next, we loop through the array of pressed buttons — if the given button is the same as the one we're looking for, the newpress variable is set to true. to check if the press is a new one, so the player is not holding the key, we loop through the cached states of the buttons from the previous frame of the game loop. if we find it there it means that the button is being held, so there's no new press. in the end the newpress variable is returned. the buttonpressed function is used in the update loop of the game like this: if(gamepadapi.turbo) { if(gamepadapi.buttonpressed('a','hold')) { this.turbo_fire(); } if(gamepadapi.buttonpressed('b')) { this.managepause(); } }...

Move the ball - Game development
technically, we will be painting the ball on the screen, clearing it and then painting it again in a slightly different position every frame to make the impression of movement — just like how movement works with the movies. defining a drawing loop to keep constantly updating the canvas drawing on each frame, we need to define a drawing function that will run over and over again, with a different set of variable values each time to change sprite positions, etc. ...
...tanimationframe(). 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 ch...
...tx.arc(x, y, 10, 0, math.pi*2); ctx.fillstyle = "#0095dd"; ctx.fill(); ctx.closepath(); x += dx; y += dy; } save your code again and try it in your browser. this works ok, although it appears that the ball is leaving a trail behind it: clearing the canvas before each frame the ball is leaving a trail because we're painting a new circle on every frame without removing the previous one. don't worry, because there's a method to clear canvas content: clearrect(). this method takes four parameters: the x and y coordinates of the top left corner of a rectangle, and the x and y coordinates of the bottom right corner of a rectangle. the whole area covered by this rectangle will be cleared of any content previously painted there. add the following highlighted new line to the ...
...finished code for this article for yourself in the live demo below, and play with it to understand better how it works: exercise: try changing the speed of the moving ball, or the direction it moves in. next steps we've drawn our ball and gotten it moving, but it keeps disappearing off the edge of the canvas. in the third chapter we'll explore how to make it bounce off the walls. « previousnext » ...

Build the brick field - Game development
« previousnext » this is the 9th step out of 16 of the gamedev phaser tutorial. you can find the source code as it should look after completing this lesson at gamedev-phaser-content-kit/demos/lesson09.html. building the brick field is a little bit more complicated than adding a single object to the screen, although it's still easier with phaser than in pure javascript. let's explore how to create a group of bricks and print them on screen using a loop. ...
...gamedev-phaser-content-kit/demos/lesson09.html. building the brick field is a little bit more complicated than adding a single object to the screen, although it's still easier with phaser than in pure javascript. let's explore how to create a group of bricks and print them on screen using a loop. defining new variables first, let's define the needed variables — add the following below your previous variable definitions: var bricks; var newbrick; var brickinfo; the bricks variable will be used to create a group, newbrick will be a new object added to the group on every iteration of the loop, and brickinfo will store all the data we need. rendering the brick image next, let's load the image of the brick — add the following load.image() call just below the others: function preload(...
...draw the bricks) and the padding between each row and column of bricks. now, let's start creating the bricks themselves — add an empty group first to contain the bricks, by adding the following line at the bottom of the initbricks() function: bricks = game.add.group(); we can loop through the rows and columns to create new brick on each iteration — add the following nested loop below the previous line of code: for(c=0; c<brickinfo.count.col; c++) { for(r=0; r<brickinfo.count.row; r++) { // create new brick and add it to the group } } this way we will create the exact number of bricks we need and have them all contained in a group. now we need to add some code inside the nested loop stucture to draw each brick. fill in the contents as shown below: for(c=0; c<brickin...
...ad index.html at this point, you should see the bricks printed on screen, at an even distance from one another. compare your code you can check the finished code for this lesson in the live demo below, and play with it to understand better how it works: next steps something is missing though. the ball goes through the bricks without stopping — we need proper collision detection. « previousnext » ...

Player paddle and controls - Game development
you can find the source code as it should look after completing this lesson at gamedev-phaser-content-kit/demos/lesson07.html. we have the ball moving and bouncing off the walls, but it quickly gets boring — there's no interactivity! we need a way to introduce gameplay, so in this article we'll create a paddle to move around and hit the ball with. rendering the paddle from the framework point of view the paddle is very similar to the ball — we need to add a variable to represent it, load the relevant image asset, and then do the magic. ...
...reload your index.html at this point, the paddle is currently not exactly in the middle. why? because the anchor from which the position is calculated always starts from the top left edge of the object. we can change that to have the anchor in the middle of the paddle's width and at the bottom of it's height, so it's easier to position it against the bottom edge. add the following line below the previous new one: paddle.anchor.set(0.5,1); the paddle is now positioned right where we want it to be. now, to make it collide with the ball we have to enable physics for the paddle. continue by adding the following new line, again at the bottom of the create() function: game.physics.enable(paddle, phaser.physics.arcade); now the magic can start to happen — the framework can take care of check...
...dle); paddle.x = game.input.x; } now on every new frame the paddle's x position will adjust accordingly to the input's x position, however when we start the game, the position of the paddle is not in the middle. it's because the input position is not yet defined. to fix that we can set the default position (if an input position is not yet defined) to be the middle of the screen. update the previous line as follows: paddle.x = game.input.x || game.world.width*0.5; if you haven't already done so, reload your index.html and try it out! position the ball we have the paddle working as expected, so let's position the ball on it. it's very similar to positioning the paddle — we need to have it placed in the middle of the screen horizontally and at the bottom vertically with a little off...
... of the paddle. ...

Plug-in Development Overview - Gecko Plugin API Reference
a basic overview of the plug-in development process is given in the following steps. plan your plug-in: decide on the services you want the plug-in software to provide and how it will interact with the browser and the special media for which the plug-in is created. decide the mime type for the plug-in (see registering plug-ins). set up your development environment properly. you can use a variety of environments to create a plug-in, but make sure that you have the necessary files from the plugin sdk. create a plug-in project. write your plug-in code and implement the appropriate plug-in api methods for basic plug-in operation. ...
... string 5 image/jpeg string 6 jpg several other optional strings may contain useful information about the plug-in. plug-ins must support 'str#' 128 but are not required to support any of these others: str#' 127 can contain a list of mime type descriptions corresponding to the types in 'str#' 128 . for example, this description list corresponds to the types in the previous example: string 1: "quicktime video", string 4: "aiff audio", and string 5: "jpeg image format." str#' 126: string 1 can contain a descriptive message about the plug-in. this message, which is in html format, is displayed by the browser in its "about plug-ins" page. string 2 can contain the name of the plug-in, thus allowing the name the user sees to be different from the name of the file...
...data becomes available. random-access mode: the browser allows the plug-in to request specific ranges of bytes from anywhere in the stream. this mode requires server support. file mode: the browser saves the data to a local file in cache and passes that file path to the plug-in. streams produced by the plug-in to send to the browser are like normal-mode streams produced by the browser, but in reverse. in the browser's normal-mode streams, the browser calls the plug-in to inform it that the stream was created and to push more data. in streams produced by the plug-in, by contrast, the plug-in calls netscape functions to create a stream, push data into it, and delete it. working with urls the plug-in api provides methods that plug-ins can use to retrieve data from or post data to a url any...
...table. see the wikipedia article for historical information. both technologies are now obsolete for the purposes of plug-in scriptability, and the cross-browser npruntime api should be used instead. see the scripting plugins section of this reference for the details. building plug-ins once you have added the special code and additional files to make your plug-in scriptable as described in the previous section, the build process is quite straightforward. in addition to the dll that goes in the plugins folder, you must also place a type library and an extra header file in the appropriate places in your application directory. this section describes those extra scriptability steps in more detail. building, platforms, and compilers the header files and some basic examples for npapi plugins ar...

Main Axis - MDN Web Docs Glossary: Definitions of Web-related terms
on the main axis you can control the sizing of flex items by adding any available space to the items themselves, by way of flex properties on the items. ...
... on the main axis you can control the sizing of flex items by adding any available space to the items themselves, by way of flex properties on the items. ...
... on the main axis you can control the sizing of flex items by adding any available space to the items themselves, by way of flex properties on the items. ...
... on the main axis you can control the sizing of flex items by adding any available space to the items themselves, by way of flex properties on the items. ...

Accessible multimedia - Learn web development
this article shows how. prerequisites: basic computer literacy, a basic understanding of html, css, and javascript, an understanding of what accessibility is. objective: to understand the accessibility issues behind multimedia, and how to overcome them. ...
... before moving onto creating our button functionality, let's remove the native controls so they don't get in the way of our custom controls. add the following, aga...
...ple with access to audio content, you really need to create text transcripts. these can either be included on the same page as the audio in some way, or included on a separate page and linked to. in terms of actually creating the transcript, your options are: commercial services — you could pay a professional to do the transcription, see for example companies like scribie, casting words, or rev. look around and ask advice to make sure you find a reputable company that you'll be able to work with effectively. community/grass roots/self transcription — if you are part of an active community or team in your workplace, then you could ask them for help with doing the translations. you could even have a go at doing them yourself. automated services — there are ai services available, lik...
...ssessments available in our html multimedia and embedding module that test your knowledge of the information presented here. if you haven't already, go and try out the assessments at test your skills: html images and test your skills: multimedia and embedding. ...

Styling tables - Learn web development
this article provides a guide to making html tables look good, with some specific table styling techniques highlighted. prerequisites: html basics (study introduction to html), knowledge of html tables, and an idea of how css works (study css first steps.) objective: to learn how to effectively style html tables. a typical html table let's start by looking at a typical html table. well, i say typical — most html table examples are about shoes, or the weather, or employees; we decided to make things more interesting by making it about famous punk bands from the uk. ...
...ms</th> <th scope="col">most famous song</th> </tr> </thead> <tbody> <tr> <th scope="row">buzzcocks</th> <td>1976</td> <td>9</td> <td>ever fallen in love (with someone you shouldn't've)</td> </tr> <tr> <th scope="row">the clash</th> <td>1976</td> <td>6</td> <td>london calling</td> </tr> ... ...
...like; you'll just have to replace our provided <link> element and custom font-family declaration with the ones google fonts gives you. ...
...fore you move on — see test your skills: tables. summary with styling tables now behind us, we need something else to occupy our time. the next article explores debugging css — how to solve problems such as layouts not looking like they should, or properties not applying when you think they should. this includes information on using browser devtools to find solutions to your problems. ...

Floats - Learn web development
with the advent of flexbox and grid it has now returned to its original purpose, as this article explains. prerequisites: html basics (study introduction to html), and an idea of how css works (study introduction to css.) objective: to learn how to create floated features on webpages, and to use the clear property and other methods of clearing floats. ...
...rmal 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 text to move it away from the float. this is because a floated element is take...
...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 amet, consectetur adipiscing elit. nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> <p class="cleared">du...
...important information? you can find some further tests to verify that you've retained this information before you move on — see test your skills: floats. summary you now know all there is to know about floats in modern web development. ...

Positioning - Learn web development
this article explains the different position values, and how to use them. prerequisites: html basics (study introduction to html), and an idea of how css works (study introduction to css.) objective: to learn how css positioning works. we'd like you to follow along with the exercises on your local computer, if possible — grab a copy of 0_basic-flow.html from our github repo (source code here) and use that as a starting point. ...
...low the original .positioned paragraph, where the two overlap. this is because the .positioned paragraph is the second paragraph in the source order, and positioned elements later in the source order win over positioned elements earlier in the source order. can you change the stacking order? yes, you can, by using the z-index property. "z-index" is a reference to the z-axis. you may recall from previous points in the course where we discussed web pages using horizontal (x-axis) and vertical (y-axis) coordinates to work out positioning for things like background images and drop shadow offsets. (0,0) is at the top left of the page (or element), and the x- and y-axes run across to the right and down the page (for left to right languages, anyway.) web pages also have a z-axis: an imaginary line...
... <dt>e</dt> <dd>egg</dd> <dd>elephant</dd> <dd>egret</dd> </dl> the css might look as follows. in normal flow the <dt> elements will scroll with the content. when we add position: sticky to the <dt> element, along with a top value of 0, supporting browsers will stick the headings to the top of the viewport as they reach that position. each subsequent header will then replace the previous one as it scrolls up to that position. dt { background-color: black; color: white; padding: 10px; position: sticky; top: 0; left: 0; margin: 1em 0; } body { width: 500px; height: 1400px; margin: 0 auto; } dt { background-color: black; color: white; padding: 10px; position: sticky; top: 0; left: 0; margin: 1em 0; } <h1>sticky positioning</h1> <dl> ...
...d 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: positioning. summary i'm sure you had fun playing with basic positioning; while it is not a method you would use for entire layouts, as you can see there are many tasks it is suited for. previous overview: css layout next ...

Practical positioning examples - Learn web development
red functionality. general setup to begin with, add the following between your opening and closing <style> tags: html { font-family: sans-serif; } * { box-sizing: border-box; } body { margin: 0; } this is just some general setup to set a sans-serif font on our page, use the border-box box-sizing model, and get rid of the default <body> margin. next, add the following just below your previous css: .info-box { width: 450px; height: 400px; margin: 0 auto; } this sets a specific width and height on the content, and centers it on the screen using the old margin: 0 auto trick. previously in the course we advised against setting a fixed height on content containers if at all possible; it is ok in this circumstance because we have fixed content in our tabs. it also looks a bit ja...
...d height on content containers if at all possible; it is ok in this circumstance because we have fixed content in our tabs. it also looks a bit jarring to have different tabs at different heights. styling our tabs now we want to style tabs to look like tabs — basically, these are a horizontal navigation menu, but instead of loading different web pages when they are clicked on like we've seen previously in the course, they cause different panels to be displayed on the same page. first, add the following rule at the bottom of your css to remove the default padding-left and margin-top from the unordered list: .info-box ul { padding-left: 0; margin-top: 0; } note: we are using descendant selectors with .info-box at the start of the chain throughout this example — this is so that we c...
... info panel instead of the useful content. our finished example will look like this: note: you can see the finished example running live at hidden-info-panel.html (source code). check it out to get an idea of what you will be building in this section of the article. as a starting point, make a local copy of hidden-info-panel-start.html from our github repo. this doesn't follow on from the previous example, so a fresh start file is required. let's have a look at the html in the file: <label for="toggle">❔</label> <input type="checkbox" id="toggle"> <aside> ... </aside> to start with here we've got a <label> element and an <input> element — <label> elements are normally used to associate a text label with a form element for accessibility purposes (allowing a screen user to see ...
...fect of <label> elements is that you can click a checkbox's label to check the checkbox, as well as just the checkbox itself. this has led to the well-known checkbox hack, which provides a javascript-free way of controlling an element by toggling a button. the element we'll be controlling is the <aside> element that follows the other two (we've left its contents out of the above code listing for brevity). in the below sections we'll explain how this all works. styling the form elements first let's deal with the form elements — add the following css in between your <style> tags: label[for="toggle"] { font-size: 3rem; position: absolute; top: 4px; right: 5px; z-index: 1; cursor: pointer; } input[type="checkbox"] { position: absolute; top: -100px; } the first rule styles ...

Responsive design - Learn web development
if the user had a larger or smaller screen than the designer expected, results ranged from unwanted scrollbars to overly long line lengths, and poor use of space. as more diverse screen sizes became available, the concept of responsive web design (rwd) appeared, a set of practices that allows web pages to alter their layout and appearance to suit different screen widths, resolutions, etc. it is an idea that changed the way we design for a multi-device web, and in this article, we'll help you understand the main techniques you need to know to master it. ...
...r if their containing column became narrower than the image's intrinsic size, but never grow larger. this enables an image to scale down to fit in a flexibly-sized column, rather than overflow it, but not grow larger and become pixellated if the column becomes wider than the image. the third key component was the media query. media queries enable the type of layout switch that cameron adams had previously explored using javascript, using only css. rather than having one layout for all screen sizes, the layout could be changed. sidebars could be repositioned for the smaller screen, or alternate navigation could be displayed. it is important to understand that responsive web design isn't a separate technology — it is a term used to describe an approach to web design or a set of best practi...
...e of html in the head of your documents. there are other settings you can use with the viewport meta tag, however in general the above line is what you will want to use. initial-scale: sets the initial zoom of the page, which we set to 1. height: sets a specific height for the viewport. minimum-scale: sets the minimum zoom level. maximum-scale: sets the maximum zoom level. user-scalable: prevents zooming if set to no. you should avoid using minimum-scale, maximum-scale, and in particular setting user-scalable to no. users should be allowed to zoom as much or as little as they need to; preventing this causes accessibility problems. note: there is a css @ rule designed to replace the viewport meta tag — @viewport — however, it has poor browser support. when both are used the met...
... if you are new to web development today you have many more tools at your disposal than in the early days of responsive design. it is therefore worth checking the age of any materials you are referencing. ...

Styling links - Learn web development
we'll look at all these topics in this article. prerequisites: basic computer literacy, html basics (study introduction to html), css basics (study introduction to css), css text and font fundamentals. objective: to learn how to style link states, and how to use links effectively in common ui features like navigation menus. let's look at some links we looked at how links are implemented in your html according to best practices in creating hyperlinks. ...
...fficient to use relative links to link to other parts of your own site (as with the first link). the text "http" should therefore only appear in external links (like the second and third ones), and we can select this with an attribute selector: a[href*="http"] selects <a> elements, but only if they have an href attribute with a value that contains "http" somewhere inside it. so that's it — try revisiting the active learning section above and trying this new technique out! note: the href values look strange — we've used dummy links here that don't really go anywhere. the reason for this is that if we used real links, you would be able to load an external site in the <iframe> the live example is embedded in, thereby losing the example. note: don't worry if you are not familiar with ba...
...ng that they will sit on their own lines. in this case, we are creating a horizontal list of links, so in the third rule we set the display property to inline, which causes the list items to sit on the same line as one another — they now behave like inline elements. the fourth rule — which styles the <a> element — is the most complicated here; let's go through it step by step: as in previous examples, we start by turning off the default text-decoration and outline — we don't want those spoiling our look. next, we set the display to inline-block — <a> elements are inline by default and, while we don't want them to spill onto their own lines like a value of block would achieve, we do want to be able to size them. inline-block allows us to do this. now onto the sizing! we ...
...munity school homepage. this assessment tests all the knowledge discussed in this module, so you might want to read the next article before moving on to it. ...

The HTML5 input types - Learn web development
now we'll look at the functionality of newer form controls in detail, including some new input types, which were added in html5 to allow collection of specific types of data. prerequisites: basic computer literacy, and a basic understanding of html. objective: to understand the newer input type values available to create native form controls, and how to implement them using html. note: most of the features discussed in this article have wide support across browsers. we'll note any exceptions. ...
... below 10. date and time pickers gathering date and time values has traditionally been a nightmare for web developers. for good user experience, it is important to provide a calendar selection ui, enabling users to select dates without necessating context switching to a native calendar application or potentially entering them in differing formats that are hard to parse. the last minute of the previous millenium can be expressed in the following different ways, for example: 1999/12/31, 23:59 or 12/31/99t11:59pm. html date controls are available to handle this specific kind of data, providing calendar widgets and making the data uniform. a date and time control is created using the <input> element and an appropriate value for the type attribute, depending on whether you wish to collect dat...
...mat, the value returned is in 24-hour format. <input type="time" name="time" id="time"> week <input type="week"> creates a widget to display and pick a week number and its year. weeks start on monday and run to sunday. additionally, the first week 1 of each year contains the first thursday of that year—which may not include the first day of the year, or may include the last few days of the previous year. <input type="week" name="week" id="week"> constraining date/time values all date and time controls can be constrained using the min and max attributes, with further constraining possible via the step attribute (whose value varies according to input type). <label for="mydate">when are you available this summer?</label> <input type="date" name="mydate" min="2013-06-01" max="2013-08-31...
...rther tests to verify that you've retained this information before you move on — see test your skills: html5 controls. summary that brings us to the end of our tour of the html5 form input types. there are a few other control types that cannot be easily grouped together due to their very specific behaviors, but which are still essential to know about. we cover those in the next article. ...

Styling web forms - Learn web development
in this article we will move on to looking at how to use css to style your form controls. this has historically been difficult — form controls vary greatly in how easy they are to customize with css — but it is getting easier as old browsers are retired and modern browsers give us more features to use. prerequisites: basic computer literacy, and a basic understanding of html and css. objective: to understand the issues behind styling forms, and learn some of the basic styling techniques that will be useful to you. ...
...ontrol placement of it. by default it is always positioned over the top border of its <fieldset> parent, near the top left corner. to position it somewhere else, for example inside the fieldset somewhere, or near the bottom left corner, you need to rely on positioning. ...
...te, we need to adjust the display of the single and multiple line text fields to match, since they won't typically look the same using the defaults. tweaking the textareas <textarea> elements default to being rendered as an inline-block element. the two important things here are the resize and overflow properties. while our design is a fixed-size design, and we could use the resize property to prevent users from resizing our multi-line text field, it is best to not prevent users from resizing a textarea if they so choose. the overflow property is used to make the field render more consistently across browsers. some browsers default to the value auto, while some default to the value scroll. in our case, it's better to be sure every one will use auto: textarea { display : block; padding...
... information? you can find some further tests to verify that you've retained this information before you move on — see test your skills: styling basics. summary as you can see, as long as we want to build forms with just text fields and buttons, it's easy to style them using css. in the next article, we will see how to handle form widgets which fall into the "bad" and "ugly" categories. ...

HTML basics - Learn web development
for example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables. as the title suggests, this article will give you a basic understanding of html and its functions. so what is html? html is not a programming language; it is a markup language that defines the structure of your content. html consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. ...
...ppear in the actual content. here, class is the attribute name and editor-note is the attribute value. the class attribute allows you to give the element a non-unique identifier that can be used to target it (and any other elements with the same class value) with style information and other things. an attribute should always have the following: a space between it and the element name (or the previous attribute, if the element already has one or more attributes). the attribute name followed by an equal sign. the attribute value wrapped by opening and closing quotation marks. note: simple attribute values that don't contain ascii whitespace (or any of the characters " ' ` = < > ) can remain unquoted, but it is recommended that you quote all attribute values, as it makes the code more ...
...is no closing </img> tag and no inner content. this is because an image element doesn't wrap content to affect it. its purpose is to embed an image in the html page in the place it appears. anatomy of an html document that wraps up the basics of individual html elements, but they aren't handy on their own. now we'll look at how individual elements are combined to form an entire html page. let's revisit the code we put into our index.html example (which we first met in the dealing with files article): <!doctype html> <html> <head> <meta charset="utf-8"> <title>my test page</title> </head> <body> <img src="images/firefox-icon.png" alt="my test image"> </body> </html> here, we have the following: <!doctype html> — the doctype. it is required preamble. in the mists of...
...ou haven't already done so. ...

Adding vector graphics to the Web - Learn web development
in this article we'll show you how to include one in your webpage. prerequisites: you should know the basics of html and how to insert an image into your document. objective: learn how to embed an svg (vector) image into a webpage. note: this article doesn't intend to teach you svg; just what it is, and how to add it to web pages. ...
...e anything outside those.) here's a very simple example of what you might paste into your document: <svg width="300" height="200"> <rect width="100%" height="100%" fill="green" /> </svg> pros putting your svg inline saves an http request, and therefore can reduce a bit your loading time. you can assign classes and ids to svg elements and style them with css, either within the svg or wherever you put the css style rules for your html document. in fact, you can use any svg presentation attribute as a css property. inlining svg is the only approach that lets you use css interactions (like :focus) and css animations on your svg image (even in your regular stylesheet.) you can make svg markup into a hyperlink by wrapping it in an <a> element. cons this method is only suitable if ...
...g still download any fallback images. you need to weigh whether the extra overhead is really worthwhile, just to support obsolescent browsers. how to embed an svg with an <iframe> you can open svg images in your browser just like webpages. so embedding an svg document with an <iframe> is done just like we studied in from <object> to <iframe> — other embedding technologies. here's a quick review: <iframe src="triangle.svg" width="500" height="500" sandbox> <img src="triangle.png" alt="triangle with three unequal sides" /> </iframe> this is definitely not the best method to choose: cons iframes do have a fallback mechanism, as you can see, but browsers only display the fallback if they lack support for iframes altogether. moreover, unless the svg and your current webpage hav...
...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.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back;...

Video and audio content - Learn web development
prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, familiarity with html fundamentals (as covered in getting started with html) and images in html. objective: to learn how to embed video and audio content into a webpage, and add captions/subtitles to video. ...
...g multiple source formats to improve compatibility there's a problem with the above example, which you may have noticed already if you've tried to access the live link above with an older browser like internet explorer or even an older version of safari. the video won't play, because different browsers support different video (and audio) formats. fortunately, there are things you can do to help prevent this from being a problem. contents of a media file first, let's go through the terminology quickly. formats like mp3, mp4 and webm are called container formats. they define a structure in which the audio and/or video tracks that make up the media are stored, along with metadata describing the media, what codecs are used to encode its channels, and so forth. a webm file containing a movie w...
...e of those patents, browsers that wish to implement support for those codecs must pay typically enormous license fees. in addition, some people simply prefer to avoid restricted software and prefer to use only open formats. due to these legal and preferential reasons, web developers find themselves having to support multiple formats to capture their entire audience. the codecs described in the previous section exist to compress video and audio into manageable files, since raw audio and video are both exceedingly large. each web browser supports an assortment of codecs, like vorbis or h.264, which are used to convert the compressed audio and video into binary data and back. each codec offers its own advantages and drawbacks, and each container may also offer its own positive and negative fea...
...to display controls to play the audio. other differences from html video are as follows: the <audio> element doesn't support the width/height attributes — again, there is no visual component, so there is nothing to assign a width or height to. it also doesn't support the poster attribute — again, no visual component. other than this, <audio> supports all the same features as <video> — review the above sections for more information about them. restarting media playback at any time, you can reset the media to the beginning—including the process of selecting the best media source, if more than one is specified using <source> elements—by calling the element's load() method: const mediaelem = document.getelementbyid("my-media-element"); mediaelem.load(); detecting track additio...

General asynchronous programming concepts - Learn web development
appendchild(pelem); }); when running the example, open your javascript console then click the button — you'll notice that the paragraph does not appear until after the dates have finished being calculated and the console message has been logged. the code runs in the order it appears in the source, and the later operation doesn't run till the earlier operation has finished running. note: the previous example is very unrealistic. you would never calculate 10 million dates on a real web app! it does, however, serve to give you the basic idea. in our second example, simple-sync-ui-blocking.html (see it live), we simulate something slightly more realistic that you might come across on a real page. we block user interactivity with the rendering of the ui. in this example, we have two buttons...
...at you can run multiple javascript chunks simultaneously. you'd generally use a worker to run expensive processes off the main thread so that user interaction is not blocked. main thread: task a --> task c worker thread: expensive task b with this in mind, have a look at simple-sync-worker.html (see it running live), again with your browser's javascript console open. this is a rewrite of our previous example that calculates the 10 million dates in a separate worker thread. now when you click the button, the browser is able to display the paragraph before the dates have finished calculating. the first operation no longer blocks the second. asynchronous code web workers are pretty useful, but they do have their limitations. a major one is they are not able to access the dom — you can't ...
...hey are not able to access the dom — you can't get a worker to directly do anything to update the ui. we couldn't render our 1 million blue circles inside our worker; it can basically just do the number crunching. the second problem is that although code run in a worker is not blocking, it is still basically synchronous. this becomes a problem when a function relies on the results of multiple previous processes to function. consider the following thread diagrams: main thread: task a --> task b in this case, let's say task a is doing something like fetching an image from the server and task b then does something to the image like applying a filter to it. if you start task a running and then immediately try to run task b, you'll get an error, because the image won't be available yet. ma...
...ing another operation: main thread: task a task b promise: |__async operation__| since the operation is happening somewhere else, the main thread is not blocked while the async operation is being processed. we'll start to look at how we can write asynchronous code in the next article. exciting stuff, huh? keep reading! conclusion modern software design increasingly revolves around using asynchronous programming, to allow programs to do more than one thing at a time. as you use newer and more powerful apis, you'll find more cases where the only way to do things is asynchronously. it used to be hard to write asynchronous code. it still takes getting used to, but it's gotten a lot easier. in the rest of this module, we'll explore further why asynchronous code matt...

Function return values - Learn web development
some functions don't return a significant value, but others do. it's important to understand what their values are, how to use them in your code, and how to make functions return useful values. we'll cover all of these below. prerequisites: basic computer literacy, a basic understanding of html and css, javascript first steps, functions — reusable blocks of code. objective: to understand function return values, and how to make use of them. what are return values? return values are just what they sound like — the values that a function returns when it has completed. ...
...cks of code. objective: to understand function return values, and how to make use of them. what are return values? return values are just what they sound like — the values that a function returns when it has completed. you've already met return values a number of times, although you may not have thought about them explicitly. ...
...s (finishes running), it returns a value, which is a new string with the replacement made. in the code above, the result of this return value is saved in the variable newstring. if you look at the replace() function mdn reference page, you'll see a section called return value. it is very useful to know and understand what values are returned by functions, so we try to include this information wherever possible. some functions don't return any value. (in these cases, our reference pages list the return value as void or undefined.) for example, in the displaymessage() function we built in the previous article, no specific value is returned when the function is invoked. it just makes a box appear somewhere on the screen — that's it! generally, a return value is used where the function is a...
...d. this way, your program will be less likely to throw errors. think about the idea of creating a function library. as you go further into your programming career, you'll start doing the same kinds of things over and over again. it is a good idea to create your own library of utility functions to do these sorts of things. you can copy them over to new code, or even just apply it to html pages wherever you need it. test your skills! you've reached the end of this article, but can you remember the most important information? you can find some further tests to verify that you've retained this information before you move on — see test your skills: functions. conclusion so there we have it — functions are fun, very useful, and although there's a lot to talk about in regards to their synt...

Object building practice - Learn web development
in this article we dive into a practical exercise, giving you some more practice in building custom javascript objects, with a fun and colorful result. prerequisites: basic computer literacy, a basic understanding of html and css, familiarity with javascript basics (see first steps and building blocks) and oojs basics (see introduction to objects). objective: to get some practice with using objects and object-oriented techniques in a real world context. ...
...mo, to show you how useful objects can be in javascript. our little balls will bounce around on the screen, and change color when they touch each other. the finished example will look a little something like this: this example will make use of the canvas api for drawing the balls to the screen, and the requestanimationframe api for animating the whole display — you don't need to have any previous knowledge of these apis, and we hope that by the time you've finished this article you'll be interested in exploring them more. along the way we'll make use of some nifty objects, and show you a couple of nice techniques like bouncing balls off walls, and checking whether they have hit each other (otherwise known as collision detection). getting started to begin with, make local copies of o...
...velx = -(this.velx); } if ((this.x - this.size) <= 0) { this.velx = -(this.velx); } if ((this.y + this.size) >= height) { this.vely = -(this.vely); } if ((this.y - this.size) <= 0) { this.vely = -(this.vely); } this.x += this.velx; this.y += this.vely; } the first four parts of the function check whether the ball has reached the edge of the canvas. if it has, we reverse the polarity of the relevant velocity to make the ball travel in the opposite direction. so for example, if the ball was traveling upwards (positive vely), then the vertical velocity is changed so that it starts to travel downwards instead (negative vely). in the four cases, we are checking to see: if the x coordinate is greater than the width of the canvas (the ball is going off the righ...
... animation; this is the basis for most games and other such programs. our loop() function does the following: sets the canvas fill color to semi-transparent black, then draws a rectangle of the color across the whole width and height of the canvas, using fillrect() (the four parameters provide a start coordinate, and a width and height for the rectangle drawn). this serves to cover up the previous frame's drawing before the next one is drawn. if you don't do this, you'll just see long snakes worming their way around the canvas instead of balls moving! the color of the fill is set to semi-transparent, rgba(0,0,0,0.25), to allow the previous few frames to shine through slightly, producing the little trails behind the balls as they move. if you changed 0.25 to 1, you won't see them at all...

Object prototypes - Learn web development
in this article, we explain how prototype chains work and look at how the prototype property can be used to add methods to existing constructors. note: this article covers traditional javascript constructors and classes. in the next article, we talk about the modern way of doing things, which provides easier syntax to achieve the same things — see ecmascript 2015 classes. prerequisites: understanding javascript functions, familiarity with javascript basics (see first steps and building blocks), and oojs basics (see introduction to objects). ...
...ect.prototype. they are methods/properties available just on the object() constructor itself. note: this seems strange — how can you have a method defined on a constructor, which is itself a function? well, a function is also a type of object. see the function() constructor reference if you don't believe us. you can check out existing prototype properties for yourself — go back to our previous example and try entering the following into the javascript console: person.prototype the output won't show you very much because we haven't defined anything on our custom constructor's prototype! by default, a constructor's prototype always starts empty. now try the following: object.prototype you'll see a large number of methods defined on object's prototype property, which are th...
...u first meet them. important: the prototype property is one of the most confusingly-named parts of javascript — you might think that this points to the prototype object of the current object, but it doesn't (that's an internal object that can be accessed by __proto__, remember?). prototype instead is a property containing an object on which you define members that you want to be inherited. revisiting create() earlier on we showed how the object.create() method can be used to create a new object instance. for example, try this in your previous example's javascript console: let person2 = object.create(person1); what create() actually does is to create a new object from a specified prototype object. here, person2 is being created using person1 as a prototype object. you can check...
...ry them. summary this article has covered javascript object prototypes, including how prototype object chains allow objects to inherit features from one another, the prototype property and how it can be used to add methods to constructors, and other related topics. ...

Client-Server Overview - Learn web development
as most website server-side code handles requests and responses in similar ways, this will help you understand what you need to do when writing most of your own code. prerequisites: basic computer literacy. a basic understanding of what a web server is. objective: to understand client-server interactions in a dynamic website, and in particular what operations need to be performed by server-side code. ...
... the browser not to allow this page to be embedded in an <iframe> in another site). post request/response example an http post is made when you submit a form containing information to be saved on the server. the request the text below shows the http request made when a user submits new profile details on this site. the format of the request is almost the same as the get request example shown previously, though the first line identifies this request as a post. post https://developer.mozilla.org/profiles/hamishwillee/edit http/1.1 host: developer.mozilla.org connection: keep-alive content-length: 432 pragma: no-cache cache-control: no-cache origin: https://developer.mozilla.org upgrade-insecure-requests: 1 user-agent: mozilla/5.0 (windows nt 10.0; wow64) applewebkit/537.36 (khtml, like ge...
...players are "best", and possibly also getting the identity of the logged in coach from a client-side cookie). the web application dynamically creates an html page by putting the data (from the database) into placeholders inside an html template. the web application returns the generated html to the web browser (via the web server), along with an http status code of 200 ("success"). if anything prevents the html from being returned then the web application will return another code — for example "404" to indicate that the team does not exist. the web browser will then start to process the returned html, sending separate requests to get any other css or javascript files that it references (see step 7). the web server loads static files from the file system and returns them to the browser d...
... of other tasks. we discuss a lot more benefits and some popular web framework choices in the next article. ...

Server-side web frameworks - Learn web development
with this knowledge under our belt, it's time to explore how web frameworks can simplify these tasks, and give you an idea of how you'd choose a framework for your first server-side web application. prerequisites: basic computer literacy. basic understanding of how server-side code handles and responds to http requests (see client-server overview). ...
...vides support for expressions (with syntax: {% expression %}), which allow templates to perform simple operations like iterating list values passed into the template. note: many other templating systems use a similar syntax, e.g.: jinja2 (python), handlebars (javascript), moustache (javascript), etc. the code snippet below shows how this works. continuing the "youngest team" example from the previous section, the html template is passed a list variable called youngest_teams by the view. inside the html skeleton we have an expression that first checks if the youngest_teams variable exists, and then iterates it in a for loop. on each iteration the template displays the team's team_name value in a list item. #best/templates/best/index.html <!doctype html> <html lang="en"> <body> {% if yo...
...umber of requests it is receiving as users access it. at this point you may consider adding support for caching. caching is an optimisation where you store all or part of a web response so that it does not have to be recalculated on subsequent requests. returning a cached response is much faster than calculating one in the first place. caching can be implemented in your code or in the server (see reverse proxy). web frameworks will have different levels of support for defining what content can be cached. scalability: once your website is fantastically successful you will exhaust the benefits of caching and even reach the limits of vertical scaling (running your web application on more powerful hardware). at this point you may need to scale horizontally (share the load by distributing your si...
... framework. you should now have at least an idea of how to choose a web framework for your own server-side development. ...

Ember Interactivity: Footer functionality, conditional rendering - Learn web development
here we'll get the todo counter to update to show the correct number of todos still to complete, and correctly apply styling to completed todos (i.e. where the checkbox has been checked). we'll also wire up our "clear completed" button. along the way, we'll learn about using conditional rendering in our templates. prerequisites: at minimum, it is recommended that you are familiar with the core html, css, and javascript languages, and have knowledge of the terminal/command line. ...
... are doing this inside the service, where the incomplete() getter is available directly (in the template, the contents of the service has been made available as todos via the @service('todo-data') todos; line inside the footer class, hence it being this.todos.incomplete.length there). ...
...nts/todo.js file and update the contents to look like so, to give the todo component access to the service: import component from '@glimmer/component'; import { inject as service } from '@ember/service'; export default class todocomponent extends component { @service('todo-data') todos; } next, go back again to our todo-data.js service file and add the following action just below the previous ones, which will allow us to toggle a completion state for each todo: @action togglecompletion(todo) { todo.iscompleted = !todo.iscompleted; } updating the template to show completed state finally, we will edit the todo.hbs template such that the checkbox's value is now bound to the iscompleted property on the todo, and so that on change, the togglecompletion() method on the todo ...
... final version of the app), it makes sense to have all persistent-state-changing operations be in the same place. summary that's enough for now. at this point, not only can we mark todos as complete, but we can clear them as well. now the only thing left to wire up the footer are the three filtering links: "all", "active", and "completed". we'll do that in the next article, using routing. ...

Ember interactivity: Events, classes and state - Learn web development
along the way, we'll look at using events in ember, creating component classes to contain javascript code to control interactive features, and setting up a service to keep track of the data state of our app. prerequisites: at minimum, it is recommended that you are familiar with the core html, css, and javascript languages, and have knowledge of the terminal/command line. a deeper understanding of modern javascript features (such as classes, modules, etc), will be extremely beneficial, as ember makes heavy use of them. ...
...empty class: import service from '@ember/service'; export default class tododataservice extends service { } first of all, we want to define what a todo is. we know that we want to track both the text of a todo, and whether or not it is is completed. add the following import statement below the existing one: import { tracked } from '@glimmer/tracking'; now add the following class below the previous line you added: class todo { @tracked text = ''; @tracked iscompleted = false; constructor(text) { this.text = text; } } this class represents a todo — it contains a @tracked text property containing the text of the todo, and a @tracked iscompleted property that specifies whether the todo has been completed or not. when instantiated, a todo object will have an initial text va...
...), and an iscompleted value of false. the only ember-specific part of this class is the @tracked decorator — this hooks in to the reactivity system and allows ember to update what you're seeing in your app automatically if the tracked properties change. more information on tracked can be found here. now it's time to add to the body of the service. ...
... in the ui: summary ok, so that's great progress for now. we can now add todo items to our app, and the state of the data is tracked using our service. next we'll move on to getting our footer functionality working, including the todo counter, and look at conditional rendering, including correctly styling todos when they've been checked. we'll also wire up our "clear completed" button. ...

Getting started with React - Learn web development
we'll discover a little bit of detail about its background and use cases, set up a basic react toolchain on our local computer, and create and play with a simple starter app — learning a bit about how react works in the process. prerequisites: familiarity with the core html, css, and javascript languages, knowledge of the terminal/command line. react uses an html-in-javascript syntax called jsx (javascript and xml). familiarity with both html and javascript will help you to learn jsx, and better identify whether bugs in your application are related to javascript or to the more specific domain of react. ...
...h1>; this heading constant is known as a jsx expression. react can use it to render that <h1> tag in our app. suppose we wanted to wrap our heading in a <header> tag, for semantic reasons? the jsx approach allows us to nest our elements within each other, just like we do with html: const header = ( <header> <h1>mozilla developer network</h1> </header> ); note: the parentheses in the previous snippet aren't unique to jsx, and don’t have any effect on your application. they're a signal to you (and your computer) that the multiple lines of code inside are part of the same expression. you could just as well write the header expression like this: const header = <header> <h1>mozilla developer network</h1> </header> however, this looks kind of awkward, because the <header> tag t...
...re written inside component calls, and use the same syntax as html attributes — prop="value". let’s open index.js and give our <app/> call its first prop. add a prop of subject to the <app/> component call, with a value of clarice. when you are done, your code should look something like this: reactdom.render(<app subject="clarice" />, document.getelementbyid('root')); back in app.js, let's revisit the app function itself, which reads like this (with the return statement shortened for brevity): function app() { const subject = "react"; return ( // return statement ); } change the signature of the app function so that it accepts props as a parameter, and delete the subject const. just like any other function parameter, you can put props in a console.log() to print it to your ...
...u can read jsx variables by putting them between curly braces, like {so}. some jsx attributes are different than html attributes so that they don't conflict with javascript reserved words. for example, class in html translates to classname in jsx. note that multi-word attributes are camel-cased. props are written just like attributes inside component calls and are passed into components. ...

React interactivity: Editing, filtering, conditional rendering - Learn web development
this includes allowing you to edit existing tasks, and filtering the list of tasks between all, completed, and incomplete tasks. we'll look at conditional ui rendering along the way. prerequisites: familiarity with the core html, css, and javascript languages, knowledge of the terminal/command line. objective: to learn about conditional rendering in react, and implementing list filtering and an editing ui in our app. editing the name of a task we don’t have a user interface for editing the name of a task yet. ...
...e'll update our editingtemplate's <input /> field, setting a value attribute of newname, and binding our handlechange() function to its onchange event. update it as follows: <input id={props.id} classname="todo-text" type="text" value={newname} onchange={handlechange} /> finally, we need to create a function to handle the edit form’s onsubmit event; add the following just below the previous function you added: function handlesubmit(e) { e.preventdefault(); props.edittask(props.id, newname); setnewname(""); setediting(false); } remember that our edittask() callback prop needs the id of the task we're editing as well as its new name. bind this function to the form’s submit event by adding the following onsubmit handler to the editingtemplate's <form>: <form classname...
..._map = { all: () => true, active: task => !task.completed, completed: task => task.completed }; the values of filter_map are functions that we will use to filter the tasks data array: the all filter shows all tasks, so we return true for all tasks. the active filter shows tasks whose completed prop is false. the completed filter shows tasks whose completed prop is true. beneath our previous addition, add the following — here we are using the object.keys() method to collect an array of filter_names: const filter_names = object.keys(filter_map); note: we are defining these constants outside our app() function because if they were defined inside it, they would be recalculated every time the <app /> component re-renders, and we don’t want that. this information will never cha...
... — our app is now functionally complete. however, now that we’ve implemented all of our features, we can make a few improvements to ensure that a wider range of users can use our app. our next article rounds things off for our react tutorials by looking at including focus management in react, which can improve usability and reduce confusion for both keyboard-only and screenreader users. ...

Dynamic behavior in Svelte: working with variables and props - Learn web development
in this article we'll be using variables and props to make our app dynamic, allowing us to add and delete todos, mark them as complete, and filter them by status. prerequisites: at minimum, it is recommended that you are familiar with the core html, css, and javascript languages, and have knowledge of the terminal/command line. you'll need a terminal with node + npm installed to compile and build your app. ...
...do.svelte: function addtodo() { todos.push({ id: 999, name: newtodoname, completed: false }) newtodoname = '' } note: for the moment we are just assigning the same id to every todo, but don't worry, we will fix that soon. now we want to update our html so that we call addtodo() whenever the form is submitted. update the newtodo form's opening tag like so: <form on:submit|preventdefault={addtodo}> the on:eventname directive supports adding modifiers to the dom event with the | character. in this case, the preventdefault modifier tells svelte to generate the code to call event.preventdefault() before running the handler. explore the previous link to see what other modifiers are available. if you try adding new todos at this point, the new todos are added to the...
...the addtodo() function would solve the problem, but it seems strange to have to include that at the end of the function. instead, we'll take out the push() method and use spread syntax to achieve the same result — we'll assign a value to the todos array equal to the todos array plus the new object. note: array has several mutable operations — push(), pop(), splice(), shift(), unshift(), reverse(), and sort(). using them often causes side effects and bugs that are hard to track. by using the spread syntax instead of push() we avoid mutating the array, which is considered a good practice. update your addtodo() function like so: function addtodo() { todos = [...todos, { id: 999, name: newtodoname, completed: false }] newtodoname = '' } giving each todo a unique id if ...
... to dom events. declaring reactive statements. basic debugging with console.log() and reactive statements. binding html properties with the bind:property directive. triggering reactivity with assignments. using reactive expressions to filter data explicitly defining our reactive dependencies in the next article we will add further functionality, which will allow users to edit todos. ...

Using Vue computed properties - Learn web development
these work similarly to methods, but only re-run when one of their dependencies changes. prerequisites: familiarity with the core html, css, and javascript languages, knowledge of the terminal/command line. vue components are written as a combination of javascript objects that manage the app's data and an html-based template syntax that maps to the underlying dom structure. for installation, and to use some of the more advanced features of vue (like single file components or render functions), you'll need a terminal with node + npm installed. ...
...se a serious performance problem. a better solution is to use vue’s computed properties. computed properties work similarly to methods, but only re-run when one of their dependencies changes. in our case, this would only re-run when the todoitems array changes. to create a computed property, we need to add a computed property to our component object, much like the methods property we've used previously. adding a summary counter add the following code to your app component object, below the methods property. the list summary method will get the number of finished todoitems, and return a string reporting this. computed: { listsummary() { const numberfinisheditems = this.todoitems.filter(item =>item.done).length return `${numberfinisheditems} out of ${this.todoitems.length} item...
...currently, we're not actually tracking the "done" data in any fashion, so the number of completed items does not change. tracking changes to "done" we can use events to capture the checkbox update and manage our list accordingly. since we're not relying on a button press to trigger the change, we can attach a @change event handler to each checkbox instead of using v-model. update th...
...tus(item.id)"> </to-do-item> now if you check a todoitem, you should see the summary update appropriately! summary in this article we've used a computed property to add a nice little feature to our app. we do however have bigger fish to fry — in the next article we will look at conditional rendering, and how we can use it to show an edit form when we want to edit existing todo items. ...

Vue conditional rendering: editing existing todos - Learn web development
to do this, we will take advantage of vue's conditional rendering capabilities — namely v-if and v-else — to allow us to toggle between the existing todo item view, and an edit view where you can update todo item labels. we'll also look at adding functionality to delete todo items. prerequisites: familiarity with the core html, css, and javascript languages, knowledge of the terminal/command line. vue components are written as a combination of javascript objects that manage the app's data and an html-based template syntax that maps to the underlying dom structure. ...
...terminal with node + npm installed. objective: to learn how to do conditional rendering in vue. creating an editing component we can start by creating a separate component to handle the editing functionality. in your components directory, create a new file called todoitemeditform.vue. ...
...he new item label as an argument, emit an itemedited event to the parent component, and set isediting to false. add it now, below your existing methods: itemedited(newlabel) { this.$emit('item-edited', newlabel); this.isediting = false; } next, we'll need an editcancelled() method. this method will take no arguments and just serve to set isediting back to false. add this method below the previous one: editcancelled() { this.isediting = false; } last for this section, we'll add event handlers for the events emitted by the todoitemeditform component, and attach the appropriate methods to each event. update your <to-do-item-edit-form></to-do-item-edit-form> call to look like so: <to-do-item-edit-form v-else :id="id" :label="label" @item-edited="itemedited" ...
...h is then listened for inside todoitem.vue, see above). summary this article has been fairly intense, and we covered a lot here. we've now got edit and delete functionality in our app, which is fairly exciting. we are nearing the end of our vue series now. the last bit of functionality to look at is focus management, or put another way, how we can improve our app's keyboard accessibility. ...

Getting started with Vue - Learn web development
in this article we'll look at a little bit of vue background, learn how to install it and create a new project, study the high-level structure of the whole project and an individual component, see how to run the project locally, and get it prepared to start building our example. prerequisites: familiarity with the core html, css, and javascript languages, knowledge of the terminal/command line. vue components are written as a combination of javascript objects that manage the app's data and an html-based template syntax that maps to the underlying dom structure. ...
..." option. the first menu you’ll be presented with allows you to choose which features you want to include in your project. make sure that "babel" and "linter / formatter" are selected. if they are not, use the arrow keys and the space bar to toggle them on. once they are selected, press enter to proceed. next you’ll select a config for the linter / formatter. navigate to "eslint with error prevention only" and hit enter again. this will help us catch common errors, but not be overly opinionated. next you are asked to configure what kind of automated linting we want. select "lint on save". this will check for errors when we save a file inside the project. hit enter to continue. now, you will select how we want your config files to be managed. "in dedicated config files" will put your c...
...more question — you'll be asked to choose a package manager. you can use the arrow keys to select which one you prefer. the vue cli will default to this package manager from now on. if you need to use a different package manager after this, you can pass in a flag --packagemanager=<package-manager>, when you run vue create. so if you wanted to create the moz-todo-vue project with npm and you'd previously chosen yarn, you’d run vue create moz-todo-vue --packagemanager=npm. note: we've not gone over all of the options here, but you can find more information on the cli in the vue docs. project structure if everything went successfully, the cli should have created a series of files and directories for your project. the most significant ones are as follows: .eslintrc.js: this is a conf...
...sic introduction out of the way, we'll now go further and build up our sample app, a basic todo list application that allows us to store a list of items, check them off when done, and filter the list by all, complete, and incomplete todos. in the next article we'll build our first custom component, and look at some important concepts such as passing props into it and saving its data state. ...

Rendering a list of Vue components - Learn web development
in this artcle we'll look at adding a set of todo item data to our app.vue component, which we'll then loop through and display inside todoitem components using the v-for directive. prerequisites: familiarity with the core html, css, and javascript languages, knowledge of the terminal/command line. vue components are written as a combination of javascript objects that manage the app's data and an html-based template syntax that maps to the underlying dom structure. ...
...eds a unique "key" on the same element that you attach v-for to. to make sure that vue can accurately compare the key attributes, they need to be string or numeric values. while it would be great to use the name field, this field will eventually be controlled by user input, which means we can't guarantee that the names would be unique. we could use lodash.uniqueid(), however, like we did in the previous article. import lodash.uniqueid into your app component in the same way you did with your todoitem component, using import uniqueid from 'lodash.uniqueid'; next, add an id field to each element in your todoitems array, and assign each of them a value of uniqueid('todo-'). your app.vue <script> element contents should now look like this: import todoitem from './components...
...tle bit of refactoring we can do here. instead of generating the id for the checkboxes inside your todoitem component, we can turn the id into a prop. while this isn't strictly necessary, it makes it easier for us to manage since we already need to create a unique id for each todo item anyway. add a new prop to your todoitem component — id. make it required, and make its type a string. to prevent name collisions, remove the id field from your data attribute. you are no longer using uniqueid, so you need to remove the import uniqueid from 'lodash.uniqueid'; line, otherwise your app will throw an error. the <script> contents in your todoitem component should now look something like this: export default { props: { label: {required: true, type: string}, done: {defau...
...ch bit of data and renders it inside a todoitem in our app. what we really need next is the ability to allow our users to enter their own todo items into the app, and for that we'll need a text <input>, an event to fire when the data is submitted, a method to fire upon submission to add the data and rerender the list, and a model to control the data. we'll get to these in the next article. ...

Styling Vue components with CSS - Learn web development
in this article we'll explore the different ways of styling vue components with css. prerequisites: familiarity with the core html, css, and javascript languages, knowledge of the terminal/command line. vue components are written as a combination of javascript objects that manage the app's data and an html-based template syntax that maps to the underlying dom structure. for installation, and to use some of the more advanced features of vue (like single file components or render functions), you'll need a terminal with node + npm installed. objective: to learn about styling vue components. ...
...ic section of our page, it could benefit from an <h2> element. the label, however, already denotes the purpose of the form. to avoid repeating ourselves, let's wrap our label in an <h2>. there are a few other global css styles which we can add as well. we'll also add the input__lg class to our <input> element. ...
...le is our todoitem component. to keep the style definitions close to the component we can add a <style> element inside it. however, if these styles alter things outside of this component, it could be challenging to track down the styles responsible, and fix the problem. this is where the scoped attribute can be useful — this attaches a unique html data attribute selector to all of your styles, preventing them from colliding globally. to use the scoped modifier, create a <style> element inside todoitem.vue, at the bottom of the file, and give it a scoped attribute: <style scoped> </style> next, copy the following css into the newly created <style> element: .custom-checkbox > .checkbox-label { font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothi...
...<label> add a checkbox-label class. the updated template is below: the app should now have custom checkboxes. your app should look something like the screenshot below. summary our work is done on the styling of our sample app. in the next article we'll return to adding some more functionlity to our app, namely using a computed property to add a count of completed todo items to our app. ...

Mozilla accessibility architecture
t on the screen. no matter how the assistive technology client requests the data, the accessible for a given node is only created once. we use the accessibility cache to retrieve accessibles that have already been created for a given dom node. this tree traversal is accomplished via toolkit-specific calls which end up as calls into nsiaccessible methods getaccparent(), getaccnextsibling(), getaccprevioussibling(), getaccfirstchild(), getacclastchild(), getaccchildcount() and getchildat(childnum). the atk has more convenience methods than msaa does for traversal - for example it is possible to go straight to the accessible for a specific row and column of a table, using nsiaccessibletable::cellrefat(). the algorithm used to calculate the number of accessible children for an accessible node is ...
... normal nsaccessibletreewalker traversal methods and create whatever child accessibles we want. when there is no dom node for each accessible, as is the case for nshtmlcomboboxaccessible and nsxultreeitemaccessible, we also need to override the shutdown() method, so that the children get removed from memory when the parent is shutdown. in that case we also override ::getaccnextsibling(), ::getaccprevioussibling() for the dom-less children; otherwise they do not know how to find each other. it is also useful to override these the child getters to return nothing, as we do in nsleafaccessible, nstextaccessible and other accessible implementations where we want to be sure to avoid children. returning nothing for leaf and text objects also helps speed up tree construction and traversal. 4. accessi...
...h accessible. in this way no accessible object should ever need to be created twice for any dom node. why we need accessibility cache the accessibility cache has a number of purposes: stability: because the gecko dom and layout teams want to avoid memory bloat where necessary, we could not afford to use 4 bytes on dom or layout nodes to point back to accessible objects. therefore, ownership is reversed -- accessible nodes own their dom objects. however, this creates instability when mozilla wants to shut down but an assistive technology client still holds onto accessibles. these crashes occur when the assistive techology releases after some gecko modules have already been unloaded, when the necessary destructors no longer exist in memory. performance: by caching the accessible node for e...
...k accessibles extremely quickly, and avoid recalculating and creating new accessibles every time one is requested for a certain dom node. we also avoid calculating the children of an accessible twice, once for getaccchildcount() and again when the specific children are requested. events: we must ensure that the accessible for an event is not released before the accessible client has a chance to review its data. also, msaa clients need to access the event accessibles using the unique child id we give it. when we get the child id back, we can recreate the hash key needed to retrieve the accessible. finally, because the msaa client gets the same accessible for the event and for tree traversal each time, it can do comparisons with its own internal data model. for example, this allows the msaa c...

Command line options
page" . comma separators must not follow or precede spaces ( ). to assign multiple values to a field, enclose the values in single quotes ('), for example: "to='foo@nowhere.net,foo@foo.de',subject=cool page" . using command line options command line options follow the command to start the application. if the option contains arguments, enter the argument after the option. some options have abbreviations, for example, "-editor" can be abbreviated as "-edit" (available abbreviations are described in the text below). in some cases, option arguments must be enclosed in quotation marks (this is noted in the option descriptions below). multiple command line options can be specified. in general, the syntax is as follows: application -option -option "argument" -option argument examples the fo...
...ly, you can enter: cd /applications/firefoxnightly.app/contents/macos ./firefox -profilemanager linux open terminal and enter the following command: cd thunderbird installation directory ./thunderbird -profilemanager the example above invokes the "-profilemanager" command line option with mozilla's thunderbird mail client. user profile -allow-downgrade firefox 67's downgrade protection prevents accidentally starting firefox in a profile running a later version of firefox. depending on changes between the two versions, some files in a profile may not be downwards compatible. adding this option bypasses downgrade protection. -createprofile profile_name create a new profile in the default directory, but do not start the application. the profile will be named profile_name in the profi...
...e the -no-remote option to avoid connecting to a running instance. firefox -createprofile joeluser -createprofile "profile_name profile_dir" creates a new profile in the profile_dir directory, but do not start the application. the profile will be named profile_name in the profile manager. note profile_name and profile_dir are quoted together, and are separated by exactly 1 space (as with the previous syntax, profile_name must not contain spaces). do not run profile_dir while running an instance of the application. you can use the -no-remote option to avoid connecting to a running instance. firefox -createprofile "joeluser c:\internet\joelusers-moz-profile" note: profile_dir must not exist and you must not already have a profile called profile_name. -migration start with import wiz...
...ending tells the application that there will be a windows dde request to open the same url specified on the command line. this should not be specified unless the caller provides all of the functionality provided by the os shell when launching the application (bug 354005). -silent don't open default windows. useful with those command-line arguments that open their own windows but don't already prevent default windows from opening. firefox, thunderbird3.x and seamonkey2.x only. -v or -version print application version. note that on windows this only works with a redirection such as |more (bug 355889). this option is available only in a command console. x11 options these options are only available for an application build for and running atop the x11/x.org display and window system to be ...

The Firefox codebase: CSS Guidelines
the overriding css section contains more information about this. avoid magic numbers; prefer automatic sizing or alignment methods. ...
...ins !important, if that is case, try putting it in question, because it might have become obsolete. afterwards, check the specificity of the other selector; if it is causing your rule to be overriden, you can try reducing its specificity, either by simplifying the selector or by changing where the rule is placed in the stylesheet. if this isn't possible, you can also try introducing a :not() to prevent the other rule from applying, this is especially relevant for different element states (:hover, :active, [checked] or [disabled]). however, never try to increase the selector of the rule you are adding as it can easily become hard to understand. finally, once you have checked all the things above, you can permit yourself to use !important along with a comment why it is needed. using css vari...
... if the answer is no, consider using a preprocessor variable or simply inlining the value. is the variable value used multiple times? if the answer is no and the value isn't changed at runtime, then you likely don't need a css variable. is there an alternative to using the variable like inheriting or using the currentcolor keyword? using inheriting or using currentcolor will prevent repetition of the value and it is usually good practice to do so. in general, it's good to first think of how some css could be written cleanly without the css variable(s) and then think of how the css variable could improve that css. using variables use the variable according to its naming do this: xul|tab:hover { background-color: var(--in-content-box-background-hover); } not this:...
...s important. if you are not using windows, one way to test against those adjustments on other platforms is: going to about:preferences clicking on the "colors..." button in the "fonts & colors" sub-section of the "language and appearance" section under "override the colors specified by the page with your selections above", select the "always" option chrome area the automatic adjustments previously mentioned only apply to pages rendered in the content area. the chrome area of firefox uses colors as authored, which is why using pre-defined variables, currentcolor or inheritance is useful to integrate with the system theme with little hassle. if not, as a last resort, using system colors also works for non-default windows themes or linux. in general, the following colors are used: -...

Eclipse CDT Manual Setup
select "general > content types", expand "text > c source file > c++ source file", click "add" and add "*.mm". eclipse cdt doesn't currently understand objective-c files (although there is a project that promises to add objective-c support), so for now, this is the best we can do to give eclip...
...to the objective-c files. select "general > editors > text editors". if you want line numbers, tick "show line numbers". if you want a column marker to mark the 80th column to help with formatting code to mozilla's 80 character line limit, tick "show print margin" and set the value to 80. select "general > workspace" and select "refresh using native hooks or polling" and "refresh on access" to prevent eclipse giving you annoying "resource is out of sync" messages when files change from under it due to mercurial or other external activity. select "c/c++ > build > console" and set "limit console output (number of lines)" to something large, like "1000000". eclipse cdt will try to format c/c++ code that you add as you type. however, its default formats are not a good match to mozilla's style...
...he clean checkbox. if you can't untick "use default build command", you must change the current builder by clicking on "tool chain editor" (in c/c++ build) and choosing another builder (e.g., "gnu make builder"). if you will not be using eclipse for debugging, select "c/c++ build > settings" on the left, select the "binary parsers" tab, and make sure that all the parsers are deselected. this prevents the (useless if not debugging) "searching for binaries" action from constantly interrupting everything. if you will be using eclipse for debugging, select "c/c++ general > paths and symbols" and select the "output location" tab. you should now add the folder containing your firefox binary (note on mac this is inside the .app - so "{your-obj-dir}/dist/nightlydebug.app/contents/macos/" - and s...
...ed to type the end of the path in manually). how you add this depends on whether your object directory is inside or outside your source tree. if inside, use the "add folder" button; if outside, use the "link folder" button and tick the "link to folder in the file system" checkbox. once you've added this folder, delete the existing output folder that was set to the root of the project. doing this prevents the "searching for binaries" which eclipse constantly starts from taking too long. select "c/c++ general > preprocessor include paths, macros, and so on." select the providers tab. make sure that "cdt gcc build output parser" is selected, and that "cdt managed build settings entries" is not selected. highlight (select) "cdt gcc build output parser", then in the "language settings provider op...

Embedding Tips
ssage processing loop after the call to saveuri that terminates when onstatechange indicates persistence has finished.. how do i print a page? query the web browser object for nsiwebbrowserprint. call the nsiwebbrowserprint::print() method supplying a print settings object (e.g. that returned from nsiwebbrowserprint::getglobalprintsettings) that you wish to print the page with. ...
.... how do i print a page? query the web browser object for nsiwebbrowserprint. call the nsiwebbrowserprint::print() method supplying a print settings object (e.g. that returned from nsiwebbrowserprint::getglobalprintsettings) that you wish to print the page with. how do i print preview a page? query the web browser object for the nsiwebbrowserprint interface. call the nsiwebbrowserprint::printpreview() method supplying a print settings object (e.g. that returned from nsiwebbrowserprint::getglobalprintsettings()) that you wish to preview the page with. the nsiwebbrowserprint::printpreviewnavigate() method can be used to step through the pages. when finished with preview mode, call nsiwebbrowserprint::exitprintpreview(). how do i get popup windows working? implement and register a nsiwin...
...tch->setwindowcreator(mywindowcreator); } i need the javascript inside the browser window to talk to my embedding client. how do i do it? at startup use the category manager to register properties of the global object in javascript like this: nscomptr<nsicategorymanager> catman = do_getservice(ns_categorymanager_contractid); if (!catman) return ns_error_failure; nsxpidlcstring previous; catman->addcategoryentry(javascript_global_property_category, "my_prop_name", "my_prop_contract_id", pr_true, pr_true, getter_copies(previous)); this will cause a component with the contract id my_prop_contract_id to be lazily created when the my_prop_name is resolved in any javascript window scope. if you want to create your component m...
...d when the my_prop_name is resolved in any javascript window scope. if you want to create your component multiple times within the browser window, you can use a javascript constructor instead of a javascript property: catman->addcategoryentry("javascript global constructor", "my_prop_name", "my_prop_contract_id", pr_true, pr_true, getter_copies(previous)); that way you will be able to do: var my_comp = new my_prop_name(); this was taken from weirdal's excellent "burning chrome" article. how do i specify alternate locations for profiles? specify a profile directory in your implementation of nsidirectoryserviceprovider passed to xre_initembedding. use xre_notifyprofile to make gecko actually use a profile location. how do i change the u...

DeferredTask.jsm
wn. 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 after the current execution terminates; then the returned promise will be resolved. if the task is running and the timer is not armed, the returned promise will be resolved when the current execution terminates. if the task is no...
...ed promise. promise finalize(); example firefox 28 note this section describes about deferredtask.jsm in firefox 28.0 or higher. set up a function or an asynchronous task whose execution can be triggered after a defined delay. multiple attempts to run the task before the delay has passed are coalesced. the task cannot be re-entered while running, but can be executed again after a previous run finished. a common use case occurs when a data structure should be saved into a file every time the data changes, using asynchronous calls, and multiple changes to the data may happen within a short time: let savedeferredtask = new deferredtask(function* () { yield os.file.writeatomic(...); // any uncaught exception will be reported. }, 2000); // the task is ready, but will not be ...
... will need to finish before the timer is started again, thus guaranteeing a time of inactivity between executions that is at least equal to the provided delay. the "finalize" method can be used to ensure that the task terminates properly. the promise it returns is resolved only after the last execution of the task is finished. to guarantee that the task is executed for the last time, the method prevents any attempt to arm the timer again. if the timer is already armed when the "finalize" method is called, then the task is executed immediately. if the task was already running at this point, then one last execution from start to finish will happen again, immediately after the current execution terminates. if the timer is not armed, the "finalize" method only ensures that any running task term...
...s that any running task terminates. ...

Using JavaScript code modules
a javascript code module is simply some javascript code located in a registered location. the module is loaded into a specific javascript scope, such as xul script or javascript xpcom script, using components.utils.import() or components.utils["import"](). ...
... the url for a code module as you can see from the example above, you need a url to import a code module. (the url in the example is "resource://app/my_module.jsm".) code modules can only be loaded using a chrome: (), resource:, or file: url. if you're writing an extension for firefox 4 and already have a chrome.manifest with a content instruction in it, yo...
...r application needs to support mozilla 1.9.x (firefox 3.x), you should register a new resource url. details on doing this are in the "extending resource: urls" section below. sharing objects using code modules an extremely important behavior of components.utils.import() is that modules are cached when loaded and subsequent imports do not reload a new version of the module, but instead use the previously cached version. this means that a given module will be shared when imported multiple times. any modifications to data, objects, or functions will be available in any scope that has imported the module. for example, if the simple module were imported into two different javascript scopes, changes in one scope can be observed in the other scope. scope 1: components.utils.import("resource://a...
... // displays "[object object]" the main effect of the by-value copy is that global variables of simple types won't be shared across scopes. always put variables in a wrapper class and export the wrapper (such as bar in the above example). unloading code modules requires gecko 7.0(firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) components.utils.unload() allows you to unload a previously imported code module. once this method has been called, references to the module will continue to work but any subsequent import of the module will reload it and give a new reference. examples a template to download and edit is seen here on github - gists - _template-bootstrapjsm.xpi extending resource: urls prior to gecko 2.0, the most common way to load code modules was using resou...

Index
arily focus on getting your release repository setup and the mercurial commands you'll need to know to use that repository. 16 translation phase localization, localization:tools congratulations on completing the initial setup! as a reward for your efforts, you get to move on to the very reason you've come here: to localize mozilla projects. ...
...use that repository. 16 translation phase localization, localization:tools congratulations on completing the initial setup! as a reward for your efforts, you get to move on to the very reason you've come here: to localize mozilla projects. ...
...ization:tools congratulations on completing the initial setup! as a reward for your efforts, you get to move on to the very reason you've come here: to localize mozilla projects. 17 localization sign-off reviews guide, localization, mozilla this article presents an overview of why we do sign-off reviews of localizations, the details on the criteria used for the sign-off reviews, and the process for requesting a review and for following its progress. 18 localization technical reviews guide, localization, mozilla this guide provides details on what a localization technical review is, what criteria are used for the technical reviews, and the process for requesting one and following its progress. 19 localization: frequently asked question...
...rticle provides details on how to go about localizing the descriptions of mozilla add-ons, as well as for other metadata about your add-on. 22 localizing extension metadata on addons.mozilla.org add-ons, extensions, internationalization, localization amo supports localized metadata for each extension. this data describes the extension, and doesn't necessarily change with each revision (but it can). the localizable data fields of an extension are: 23 localizing with koala this tutorial will guide you through making a couple of changes to firefox's user interface using koala, an add-on for komodo edit created to help localizing mozilla. 24 localizing with mercurial build documentation, internationalization, localization in mozilla,...

Translation phase
fferent workflow for localizing mozilla application projects. we've linked a brief tutorial to each l10n tool name below. follow the tutorials to help you decide which l10n tool fits your specific needs. these are the l10n tools we use to localize mozilla applications: pootle a user-friendly web portal built on the translate toolkit api. this tool includes workspaces for translating strings, reviewing string submissions, and project dashboards. see the instance of pootle used to localize mozilla applications. koala a l10n add-on for the offline, stand-alone komodo edit text editor. mozilla translator am offline, stand-alone, java-based l10n tool that helps you translate and integrates with your repositories. visit the mozilla translator (mt) download page to get your own mt client...
... powerful search and customizable views. seamonkey seamonkey® is the all-in-one application formerly known as the "mozilla application suite", containing a web browser, a mail and newsgroups client, an html editor, web development tools, and an irc chat client. firefox mobile by adding firefox® to your mobile phone, you can access rich web content and enjoy your favorite firefox features wherever you go. lightning lightning is a popular calendaring, scheduling and task management extension. if your locale has an hg repository hosted on the mozilla servers, you can track your localization's current progress by visiting the l10n dashboards. note: if you are starting a new localization and decide to use an offline tool for localizing mozilla applications, you will need to become fami...
...an essential part of localizing mozilla products. ...
...of localizing mozilla products. ...

Gecko Profiler FAQ
sed on the found thread name. how can i run (micro-?) benchmarks on the memory allocator to see if changes in it (or entire allocator replacements) are slower/faster? what you *don’t* want to do is writing a micro-benchmark that call malloc/free in a loop and the like and call it a day! a better idea would be picking up a real browser workload where through previous profiling we know that malloc overhead contributes a measurable percentage of overhead to the overall time and then study the change to that workload after replacing the allocator. you do want to think about various characteristics of an allocator which may have an impact on performance. for example, see julian’s great investigation on the impact of cache line sharing across mu...
...h may have an impact on performance. for example, see julian’s great investigation on the impact of cache line sharing across multiple cores on jemalloc’s multi-core performance in https://bugzilla.mozilla.org/show_bug.cgi?id=1291355#c26. what's the best way to measure the cost of new compiler flags (that affect all or most functions)? [ehsan] this is similar to the previous question to some extent, but the specific answer really depends on what kind of compiler flag we’re talking about and what performance impact we’re interested to study. but the short answer is picking up real browser workloads, and finding ways to split out the overall cost contributed by the thing that your change is going to affect and compare things before and after. [msta...
... not just main plus a couple of others) we haven’t done any measurements of how frequent sampling distorts measurement or operation. there is only one sampler thread. it runs a loop that works like this: iterate over all threads. for each thread, suspend it, walk its stack, resume it. sleep until the next sample is due. then go to the previous step. i there an equivalent to itimer_prof vs itimer_real settings? (itimer_prof interrupts every n ms regardless of which thread used the time, real interrupts every nms of wall-clock time) the gecko profiler does not know which thread is used at which time. it interrupts all threads based on wall-clock time. [jesup] ok, that's the equivalent ...
...n equivalent to itimer_prof vs itimer_real settings? (itimer_prof interrupts every n ms regardless of which thread used the time, real interrupts every nms of wall-clock time) the gecko profiler does not know which thread is used at which time. it interrupts all threads based on wall-clock time. [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-cor...

Profiling with the Firefox Profiler
oomed in on by clicking and dragging anywhere in the tracing marker or thread areas. once a range is selected, a magnifying glass appears which zooms into that range. clicking on a tracing marker will create a selection corresponding with its duration allowing for easy zooming in on interesting time ranges. as you zoom in on ranges, breadcrumbs are created allowing you to easily navigate back to previously-selected ranges or the entire profile (denoted as "full range"). tip: while zooming out to a previously-selected range deletes the narrower range, the browser back button can be used to restore the narrower range. thread timeline(s) thread/process timelines: below the tracing markers we have a list of profiled threads. these threads may come from different processes. in this case, we h...
...me from different processes. in this case, we have the 'geckomain [default]' process' main thread, a content process' main thread, and the main thread of the compositor process. each of these timelines is aligned with wall clock time. so, for example, when a thread is blocked, like 'geckomain [tab]', on a thread like 'geckomain [default]', we can see what's occurring on the latter thread that is preventing it from responding to the former. x (time) axis: the timelines go from left to right as wall clock time increases along the x axis. elements in the timeline are spaced at the sampling frequency with an attempt to align them with time. factors such as sampling or stack-walking variance and system load can lead to sampling delays which manifest as gaps in the timeline. note: because this i...
...ered into the "filter stacks" box. custom annotations in bug 1334218 an annotation was added to presshell::paint to show the url of the document being painted. these annotations are not too complex to add so if you would like something added, file a bug. 3. sharing the profile click "publish...", some of the data may be excluded, click "publish". if you select a different time range, the url revealed by pressing "permalink" will change so that you can be sure the recipient of the url will see the same things you are seeing. tips understanding profiles can be difficult. if you're unfamiliar with gecko's internals, you can click the javascript only button to see where your javascript code is slow. each entry in the call tree shows a call stack and how much time is spent in that call stac...
... patch, 1ms without */, ["stackwalk", "js"], 2 /* = features, and number of features. */ ); ' -f ./run.js -e ' var profileobj = profiler.getprofiledata(); print(json.stringify(profileobj)); ' | tail -n 1 > run.cleo the xpcshell output all benchmark information and on its last line it output the result of the profiling, you can filter it with tail -n 1 and redirect it to a file to prevent printing it in your shell. the expected size of the output is around 100 of mb. to add symbols to your build, you need to call ./scripts/profile-symbolicate.py available in b2g repository. $ gecko_objdir=<objdir> product_out=<objdir> target_tools_prefix= \ ./scripts/profile-symbolicate.py -o run.symb.cleo run.cleo clone cleopatra and start the server with ./run_webserver.sh. access c...

TimerFirings logging
ettimer or setinterval calls in javascript code, as the following sample shows. -991946880[7f46c365ba00]: [6775] fn timer (one_shot 0 ms): [content] chrome://browser/content/tabbrowser.xml:1816:0 711637568[7f3219c48000]: [6835] fn timer (one_shot 100 ms): [content] http://edition.cnn.com/:5:7231 711637568[7f3219c48000]: [6835] fn timer (one_shot 100 ms): [content] http://a.visualrevenue.com/vrs.js:6:9423 these js timers are annotated with [content] and show the javascript source location where they were created. they can come from chrome code within firefox, or from web content. the informative labels are only present on function timers that have had their creation site annotated. for unannotated function timers, there are three possible behaviours. first, on mac the cod...
...ng is sample output from this command. ...
...d. it is sometimes useful to pre-process the output by stripping out certain parts of each line before doing this aggregation step, for example, by inserting one or more of the following commands into the command pipeline. ...
...wing is the previous sample output with all three of these commands added into the pipeline. ...

NSS Developer Tutorial
ompatibility functions exported functions cannot be removed. the function prototype of an exported function, cannot be changed, with these exceptions: a foo * parameter can be changed to const foo *. this change is always safe. sometimes an int parameter can be changed to unsigned int, or an int * parameter can be changed to unsigned int *. whether such a change is safe needs to be reviewed on a case-by-case basis. types structs members of an exported struct, cannot be reordered or removed. under certain circumstances, it is safe to add new members to an exported struct at the end. opaque structs give us complete freedom to change them, but require applications to call nss functions, to allocate and free them. enums the numeric values of public enumerators cannot be c...
...rs may declare private functions, for historical reasons. the symbol export lists are the authoritative source of public functions. behavioral changes bug/quirk compatible: occasionally we cannot fix a bug, because applications may depend on the buggy behavior. we would need to add a new function to provide the desired behavior. similarly, new options often need to be disabled by default. ...
...he symbol export lists are the authoritative source of public functions. behavioral changes bug/quirk compatible: occasionally we cannot fix a bug, because applications may depend on the buggy behavior. we would need to add a new function to provide the desired behavior. similarly, new options often need to be disabled by default. nss review/feature approval process nss doesn’t have 'super reviewers'. ...
...compatible: occasionally we cannot fix a bug, because applications may depend on the buggy behavior. we would need to add a new function to provide the desired behavior. similarly, new options often need to be disabled by default. nss review/feature approval process nss doesn’t have 'super reviewers'. we wish to increase the number of nss developers, who have broad understanding of nss. one review is usually enough for the review to pass. for critical code reviews, such as a patch release of a stable branch, two reviews may be more reasonable. for new features, especially those that appear controversial, try to find a reviewer from a different company or organization than your own, to avoid any perceptions of bias. update nss in mozilla-inbound and mozilla-central the procedure is do...

NSS functions
m mxr 3.2 and later ssl_preencryptedstreamtofile mxr 3.2 and later ssl_rehandshake mxr 3.2 and later ssl_rehandshakewithtimeout mxr 3.11.4 and later ssl_resethandshake mxr 3.2 and later ssl_restarthandshakeaftercertreq mxr 3.2 and later ssl_restarthandshakeafterservercert mxr 3.2 and later ssl_revealcert mxr 3.2 and later ssl_revealpinarg mxr 3.2 and later ssl_revealurl mxr 3.2 and later ssl_securitystatus mxr 3.2 and later ssl_setmaxservercachelocks mxr 3.4 and later ssl_setpkcs11pinarg mxr 3.2 and later ssl_setsockpeerid mxr 3.2 and later ssl_seturl mxr 3.2 and later ss...
...ter cert_certlistfromcert mxr 3.2 and later cert_certtimesvalid mxr 3.2 and later cert_changecerttrust mxr 3.2 and later cert_checkcertvalidtimes mxr 3.2 and later cert_checknamespace mxr 3.12 and later cert_checkcertusage mxr 3.3 and later cert_comparename mxr 3.2 and later cert_comparevaliditytimes mxr 3.11 and later cert_completecrldecodeentries mxr 3.6 and later cert_convertanddecodecertificate mxr 3.9.3 and later cert_copyname mxr 3.4 and later cert_copyrdn mxr 3.5 and later cert_createava mxr 3.2.1 and later cert_createcertificate mxr 3.5 and later cert_createcertificater...
...mxr 3.10 and later cert_getocspresponsestatus mxr 3.6 and later cert_getocspstatusforcertid mxr 3.6 and later cert_getoidstring mxr 3.9 and later cert_getorgname mxr 3.2 and later cert_getorgunitname mxr 3.2 and later cert_getocspauthorityinfoaccesslocation mxr 3.4 and later cert_getpkixverifynistrevocationpolicy mxr 3.12 and later cert_getprevgeneralname mxr 3.10 and later cert_getprevnameconstraint mxr 3.10 and later cert_getsloptime mxr 3.2 and later cert_getsslcacerts mxr 3.2 and later cert_getstatename mxr 3.2 and later cert_getusepkixforvalidation mxr 3.12 and later cert_getvaliddnsp...
... mxr 3.4 and later pk11_getnextsymkey mxr 3.4 and later pk11_getpadmechanism mxr 3.4 and later pk11_getpbecryptomechanism mxr 3.12 and later pk11_getpbeiv mxr 3.6 and later pk11_getpqgparamsfromprivatekey mxr 3.4 and later pk11_getprevgenericobject mxr 3.9.2 and later pk11_getprivatekeynickname mxr 3.4 and later pk11_getprivatemoduluslen mxr 3.2 and later pk11_getpublickeynickname mxr 3.4 and later pk11_getslotfromkey mxr 3.2 and later pk11_getslotfromprivatekey mxr 3.2 and late...

Scripting Java
then, do we access classes in java packages? rhino defines a top-level variable named packages. the properties of the packages variable are all the top-level java packages, such as java and com. for example, we can access the value of the java package: js> packages.java [javapackage java] as a handy shortcut, rhino defines a top-level variable java that is equivalent to packages.java. so the previous example could be even shorter: js> java [javapackage java] we can access java classes simply by stepping down the package hierarchy: js> java.io.file [javaclass java.io.file] if your scripts access a lot of different java classes, it can get awkward to use the full package name of the class every time. rhino provides a top-level function importpackage that serves the same purpose as jav...
...ject. the object that implements this class is called a java adapter. because the forwarding to javascript occurs at runtime, it is possible to delay defining the methods implementing an interface until they are called. while omitting a required method is bad practice for programming in the large, it's useful for small scripts and for exploratory programming. the javaadapter constructor in the previous section we created java adapters using the new operator with java interfaces. this approach has its limitations: it's not possible to implement multiple interfaces, nor can we extend non-abstract classes. for these reasons there is a javaadapter constructor. the syntax of the javaadapter constructor is: new javaadapter(javaintforclass, [javaintf, ..., javaintf,] javascriptobject) here jav...
...javaintforclass, [javaintf, ..., javaintf,] javascriptobject) here javaintforclass is an interface to implement or a class to extend and javaintf are aditional interfaces to implement. the javascriptobject is the javascript object containing the methods that will be called from the java adapter. in practice there's little need to call the javaadapter constructor directly. most of the time the previous syntaxes using the new operator will be sufficient. javascript functions as java interfaces often we need to implement an interface with only one method, like in the previous runnable example or when providing various event listener implementations. to facilitate this rhino allows to pass javascript function when such interface is expected. the function is called as the implementation of in...
...javax.swing.event, packages.javax.swing.border, java.awt.event, java.awt.point, java.awt.rectangle, java.awt.dimension); ... with (swinggui) { var mybutton = new jbutton(test); var mypoint = new point(10, 10); var myframe = new jframe(); ... } previously such functionality was available only to embeddings that used org.mozilla.javascript.importertoplevel class as the top level scope. the class provides additional importpackage() and importclass() global functions for scripts but their extensive usage has tendency to pollute the global name space with names of java classes and prevents loaded classes from garbage collection. see bugzilla 24...

Hacking Tips
f the nop. (gdb) x /5i $pc - 1 0x7ffff7fb1659: int3 => 0x7ffff7fb165a: mov 0x28(%rsp),%rax 0x7ffff7fb165f: mov %eax,%ecx 0x7ffff7fb1661: mov 0x30(%rsp),%rdx 0x7ffff7fb1666: mov %edx,%ebx (gdb) # replace the int3 by a nop (gdb) set *(unsigned char *) ($pc - 1) = 0x90 (gdb) x /1i $pc - 1 0x7ffff7fb1659: nop (gdb) # set a breakpoint at the previous location (gdb) b *0x7ffff7fb1659 breakpoint 2 at 0x7ffff7fb1659 printing ion generated assembly code (from gdb) if you want to look at the assembly code generated by ionmonkey, you can follow this procedure: place a breakpoint at codegenerator.cpp on the codegenerator::link method. step next a few times, so that the "code" variable gets generated print code->code_, which is the addre...
...y. optimizemir function has a mir argument, and the codegenerator::generatebody function has a member this->gen. ...
...ument(nsrect const&, unsigned int, unsigned int, gfxcontext*)' set print object on set $x = <your x value> set $y = <your y value> print &((cairo_image_surface_t*)athebescontext->mdt.mrawptr->msurface).data[$y * ((cairo_image_surface_t*)athebescontext->mdt.mrawptr->msurface).stride + $x * ((cairo_image_surface_t*)athebescontext->mdt.mrawptr->msurface).depth / 8] watch *(char*)<address of previous command> (note: if you set a watch on the previous expression gdb will watch the expression and run out of watchpoint) rr with emacs within emacs, do m-x gud-gdb and replace the command line with rr replay. when gdb comes up, enter set annot 1 to get it to emit file location information so that emacs will pop up the corresponding source. note that if you reverse-continue over a sigsegv...
...h emacs within emacs, do m-x gud-gdb and replace the command line with rr replay. when gdb comes up, enter set annot 1 to get it to emit file location information so that emacs will pop up the corresponding source. note that if you reverse-continue over a sigsegv and you're using the standard .gdbinit that sets a catchpoint for that signal, you'll get an additional stop at the catchpoint. just reverse-continue again to continue to your breakpoints or whatever. [hack] replacing one instruction to replace one specific instruction, you can use in visit function of each instruction the jsscript filename in lineno fields as well as the id() of the lir / mir instructions. the jsscript can be obtained from info().script(). bool codegeneratorx86shared::visitguardshape(lguardshape *guard) { ...

SpiderMonkey 1.8.7
atforms where firefox 10 runs. spidermonkey 1.8.7 includes type inference, which boosts the speed of the jägermonkey jit by about 30% over version 1.8.5. type inference largely obviates tracemonkey, so the tracemonkey jit has been removed. the jit is supported only on x86, x86_64 and arm architectures. ...
...many jsapi types, functions, and callback signatures have changed, though most of them still have the same names and do the same things. ...
...e converted to their c equivalents with the appropriate jsval_to_* macro and then compared. jsapi no longer represents floating-point numbers (and integers more than 31 bits long) as pointers to jsdouble; instead, the jsdouble value is directly stored in the jsval. this affects macros like double_to_jsval and jsval_to_double, which now operate directly on jsdouble rather than jsdouble pointers. previous spidermonkey versions usually represented integer values smaller than 2^31 as jsvals encoding jsint; e.g. so that jsval_is_int was true. while this was never specified behaviour, it is no longer true; numeric values which are integers are frequently encoded as jsdouble inside the jsval. embedders must be careful when converting numbers from jsvals into c. note also that spidermonkey can now ...
...er specified behaviour, it is no longer true; numeric values which are integers are frequently encoded as jsdouble inside the jsval. embedders must be careful when converting numbers from jsvals into c. note also that spidermonkey can now fit a full 32-bit integer (jsint) inside a jsval without promoting to a jsdouble. jsextendedclass jsextendedclass has been removed from the api entirely. jsid previous spidermonkey versions could freely interchange jsid and jsval. they are no longer compatible; using js_valuetoid and js_idtovalue to convert between the two is mandatory. jsnative, jsfastnative previous versions of jsapi supported two types of native functions -- jsnative and jsfastnative. the so-called "slow natives" are no longer supported; as such jsfastnative has been renamed to jsnativ...

SpiderMonkey 1.8.8
.8.8 (nor is it even the case that the version number will be 1.8.8!). the mozilla javascript team is pleased to announce the release of spidermonkey 1.8.8. you can download full source code here: insert-actual-link-when-the-release-happens (md5 checksum: insert-actual-hash-here). spidermonkey 1.8.8 is the javascript engine that shipped in firefox 10.0. it continues to improve performance over previous spidermonkey releases, with ongoing jit compilation work and with the introduction of type inference to enable faster jitted code. it also contains new language and api features described in detail below. please let us know about your experiences with this release by posting in the mozilla.dev.tech.js-engine newsgroup. or file bugs at bugzilla.mozilla.org under product: core, component: jav...
...firefox-version-number-here runs. spidermonkey 1.8.8 includes a just-in-time compiler (jit) that compiles javascript to machine code, for a significant speed increase. it is supported on x86, x86_64, and arm architectures. on some other platforms (sparc, mips), the jit is provided but not supported. ...
...many jsapi types, functions, and callback signatures have changed, though most of them still have the same names and do the same things. ...
...such as jsresolveop, jsenumerateop and jspropertyop, have a type change on their arguments to jshandleobject, jshandleid, jshandlemutableobject etc. atleast for the c api this wraps an extra pointer around these objects, so you would cast the argument to jsobject**, in the callback function. removal of jscontext* parameters to many methods the js_getclass method now takes only a jsobject*, where previously it also required a jscontext* in threadsafe builds. (the js_get_class macro abstracting away this difference has accordingly been removed.) javascript shell changes detail added/removed methods here... known issues detail any known issues here... future direction include-followup-on-experimental-library-versioning-scheme-here spidermonkey embedders should also be aware that mozilla has n...

SpiderMonkey 17
ormation here isn't actually new to spidermonkey 17. the mozilla javascript team is pleased to announce the release of spidermonkey 17. you can download full source code here: http://ftp.mozilla.org/pub/mozilla.org/js/mozjs17.0.0.tar.gz (md5 checksum: 20b6f8f1140ef6e47daa3b16965c9202). spidermonkey 17 is the javascript engine that shipped in firefox 17. it continues to improve performance over previous spidermonkey releases, with ongoing jit compilation work and with the introduction of type inference to enable faster jitted code. it also contains new language and api features described in detail below. please let us know about your experiences with this release by posting in the mozilla.dev.tech.js-engine newsgroup. or file bugs at bugzilla.mozilla.org under product: core, component: jav...
...the platforms where firefox 17 runs. spidermonkey 17 includes a just-in-time compiler (jit) that compiles javascript to machine code, for a significant speed increase. it is supported on x86, x86_64, and arm architectures. on some other platforms (sparc, mips), the jit is provided but not supported. ...
...many jsapi types, functions, and callback signatures have changed, though most of them still have the same names and do the same things. ...
...such as jsresolveop, jsenumerateop and jspropertyop, have a type change on their arguments to jshandleobject, jshandleid, jshandlemutableobject etc. atleast for the c api this wraps an extra pointer around these objects, so you would cast the argument to jsobject**, in the callback function. removal of jscontext* parameters to many methods the js_getclass method now takes only a jsobject*, where previously it also required a jscontext* in threadsafe builds. (the js_get_class macro abstracting away this difference has accordingly been removed.) garbage collection functions now take runtime argument most garbage collection functions now take a runtime argument instead of a context. the one exception to this is js_maybegc which still takes a context as argument. javascript shell changes detail ...

Building the WebLock UI
the xpcom interfaces and tools you've used have been general, cross-platform, and available in the gecko runtime environment or in any gecko-based application after mozilla 1.2 (when the gre began to be used). in this chapter, however, we are going to be building a user interface for the weblock component that's meant to be added to the existing mozilla browser[other-mozlike-browsers]. it uses xul, which is an xml language that gecko knows how to render as user interface, but it also interacts with particular parts of the mozilla user interface, where it must install itself as an extension to the ui. ...
...rry out a lot of the browser functionality in mozilla. in using xpcom components you saw how xpcom objects are reflected into the interface layer as javascript objects. in this chapter, now that we've created the weblock component and made it available to xpcom, we create the ui that actually instantiates the weblock component and uses its methods to control page loading in the browser. in the previous section, we outlined the javascript that interacts with the weblock component. in this section, we are going to create the xul interface that calls the javascript methods when the user interacts with it. the xul document the first thing to do is create the actual xul document in which the user interface for the dialog and the events that initiate interaction with the web locking are defined...
...ew ui into the browser so it can call the component, and the mozilla overlay mechanism is the way to do this. overlays are xul files that register themselves to be dynamically inserted into the appropriate parts of the browser ui at runtime. weblockoverlay.xul the xul that defines the new icon is small: it's a little icon that calls a javascript function to load the weblock.xul file we defined previously. the icon is actually a separate <statusbarpanel/> element that gets overlaid into the main browser, along with some javascript and some css to control the behavior and appearance of the element, respectively. here is that xul file in its entirety: the weblock overlay <?xml version="1.0"?> <?xml-stylesheet href="chrome://navigator/content/weblock.css" type="text/css"?> <overlay id="weblo...
...nex and the ibm web browser that share a lot of the structure of the mozilla user interface, into which it may be possible to install both the weblock component and the user interface described in this chapter. note, however, that currently weblock probably does not install cleanly in mozilla firefox due to firefox's newness compared to this book (which was originally written in 2003). « previousnext » copyright (c) 2003 by doug turner and ian oeschger. this material may be distributed only subject to the terms and conditions set forth in the open publication license, v1.02 or later. distribution of substantively modified versions of this document is prohibited without the explicit permission of the copyright holder. distribution of the work or derivative of the work in any standa...

Using XPCOM Utilities to Make Things Easier
it also introduces a basic string type that is used with many of the apis in both xpcom and gecko. to begin with, the first section describesc++ macros that can replace a lot of the code in weblock1.cpp. much of the code created to get the software recognized and registered as a component can be reduced to a small data structure and a single macro. xpcom macros the xpcom framework includes a number of macros for making c++ development easier. ...
...ated to get the software recognized and registered as a component can be reduced to a small data structure and a single macro. xpcom macros the xpcom framework includes a number of macros for making c++ development easier. though they overlap somewhat (e.g., high-level macros expand to other macros), they fall into the following general categories. generic xpcom module macros the work in the previous chapter was useful in setting up the generic component code. but there are only a few places in that code that are unique to the weblock component, and it was a lot of typing. to write a different component library, you could copy the listing at the end of the chapter, change very little, and paste it into a new project. to avoid these kinds of redundancies, to regulate the way generic code i...
... these macros expand into "generic" implementations, they may not offer as much flexibility as you have when you are writing your own implementation. but they have the advantage of allowing much more rapid development. to get an idea about how much can be handled with the macros described in this section, compare the code listing in weblock2.cpp at the end of the chapter with weblock1.cpp in the previous chapter. the module macros include one set of macros that define the exported nsgetmodule entry point, the required nsimodule implementation code and another that creates a generic factory for your implementation class. used together, these macros can take care of a lot of the component implementation code and leave you working on the actual logic for your component. note that all of the m...
...t ns_decl_isupports doesn't obey the general rule in which every interface has a declaration macro of the form ns_decl_interfacename, where interfacename is the name of the interface being compiled. note: nulls-in-strings the string classes may also support embedded nulls. note: other-string-classes there are other abstract string classes, but they are outside the scope of this book. « previousnext » copyright (c) 2003 by doug turner and ian oeschger. this material may be distributed only subject to the terms and conditions set forth in the open publication license, v1.02 or later. distribution of substantively modified versions of this document is prohibited without the explicit permission of the copyright holder. distribution of the work or derivative of the work in any standa...

nsIDOMWindowInternal
ptable this interface is part of a chain of interfaces used to represent a window in the dom. 66 introduced gecko 1.0 deprecated gecko 8.0 inherits from: nsidomwindow last changed in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) in gecko 8.0 this interface was merged into the nsidomwindow interface. this interface no longer has any members; it exists solely to prevent add-ons that reference it from failing completely. add-ons should be updated to use nsidomwindow instead. it provides many of the common functions used in javascript such as alert() or open(). note: because most of nsidomwindowinternal's functions and attributes are well documented in window, those articles are linked to rather than re-documented. however, they are not guaranteed to documen...
...r open(). note: because most of nsidomwindowinternal's functions and attributes are well documented in window, those articles are linked to rather than re-documented. however, they are not guaranteed to document all available arguments (i.e. see window.prompt). method overview firefox 3.5 note the prompt() and find() methods changed in firefox 3.5 to make all their parameters optional; in previous versions, all parameters were required. void alert(in domstring text) boolean confirm(in domstring text) domstring prompt([optional] in domstring amessage, [optional] in domstring ainitial, [optional] in domstring atitle, [optional] in unsigned long asavepassword) void focus() void blur() void back() void forward() vo...
...s11 obsolete: this property is not supported in newer versions of firefox. controllers nsicontrollers readonly: returns the xul controllers of the chrome window. opener nsidomwindowinternal returns a reference to the window that opened this current window. status domstring sets the text in the status bar at the bottom of the browser or returns the previously set text. defaultstatus domstring gets/sets the status bar text for the given window. location nsidomlocation readonly: returns a nsidomlocation object, which contains information about the url of the document. innerwidth long width of the browser window. innerheight long height of the browser window. outerwidth long ...
...the number of frames in the window. fullscreen boolean whether the window is displayed in full screen mode or not frameelement nsidomelement readonly: the element in which the window is embedded, or null if the window is top-level. url nsidommozurlproperty readonly: a dom url object, which provides the window.url.createobjecturl() and window.url.revokeobjecturl() methods. note: prior to gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4), this attribute was part of nsidomwindow_2_0_branch. ...

nsISessionStore
will always be false when in private browsing mode. methods deletetabvalue() deletes a value from a specified tab. void deletetabvalue( in nsidomnode atab, in astring akey ); parameters atab the tab for which to delete the value. akey the key whose value is to be deleted. exceptions thrown this method throws a ns_error_illegal_value exception if the key does...
...include cookies. if you need to retrieve cookies as well, you should use getwindowstate() instead. gettabvalue() returns the value corresponding to a key on a given window. astring gettabvalue( in nsidomnode atab, in astring akey ); parameters atab the tab on which to get the value. akey the key whose corresponding value is to be returned. return value the string value that was previously assigned to akey using nsisessionstore.settabvalue(), or an empty string if no value is set for that key. if the previously saved value was originally a complex data (ie a javascript object) it can then be deserialized using json.parse cf. nsisessionstore.settabvalue(). getwindowstate() returns the current state of one specified window in the web browser. astring getwindowstate( in ns...
...ill get an exception about "awindows[i] has no properties". getwindowvalue() returns the string value associated with a given key for a window. astring getwindowvalue( in nsidomwindow awindow, in astring akey ); parameters awindow the window from which the value is to be retrieved. akey the key whose corresponding value is to be retrieved. return value the string value that was previously assigned to akey using nsisessionstore.setwindowvalue(), or an empty string if no value is set for that key. if the previously saved value was originally a complex data (ie a javascript object) it can then be deserialized using json.parse cf. nsisessionstore.setwindowvalue(). init() initializes the session store service. note: this function is intended for use only by the browser; exten...
...tribute() sets the name of a tab attribute to be saved and restored for all xul tabs. note: at present, there's no way to pick and choose tabs to set persistent attributes for. this method affects all tabs indiscriminately. void persisttabattribute( in astring aname ); parameters aname the name of the attribute to be saved and restored for all tabs. restorelastsession() restore the previous session if possible. this will not overwrite the current session. instead the previous session will be merged into the current session. current windows will be reused if they were windows that pinned tabs were previously restored into. new windows will be opened as needed. note: this will throw if there is no previous state to restore. check with canrestorelastsession first to avoid thrown e...

nsITextInputProcessor
a clause attribute but this is typically not used. this means that the clause is not converted but selected to convert or modify. attr_converted_clause 0x04 a clause attribute. this means that the clause is already converted. attr_selected_clause 0x05 a clause attribute. this means that the clause is already converted and is selected to convert. key_default_prevented 0x00000001 one of akeyflags. when this is specified, defaultprevented attribute of dispatching keyboard events true. this is not useful in usual cases. this may be useful for automated tests. key_non_printable_key 0x00000002 one of akeyflags. when you attempt to dispatch a non-printable key's events, it's recommented this be specified. if the key attribute value is not a...
...ttribute of dispatching keyboard events true. this is not useful in usual cases. this may be useful for automated tests. key_non_printable_key 0x00000002 one of akeyflags. when you attempt to dispatch a non-printable key's events, it's recommented this be specified. if the key attribute value is not a registered key name, this flag causes throwing an exception. therefore, this can prevent non-printable key events to cause dispatching as printable keyboard events and you can detect the registered key name change from the thrown exception. key_force_printable_key 0x00000004 one of akeyflags. when you attempt to dispatch a printable key's event whose key attribute value (i.e., inputting string) will match with a registered key name, this flag makes dispatched keyboa...
...signed long akeyflags optional); parameters adomkeyevent the keyboardevent which is initialized with its constructor. see also how to create keyboardevent instance for nsitextinputprocessor. akeyflags optional see key_* constants. if this is not specified, the value is assumed as 0. return value true if neither dispatched keydown event nor keypress events are not consumed by a call of preventdefault(). keyup() dispatches a keyup event when it's necessary. when this dispatches a normal modifier key event, the textinputprocessor instance inactivates the modifier state if it was activated by same code attribute. boolean keyup(in nsidomkeyevent adomkeyevent, in unsigned long akeyflags optional); parameters adomkeyevent the keyboardevent which is initialized with...
...mkeyevent adomkeyevent, in unsigned long akeyflags optional); parameters adomkeyevent the keyboardevent which is initialized with its constructor. see also how to create keyboardevent instance for nsitextinputprocessor. akeyflags optional see key_* constants. if this is not specified, the value is assumed as 0. return value true if keyup event isn't consumed by a call of preventdefault(). setcaretinpendingcomposition() sets caret position in the composition string set by setpendingcompositionstring(). this is optional, i.e., you may not call this before flushpendingcomposition(). void setcaretinpendingcomposition(in unsigned long aoffset); parameters aoffset caret offset in the composition string. this value must be between 0 and the length of astring of setp...

Getting Started Guide
nscomptr is a "smart pointer". it is a template class that acts, syntactically, just like an ordinary pointer in c or c++, i.e., you can apply * or -> to it to "get to" what it points at. ...
... queries. however, be aware that if you should have queried but didn't, e.g., when assigning in a raw pointer where c++ allows the assignment, but xpcom wouldn't, nscomptr will assert at runtime. use do_queryinterface whenever you assign in a pointer to a xpcom interface of a different type, even if that type happens to derive from the base type of the nscomptr comparison 6. do_queryinterface prevents xpcom type errors. class nsibar : public nsifoo ... { ... }; nsibar* p = ...; // c++ thinks every |nsibar*| is an // |nsifoo*|, therefore, c++ allows // this... nscomptr<nsifoo> foo = p; // ...even though it is an xpcom // type error class nsibar : public nsifoo ... { ... }; nsibar* p = ...; // no type error here... nscomptr<nsifoo> foo(do...
...ng a raw pointer you have already addrefed: // don't return raw pointers; that incites leaks... nsifoo* createfoo(); // returns an |addref|ed pointer // ... nscomptr<nsifoo> myfoo = createfoo(); // oops: leak; nscomptr<nsifoo> myfoo( dont_addref(createfoo()) ); // since |createfoo| already |addref|s its result, we must remind // our |nscomptr| not to. it's easy to forget. prevent it in advance // by not returning pointers as function results, or else by returning // an |already_addrefed<t>| as above. void f( nscomptr<t> ) don't pass an nscomptr by value this practice is wasteful, but not otherwise harmful. there is no need to addref parameters, as they are guaranteed to live as long as the function call. you only need to addref them as you store them...
...ly as the signature above, this practice is wasteful, but not otherwise harmful, and has the same impact as passing an nscomptr by value if the caller only supplied a raw pointer. void f( nscomptr<t>* ) avoid passing an nscomptr by address, if possible this practice requires callers to have an nscomptr, and requires them to do a little extra work, as operator& for nscomptrs is private (to help prevent leaks caused by casting; also see bug 59414). this is an acceptable way to declare `in/out' parameters, but prefer passing nscomptrs by reference, as below. // passing an |nscomptr| by pointer requires extra work... void f( nscomptr<nsifoo>* ); // ... nscomptr<nsifoo> myfoo = ...; f( address_of(myfoo) ); void f( nscomptr<t>& ) do pass an nscomptr by reference for ...

WebIDL bindings
d a configuration file that lists some metadata about how the webidl should be reflected into gecko-internal code. all webidl files should be placed in dom/webidl and added to the list in the moz.build file in that directory. note that if you're adding new interfaces, then the test at dom/tests/mochitest/general/test_interfaces.html will most likely fail. this is a signal that you need to get a review from a dom peer. resist the urge to just add your interfaces to the moz.build list without the review; it will just annoy the dom peers and they'll make you get the review anyway. the configuration file, dom/bindings/bindings.conf, is basically a python dict that maps interface names to information about the interface, called a descriptor. there are all sorts of possible options here that han...
...ers with an additional trailing "mozilla::dom::callbackobject::exceptionhandling aexceptionhandling" argument, defaulting to ereportexceptions. if areportexceptions is set to ereportexceptions, the methods will report js exceptions before returning. if areportexceptions is set to erethrowexceptions, js exceptions will be stashed in the errorresult and will be reported when the stack unwinds to wherever the errorresult was set up. for example, this webidl: callback interface mycallback { attribute long somenumber; short somemethod(domstring somestring); }; callback interface myothercallback { // single-operation interface short dosomething(node somenode); }; interface myinterface { attribute mycallback foo; attribute mycallback? bar; }; will lead to these c++ class declarations ...
...assed in in whatever form is most convenient, as long as it's either a type that can be wrapped by xpconnect or a webidl interface type. if areportexceptions is set to ereportexceptions, the call methods will report js exceptions before returning. if areportexceptions is set to erethrowexceptions, js exceptions will be stashed in the errorresult and will be reported when the stack unwinds to wherever the errorresult was set up. for example, this webidl: callback mycallback = long (myinterface arg1, boolean arg2); interface myinterface { attribute mycallback foo; attribute mycallback? bar; }; will lead to this c++ class declaration, in the mozilla::dom namespace: class mycallback : public callbackfunction { public: int32_t call(myinterface& arg1, bool arg2, errorresult& rv, ...
...they also expose setters that set the union as being of a particular type and return a reference to the union's internal storage where that type could be stored. the one exception is the object type, which uses a somewhat different form of setter where the jsobject* is...

Initialization and Destruction - Plugins
initialization: the browser calls the plug-in api function np_initialize when the plug-in code is first loaded. instance creation: the browser calls the plug-in api function npp_new when the instance is created. instance destruction: the plug-in instance is deleted when the user leaves the instance page or closes the instance window; the browser calls the function npp_destroy to tell the plug-in that the instance is being deleted. shutdown: when the last instance of a plug-in is deleted, the plug-in code is unloaded from memory and the browser calls the function np_shutdown. ...
...pp_destroy(npp instance, npsaveddata **save); the instance parameter represents the plug-in instance to delete. the plug-in can use the optional save parameter to save data for reuse by a new instance with the same url. the data is passed to npp_new through its saved parameter. for example, a video player could save the last frame number to be displayed. when the user returns to the page, the previous frame number is passed to the new instance of the plug-in, so it can initially display the same frame. note that you cannot count on data being saved this way; the data may be lost if the browser restarts or purges memory. ownership of the buf field of the npsaveddata structure passes from the plug-in to the browser when npp_destroy returns. the example in this section sets up a buffer and ...
...data structure passes from the plug-in to the browser when npp_destroy returns. the example in this section sets up a buffer and allocates memory for it. you can use this type of buffer to handle data saved from one instance of a plug-in to another. the example shows the use of the optional save parameter of npp_destroy and saved parameter of npp_new. in npp_new, the saved parameter contains previously saved data for this instance of the plug-in (saved by npp_destroy). the plug-in must free the memory for npsaveddata and the buffer it contains. in npp_destroy, the save parameter specifies state or other information to save for reuse by a new instance with the same url. to ensure that the browser does not crash or leak memory when the saved data is discarded, the buf field should be a f...
... useragent = (char*) npn_memalloc(strlen(result) + 1); if (useragent == null) return nperr_out_of_memory_error; /* copy the string to your memory. */ strcpy(useragent, result); return nperr_no_error; } /* shutdown function */ nperror np_shutdown(void) { /* delete the memory you allocated. */ if (useragent != null) npn_memfree(useragent); return nperr_no_error; } « previousnext » ...

Plug-in Development Overview - Plugins
a basic overview of the plug-in development process is given in the following steps. plan your plug-in: decide on the services you want the plug-in software to provide and how it will interact with the browser and the special media for which the plug-in is created. decide the mime type for the plug-in (see registering plug-ins). set up your development environment properly. you can use a variety of environments to create a plug-in, but make sure that you have the necessary files from the plugin sdk. create a plug-in project. write your plug-in code and implement the appropriate plug-in api methods for basic plug-in operation. ...
... string 5 image/jpeg string 6 jpg several other optional strings may contain useful information about the plug-in. plug-ins must support 'str#' 128 but are not required to support any of these others: str#' 127 can contain a list of mime type descriptions corresponding to the types in 'str#' 128 . for example, this description list corresponds to the types in the previous example: string 1: "quicktime video", string 4: "aiff audio", and string 5: "jpeg image format." str#' 126: string 1 can contain a descriptive message about the plug-in. this message, which is in html format, is displayed by the browser in its "about plug-ins" page. string 2 can contain the name of the plug-in, thus allowing the name the user sees to be different from the name of the file...
...data becomes available. random-access mode: the browser allows the plug-in to request specific ranges of bytes from anywhere in the stream. this mode requires server support. file mode: the browser saves the data to a local file in cache and passes that file path to the plug-in. streams produced by the plug-in to send to the browser are like normal-mode streams produced by the browser, but in reverse. in the browser's normal-mode streams, the browser calls the plug-in to inform it that the stream was created and to push more data. in streams produced by the plug-in, by contrast, the plug-in calls netscape functions to create a stream, push data into it, and delete it. working with urls the plug-in api provides methods that plug-ins can use to retrieve data from or post data to a url any...
...table. see the wikipedia article for historical information. both technologies are now obsolete for the purposes of plug-in scriptability, and the cross-browser npruntime api should be used instead. see the scripting plugins section of this reference for the details. building plug-ins once you have added the special code and additional files to make your plug-in scriptable as described in the previous section, the build process is quite straightforward. in addition to the dll that goes in the plugins folder, you must also place a type library and an extra header file in the appropriate places in your application directory. this section describes those extra scriptability steps in more detail. building, platforms, and compilers the header files and some basic examples for npapi plugins ar...

Debugger.Frame - Firefox Developer Tools
ipt the frame is executing, walk the stack to older frames, find the lexical environment in which the execution is taking place, and so on. for a given debugger instance, spidermonkey creates only one debugger.frame instance for a given visible frame. every handler method called while the debuggee is running in a given frame is given the same frame object. similarly, walking the stack back to a previously accessed frame yields the same frame object as before. debugger code can add its own properties to a frame object and expect to find them later, use == to decide whether two expressions refer to the same frame, and so on. (if more than one debugger instance is debugging the same code, each debugger gets a separate debugger.frame instance for a given frame. this allows the code using each d...
... instance referring to that frame becomes inactive: its live property becomes false, and accessing its other properties or calling its methods throws an exception. note that frames only become inactive at times that are predictable for the debugger: when the debuggee runs, or when the debugger removes frames from the stack itself. visible frames when inspecting the call stack, debugger does not reveal all the frames that are actually present on the stack: while it does reveal all frames running debuggee code, it omits frames running the debugger’s own code, and omits most frames running non-debuggee code. we call those stack frames a debugger does reveal visible frames. a frame is a visible frame if any of the following are true: it is running debuggee code; its immediate calle...
...ive, or the code executing in this frame is strict mode code. ifcode is not strict mode code, then variable declarations incode affect the environment of this frame. (in the terms used by the ecmascript specification, the variableenvironment of the execution context for the eval code is the variableenvironment of the execution context that this frame represents.) if implementation restrictions prevent spidermonkey from extending this frame’s environment as requested, this call throws an error exception. if given,options should be an object whose properties specify details of how the evaluation should occur. the eval method recognizes the following properties: url the filename or url to which we should attributecode. if this property is omitted, the url defaults to "debugger eval ...
...as that environment is extended by bindings visible withincode. (in the terms used by the ecmascript specification, the variableenvironment of the execution context for the eval code is the variableenvironment of the execution context that this frame represents, and thebindings appear in a new declarative environment, which is the eval code’s lexicalenvironment.) if implementation restrictions prevent spidermonkey from extending this frame’s environment as requested, this call throws an error exception. theoptions argument is as for debugger.frame.prototype.eval, described above. also like eval, if this frame’s environment property is null or type property is wasmcall, throw a typeerror. source metadata generated from file: js/src/doc/debugger/debugger.frame.md watermark: ...

DevTools API - Firefox Developer Tools
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 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(tar...
...) selects the tool with the given toolid. parameters: toolid {string} - the tool identifier. return value: a promise that is fulfilled with the toolpanel object of the selected panel once the tool has loaded and activated. selectnexttool() selects the next tool in the toolbox. return value: a promise that is fulfilled with the toolpanel object of the selected panel. selectprevioustool() selects the previous tool in the toolbox. return value: a promise that is fulfilled with the toolpanel object of the selected panel. highlighttool(toolid) highlights the tab for the given tool. parameters: toolid {string} - the tool to highlight. unhighlighttool(toolid) unhighlights the tab for the given tool. parameters: toolid {string} - the tool to unhighli...
...icononly boolean, optional. if true, the label won't be shown in the tool's tab. default: false inverticonforlighttheme boolean, optional. if true the colors of the icon will be inverted for the light theme. default: false key string, optional. the key used for keyboard shortcut. either key or keycode value. modifiers string, optional. modifiers for the keyboard shortcut. preventclosingonkey boolean, optional. if true the tool won't close if its keybinding is pressed while it is active. default: false inmenu boolean, optional. if true the tool will be shown in the developer menu. default: false menulabel string, optional. a label for the developer menu item. default: {label} accesskey string, optional. accesskey for the developer menu <xul:menuitem...
...that have been decorated with the eventemitter interface. emit(eventname, ...extraarguments) emits an event with the given name to this object. parameters: eventname {string} - the name of the event. extraarguments {...any} - extra arguments that are passed to the listeners. on(eventname, listener) adds a listener for the given event. off(eventname, listener) removes the previously added listener from the event. once(eventname, listener) adds a listener for the event that is removed after it has been emitted once. return value: a promise that is fulfilled with the first extra argument for the event when then event is emitted. if the event contains multiple payload arguments, the rest are discarded and can only be received by providing the listener function t...

All keyboard shortcuts - Firefox Developer Tools
home home home move to last node in the tree. end end end expand currently selected node right arrow right arrow right arrow collapse currently selected node left arrow left arrow left arrow (when a node is selected) move inside the node so ...
...+ f ctrl + f edit as html f2 f2 f2 stop editing html f2 / ctrl +enter f2 / cmd + return f2 / ctrl + enter copy the selected node's outer html ctrl + c cmd + c ctrl + c scroll the selected node into view s s s find the next match in the markup, when searching is active enter return enter find the previous match in the markup, when searching is active shift + enter shift + return shift + enter breadcrumbs bar these shortcuts work when the breadcrumbs bar is focused. command windows macos linux move to the previous element in the breadcrumbs bar left arrow left arrow left arrow move to the next element in the breadcrumbs bar rig...
...put (only if the command line is empty) end end end page up through console output page up page up page up page down through console output page down page down page down go backward through command history up arrow up arrow up arrow go forward through command history down arrow down arrow down arrow initiate reverse search through command history/step backwards through matching commands f9 ctrl + r f9 step forward through matching command history (after initiating reverse search) shift + f9 ctrl + s shift + f9 move to the beginning of the line home ctrl + a ctrl + a move to the end of the line end ctrl + e ctrl + e execute the curren...
... add a new line, for entering multiline expressions shift + enter shift + return shift + enter autocomplete popup these shortcuts apply while the autocomplete popup is open: command windows macos linux choose the current autocomplete suggestion tab tab tab cancel the autocomplete popup esc esc esc move to the previous autocomplete suggestion up arrow up arrow up arrow move to the next autocomplete suggestion down arrow down arrow down arrow page up through autocomplete suggestions page up page up page up page down through autocomplete suggestions page down page down page down scroll to start of autocomplete suggestions home home ...

Animation - Web APIs
s playback. animation.commitstyles() commits the end styling state of an animation to the element being animated, even after that animation has been removed. it will cause the end styling state to be written to the element being animated, in the form of properties inside a style attribute. ...
...if the animation is finished or unplayed, it will play from end to beginning. animation.updateplaybackrate() sets the speed of an animation after first synchronizing its playback position. ...
...if the animation is finished or unplayed, it will play from end to beginning. animation.updateplaybackrate() sets the speed of an animation after first synchronizing its playback position. ...
...if the animation is finished or unplayed, it will play from end to beginning. animation.updateplaybackrate() sets the speed of an animation after first synchronizing its playback position. automatically removing filling animations it is possible to trigger a large number of animations on the same element. ...

Using images - Web APIs
one of the more exciting features of <canvas> is the ability to use images. these can be used to do dynamic photo compositing or as backdrops of graphs, for sprites in games, and so forth. external images can be used in any format supported by the browser, such as png, gif, or jpeg. you can even use the image produced by other canvas elements on the same page as the source! importing images into a canvas is basically a two step process: get a reference to an htmlimageelement object or to another canvas element as a source. it is also possible to use images by providing a url. draw the image on the canvas using the drawimage() function. ...
...drawing. for instance, if you want to make a chart you could have a png image containing all the necessary text in a single file and depending on your data could change the scale of your chart fairly easily. another advantage is that you don't need to load every image individually, which can improve load performance. example: framing an image in this example, we'll use the same rhino as in the previous example, but we'll slice out its head and composite it into a picture frame. the picture frame image is a 24-bit png which includes a drop shadow. because 24-bit png images include a full 8-bit alpha channel, unlike gif and 8-bit png images, it can be placed onto any background without worrying about a matte color. <html> <body onload="draw();"> <canvas id="canvas" width="150" height="15...
...you can use the drawing context's imagesmoothingenabled property to control the use of image smoothing algorithms when scaling images within your context. by default, this is true, meaning images will be smoothed when scaled. you can disable this feature like this: ctx.mozimagesmoothingenabled = false; ctx.
...xt's imagesmoothingenabled property to control the use of image smoothing algorithms when scaling images within your context. by default, this is true, meaning images will be smoothed when scaled. you can disable this feature like this: ctx.mozimagesmoothingenabled = false; ctx.webkitimagesmoothingenabled = false; ctx.msimagesmoothingenabled = false; ctx.imagesmoothingenabled = false; « previousnext » ...

ConvolverNode - Web APIs
a convolvernode always has exactly one input and one output. note: for more information on the theory behind linear convolution, see the convolution article on wikipedia. number of inputs 1 number of outputs 1 channel count mode "clamped-max" channel count 1, 2, or 4 channel interpretation "speakers" constructor convolvernode() creates a new convolvernode object instance. properties inherits properties from its parent, audionode. ...
...ped-max" channel count 1, 2, or 4 channel interpretation "speakers" constructor convolvernode() creates a new convolvernode object instance. properties inherits properties from its parent, audionode. convolvernode.buffer a mono, stereo, or 4-channel audiobuffer containing the (possibly multichannel) impulse response used by the convolvernode to create the reverb effect. convolvernode.normalize a boolean that controls whether the impulse response from the buffer will be scaled by an equal-power normalization when the buffer attribute is set, or not. methods no specific method; inherits methods from its parent, audionode. convolvernode example the following example shows basic usage of an audiocontext to create a convolver node. note: you will ...
...ribute is set, or not. methods no specific method; inherits methods from its parent, audionode. convolvernode example the following example shows basic usage of an audiocontext to create a convolver node. note: you will need to find an impulse response to complete the example below. see this codepen for an applied example. ...
...example. let audioctx = new window.audiocontext(); async function createreverb() { let convolver = audioctx.createconvolver(); // load impulse response from file let response = await fetch("path/to/impulse-response.wav"); let arraybuffer = await response.arraybuffer(); convolver.buffer = await audioctx.decodeaudiodata(arraybuffer); return convolver; } ... let reverb = await createreverb(); // someotheraudionode -> reverb -> destination someotheraudionode.connect(reverb); reverb.connect(audioctx.destination); specifications specification status comment web audio apithe definition of 'convolvernode' in that specification. working draft ...

How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
object implementing the dom1 |node| interface. * @return true if the node is: * 1) a |text| node that is all whitespace * 2) a |comment| node * and otherwise false. ...
... 1) a |text| node that is all whitespace * 2) a |comment| node * and otherwise false. */ function is_ignorable( nod ) { return ( nod.nodetype == 8) || // a comment node ( (nod.nodetype == 3) && is_all_ws(nod) ); // a text node, all ws } /** * version of |previoussibling| that skips nodes that are entirely * whitespace or comments. ...
...e, all ws } /** * version of |previoussibling| that skips nodes that are entirely * whitespace or comments. (normally |previoussibling| is a property * of all dom nodes that gives the sibling node, the node that is * a child of the same parent, that occurs immediately before the * reference node.) * * @param sib the reference node. * @return either: * 1) the closest previous sibling to |sib| that is not * ignorable according to |is_ignorable|, or * 2) null if no such node exists. */ function node_before( sib ) { while ((sib = sib.previoussibling)) { if (!is_ignorable(sib)) return sib; } return null; } /** * version of |nextsibling| that skips nodes that are entirely * whitespace or comments. * * @param sib the ref...
...tained * directly in the reference node.) * * @param sib the reference node. * @return either: * 1) the last child of |sib| that is not * ignorable according to |is_ignorable|, or * 2) null if no such node exists. */ function last_child( par ) { var res=par.lastchild; while (res) { if (!is_ignorable(res)) return res; res = res.previoussibling; } return null; } /** * version of |firstchild| that skips nodes that are entirely * whitespace and comments. * * @param sib the reference node. * @return either: * 1) the first child of |sib| that is not * ignorable according to |is_ignorable|, or * 2) null if no such node exists. */ function first_child( par ) { var re...

GlobalEventHandlers.onpointerdown - Web APIs
er onpointerdown is used to specify the event handler for the pointerdown event, which is fired when the pointing device is initially pressed. this event can be sent to window, document, and element objects. this is functionally equivalent to the mousedown event when generated due to user activity with a mouse or mouse-compatible device. if the pointerdown event isn't canceled through a call to preventdefault(), most user agents will fire a mousedown event, so that sites not using pointer events will work. you can also use addeventlistener() to add a listener for pointerdown events. syntax target.onpointerdown = downhandler; var downhandler = target.onpointerdown; value a function to handle the pointerdown event for the target element, document, or window. it receives as input the poi...
...default(), most user agents will fire a mousedown event, so that sites not using pointer events will work. you can also use addeventlistener() to add a listener for pointerdown events. syntax target.onpointerdown = downhandler; var downhandler = target.onpointerdown; value a function to handle the pointerdown event for the target element, document, or window. it receives as input the pointerevent describing the pointerdown event. example this example demonstrates how to watch for and act upon pointerdown events using onpointerdown. you could also use addeventlistener(), of course. javascript first, let's look at the javascript code that handles the pointerdown event. var targetbox = document.getelementbyid("target"); targetbox.onpointerdown = handledown; function handledown(evt)...
...andledown; function handledown(evt) { var action; switch(evt.pointertype) { case "mouse": action = "clicking"; break; case "pen": action = "tapping"; break; case "touch": action = "touching"; break; default: action = "interacting with"; break; } targetbox.innerhtml = "<strong>thanks for " + action + " me!</strong>"; evt.preventdefault(); } this simply uses onpointerdown to establish the function handledown() as the event handler for pointer down events. the handledown() function, in turn, looks at the value of pointertype to determine what kind of pointing device was used, then uses that information to customize a string to replace the contents of the target box. then the event's preventdefault() method is called ...
...hen the event's preventdefault() method is called to ensure that the mousedown event isn't triggered, potentially causing events to be handled twice if we had a handler for those events in case pointer event support is missing. we also have a handler for pointerup events: targetbox.onpointerup = handleup; function handleup(evt) { targetbox.innerhtml = "tap me, click me, or touch me!"; evt.preventdefault(); } this code's job is to just restore the original text into the target box after the user's interaction with the element ends (for example, when they release the mouse button, or when they lift the stylus or finger from the screen). in addition, the event's preventdefault() method is called to ensure that the mouseup event isn't triggered unnecessarily. html the html is extreme...

HTMLImageElement.loading - Web APIs
e of lazy will cause the image to only be loaded shortly before it will appear in the window's visual viewport. usage notes timing of the load event the load event is fired when the document has been fully processed. when images are loaded eagerly (which is the default), every image in the document must be fetched before the load event can fire. by specifying the value lazy for loading, you prevent the image from delaying the load attribute by the amount of time it takes to request, fetch, and process the image. images whose loading attribute is set to lazy but are located within the visual viewport immediately upon initial page load are loaded as soon as the layout is known, but their loads do not delay the firing of the load event. in other words, these images aren't loaded immediatel...
...s known, but their loads do not delay the firing of the load event. in other words, these images aren't loaded immediately when processing the <img> element, but are still loaded as part of the initial page load. they justt don't affect the timing of the load event. that means that when load fires, it's possible that any lazy-loaded images located in the visual viewport may not yet be visible. ...
...element shift during image lazy loads when an image whose loading has been delayed by the loading attribute being set to lazy is finally loaded, the browser will determine the final size of the <img> element based on the style and intrinsic size of the image, then reflow the document as needed to update the positions of elements based on any size change made to the element to fit the image. ...
... style and intrinsic size of the image, then reflow the document as needed to update the positions of elements based on any size change made to the element to fit the image. to prevent this reflow from occurring, you should explicitly specify the size of the image's presentation using the image element's width and height attributes. by establishing the intrinsic aspect ratio in this manner, you prevent elements from shifting around while the document loads, which can be disconcerting or offputting at best and can cause users to click the wrong thing at worst, depending on the exact timing of the deferred loads and reflows. example the addimagetolist() function shown below adds a photo thumbnail to a list of items, using lazy-loading to avoid loading the image from the network until it's ac...

Dragging and Dropping Multiple Items - Web APIs
method. this allows a drop to occur on that element. the dodrop event hander is called when dropping ...
...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 item...
...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 them. for each item, the ...
...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 them. ...

PerformanceTiming - Web APIs
o dom events; others describe the time at which internal browser operations of interest took place. each time is provided as an unsigned long long representing the moment, in milliseconds since the unix epoch these properties are listed in the order in which they occur during the navigation process. ...
...r operations of interest took place. each time is provided as an unsigned long long representing the moment, in milliseconds since the unix epoch these properties are listed in the order in which they occur during the navigation process. performancetiming.navigationstart read only when the prompt for unload terminates on the previous document in the same browsing context. if there is no previous document, this value will be the same as performancetiming.fetchstart. performancetiming.unloadeventstart read only when the unload event has been thrown, indicating the time at which the previous document in the window began to unload. if there is no previous document, or if the previous document or one of the needed redirects is not of the same origin, the value returned is 0. perf...
... performancetiming.redirectstart read only when the first http redirect starts. ...
... performancetiming.redirectstart read only when the first http redirect starts. if there is no redirect, or if one of the redirects is not of the same origin, the value returned is 0. ...

Permissions - Web APIs
the permissions interface of the permissions api provides the core permission api functionality, such as methods for querying and revoking permissions methods permissions.query() returns the user permission status for a given api. permissions.request() requests permission to use a given api. this is not currently supported in any browser. permissions.requestall() requests permission to use a given set of apis. this is not currently supported in any browser. permissions.revoke() revokes the permission currently set on a given api. example navigator.permissions.query({name:'geolocation'}).then(function(result) { if (result.state === 'granted') { showlocalnewswithgeolocation(); } else if (result.state === 'prompt') { showbuttontoenablelocalnews(); } // don't do a...
... full support 48chrome android full support 48firefox android no support noopera android ? ...
...to change preferences in firefox, visit about:config. ...
...to change preferences in firefox, visit about:config. no support 47 — 51opera android ? safari ios no support nosamsung internet android full support 5.0legend full supp...

Pinch zoom gestures - Web APIs
areas. <style> div { margin: 0em; padding: 2em; } #target { background: white; border: 1px solid black; } </style> global state supporting a two-pointer gesture requires preserving a pointer's event state during various event phases. this application uses two global variables to cache the event state. // global vars to cache event state var evcache = new array(); var prevdiff = -1; register event handlers event handlers are registered for the following pointer events: pointerdown, pointermove and pointerup. the handler for pointerup is used for the pointercancel, pointerout and pointerleave events since these four events have the same semantics in this application. function init() { // install event handlers for the pointer target var el=document.getelementb...
...t in the cache and update its record with this event for (var i = 0; i < evcache.length; i++) { if (ev.pointerid == evcache[i].pointerid) { evcache[i] = ev; break; } } // if two pointers are down, check for pinch gestures if (evcache.length == 2) { // calculate the distance between the two pointers var curdiff = math.abs(evcache[0].clientx - evcache[1].clientx); if (prevdiff > 0) { if (curdiff > prevdiff) { // the distance between the two pointers has increased log("pinch moving out -> zoom in", ev); ev.target.style.background = "pink"; } if (curdiff < prevdiff) { // the distance between the two pointers has decreased log("pinch moving in -> zoom out",ev); ev.target.style.background = "lightblue"; } ...
...distance between the two pointers has increased log("pinch moving out -> zoom in", ev); ev.target.style.background = "pink"; } if (curdiff < prevdiff) { // the distance between the two pointers has decreased log("pinch moving in -> zoom out",ev); ev.target.style.background = "lightblue"; } } // cache the distance for the next move event prevdiff = curdiff; } } pointer up the pointerup event is fired when a pointer is raised from the contact surface. when this occurs, the event is removed from the event cache and the target element's background color and border are restored to their original values. in this application, this handler is also used for pointercancel, pointerleave and pointerout events. function pointerup_handler(ev...
...l, pointerleave and pointerout events. function pointerup_handler(ev) { log(ev.type, ev); // remove this pointer from the cache and reset the target's // background and border remove_event(ev); ev.target.style.background = "white"; ev.target.style.border = "1px solid black"; // if the number of pointers down is less than two then reset diff tracker if (evcache.length < 2) { prevdiff = -1; } } application ui the application uses a <div> element for the touch area and provides buttons to enable logging and to clear the log. to prevent the browser's default touch behavior from overriding this application's pointer handling, the touch-action property is applied to the <body> element. <body onload="init();" style="touch-action:none"> <div id="target">touch and hold wit...

RTCPeerConnection - Web APIs
ityresult event, of type rtcidentityevent, is received by this rtcpeerconnection. such an event is sent when an identity assertion is generated, via getidentityassertion() or during the creation of an offer or an answer.onidpassertionerror the rtcpeerconnection.onidpassertionerror event handler is a property containing the code to execute whent the idpassertionerror event, of type rtcidentityerrorevent, is received by this rtcpeerconnection. such an event is sent when the associated identity provider (idp) encounters an error while generating an identity assertion.onidpvalidationerror the rtcpeerconnection.onidpvalidationerror event handler is a property containing the code to execute whent the idpvalidationerror event, of type rtcidentityerrorevent, is received by this rtcpeerconnection. s...
...rtcpeerconnection object when the remote peer adds an rtcdatachannel to the connection. also available through the ondatachannel event handler property. icecandidate sent to the peer connection to request that the specified candidate be transmitted to the remote peer. also available through the onicecandidate event handler property. icecandidateerror an error of type rtcpeerconnectioniceerrorevent which is sent to the connection if an error occurred during ice candidate gathering. the event's properties describe the error. also available through the onicecandidateerror event handler property. iceconnectionstatechange sent to the rtcpeerconnection when the state of the ice connection changes, such as when it disconnects. also available using the oniceconnectionstatechange event handl...
..." the peer connection was just created and hasn't done any networking yet. "gathering" the ice agent is in the process of gathering candidates for the connection. "complete" the ice agent has finished gathering candidates. if something happens that requires collecting new candidates, such as a new interface being added or the addition of a new ice server, the state will revert to "gathering" to gather those candidates. rtcicetransportpolicy enum the rtcicetransportpolicy enum defines string constants which can be used to limit the transport policies of the ice candidates to be considered during the connection process. constant description "all" all ice candidates will be considered. "public" only ice candidates with...
...tion.createanswer()) and applied by calling rtcpeerconnection.setlocaldescription(). this provisional answer describes the supported media formats and so forth, but may not have a complete set of ice candidates included. further candidates will be delivered separately later. "have-remote-pranswer" a provisional answer has been received and successfully applied in response to an offer previously sent and established by calling setlocaldescription(). "closed" the connection is closed. note: this value moved into the rtcpeerconnectionstate enum in the may 13, 2016 draft of the specification, as it reflects the state of the rtcpeerconnection, not the signaling connection. you now detect a closed connection by checking for connectionstate to be "closed" ins...

SVGLengthList - Web APIs
code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. initialize(in svglength newitem) svglength clears all existing current items from the list and re-initializes the list to hold the single item specified by the parameter. if the inserted item is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. the return value is the item inserted into the list. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. getitem(in unsigned long index) svglength ...
... a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. insertitembefore(in svglength newitem, in unsigned long index) svglength inserts a new item into the list at the specified position. the first item is number 0. if newitem is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. if the item is already in this list, note that the index of the item to insert before is before the removal of the item. if the index is equal to 0, then the new item is inserted at the front of the list. if the index is greater than or equal to numberofitems, then the new item is appended to the e...
... of the list. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. replaceitem(in svglength newitem, in unsigned long index) svglength replaces an existing item in the list with a new item. if newitem is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. if the item is already in this list, note that the index of the item to replace is before the removal of the item. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. a...
...allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. a domexception with code index_size_err is raised if the index number is greater than or equal to numberofitems. appenditem(in svglength newitem) svglength inserts a new item at the end of the list. if newitem is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. browser compatibility the compatibility table on this page is generated from structured data. if you'd l...

SVGNumberList - Web APIs
with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. initialize(in svgnumber newitem) svgnumber clears all existing current items from the list and re-initializes the list to hold the single item specified by newitem. if the inserted item is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. the return value is the item inserted into the list. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. getitem(in unsigned long index) svgnumber ...
...xception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. insertitembefore(in svgnumber newitem, in unsigned long index) svgnumber inserts a new item into the list at the specified position. the first item is number 0. if newitem is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. if the item is already in this list, note that the index of the item to insert before is before the removal of the item. if the index is equal to 0, then the new item is inserted at the front of the list. if the index is greater than or equal to numberofitems, then the new item is appended to ...
...he list. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. replaceitem(in svgnumber newitem, in unsigned long index) svgnumber replaces an existing item in the list with a new item. if newitem is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. if the item is already in this list, note that the index of the item to replace is before the removal of the item. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. ...
...ication_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. a domexception with code index_size_err is raised if index is greater than or equal to numberofitems. appenditem(in svgnumber newitem) svgnumber inserts a new item at the end of the list. if newitem is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. browser compatibility the compatibility table on this page is generated from structured data. if you...

SVGPathSegList - Web APIs
tion_allowed_err is raised when the list cannot be modified. initialize(in svgpathseg newitem) svgpathseg clears all existing current items from the list and re-initializes the list to hold the single item specified by newitem. if the inserted item is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. the return value is the item inserted into the list. exceptions: a domexception with code no_modification_allowed_err is raised when the list cannot be modified. getitem(in unsigned long index) ...
...cation_allowed_err is raised when the list cannot be modified. insertitembefore(in svgpathseg newitem, in unsigned long index) svgpathseg inserts a new item into the list at the specified position. the first item is number 0. if newitem is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. if the item is already in this list, note that the index of the item to insert before is before the removal of the item. if the index is equal to 0, then the new item is inserted at the front of the list. if the index is greater than or equal to numberofitems, then the new item is appen...
... a domexception with code no_modification_allowed_err is raised when the list cannot be modified. replaceitem(in svgpathseg newitem, in unsigned long index) svgpathseg replaces an existing item in the list with a new item. if newitem is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. if the item is already in this list, note that the index of the item to replace is before the removal of the item. exceptions: a domexception with code no_modification_allowed_err is raised when the list cannot be modified. a domexception with code ind...
...d when the list cannot be modified. a domexception with code index_size_err is raised if index is greater than or equal to numberofitems. appenditem(in svgpathseg newitem) svgpathseg inserts a new item at the end of the list. if newitem is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. exceptions: a domexception with code no_modification_allowed_err is raised when the list cannot be modified. browser compatibility desktop ...

SVGPointList - Web APIs
en the list corresponds to a read only attribute or when the object itself is read only. initialize(in svgpoint newitem) svgpoint clears all existing current items from the list and re-initializes the list to hold the single item specified by the parameter. if the inserted item is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. the return value is the item inserted into the list. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. ge...
...wed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. insertitembefore(in svgpoint newitem, in unsigned long index) svgpoint inserts a new item into the list at the specified position. the first item is number 0. if newitem is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. if the item is already in this list, note that the index of the item to insert before is before the removal of the item. if the index is equal to 0, then the new item is inserted at the front of the list. if the index is greater than or equal to numberofitems, then the new item is appended to the e...
...ception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. replaceitem(in svgpoint newitem, in unsigned long index) svgpoint replaces an existing item in the list with a new item. if newitem is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. if the item is already in this list, note that the index of the item to replace is before the removal of the item. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself i...
... read only attribute or when the object itself is read only. a domexception with code index_size_err is raised if the index number is greater than or equal to numberofitems. appenditem(in svgpoint newitem) svgpoint inserts a new item at the end of the list. if newitem is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. browser compatibility ...

SVGStringList - Web APIs
ode no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. initialize(in domstring newitem) domstring clears all existing current items from the list and re-initializes the list to hold the single item specified by the parameter. if the inserted item is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. the return value is the item inserted into the list. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. getitem(in unsigned long index) domstring ...
... domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. insertitembefore(in domstring newitem, in unsigned long index) domstring inserts a new item into the list at the specified position. the first item is number 0. if newitem is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. if the item is already in this list, note that the index of the item to insert before is before the removal of the item. if the index is equal to 0, then the new item is inserted at the front of the list. if the index is greater than or equal to numberofitems, then the new item is appended to the e...
...he list. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. replaceitem(in domstring newitem, in unsigned long index) domstring replaces an existing item in the list with a new item. if newitem is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. if the item is already in this list, note that the index of the item to replace is before the removal of the item. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. ...
...owed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. a domexception with code index_size_err is raised if the index number is greater than or equal to numberofitems. appenditem(in domstring newitem) domstring inserts a new item at the end of the list. if newitem is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. ...

Using Service Workers - Web APIs
ith for years is loss of connectivity. the best web app in the world will provide a terrible user experience if you can’t download it. there have been various attempts to create technologies to solve this problem, and some of the issues have been solved. but the overriding problem is that there still isn’t a good overall control mechanism for asset caching and custom network requests. the previous attempt — appcache — seemed to be a good idea because it allowed you to specify assets to cache really easily. however, it made many assumptions about what you were trying to do and then broke horribly when your app didn’t follow those assumptions exactly. read jake archibald's (unfortunately-titled but well-written) application cache is a douchebag for more details. note: as of firef...
... caching site assets). this is really the same kind of procedure as installing a native or firefox os app — making everything available for use offline. when the oninstall handler completes, the service worker is considered installed. next is activation. when the service worker is installed, it then receives an activate event. the primary use of onactivate is for cleanup of resources used in previous versions of a service worker script. the service worker will now control pages, but only those opened after the register() is successful. i.e. a document starts life with or without a service worker and maintains that for its lifetime. so documents will have to be reloaded to actually be controlled. the below graphic shows a summary of the available service worker events: promises pr...
... return response; }); }).catch(() => { return caches.match('./sw-test/gallery/mylittlevader.jpg'); }) ); }); we have opted for this fallback image because the only updates that are likely to fail are new images, as everything else is depended on for installation in the install event listener we saw earlier. updating your service worker if your service worker has previously been installed, but then a new version of the worker is available on refresh or page load, the new version is installed in the background, but not yet activated. it is only activated 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. you’ll want to update your insta...
...ventlistener('install', (event) => { event.waituntil( caches.open('v2').then((cache) => { return cache.addall([ './sw-test/', './sw-test/index.html', './sw-test/style.css', './sw-test/app.js', './sw-test/image-list.js', … // include other new resources for the new version... ]); }) ); }); while this happens, the previous version is still responsible for fetches. the new version is installing in the background. we are calling the new cache v2, so the previous v1 cache isn't disturbed. when no pages are using the current version, the new worker activates and becomes responsible for fetches. deleting old caches you also get an activate event. this is a generally used to do stuff that would have broken the pre...

TreeWalker - Web APIs
the found child. it also moves the current node to this child. if no such child exists, returns null and the current node is not changed. treewalker.lastchild() moves the current node to the last visible child of the current node, and returns the found child. it also moves the current node to this child. if no such child exists, null is returned and the current node is not changed. ...
...o this child. if no such child exists, returns null and the current node is not changed. treewalker.lastchild() moves the current node to the last visible child of the current node, and returns the found child. it also moves the current node to this child. if no such child exists, null is returned and the current node is not changed. ...
...it also moves the current node to this one. if no such node exists, or if it is before that the root node defined at the object construction, returns null and the current node is not changed. ...
...it also moves the current node to this one. if no such node exists, or if it is before that the root node defined at the object construction, returns null and the current node is not changed. ...

WebGLRenderingContext.texImage2D() - Web APIs
a uint16array must be used if type is either gl.unsigned_short...
... a uint16array must be used if type is either gl.unsigned_short_5_6_5, gl.unsigned_short_4_4_4_4, g...
... a uint16array must be used if type is either gl.unsigned_short_5_6_5, gl.unsigned_short_4_4_4_4, gl.unsigned_short_5_5_5_1, gl.uns...
... a uint16array must be used if type is either gl.unsigned_short_5_6_5, gl.unsigned_short_4_4_4_4, gl.unsigned_short_5_5_5_1, gl.unsigned_short or ext.half_float_oes. a uint32array must be us...

Matrix math for the web - Web APIs
]; } function rotatearoundzaxis(a) { return [ cos(a), -sin(a), 0, 0, sin(a), cos(a), 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ]; } view on jsfiddle matrix composition the real power of matrices comes from matrix composition. when matrices of a certain class are multiplied together they preserve the history of the transformations and are reversible. this means that if a translation, rotation, and scale matrix are all combined together, when the order of the matrices is reversed and re-applied then the original points are returned. the order that matrices are multiplied in matters. when multiplying numbers, a * b = c, and b * a = c are both true. for example 3 * 4 = 12, and 4 * 3 = 12. in math these numbers would be described as comm...
...er that matrices are multiplied in matters. when multiplying numbers, a * b = c, and b * a = c are both true. for example 3 * 4 = 12, and 4 * 3 = 12. in math these numbers would be described as commutative. matrices are not guaranteed to be the same if the order is switched, so matrices are non-commutative. another mind-bender is that matrix multiplication in webgl and css needs to happen in the reverse order that the operations intuitively happen. for instance, to scale something down by 80%, move it down 200 pixels, and then rotate about the origin 90 degrees would look something like the following in pseudo-code. transformation = rotate * translate * scale composing multiple transformations the function that we will be using to compose our matrices is multiplyarrayofmatrices(), whic...
...anslate() functions, which return matrices as defined above. let transformmatrix = mdn.multiplyarrayofmatrices([ rotatearoundzaxis(math.pi * 0.5), // step 3: rotate around 90 degrees translate(0, 200, 0), // step 2: move down 100 pixels scale(0.8, 0.8, 0.8), // step 1: scale down ]); view on jsfiddle finally, a fun step to show how matrices work is to reverse the steps to bring the matrix back to the original identity matrix. let transformmatrix = mdn.multiplyarrayofmatrices([ scale(1.25, 1.25, 1.25), // step 6: scale back up translate(0, -200, 0), // step 5: move back up rotatearoundzaxis(-math.pi * 0.5), // step 4: rotate back rotatearoundzaxis(math.pi * 0.5), // step 3: rotate around 90 degrees translat...
...ant matrices are important because they comprise a small set of numbers that can describe a wide range of transformations in space. they can easily be shared around in programs. different coordinate spaces can be described with matrices, and some matrix multiplication will move one set of data from one coordinate space to another coordinate space. matrices effectively remember every part of the previous transforms that were used to generate them. for uses in webgl, the graphics card is particularly good at multiplying a large number of points in space by matrices. different operations like positioning points, calculating lighting, and posing animated characters all rely on this fundamental tool. ...

Lighting in WebGL - Web APIs
it just runs two functions you supply — a vertex shader and a fragment shader — and expects you to write creative functions to get the results you want. in other words, if you want lighting you have to calculate it yourself. fortunately, it's not all that hard to do, and this article will cover some of the basics. this example uses the glmatrix library to perform its matrix and vertex math. you'll need to include it if you create your own project based on this code. our sample loads a copy from a cdn in our html's <head>. ...
...ght sources usually work. a light bulb emits light in all directions, for example. for our purposes, we're going to simplify the lighting model by only considering simple directional and ambient lighting; we won't have any specular highlights or point light sources in this scene. instead, we'll have our ambient lighting plus a single directional light source, aimed at the rotating cube from the previous demo. once you drop out the concept of point sources and specular lighting, there are two pieces of information we'll need in order to implement our directional lighting: we need to associate a surface normal with each vertex. this is a vector that's perpendicular to the face at that vertex. we need to know the direction in which the light is traveling; this is defined by the direction v...
... the only thing left is to look up the location of the avertexnormal attribute and the unormalmatrix uniform. const programinfo = { program: shaderprogram, attriblocations: { vertexposition...
...te code | open this demo on a new page exercises for the reader obviously, this is a simple example, implementing basic per-vertex lighting. for more advanced graphics, you'll want to implement per-pixel lighting, but this will get you headed in the right direction. you might also try experimenting with the direction of the light source, the colors of the light sources, and so forth. « previousnext » ...

Using textures in WebGL - Web APIs
this example uses the glmatrix library to perform its matrix and vertex math. you'll need to include it if you create your own project based on this code. our sample loads a copy from a cdn in our html's <head>. loading textures the first thing to do is add code to load the textures. in our case, we'll be using a single texture, mapped onto all six sides of our rotating cube, but the same technique can be used for any number of textures. note: it's important to note that the loading of textures follows cross-domain rules; that is, you can only load textures from sites for which your content has cors approval. ...
...to cover a brick wall. mipmapping and uv repeating can be disabled with texparameteri(). this will allow non-power-of-two (npot) textures at the expense of mipmapping, uv wrapping, uv tiling, and your control over how the device will handle your texture. // gl.nearest is also allowed, instead of gl.linear, as neither mipmap. gl.texparameteri(gl.texture_2d, gl.texture_min_filter, gl.linear); // prevents s-coordinate wrapping (repeating). gl.texparameteri(gl.texture_2d, gl.texture_wrap_s, gl.clamp_to_edge); // prevents t-coordinate wrapping (repeating). gl.texparameteri(gl.texture_2d, gl.texture_wrap_t, gl.clamp_to_edge); again, with these parameters, compatible webgl devices will automatically accept any resolution for that texture (up to their maximum dimensions). without performing the ab...
... function within our main() function. this can be added after the initbuffers(gl) call. // load texture const texture = loadtexture(gl, 'cubetexture.png'); mapping the texture onto the faces at this point, the texture is loaded and ready to use. but before we can use it, we need to establish the mapping of the texture coordinates to the vertices of the faces of our cube. this replaces all the previously existing code for configuring colors for each of the cube's faces in initbuffers(). const texturecoordbuffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, texturecoordbuffer); const texturecoordinates = [ // front 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, // back 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, // top 0.0, 0.0, ...
...n image is drawn on it. ...

WebRTC API - Web APIs
g state, indicating that it will be closed soon. you can detect the completion of the closing process by watching for the close event. connectionstatechange the connection's state, which can be accessed in connectionstate, has changed. datachannel a new rtcdatachannel is available following the remote peer opening a new data channel. this event's type is rtcdatachannelevent. error an rtcerrorevent indicating that an error occurred on the data channel. error an rtcerrorevent indicating that an error occurred on the rtcdtlstransport. this error will be either dtls-failure or fingerprint-failure. gatheringstatechange the rtcicetransport's gathering state has changed. icecandidate an rtcpeerconnectioniceevent which is sent whenever the local device has identified a new ice candidate w...
...he rtcdtlstransport. this error will be either dtls-failure or fingerprint-failure. gatheringstatechange the rtcicetransport's gathering state has changed. icecandidate an rtcpeerconnectioniceevent which is sent whenever the local device has identified a new ice candidate which needs to be added to the local peer by calling setlocaldescription(). icecandidateerror an rtcpeerconnectioniceerrorevent indicating that an error has occurred while gathering ice candidates. iceconnectionstatechange sent to an rtcpeerconnection when its ice connection's state—found in the iceconnectionstate property—changes. icegatheringstatechange sent to an rtcpeerconnection when its ice gathering state—found in the icegatheringstate property—changes. message a message has been received on the da...
...f the current connection. if no peer has yet been set and verified this interface returns null. once set it can't be changed. rtcidentityproviderregistrar registers an identity provider (idp). rtcidentityevent represents an identity assertion generated by an identity provider (idp). this is usually for an rtcpeerconnection. the only event sent with this type is identityresult. rtcidentityerrorevent represents an error associated with the identity provider (idp). this is usually for an rtcpeerconnection. two events are sent with this type: idpassertionerror and idpvalidationerror. rtccertificate represents a certificate that an rtcpeerconnection uses to authenticate. telephony these interfaces and events are related to interactivity with public-switched telephone networks (ptsns). t...
...on pattern perfect negotiation is a design pattern which is recommended for your signaling process to follow, which provides transparency in negotiation while allowing both sides to be either the offerer or the answerer, without significant coding needed to differentiate the two. signaling and two-way video calling a tutorial and example which turns a websocket-based chat system created for a previous example and adds support for opening video calls among participants. the chat server's websocket connection is used for webrtc signaling. codecs used by webrtc a guide to the codecs which webrtc requires browsers to support as well as the optional ones supported by various popular browsers. included is a guide to help you choose the best codecs for your needs. using webrtc data channels t...

Rendering and the WebXR frame animation callback - Web APIs
rer itself runs longer than that amount of time, you can cause not just the frame to get dropped, but that time to be wasted entirely, blocking other code from getting to run at all for that frame. not only that, but if your rendering crosses the vertical refresh boundary, you can wind up with a tearing effect. tearing occurs when the the display hardware starts the next refresh cycle while the previous frame is still being drawn to the screen. as a result, you wind up with the visual effect of the top part of the screen showing the new frame, while the bottom part of the frame shows some combination of the previous frame and possibly even the frame before that one. your mission, then, is to keep your code tight and lightweight enough that you don't overrrun the time available to you or oth...
...e. this ensures we get into the queue right away, allowing the rest of the time spent in this iteration of the mydrawframe() function to count toward the timing of drawing the next frame. we then get the xrviewerpose object that describes the viewer's pose—their position and orientation—using the frame's getviewerpose() method, passing in the viewer's reference space from the viewerrefspace previously obtained while setting up the webxr session. with the viewer's pose in hand, we can then begin to render the frame. the first step is to obtain access to the framebuffer into which the webxr device wants the frame drawn; this is done by getting the target webgl layer from the session's renderstate object's baselayer property, then getting the framebuffer from that xrwebgllayer object. we t...
...ar(), passing in a bit mask in which both color_buffer_bit and depth_buffer_bit are set. since webxr uses a single framebuffer for every view, with viewports upon the view being used to separate each eye's viewpoint within the framebuffer, we only need to clear a single framebuffer rather than cleaning it for each eye (or other viewpoints, if any) individually. next, the time elapsed since the previous frame was rendered is calculated by subtracting from the current time as specified by the currentframetime parameter the saved time at which the last frame was rendered, lastframetime. the result is a domhighrestimestamp value indicating the number of milliseconds that have elapsed since the last frame was rendered. we can use this value while drawing the scene to ensure we move everything th...
...s elapsed since the last frame was rendered: let lastframetime = 0; function drawframe(time, frame) { /* ... schedule next frame, prepare the buffer, etc ... */ const deltatime = (time - lastframetime) * 0.001; lastframetime = time; for (let view of pose.views) { /* render each view */ } } this maintains a global (or an object property) called lastframetime which contains the previous frame's time of rendering. in this case, since the time values are stored in milliseconds, we multiply by 0.001 to convert the time into seconds. in some cases, this saves time later. in other situations, you need the time in milliseconds, so you wouldn't need to change anything. with the elapsed time in hand, your rendering code has the means to compute just how much every moving object has...

WindowEventHandlers.onbeforeunload - Web APIs
over, some don't display them at all. syntax window.addeventlistener("beforeunload", function(event) { ... }); window.onbeforeunload = function(event) { ... }; typically, it is better to use window.addeventlistener() and the beforeunload event, instead of onbeforeunload. example this example prompts the user before unloading. ...
...; typically, it is better to use window.addeventlistener() and the beforeunload event, instead of onbeforeunload. example this example prompts the user before unloading. the html specification states that authors should use the event.preventdefault() method instead of using event.returnvalue to prompt the user. ...
...o use window.addeventlistener() and the beforeunload event, instead of onbeforeunload. example this example prompts the user before unloading. the html specification states that authors should use the event.preventdefault() method instead of using event.returnvalue to prompt the user. ...
...g the returnvalue property of the event window.addeventlistener('beforeunload', function (e) { // the absence of a returnvalue property on the event will guarantee the browser unload happens delete e['returnvalue']; }); notes when your page uses javascript to render content, the javascript may stop when leaving and then navigating back to the page. you can bind to window.onbeforeunload to prevent the browser from fully caching the page. if you do so, javascript in the page will be triggered on the subsequent return visit and update the content as desired. specifications the event was originally introduced by microsoft in internet explorer 4 and standardized in the html5 specification. specification status comment html living standardthe definition of 'onb...

ARIA: listbox role - Accessibility
x receives focus, focus is set on the first option and there is no automatic change in the selection state. if one or more options are selected before the listbox receives focus, focus is set on the first option in the list that is selected. down arrow: moves focus to the next option. optionally, in a single-select listbox, selection may also move with focus. up arrow: moves focus to the previous option. optionally, in a single-select listbox, selection may also move with focus. home (optional): moves focus to first option. optionally, in a single-select listbox, selection may also move with focus. supporting this key is strongly recommended for lists with more than five options. end (optional): moves focus to last option. optionally, in a single-select listbox, selection may also m...
...ys to be held while navigating in order to avoid losing selection states. recommended selection model -- holding modifier keys is not necessary: space: changes the selection state of the focused option . shift + down arrow (optional): moves focus to and toggles the selected state of the next option. shift + up arrow (optional): moves focus to and toggles the selected state of the previous option. shift + space (optional): selects contiguous items from the most recently selected item to the focused item. control + shift + home (optional): selects the focused option and all options up to the first option. optionally, moves focus to the first option. control + shift + end (optional): selects the focused option and all options down to the last option. optionally, moves fo...
...ocused option and all options down to the last option. optionally, moves focus to the last option. control + a (optional): selects all options in the list. optionally, if all options are selected, it may also unselect all options. required javascript features selecting an option in a single select listbox when the user selects an option, the following must occur: deselect the previously selected option, setting the aria-selected to false, or removing the attribute altogether, changing the appearance of the newly unselected option to appear not selected. select the newly selected option, setting aria-selected="true" on the option and changing the appearance of the newly selected option to appear selected. update the aria-activedescendant value on the listbox to the id of ...
... collapsible dropdown listbox example: single-select collapsible listbox that expands when activated, similar to html select with the attribute size="1". example listboxes with rearrangeable options: examples of both single-select and multi-select listboxes with accompanying toolbars where options can be added, moved, ...

Keyboard-navigable JavaScript widgets - Accessibility
iques for accomplishing this: roving tabindex: programmatically moving focus aria-activedescendant: managing a 'virtual' focus technique 1: roving tabindex setting the tabindex of the focused element to "0" ensures that if the user tabs away from the widget and then returns, the selected item within the group retains focus. note that updating the tabindex to "0" requires also updating the previously selected item to tabindex="-1". this technique involves programmatically moving focus in response to key events and updating the tabindex to reflect the currently focused item. to do this: bind a key down handler to each element in the group, and when an arrow key is used to move to another element: programmatically apply focus to the new element, update the tabindex of the focused ele...
...chnique involves programmatically moving focus in response to key events and updating the tabindex to reflect the currently focused item. to do this: bind a key down handler to each element in the group, and when an arrow key is used to move to another element: programmatically apply focus to the new element, update the tabindex of the focused element to "0", and update the tabindex of the previously focused element to "-1". here's an example of a wai-aria tree view using this technique. tips use element.focus() to set focus do not use createevent(), initevent() and dispatchevent() to send focus to an element. dom focus events are considered informational only: generated by the system after something is focused, but not actually used to set focus. use element.focus() instead. use ...
...n changing the background color via something like this.style.backgroundcolor = "gray"; or add a dotted border via this.style.border = "1px dotted invert". in the dotted border case you will need to make sure those elements have an invisible 1px border to start with, so that the element doesn't grow when the border style is applied (borders take up space, and ie doesn't implement css outlines). prevent used key events from performing browser functions if your widget handles a key event, prevent the browser from also handling it (for example, scrolling in response to the arrow keys) by using your event handler's return code. if your event handler returns false, the event will not be propagated beyond your handler. for example: <span tabindex="-1" onkeydown="return handlekeydown();"> if ha...
...your widget handles a key event, prevent the browser from also handling it (for example, scrolling in response to the arrow keys) by using your event handler's return code. if your event handler returns false, the event will not be propagated beyond your handler. for example: <span tabindex="-1" onkeydown="return handlekeydown();"> if handlekeydown() returns false, the event will be consumed, preventing the browser from performing any action based on the keystroke. don't rely on consistent behavior for key repeat, at this point unfortunately onkeydown may or may not repeat depending on what browser and os you're running on. ...

Web accessibility for seizures and physical reactions - Accessibility
overview seizures seizures caused by light are known as photosensitive epilepsy. content that flickers, flashes, or blinks can trigger photosensitive epilepsy. web technologies that use video, animated gifs, animated pngs, animated svgs, canvas, and css or javascript animations are all capable of content that can induce seizures or other incapacitating physical reactions. ...
... not." in addition to seizures brought about by photosensitivity, listening to certain pieces of music can also trigger what are called musicogenic seizures, although these types of seizures seem to be much more rare. for a great introduction on the topic of musicogenic seizures, visit epilepsy ontario's web page on musicogenic seizures. seizures and epilepsy are not the same. in its article, "a revised definition of epilepsy" the epilepsy foundation notes that…"a seizure is an event and epilepsy is the disease involving recurrent unprovoked seizures." according to the epilepsy foundation's page "how serious are seizures?" , "sudden unexpected death in epilepsy (sudep) is likely the most common disease-related cause of death in with epilepsy. it is not frequent but it is a very real proble...
...y away from refresh rates under 70 hz, and use a rate not divisible by 10." eric bailey, of css-tricks, found an innovative use the update feature which, used in combination with animation-duration or transition-duration, to conclude at a rate that is imperceptible to the human eye. in other words, eric's techniques address the refresh-rate problem. ...
...uman eye. in other words, eric's techniques address the refresh-rate problem. the css below is from the article, css-tricks revisiting prefers-reduced-motion, the reduced motion media query. @media screen and (prefers-reduced-motion: reduce), (update: slow) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; /* hat tip nick/cssremedy (https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/#comment-1700170) */ transition-duration: 0.001ms !important; } } from w3.org's page on media queries 4: the update media feature is used to query the ability of the output device to modify the appearance of content once it has been rendered. it has the values of "none", "slow", and "fast". developmental & experimental features ...

Using media queries - CSS: Cascading Style Sheets
e. nevertheless, its contents will not apply unless and until the result of the query changes to true. media types media types describe the general category of a device. except when using the not or only logical operators, the media type is optional and the all type will be implied. all suitable for all devices. print intended for paged material and documents viewed on a screen in print preview mode. (please see paged media for information about formatting issues that are specific to these formats.) screen intended primarily for screens. speech intended for speech synthesizers. deprecated media types: css2.1 and media queries 3 defined several additional media types (tty, tv, projection, handheld, braille, embossed, and aural), but they were deprecated in media queries 4 and sh...
...nt in a comma-separated list of queries, it will only negate the specific query to which it is applied. if you use the not operator, you must also specify a media type. note: in level 3, the not keyword can't be used to negate an individual media feature expression, only an entire media query. only the only operator is used to apply a style only if an entire query matches, and is useful for preventing older browsers from applying selected styles. when not using only, older browsers would interpret the query screen and (max-width: 500px) simply as screen, ignoring the remainder of the query, and applying its styles on all screens. if you use the only operator, you must also specify a media type. , (comma) commas are used to combine multiple media queries into a single rule. each query i...
...les, please see the reference page for each specific feature. creating complex media queries sometimes you may want to create a media query that depends on multiple conditions. this is where the logical operators come in: not, and, and only. furthermore, you can combine multiple media queries into a comma-separated list; this allows you to apply the same styles in different situations. in the previous example, we've already seen the and operator used to group a media type with a media feature. the and operator can also combine multiple media features into a single media query. the not operator, meanwhile, negates a media query, basically reversing its normal meaning. the only operator prevents older browsers from applying the styles. note: in most cases, the all media type is used by def...
...s evaluated like this: @media not (all and (monochrome)) { ... } ... rather than like this: @media (not all) and (monochrome) { ... } as another example, the following media query: @media not screen and (color), print and (color) { ... } ... is evaluated like this: @media (not (screen and (color))), print and (color) { ... } improving compatibility with older browsers the only keyword prevents older browsers that do not support media queries with media features from applying the given styles. it has no effect on modern browsers. @media only screen and (color) { ... } syntax improvements in level 4 the media queries level 4 specification includes some syntax improvements to make media queries using features that have a "range" type, for example width or height, less verbose. lev...

Cubic Bezier Generator - CSS: Cascading Style Sheets
ext to use the canvas for drawing var ctx = canvas.getcontext('2d'); scaling = math.min(canvas.height - rulers - margin, canvas.width - rulers - margin); canvas.onmousedown = mousedown; canvas.onmouseup = mouseup; } else { alert('you need safari or firefox 1.5+ to see this demo.'); } } function cx(x) { return x * scaling + rulers; } function reversex(x) { return (x - rulers) / scaling; } function lx(x) { //used when drawing vertical lines to prevent subpixel blur var result = cx(x); return math.round(result) == result ? result + 0.5 : result; } function cy(y) { return (1 - y) * scaling + margin; } function reversey(y) { return (margin - y) / scaling + 1; } function ly(y) { // used when drawing horizontal ...
... return (x - rulers) / scaling; } function lx(x) { //used when drawing vertical lines to prevent subpixel blur var result = cx(x); return math.round(result) == result ? result + 0.5 : result; } function cy(y) { return (1 - y) * scaling + margin; } function reversey(y) { return (margin - y) / scaling + 1; } function ly(y) { // used when drawing horizontal lines to prevent subpixel blur var result = cy(y); return math.round(result) == result ? result + 0.5 : result; } function drawbeziercurve(x1, y1, x2, y2) { // get the canvas element using the dom var canvas = document.getelementbyid('bezier'); // make sure we don't execute when canvas isn't supported if (canvas.getcontext) { // use getcontext to use the canvas for drawing ...
...m != 0) { var canvas = document.getelementbyid('bezier'); var x = e.pagex - canvas.offsetleft; var y = e.pagey - canvas.offsettop; var output = document.getelementbyid('output'); output.value = "drag!"; if (dragsm == 1) { var x1 = document.getelementbyid('x1'); var y1 = document.getelementbyid('y1'); x1.value = reversex(x); x1.value = math.round(x1.value * 10000) / 10000; y1.value = reversey(y); y1.value = math.round(y1.value * 10000) / 10000; if (x1.value < 0) { x1.value = 0; } if (x1.value > 1) { x1.value = 1; } } else if (dragsm == 2) { var x2 = document.getelementbyid('x2'); var y2 = document.getelementbyid('y2')...
...value = math.round(x1.value * 10000) / 10000; y1.value = reversey(y); y1.value = math.round(y1.value * 10000) / 10000; if (x1.value < 0) { x1.value = 0; } if (x1.value > 1) { x1.value = 1; } } else if (dragsm == 2) { var x2 = document.getelementbyid('x2'); var y2 = document.getelementbyid('y2'); x2.value = reversex(x); x2.value = math.round(x2.value * 10000) / 10000; y2.value = reversey(y); y2.value = math.round(y2.value * 10000) / 10000; if (x2.value < 0) { x2.value = 0; } if (x2.value > 1) { x2.value = 1; } } updatecanvas(); } } initcanvas(); updatecanvas(); this is a sample tool; it lets you edit bezier curve...

animation - CSS: Cascading Style Sheets
ode, and animation-play-state. 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. ...
...rid"> <div class="col"> <div class="note"> given the following animation: <pre>@keyframes slidein { from { transform: scalex(0); } to { transform: scalex(1); } }</pre> </div> <div class="row"> <div class="cell"> <button class="play" title="play"></button> </div> <div class="cell flx"> <div class="overlay">animation: 3s ease-in 1s 2 reverse both paused slidein;</div> <div class="animation a1"></div> </div> </div> <div class="row"> <div class="cell"> <button class="pause" title="pause"></button> </div> <div class="cell flx"> <div class="overlay">animation: 3s linear 1s slidein;</div> <div class="animation a2"></div> </div> </div> <div class="row"> ...
...x; margin: .5em; padding: 0; background-color: #fff; overflow: hidden; text-align: left; } .flx { flex: 1 0; } .note { background: #fff3d4; padding: 1em; margin: .5em; font: .8em sans-serif; text-align: left; flex: none; } .overlay { padding: .5em; } @keyframes slidein { from { transform: scalex(0); } to { transform: scalex(1); } } .a1 { animation: 3s ease-in 1s 2 reverse both paused slidein; } .a2 { animation: 3s linear 1s slidein; } .a3 { animation: 3s slidein; } .animation { background: #3f87a6; width: 100%; height: calc(100% - 1.5em); transform-origin: left center; } window.addeventlistener('load', function () { var animation = array.from(document.queryselectorall('.animation')); var button = array.from(document.queryselectorall('button'))...
...ngle-animation> = <time> | <timing-function> | <time> | <single-animation-iteration-count> | <single-animation-direction> | <single-animation-fill-mode> | <single-animation-play-state> | [ none | <keyframes-name> ]where <timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function><single-animation-iteration-count> = infinite | <number><single-animation-direction> = normal | reverse | alternate | alternate-reverse<single-animation-fill-mode> = none | forwards | backwards | both<single-animation-play-state> = running | paused<keyframes-name> = <custom-ident> | <string>where <cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinato...

Video player styling basics - Developer guides
in the previous cross browser video player article we described how to build a cross-browser html5 video player using the media and fullscreen apis. this follow-up article looks at how to style this custom player, including making it responsive. the example in action you can find the code for the updated, styled example on github, and view it live. preliminary modifications from the original example this section summarises the modifications that were made to the original video player example to make the styling task easier, before the bulk of the work was started. html markup there are a few changes that were made to the html markup shown in the previous article. the custom video controls and <progress> element are now contained within <div> elements, rather than residing in...
...this has now been changed to use a data-state attribute, which this code already uses to handle its fullscreen implementation. this "data-state" idea is also used for setting the current state of buttons within the video control set, which allows specific state styling. javascript as mentioned ...
...ngs are quite short. since some buttons have dual functionality, e.g. play/pause, and mute/unmute, these buttons have different states that need to be styled. as mentioned earlier, a `data-state` variable is used to indicate which state such buttons are currently in. for example, the play/pause button has the following background image definitions (the full base64 strings have been omitted for brevity): .controls button[data-state="play"] { background-image: url('data:image/png;base64,ivborw0kggoaaa ... '); } .controls button[data-state="pause"] { background-image: url('data:image/png;base64,ivborw0kggoaaa ... '); } when the data-state of the button is changed, the appropriate image will also be changed. all the other buttons are treated in a similar way. progress bar the <progre...
...der-radius:2px; -webkit-border-radius:2px; border-radius:2px; } like the <button> elements, <progress> also has a default border, which is removed here. it is also given a slight rounded corner for aesthetic reasons. the color property is also defined here as internet explorer uses this defined colour for styling the progress bar's background colour as it increases. ...

Audio and Video Delivery - Developer guides
find more about web audio api basics in using the web audio api. getusermedia / stream api it's also possible to retrieve a live stream from a webcam and/or microphone using get...
...ple clear key decryption to high value video (given an appropriate user agent implementation). license/key exchange is controlled by the application, facilitating the development of robust playback applications supporting a range of content decryption and protection technologies. one of the principle uses of eme is to allow browsers to implement drm (digital rights management), which helps to prevent web-based content (especially video) from being copied. adaptive streaming new formats and protocols are being rolled out to facilitate adaptive streaming. adaptive streaming media means that the bandwidth and typically quality of the stream can change in real-time in reaction to the user's available bandwidth. adaptive streaming is often used in conjunction with live streaming where smooth ...
... uri specification was added to gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.6). at this time, this is the only part of the media fragments uri specification implemented by gecko, and it can only be used when specifying the source for media elements, and not in the address bar. error handling starting in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1), error handling has been revised to match the latest version of the html5 specification. instead of the error event being dispatched to the media element itself, it now gets delivered to the child <source> elements corresponding to the sources resulting in the error. this lets you detect which sources failed to load, which may be useful. consider this html: <video> <source id="mp4_src" src="video.mp4" type='video/mp4; ...
...: gratis and open source (mit licensed.) web audio api audiocontext monkeypatch: a polyfill for older versions of the web audio api; open source (apache 2 licensed.) basic tutorials creating a cross-browser video player a guide to creating a basic cross browser video player using the <video> element. video player styling basics with the cross-browser video player put in place in the previous article, this article now looks at providing some basic, reponsive styling for the player. cross-browser audio basics this article provides a basic guide to creating an html5 audio player that works cross browser, with all the associated attributes, properties and events explained, and a quick guide to custom controls created using the media api. media buffering, seeking, and time ...

HTML5 Parser - Developer guides
es these major improvements: you can now use svg and mathml inline in html5 pages, without xml namespace syntax. parsing is now done in a separate thread from firefox’s main ui thread, improving overall browser responsiveness. calls to innerhtml are a lot faster. dozens of long-standing parser related bugs are now fixed. the html5 specification provides a more detailed description than previous html standards of how to turn a stream of bytes into a dom tree. this will result in more consistent behavior across browser implementations. in other words, in supporting html5, gecko, webkit, and internet explorer (ie) will behave more consistently with each other. changed parser behaviors some changes to the way that the gecko 2 parser behaves, as compared to earlier versions of gecko, m...
...ns of gecko, may affect web developers, depending on how you've written your code in the past and what browsers you've tested it on. tokenization of left angle-bracket within a tag given the string <foo<bar>, the new parser reads it as one tag named foo<bar. this behavior is consistent with ie and opera, and is different from gecko 1.x and webkit, which read it as two tags, foo and bar. if you previously tested your code in ie and opera, then you probably don't have any tags like this. if you tested your site only with gecko 1.x or webkit (for example, firefox-only intranets or webkit-oriented mobile sites), then you might have tags that match this pattern, and they will behave differently with gecko 2. calling document.write() during parsing prior to html5, gecko and webkit allowed calls...
... probably don't have that problem. if you forget to close a comment, the page will most likely fail to be parsed. however, unclosed comments often already break in existing browsers for one reason or another, so it's unlikely that you have this issue in sites that are tested in multiple browsers. in an inline script, in order to use the literal strings <script, </script>, and <!--, you should prevent them from being parsed literally by expressing them as \u003cscript,\u003c/script>, and \u003c!--. the older practice of escaping the string </script> by surrounding it with comment markers, while supported by html5, is problematic in cases where the closing comment marker is omitted (see preceding point). you can avoid such problems by using the character code for the initial '<' instead. (it...
...., <\/script>, but this strategy does not work for <script and <!--, because \s and \! are not valid javascript escapes; the character code strategy is more general-purpose.) inline svg and mathml support as a completely new parsing feature, html5 introduced support for inline svg and mathml in text/html. this means that you can now use svg and mathml inline in text/html similarly to what has previously been possible in application/xhtml+xml. <svg>…</svg> is assigned to the svg namespace in the dom. <math>…</math> is assigned to the mathml namespace in the dom. foreignobject and annotation-xml (and various less important elements) establish a nested html scope, so you can nest svg, mathml and html as you’d expect to be able to nest them. the parser case-corrects markup so <svg ...

<input type="radio"> - HTML: Hypertext Markup Language
rm data at all, since there is no value to report. it's fairly uncommon to actually want to allow the form to be submitted without any of the radio buttons in a group selected, so it is usually wise to have one default to the checked state. see selecting a radio button by default below. let's add a little bit of code to our example so we can examine the data generated by this form. ...
... additional attributes in addition to the common attributes shared by all <input> elements, radio inputs support the following attributes: attribute description checked a boolean indicating whether or not this radio button is the currently-selected it...
...he string on by default. this is demonstrated in the section value above. using radio inputs we already covered the fundamentals of radio buttons above. let's now look at the other common radio-button-related features and techniques you may need to know about. ...
... this is demonstrated in the section value above. using radio inputs we already covered the fundamentals of radio buttons above. let's now look at the other common radio-button-related features and techniques you may need to know about. ...

<input type="search"> - HTML: Hypertext Markup Language
only (safari, chrome, opera, etc.). mozactionhint a string indicating the type of action that will be taken when the user presses the enter or return key while editing the field; this is used to determine an appropriate label for that key on a virtual keyboard. firefox for android only. results the maximum number of items that should be displayed in the drop-down list of previous search queries. safari only. autocorrect a safari extension, the autocorrect attribute is a string which indicates whether or not to activate automatic correction while the user is editing this field. permitted values are: on enable automatic correction of typos, as well as processing of text substitutions if any are configured. off disable automatic correction and text substi...
...change being implemented in firefox, see bug 1490661. permitted values are: go, done, next, search, and send. the browser decides, using this hint, what label to put on the enter key. results the results attribute—supported only by safari—is a numeric value that lets you override the maximum number of entries to be displayed in the <input> element's natively-provided drop-down menu of previous search queries. the value must be a non-negative decimal number. if not provided, or an invalid value is given, the browser's default maximum number of entries is used. using search inputs <input> elements of type search are very similar to those of type text, except that they are specifically intended for handling search terms. they are basically equivalent in behavior, but user agents m...
...wise nothing will be submitted. differences between search and text types the main basic differences come in the way browsers handle them. the first thing to note is that some browsers show a cross icon that can be clicked on to remove the search term instantly if desired. the following screenshot comes from chrome: in addition, modern browsers also tend to automatically store search terms previously entered across domains, which then come up as autocomplete options when subsequent searches are performed in search inputs on that domain. this helps users who tend to do searches on the same or similar search queries over time. this screenshot is from firefox: at this point, let's look at some useful techniques you can apply to your search forms. setting placeholders you can provide a u...
...ut by the screenreader; it's used as a non-visual equivalent to <label>. let's have a look at an example: <form role="search"> <div> <input type="search" id="mysearch" name="q" placeholder="search the site..." aria-label="search through site content"> <button>search</button> </div> </form> you can see how this is rendered below: there is no visual difference from the previous example, but screenreader users have way more information available to them. note: see signposts/landmarks for more information about such accessibility features. physical input element size the physical size of the input box can be controlled using the size attribute. with it, you can specify the number of characters the input box can display at a time. in this example, for instance, th...

<sup>: The Superscript element - HTML: Hypertext Markup Language
ign: super or, to shift the baseline up 50%, vertical-align: 50%. appropriate use cases for <sup> include (but aren't necessarily limited to): displaying exponents, such as "x3." it may be worth considering the use of mathml for these, especially in more complex cases. see exponents under examples below. displaying superior lettering, which is used in some languages when rendering certain abbreviations. for example, in french, the word "mademoiselle" can be abbreviated "mlle"); this is an acceptable use case. see superior lettering for examples. representing ordinal numbers, such as "4th" instead of "fourth." see ordinal numbers for examples. examples exponents exponents, or powers of a number, are among the most common uses of superscripted text. for example: <p>one of the most co...
... <p>one of the most common equations in all of physics is <var>e</var>=<var>m</var><var>c</var>².<p> the resulting output looks like this: superior lettering superior lettering is not technically the same thing as superscript. however, it is common to use <sup> to present superior lettering in html. ...
... the same thing as superscript. however, it is common to use <sup> to present superior lettering in html. ...
...ost common uses of superior lettering is the presentation of certain abbreviations in french: <p>robert a présenté son rapport à m^lle bernard.</p> the resulting output: ordinal numbers ordinal numbers, such as "fourth" in english or "quinto" in spanish may be abbreviated using numerals and language-specific text rendered in superscript: <p>the ordinal number "fifth" can be abbreviated in various languages as follows:</p> <ul> <li>english: 5^th</li> <li>french: 5^ème</li> </ul> the output: specifications specification status comment html living standardthe definition of '<sub> and <sup>' in that specification. living standard html5the definition of '<sub> and <sup>;' in that specification. recomme...

<video>: The Video Embed element - HTML: Hypertext Markup Language
her words, it sends the origin: http header with a cookie, a certificate, or performing http basic authentication. if the server does not give credentials to the origin site (through access-control-allow-credentials: http header), the image will be tainted and its usage restricted. when not present, the resource is fetched without a cors request (i.e. without sending the origin: http header), preventing its non-tainted used in <canvas> elements. if invalid, it is handled as if the enumerated keyword anonymous was used. see cors settings attributes for additional information. currenttime reading currenttime returns a double-precision floating-point value indicating the current playback position of the media specified in seconds. if the media has not started playing yet, the time offset ...
...ossible that the user agent may not be able to obtain some parts of the resource if that data has expired from the media buffer. other media may have a media timeline that doesn't start at 0 seconds, so setting currenttime to a time before that would fail. the getstartdate() method can be used to determine the beginning point of the media timeline's reference frame. disablepictureinpicture prevents the browser from suggesting a picture-in-picture context menu or to request picture-in-picture automatically in some cases. disableremoteplayback a boolean attribute used to disable the capability of remote playback in devices that are attached using wired (hdmi, dvi, etc.) and wireless technologies (miracast, chromecast, dlna, airplay, etc). in safari, you can use x-webkit-airplay="deny...
...ibility concerns videos should provide both captions and transcripts that accurately describe its content (see adding captions and subtitles to html5 video for more information on how to implement these). captions allow people who are experiencing hearing loss to understand a video's audio content as the video is being played, while transcripts allow people who need additional time to be able to review audio content at a pace and format that is comfortable for them. it's worth noting that while you can caption audio-only media, you can only do so when playing audio in a <video> element, since the video region of the element is used to present the captions. this is one of the special scenarios in which it's useful to play audio in a video element. if automatic captioning services are used, ...
...t a pace and format that is comfortable for them. it's worth noting that while you can caption audio-only media, you can only do so when playing audio in a <video> element, since the video region of the element is used to present the captions. this is one of the special scenarios in which it's useful to play audio in a video element. if automatic captioning services are used, it is important to review the generated content to ensure it accurately represents the source video. in addition to spoken dialog, subtitles and transcripts should also identify music and sound effects that communicate important information. this includes emotion and tone: 14 00:03:14 --> 00:03:18 [dramatic rock music] 15 00:03:19 --> 00:03:21 [whispering] what's that off in the distance? 16 00:03:22 --> 00:03:24 i...

HTML elements reference - HTML: Hypertext Markup Language
the html inline text semantic to define the meaning, structure, or style of a word, line, or any arbitrary piece of text. element description <a> the html <a> element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a url can address. <abbr> the html abbreviation element (<abbr>) represents an abbreviation or acronym; the optional title attribute can provide an expansion or description for the abbreviation. <b> the html bring attention to element (<b>) is used to draw the reader's attention to the element's contents, which are not otherwise granted special importance. <bdi> the html bidirectional isolate element (<bdi>) ...
...r showing the completion progress of a task, typically displayed as a progress bar. <select> the html <select> element represents a control that provides a menu of options <textarea> the html <textarea> element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form. interactive elements html offers a selection of elements which help to create interactive user interface objects. element description <details> the html details element (<details>) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. <dialog> the html <dialog> e...
...lements which are deprecated and should not be used. you should never use them in new projects, and should replace them in old projects as soon as you can. they are listed here for informational purposes only. element description <acronym> the html acronym element (<acronym>) allows authors to clearly indicate a sequence of characters that compose an acronym or abbreviation for a word. <applet> the obsolete html applet element (<applet>) embeds a java applet into the document; this element has been deprecated in favor of <object>. <basefont> the obsolete html base font element (<basefont>) sets a default font face, size, and color for the other elements which are descended from its parent element. <bgsound> the interne...
...tton. <multicol> the html multi-column layout element (<multicol>) was an experimental element designed to allow multi-column layouts and must not be used. <nextid> <nextid> is an obsolete html element that served to enable the next web designing tool to generate automatic name labels for its anchors. <nobr> the non-standard, obsolete html <nobr> element prevents the text it contains from automatically wrapping across multiple lines, potentially resulting in the user having to scroll horizontally to see the entire width of the text. <noembed> the <noembed> element is an obsolete, non-standard way to provide alternative, or "fallback", content for browsers that do not support the <embed> element or do not support the type of embedded cont...

itemprop - HTML: Hypertext Markup Language
an item with one property, "birthday", whose value is a date <div itemscope> i was born on <time itemprop="birthday" datetime="2009-05-10">may 10th 2009</time>. </div> properties can also be groups of name-value pairs, by putting...
... an item with one property, "birthday", whose value is a date <div itemscope> i was born on <time itemprop="birthday" datetime="2009-05-10">may 10th 2009</time>. </div> properties can also be groups of name-value pairs, by putting the itemscope attribute on the eleme...
..." and "band". the "name" is "amanda", and the "band" is an item in its own right, with two properties, "name" and "size". the "name" of the band is "jazz band", and the "size" is "12". the outer item in this example is a top-level microdata item. items that are not part of others are called top-level microdata items. ...
...the first item has two properties, "name", set to "amanda", and "band", set to another item. that second item has two further properties, "name", set to "jazz band", and "size", set to "12". an item can have multiple properties with the same name and different values. ice cream with two flavors <div itemscope> <p>flavors in my favorite ice cream:</p> <ul> <li itemprop="flavor"...

itemtype - HTML: Hypertext Markup Language
escription">sleeker than acme's classic anvil, the executive anvil is perfect for the business traveler looking for something to drop from a height. ...
...s classic anvil, the executive anvil is perfect for the business traveler looking for something to drop from a height. ...
...order now! </span> </div> result html structured data itemscope itemtype product (http://schema.org/product) itemprop name executive anvil itemprop image https://pixabay.com/static/uploads/photo/2015/09/05/18/15/suitcase-92...
...ription sleeker than acme's classic anvil, the executive anvil is perfect for the business traveler looking for something to drop from a height. ...

Content Security Policy (CSP) - HTTP
g a series of policy directives, each of which describes the policy for a certain resource type or policy area. your policy should include a default-src policy directive, which is a fallback for other resource types when they don't have policies of their own (for a complete list, see the description of the default-src directive). a policy needs to include a default-src or script-src directive to prevent inline scripts from running, as well as blocking the use of eval(). a policy needs to include a default-src or style-src directive to restrict inline styles from being applied from a <style> element or a style attribute. there are specific directives for a wide variety of types of items, so that each type can have its own policy, including fonts, frames, images, audio and video media, scripts,...
...ent's origin, with the following exceptions: images may load from anywhere (note the "*" wildcard). media is only allowed from media1.com and media2.com (and not from subdomains of those sites). executable script is only allowed from userscripts.example.com. example 4 a web site administrator for an online banking site wants to ensure that all its content is loaded using tls, in order to prevent attackers from eavesdropping on requests. content-security-policy: default-src https://onlinebanking.jumbobank.com the server permits access only to documents being loaded specifically over https through the single origin onlinebanking.jumbobank.com. example 5 a web site administrator of a web mail site wants to allow html in email, as well as images loaded from anywhere, but not javascrip...
...script-src; with the example csp, this site uses the setting specified by the default-src directive, which means that scripts can be loaded only from the originating server. testing your policy to ease deployment, csp can be deployed in report-only mode. the policy is not enforced, but any violations are reported to a provided uri. additionally, a report-only header can be used to test a future revision to a policy without actually deploying it. you can use the content-security-policy-report-only http header to specify your policy, like this: content-security-policy-report-only: policy if both a content-security-policy-report-only header and a content-security-policy header are present in the same response, both policies are honored. the policy specified in content-security-policy heade...
... ...

HTTP conditional requests - HTTP
http has a concept of conditional requests, where the result, and even the success of a request, can be changed by comparing the affected resources with the value of a validator. such requests can be useful to validate the content of a cache, and sparing a useless control, to verify the integrity of a document, like when resuming a download, or when preventing to lose updates when uploading or modifying a document on the server. principles http conditional requests are requests that are executed differently, depending on the value of specific headers. these headers define a precondition, and the result of the request will be different if the precondition is matched or not. the different behaviors are defined by the method of the request used, and by the set of headers used for a precondit...
...st wasn't conditional and the client uses this new resource (and caches it). besides the setting of the validators on the server side, this mechanism is transparent: all browsers manage a cache and send such conditional requests without any special work to be done by web developers. integrity of a partial download partial downloading of files is a functionality of http that allows to resume previous operations, saving bandwidth and time, by keeping the already obtained information: a server supporting partial downloads broadcasts this by sending the accept-ranges header. once this happens, the client can resume a download by sending a ranges header with the missing ranges: the principle is simple, but there is one potential problem: if the downloaded resource has been modified betw...
...by sending the accept-ranges header. once this happens, the client can resume a download by sending a ranges header with the missing ranges: the principle is simple, but there is one potential problem: if the downloaded resource has been modified between both downloads, the obtained ranges will correspond to two different versions of the resource, and the final document will be corrupted. to prevent this, conditional requests are used. for ranges, there are two ways of doing this. the more flexible one makes use of if-unmodified-since and if-match and the server returns an error if the precondition fails; the client then restarts the download from the beginning: even if this method works, it adds an extra response/request exchange when the document has been changed. this impairs perfor...
...he change is simply rejected with a 412 precondition failed error. it is then up to the client to deal with the error: either by notifying the user to start again (this time on the newest version), or by showing the user a diff of both versions, helping them decide which changes they wish to keep. dealing with the first upload of a resource the first upload of a resource is an edge case of the previous. like any update of a resource, it is subject to a race condition if two clients try to perform at the similar times. to prevent this, conditional requests can be used: by adding if-none-match with the special value of '*', representing any etag. the request will succeed, only if the resource didn't exist before: if-none-match will only work with http/1.1 (and later) compliant servers. if ...

Content negotiation - HTTP
e followed by a '/' and a version number, like firefox/4.0.1. there may be as many of them as the user-agent wants. a comment is a free string delimited by parentheses. obviously parentheses cannot be used in that string. the inner format of a comment is not defined by the standard, though several browser put several tokens in it, separated by ';'. ...
... the special value of '*' means that the server-driven content negotiation also uses information not conveyed in a header to choose the appropriate content. the vary header was added in the version 1.1 of http and is necessary in order to allow caches to work appropriately. ...
...sion 1.1 of http and is necessary in order to allow caches to work appropriately. a cache, in order to work with server-driven content negotiation, needs to know which criteria was used by the server to select the transmitted content. that way, the cache can replay the algorithm and will be able to serve acceptable content directly, without more request to the server. obviously, the wildcard '*' prevents caching from occurring, as the cache cannot know what element is behind it. agent-driven negotiation server-driven negotiation suffers from a few downsides: it doesn't scale well. there is one header per feature used in the negotiation. if you want to use screen size, resolution or other dimensions, a new http header must be created. sending of the headers must be done on every request. thi...
...ation type: agent-driven negotiation or reactive negotiation. in this negotiation, when facing an ambiguous request, the server sends back a page containing links to the available alternative resources. the user is presented the resources and choose the one to use. unfortunately, the http standard does not specify the format of the page allowing to choose between the available resource, which prevents to easily automatize the process. besides falling back to the server-driven negotiation, this method is almost always used in conjunction with scripting, especially with javascript redirection: after having checked for the negotiation criteria, the script performs the redirection. a second problem is that one more request is needed in order to fetch the real resource, slowing the availability...

HTTP response status codes - HTTP
uld be used by the client in future requests. 303 see other the server sent this response to direct the client to get the requested resource at another uri with a get request. 304 not modified this is used for caching purposes. it tells the client that the response has not been modified, so the client can continue to use the same cached version of the response. 305 use proxy defined in a previous version of the http specification to indicate that a requested response must be accessed by a proxy. it has been deprecated due to security concerns regarding in-band configuration of a proxy. 306 unused this response code is no longer used; it is just reserved. it was used in a previous version of the http/1.1 specification. 307 temporary redirect the server sends this response to direct...
... acceptable this response is sent when the web server, after performing server-driven content negotiation, doesn't find any content that conforms to the criteria given by the user agent. 407 proxy authentication required this is similar to 401 but authentication is needed to be done by a proxy. 408 request timeout this response is sent on an idle connection by some servers, even without any previous request by the client. it means that the server would like to shut down this unused connection. this response is used much more since some browsers, like chrome, firefox 27+, or ie9, use http pre-connection mechanisms to speed up surfing. also note that some servers merely shut down the connection without sending this message. 409 conflict this response is sent when a request conflicts with...
...t by a server that is not configured to produce responses for the combination of scheme and authority that are included in the request uri. 422 unprocessable entity (webdav) the request was well-formed but was unable to be followed due to semantic errors. 423 locked (webdav) the resource that is being accessed is locked. 424 failed dependency (webdav) the request failed due to failure of a previous request. 425 too early indicates that the server is unwilling to risk processing a request that might be replayed. 426 upgrade required the server refuses to perform the request using the current protocol but might be willing to do so after the client upgrades to a different protocol. the server sends an upgrade header in a 426 response to indicate the required protocol(s). 428 precondit...
... might be replayed. 426 upgrade required the server refuses to perform the request using the current protocol but might be willing to do so after the client upgrades to a different protocol. the server sends an upgrade header in a 426 response to indicate the required protocol(s). 428 precondition required the origin server requires the request to be conditional. this response is intended to prevent the 'lost update' problem, where a client gets a resource's state, modifies it, and puts it back to the server, when meanwhile a third party has modified the state on the server, leading to a conflict. 429 too many requests the user has sent too many requests in a given amount of time ("rate limiting"). 431 request header fields too large the server is unwilling to process the request beca...

Closures - JavaScript
ithin the source code to determine where that variable is available. nested functions have access to variables declared in their outer scope. closure consider the following code example: function makefunc() { var name = 'mozilla'; function displayname() { alert(name); } return displayname; } var myfunc = makefunc(); myfunc(); running this code has exactly the same effect as the previous example of the init() function above. what's different (and interesting) is that the displayname() inner function is returned from the outer function before being executed. at first glance, it might seem unintuitive that this code still works. in some programming languages, the local variables within a function exist for just the duration of that function's execution. once makefunc() finishe...
...vatecounter += val; } return { increment: function() { changeby(1); }, decrement: function() { changeby(-1); }, value: function() { return privatecounter; } }; })(); console.log(counter.value()); // 0. counter.increment(); counter.increment(); console.log(counter.value()); // 2. counter.decrement(); console.log(counter.value()); // 1. in previous examples, each closure had its own lexical environment. here though, there is a single lexical environment that is shared by the three functions: counter.increment, counter.decrement, and counter.value. the shared lexical environment is created in the body of an anonymous function, which is executed as soon as it has been defined (also known as an iife). the lexical environment contains two ...
.... the reason is that whenever the constructor is called, the methods would get reassigned (that is, for every object creation). ...
...n this.message; } }; however, redefining the prototype is not recommended. the following example instead appends to the existing prototype: function myobject(name, message) { this.name = name.tostring(); this.message = message.tostring(); } myobject.prototype.getname = function() { return this.name; }; myobject.prototype.getmessage = function() { return this.message; }; in the two previous examples, the inherited prototype can be shared by all objects and the method definitions need not occur at every object creation. see details of the object model for more. ...

Control flow and error handling - JavaScript
this chapter provides an overview of these statements. the javascript reference contains exhaustive details about the statements in this chapter. the semicolon (;) character is used to separate statements in javascript code. any javascript expression is also a statement. see expressions and operators for complete information about expressions. block statement the most basic statement is a block statement, which is used to group statements. ...
...production, regardless of any return statements in the try and catch blocks: function f() { try { console.log(0); throw 'bogus'; } catch(e) { console.log(1); return true; // this return statement is suspended // until finally block has completed console.log(2); // not reachable } finally { console.log(3); return false; // overwrites the previous "return" console.log(4); // not reachable } // "return false" is executed now console.log(5); // not reachable } console.log(f()); // 0, 1, 3, false overwriting of return values by the finally block also applies to exceptions thrown or re-thrown inside of the catch block: function f() { try { throw 'bogus'; } catch(e) { console.log('caught inner "bogus"'); throw...
... // while f() executes, the `finally` block returns false, // which overwrites the `throw` inside the above `catch` console.log('caught outer "bogus"'); } // output // caught inner "bogus" // false nesting try...catch statements you can nest one or more try...catch sta...
...n dosomethingerrorprone() { if (ourcodemakesamistake()) { throw (new error('the message')); } else { dosomethingtogetajavascripterror(); } } ⋮ try { dosomethingerrorprone(); } catch (e) { // now, we actually use `console.error()` console.error(e.name); // logs 'error' console.error(e.message); // logs 'the message', or a javascript error message } « previousnext » ...

Indexed collections - JavaScript
« previousnext » this chapter introduces collections of data which are ordered by an index value. this includes arrays and array-like constructs such as array objects and typedarray objects. array object an array is an ordered list of values that you refer to with a name and an index. for example, consider an array called emp, which contains employees' names indexed by their numerical employee number. so emp[0] would be employee number zero, emp[1] employee number one, and so on. javascript does not have an explicit array data type. however, you can use the predefined array object and its methods to work with arrays in your applications. the array object has methods for manipulating arrays in various ways, such as joining, reversing, and sorting them. it has a property ...
...elements from an array and (optionally) replaces them. it returns the items which were removed from the array. let myarray = new array('1', '2', '3', '4', '5') myarray.splice(1, 3, 'a', 'b', 'c', 'd') // myarray is now ["1", "a", "b", "c", "d", "5"] // this code started at index one (or where the "2" was), // removed 3 elements there, and then inserted all consecutive // elements in its place. reverse() transposes the elements of an array, in place: the first array element becomes the last and the last becomes the first. it returns a reference to the array. let myarray = new array('1', '2', '3') myarray.reverse() // transposes the array so that myarray = ["3", "2", "1"] sort() sorts the elements of an array in place, and returns a reference to the array. let myarray = new array('wind',...
...tialvalue is specified, then callback is called with initialvalue as the first parameter value and the value of the first item in the array as the second parameter value. if initialvalue is not specified, then callback's first two parameter values will be the first and second elements of the array. on every subsequent call, the first parameter's value will be whatever callback returned on the previous call, and the second parameter's value will be the next value in the array. if callback needs access to the index of the item being processed, on access to the entire array, they are available as optional parameters. let a = [10, 20, 30] let total = a.reduce(function(accumulator, currentvalue) { return accumulator + currentvalue }, 0) console.log(total) // prints 60 reduceright(callback[,...
...icted double double bigint64array -263 to 263-1 8 64-bit two's complement signed integer bigint int64_t (signed long long) biguint64array 0 to 264-1 8 64-bit unsigned integer bigint uint64_t (unsigned long long) for more information, see javascript typed arrays and the reference documentation for the different typedarray objects. « previousnext » ...

Introduction - JavaScript
what you should already know this guide assumes you have the following basic background: a general understanding of the internet and the world wide web (www). good working knowledge of hypertext markup language (html). some programming experience. if you are new to programming, try one of the tutorials linked on the main page about javascript. where to find javascript information the javascript documentation on mdn includes the following: learn web development provides information for beginners and introduces basic concepts of programming and the internet. ...
...ng pages, this guide introduces you to the javascript syntax and language features, so that you will be able to write more complex applications. but for now, remember to always include the (function(){"use strict"; before your code, and add })(); to the end of your code. ...
... language features, so that you will be able to write more complex applications. but for now, remember to always include the (function(){"use strict"; before your code, and add })(); to the end of your code. ...
... of your code. you will learn what these mean, but for now they can be thought of as doing the following: massively improve performance. prevent stupid semantics in javascript that trip up beginners. ...

Using Promises - JavaScript
since most people are consumers of already-created promises, this guide will explain consumption of returned promises before explaining how to create them. essentially, a promise is a returned object to which you attach callbacks, instead of passing callbacks into a function. imagine a function, createaudiofileasync(), which asynchronously generates a sound file given a configuration record and two callback functions, one called if the audio file is successfully created, and the other called if an error occurs. ...
...uccess or failure of the asynchronous operation. multiple callbacks may be added by calling then() several times. each callback is executed one after another, in the order in which they were inserted. one of the great things about using promises is chaining. chaining a common need is to execute two or more asynchronous operations back to back, where each subsequent operation starts when the previous operation succeeds, with the result from the previous step. we accomplish this by creating a promise chain. here's the magic: the then() function returns a new promise, different from the original: const promise = dosomething(); const promise2 = promise.then(successcallback, failurecallback); or const promise2 = dosomething().then(successcallback, failurecallback); this second promise ...
...llback) is short for then(null, failurecallback). you might see this expressed with arrow functions instead: dosomething() .then(result => dosomethingelse(result)) .then(newresult => dothirdthing(newresult)) .then(finalresult => { console.log(`got the final result: ${finalresult}`); }) .catch(failurecallback); important: always return results, otherwise callbacks won't catch the result of a previous promise (with arrow functions () => x is short for () => { return x; }). chaining after a catch it's possible to chain after a failure, i.e. a catch, which is useful to accomplish new actions even after an action failed in the chain. read the following example: new promise((resolve, reject) => { console.log('initial'); resolve(); }) .then(() => { throw new error('something fai...
...de runtime. you can capture these for analysis and handling by your code—or just to avoid having them cluttering up your output—by adding a handler for the unhandledrejection event, like this: window.addeventlistener("unhandledrejection", event => { /* you might start here by adding code to examine the promise specified by event.promise and the reason in event.reason */ event.preventdefault(); }, false); by calling the event's preventdefault() method, you tell the javascript runtime not to do its default action when rejected promises go unhandled. that default action usually involves logging the error to console, and this is indeed the case for node. ideally, of course, you should examine the rejected promises to make sure none of them are actual code bugs before just d...

Web video codec guide - Web media technologies
motion will appear. eventually the point of diminishing returns is reached. see frame rate below for details. assuming the frame rate is not reduced during encoding, higher frame rates cause larger compressed video sizes. motion compression of video typically works by comparing frames, finding where they differ, and constructing records containing enough information to update the previous frame to approximate the appearance of the following frame. the more successive frames differ from one another, the larger these differences are, and the less effective the compression is at avoiding the introduction of artifacts into the compressed video. the complexity introduced by motion results in larger intermediate frames due to the higher number of differences between frames). for ...
... or curved edges that should be smooth take on a jagged appearance, looking somewhat like a set of stair steps. this is the effect that is being reduced by "anti-aliasing" filters. wagon-wheel effect the wagon-wheel effect (or stroboscopic effect) is the visual effect that's commonly seen in film, in which a turning wheel appears to rotate at the wrong speed, or even in reverse, due to an interaction between the frame rate and the compression algorithm. the same effect can occur with any repeating pattern that moves, such as the ties on a railway line, posts along the side of a road, and so forth. this is a temporal (time-based) aliasing issue; the speed of the rotation interferes with the frequency of the sampling performed during compression or encoding. ...
...esigned to support efficient encoding and decoding of video in sizes including very high resolutions (including 8k video), with a structure specifically designed to let software take advantage of modern processors. theoretically, hevc can achieve compressed file sizes half that of avc but with comparable image quality. for example, each coding tree unit (ctu)—similar to the macroblock used in previous codecs—consists of a tree of luma values for each sample as well as a tree of chroma values for each chroma sample used in the same coding tree unit, as well as any required syntax elements. this structure supports easy processing by multiple cores. an interesting feature of hevc is that the main profile supports only 8 bit per component color with 4:2:0 chroma subsampling. also interestin...
... to alter the grays to create color pixels), the three channels are instead treated as three monochrome images, one for each color, which are then combined during rendering to produce a full-color image. hevc is a proprietary format and is covered by a number of patents. licensing is managed by mpeg la; fees are charged to developers rather than to content producers and distributors. ...

Codecs used by WebRTC - Web media technologies
the webrtc api makes it possible to construct web sites and apps that let users communicate in real time, using audio and/or video as well as optional data and other information. to communicate, the two devices need to be able to agree upon a mutually-understood codec for each track so they can successfully communicate and present the shared media. this guide reviews the codecs that browsers are required to implement as well as other codecs that some or all browsers support for webrtc. containerless media webrtc uses bare mediastreamtrack objects for each track being shared from one peer to another, without a container or even a mediastream associated with the tracks. which codecs can be within those tracks is not mandated by the webrtc specification. however, rfc 7742 specifies that all w...
...ver, rfc 7742 specifies that all webrtc-compatible browsers must support vp8 and h.264's constrained baseline profile for video, and rfc 7874 specifies that browsers must support at least the opus codec as well as g.711's pcma and pcmu formats. these two rfcs also lay out options that must be supported for each codec, as well as specific user comfort features such as echo cancelation. this guide reviews the codecs that browsers are required to implement as well as other codecs that some or all browsers support for webrtc. while compression is always a necessity when dealing with media on the web, it's of additional importance when videoconferencing in order to ensure that the participants are able to communicate without lag or interruptions. of secondary importance is the need to keep the v...
...e requirement. mandatory video codecs codec name profile(s) browser compatibility vp8 — chrome, edge, firefox, safari (12.1+) avc / h.264 constrained baseline (cb) chrome (52+), edge, firefox[1], safari [1] firefox for android 68 and later do not support avc (h.264) anymore. this is due to a change in google play store requirements that prevent firefox from downloading and installing the openh264 codec needed to handle h.264 in webrtc connections. see this article on sumo for details. for details on webrtc-related considerations for each codec, see the sub-sections below by following the links on each codec's name. complete details of what video codecs and configurations webrtc is required to support can be found in rfc 7742: webrt...
...portance in these objects: the payloadtype property, which is a one-byte value which uniquely identifies the described configuration. note: the two methods for obtaining lists of codecs shown here use different output types in their codec lists. be aware of this when using the results. customizing the codec list once you have a list of the available codecs, you can alter it and then send the revised list to rtcrtptransceiver.setcodecpreferences() to rearrange the codec list. this changes the order of preference of the codecs, letting you tell webrtc to prefer a different codec over all others. function changevideocodec(mimetype) { const transceivers = peerconnection.gettransceivers(); transceivers.foreach(transceiver => { const kind = transceiver.sender.track.kind; let send...

Privacy, permissions, and information security
o be granted conditionally, such as by permitting only a select group of people to access it, or only allowing the information to be accessed and used for a limited period of time. security security is about the active protection of data or a system against being accessed, downloaded, or operated by people or organizations that don't have permission to do so. good security practices aim to prevent unauthorized access to systems or data, regardless of what the target is. personal and private information <what kind of information is private or personal?> privacy risks <what are ways personal information can be gotten by third parties?> fingerprinting fingerprinting is a technique used to gather a variety of information that's made available by a user's browser and collating it un...
...printing is a technique used to gather a variety of information that's made available by a user's browser and collating it until it becomes possible to uniquely identify that user's browser. even seemingly innocuous information can in principle be used in the fingerprinting process, though the more unique the information is to the particular device the better. modern browsers take steps to help prevent fingerprinting-based attacks by either not allowing information to be accessed or, where the information must be made available, by introducing variations that prevent it from being used for identification purposes. for example, if a web site queries a user's browser for the elapsed time, a comparison of that time to the time as reported by the server might be useful as a factor in fingerprin...
... description certificate transparency an open standard for monitoring and auditing certificates, creating a database of public logs that can be used to help identify incorrect or malicious certificates content security policy provides the ability to define the extent to which a document's content can be accessed by other devices over the web; used in particular to prevent or mitigate attacks on the server feature policy lets web developers selectively enable, disable, and modify the behavior of certain features and apis both for a document and for subdocuments loaded in <iframe>s <iframe>'s allow attribute technically part of feature policy, the allow attribute on an <iframe> specifies which web features the document in the frame should ...
...ource and the document contains an <iframe> with the allow attribute to delegate that permission to the contents of the frame. in this case, it's possible for the user to wind up being prompted repeatedly for that same resource, first by the main page, then by the document in the frame. browsers may choose to provide ways around this. for example, in firefox 73, the user permission requests were revised so that when an <iframe> uses the allow keyword to delegate permission to the embeded document, the browser asks the user to grant the parent document permission to use the resource, and that permission is then shared with the embedded content that requested the resource to begin with. <-- diagram and/or code snippet to clarify things--> ...

d - SVG: Scalable Vector Graphics
r curve (c) command(s). formulae: po′ = pn = {xo + dx, yo + dy} ; pcs = {xo + dx1, yo + dy1} ; pce = {xo + dx2, yo + dy2} s (x2,y2, x,y)+ draw a smooth cubic bézier curve from the current point to the end point specified by x,y. the end control point is specified by x2,y2. the start control point is a reflection of the end control point of the previous curve command. if the previous command wasn't a cubic bézier curve, the start control point is the same as the curve starting point (current point). any subsequent pair(s) of coordinate pairs are interpreted as parameter(s) for implicit absolute smooth cubic bézier curve (s) commands. s (dx2,dy2, dx,dy)+ draw a smooth cubic bézier curve from the current point to the end poin...
...s. s (dx2,dy2, dx,dy)+ draw a smooth cubic bézier curve from the current point to the end point, which is the current point shifted by dx along the x-axis and dy along the y-axis. the end control point is the current point (starting point of the curve) shifted by dx2 along the x-axis and dy2 along the y-axis. the start control point is a reflection of the end control point of the previous curve command. if the previous command wasn't a cubic bézier curve, the start control point is the same as the curve starting point (current point). any subsequent pair(s) of coordinate pairs are interpreted as parameter(s) for implicit relative smooth cubic bézier curve (s) commands. examples html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/...
... coordinate pairs are interpreted as parameter(s) for implicit relative quadratic bézier curve (q) command(s). formulae: po′ = pn = {xo + dx, yo + dy} ; pc = {xo + dx1, yo + dy1} t (x,y)+ draw a smooth quadratic bézier curve from the current point to the end point specified by x,y. the control point is a reflection of the control point of the previous curve command. if the previous command wasn't a quadratic bézier curve, the control point is the same as the curve starting point (current point). any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit absolute smooth quadratic bézier curve (t) command(s). formula: po′ = pn = {x, y} t (dx,dy)+ draw a smooth quadratic bé...
...eted as parameter(s) for implicit absolute smooth quadratic bézier curve (t) command(s). formula: po′ = pn = {x, y} t (dx,dy)+ draw a smooth quadratic bézier curve from the current point to the end point, which is the current point shifted by dx along the x-axis and dy along the y-axis. the control point is a reflection of the control point of the previous curve command. if the previous command wasn't a quadratic bézier curve, the control point is the same as the curve starting point (current point). any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit relative smooth quadratic bézier curve (t) command(s). formulae: po′ = pn = {xo + dx, yo + dy} examples html,body,svg { height:100%...

orient - SVG: Scalable Vector Graphics
the orient attribute indicates how a marker is rotated when it is placed at its position on the shape. ...
... </marker> </defs> <polyline points="10,10 10,90 90,90" fill="none" stroke="black" marker-start="url(#arrow)" marker-end="url(#arrow)" /> <polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey" marker-start="url(#dataarrow)" marker-mid="url(#dataarrow)" marker-end="url(#dataarrow)" /> </svg> usage notes value auto | auto-start-reverse | <angle> | <number> default value 0 animatable yes (non-additive) auto this value indicates that the marker is oriented such that its positive x-axis is pointing in a direction relative to the path at the position the marker is placed. auto-start-reverse if placed by marker-start, the marker is oriented 180° different from the orientation that would be ...
... note: this allows a single arrowhead marker to be defined that can be used for both the start and end of a path, i.e. ...
...number> this value indicates an angle in degrees. the marker is oriented such that the specified angle is that measured between the shape's positive x-axis and the marker's positive x-axis. specifications specification status comment scalable vector graphics (svg) 2the definition of 'orient' in that specification. candidate recommendation added the auto-start-reverse value and simplified the descriptions of the values. scalable vector graphics (svg) 1.1 (second edition)the definition of 'orient' in that specification. recommendation initial definition ...

Clipping and masking - SVG: Scalable Vector Graphics
but when you try to create a semicircle in svg, you will find out the use of the following properties quickly. clipping refers to removing parts of elements defined by other parts. in this case, any half-transparent effects are not possible, it's an all-or-nothing approach. masking on the other hand allows soft edges by taking transparency and grey values of the mask into account. ...
...ample the red circle on blue background. the yellow stroke is set to 50% opacity, which leads effectively to a double-color stroke. ...
... circle on blue background. the yellow stroke is set to 50% opacity, which leads effectively to a double-color stroke. ...
... using well-known css techniques one of the most powerful tools in a web developer's toolbox is display: none. ...

Same-origin policy - Web security
ary by browser: internet explorer, firefox, chrome, safari (scroll down to cve-2010-0051) and opera. images displayed by <img>. media played by <video> and <audio>. external resources embedded with <object> and <embed>. fonts applied with @font-face. some browsers allow cross-origin fonts, others require same-origin. anything embedded by <iframe>. ...
.... some browsers allow cross-origin fonts, others require same-origin. anything embedded by <iframe>. sites can use the x-frame-options header to prevent cross-origin framing. how to allow cross-origin access use cors to allow cross-origin access. cors is a part of http that lets servers specify what hosts are permitted to load content from that server. how to block cross-origin access to prevent cross-origin writes, check an unguessable token in the request — known as a cross-site request forgery (csrf) token. you must prevent cross-origin reads of pages that require this token. ...
...in access use cors to allow cross-origin access. cors is a part of http that lets servers specify what hosts are permitted to load content from that server. how to block cross-origin access to prevent cross-origin writes, check an unguessable token in the request — known as a cross-site request forgery (csrf) token. you must prevent cross-origin reads of pages that require this token. to prevent cross-origin reads of a resource, ensure that it is not embeddable. it is often necessary to prevent embedding because embedding a resource always leaks some information about it. to prevent cross-origin embeds, ensure that your resource cannot be interpreted as one of the embeddable formats listed above. browsers may not respect the content-type header. for example, if you point a <script> t...
... cross-origin script api access javascript apis like iframe.contentwindow, window.parent, window.open, and window.opener allow documents to directly reference each other. when two documents do not have the same origin, these references provide very limited access to window and location objects, as described in the next two sections. ...

Classes and Inheritance - Archive of obsolete content
d, the constructor for shape would have been applied to a different object than the constructor for circle. we can now use the above constructor to create instances of the class circle: let circle = circle(2, 3, 5); circle instanceof circle; // => true circle.x; // => 2 circle.y; // => 3 circle.radius; // => 5 inheritance and prototypes there is a problem with the definition of circle in the previous section that we have glossed over thus far. consider the following: let circle = circle(2, 3, 5); circle.draw(); // => typeerror: circle.draw is not a function this is not quite right. the method draw is defined on instances of shape, so we definitely want it to be defined on instances of circle. the problem is that draw is defined on the prototype of shape, but not on the prototype of cir...
...the method draw on an instance of circle, it first looks for it on the object itself. when it cannot find the property there, it looks for it on the prototype of circle. when it cannot find the property there either, it looks for it on shape, at which point the lookup succeeds. the resulting behavior is what we were aiming for. inheritance and instanceof the single line of code we added in the previous section solved the problem with prototypes, but introduced a new problem with the instanceof operator. consider the following: let circle = circle(2, 3, 5); circle instanceof shape; // => false since instances of circle inherit from shape, we definitely want the result of this expression to be true. to understand why it is not, we need to understand how instanceof works. every prototype ha...
...this is all handled automatically. on the other hand, the call to the constructor for shape still has to be made explicitly. this is done by forwarding to the initialize method of the prototype of the base class. note that this is always safe, even if there is no initialize method defined on the base class:...

Modules - Archive of obsolete content
this becomes a problem when two scripts try to define the same property: // index.js: loadscript("www.foo.com/a.js"); loadscript("www.foo.com/b.js"); foo; // => 5 // a.js: foo = 3; // b.js: foo = 5; in the above example, the value of foo depends on the order in which the subscripts are loaded: there is no way to access the property foo defined by "a.js", since it is overwritten by "b.js". to prevent scripts from interfering with each other, loadscript should evaluate each script to be loaded in the scope of their own global object, and then return the global object as its result. in effect, any properties defined by the script being loaded on its global object are exported to the loading script. the script loader we obtained from components allows us to do just that: function loadscript(...
...the object it passed to the loadsubscript function is an ordinary object, which has the global object of the loading script as its prototype. this breaks encapsulation, as it allows the script being loaded to access the built-in constructors of the loading script, which are defined on its global object. the problem with breaking encapsulation like ...
...the object returned by sandbox is a wrapper to the sandbox, not the sandbox itself. a wrapper behaves exactly like the wrapped object, with one difference: for each property access/function it performs an access check to make sure that the calling script is actually allowed to access/call that property/function. ...

remote/child - Archive of obsolete content
k to the main process. properties port an event emitter that sends and receives events from the main process. isremote a boolean property indicating whether this process is remote from the main process or not. frames a list of the content frames in this process. each element in this list is a frame. listen to attach and detach events to hear as frames are created and destroyed. methods forevery calls the callback for every existing frame and any new frames created in the future. this is a shortcut for enumerating existing frames and then listening for attach events. getframeforwindow finds the frame for a top level dom window. addeventlistener adds an event listener for dom events dispatched to any existing and future frames. removeeventlistener removes an event listener that ...
...calls the callback for every existing frame and any new frames created in the future. this is a shortcut for enumerating existing frames and then listening for attach events. getframeforwindow finds the frame for a top level dom window. addeventlistener adds an event listener for dom events dispatched to any existing and future frames. removeeventlistener removes an event listener that was previously registered. properties port an event emitter that sends and receives events from every frame in this process. events attach triggered when a new content frame is opened (for example, the user opened a new tab). the event listener gets a frame object as an argument. at this point you can't access frame's content yet, but you can add event listeners: const { frames } = require("sdk/r...
...c events to the main process. methods addeventlistener(event, listener, iscapturing) adds an event listener for dom events dispatched by this content frame. this can include load and unload events from any content that is loaded in the frame. listeners are automatically removed when this frame is destroyed. removeeventlistener(event, listener, iscapturing) removes an event listener that was previously registered. properties port an event emitter that can be used to send and receive frame specific events to and from code in the main process. content the top level dom window currently displaying in this frame. istab a boolean property indicating whether this frame displays in one of the application's main browser tabs. events detach event emitted when this frame disconnects from ...

remote/parent - Archive of obsolete content
ocess } = require("sdk/remote/child"); const { processid } = require("sdk/system/runtime"); process.port.on("fetchid", () => { process.port.emit("id", processid); }); // main.js const { processes, remoterequire } = require("sdk/remote/parent"); // load "remote.js" into every current and future process remoterequire("./remote.js", module); // for every current and future process processes.forevery(process => { // ask for the process id process.port.emit("fetchid"); // first argument is always the process, then the message payload process.port.once("id", (process, id) => { console.log("child process is remote:" + process.isremote); console.log("child process id:" + id); }); }); content frame manipulation this demonstrates telling every current frame to link to a spec...
...here 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 an event emitter that sends messages to and receives messages from all processes. events attach event emitted when a new process is started. the event handler is called with a proc...
...e event handler is called with the process that detached. frames a list of the content frames across all processes. each element in this list is a frame. listen to attach and detach events to hear as frames are created and destroyed. const { frames } = require("sdk/remote/parent"); frames.on("attach", function(frame) { console.log("frame is attached: " + frame.frameelement); }); methods forevery(callback) calls the callback for every existing frame and any new frames created in the future. this is a shortcut for enumerating existing frames and then listening for attach events. properties port an event emitter that sends messages to and receives messages from all frames. events attach event emitted when a new frame is created. the event handler is called with a frame representin...

jpm - Archive of obsolete content
passed validation, was signed by mozilla, and a new signed xpi was downloaded to your working directory. your add-on failed validation, was not signed, and you got a link to a detailed report. after fixing the validation errors, you can run the command again. you add-on passed validation but it could not be automatically signed because your add-on is listed. listed add-ons will require a manual review before they can be signed. your add-on at this exact version number already exists, so it was not signed. increment the version number in your package.json file and run the command again. under the hood, jpm sign creates an unlisted add-on inside addons.mozilla.org, which means you must distribute the xpi file yourself for your users to install it. if you need to create a listed add-on, jus...
...key management page. on the amo key management page, this value is labeled "jwt issuer". --api-secret=jwt_secret api access secret (string) generated on the addons.mozilla.org key management page. this value should be guarded with care and never checked into version control. if your secret is compromised, another developer could upload add-ons to your account. you should revoke and regenerate compromised api credentials immediately. on the amo key management page, this value is labeled "jwt secret". --api-url-prefix=http://.../api an optional api url prefix in case you'd like to use a pre-production signing api. for example, you could pass https://addons-dev.allizom.org/api/v3 to use the dev instance of addons.mozilla.org. ...
... the location of your copy of the sdk modules along with -o: jpm run -o "/path/to/addon-sdk/" the path must be an absolute path and point to the sdk's root (not addon-sdk/sdk or addon-sdk/sdk/lib, for instance). supporting updates for self-hosted add-ons this feature is 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 ...

Storing annotations - Archive of obsolete content
this is implemented as a panel that's shown in response to the widget's right-click message. the panel has three new files associated with it: a content-script which builds the panel content a simple html file used as a template for the panel's content a simple css file to provide some basic styling. these three files can all go in a new subdirectory of data whi...
...notationlist.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 panel from the array of annotations i...
...while (simplestorage.quotausage > 1) simplestorage.storage.annotations.pop(); }); because we use a notification to alert the user, we need to import the notifications module: var notifications = require("sdk/notifications"); (it should be obvious that this is an incredibly unhelpful way to deal with the problem. a real add-on should give the user a chance to choose which data to keep, and prevent the user from adding any more data until the add-on is back under quota.) respecting private browsing since annotations record the user's browsing history we should avoid recording annotations in private windows. there's a very simple way to do this: do nothing. by omitting the "private-browsing" key from the annotator's "package.json" file, the annotator opts out of private browsing altoge...

Chrome Authority - Archive of obsolete content
"chrome") statement is the only way to access chrome functionality and the components api. the components object should not be accessed from modules. the sdk tools will emit a warning if it sees module code which references components directly. your modules should refrain from using chrome privileges unless they are absolutely necessary. chrome-authority-using modules must receive extra security review, and most bugs in these modules are security-critical. manifest generation the manifest is a list, included in the generated xpi, which specifies which modules have requested require() access to which other modules. it also records which modules have requested chrome access. this list is generated by scanning all included modules for require(xyz) statements and recording the particular "xyz"...
...ded in the generated xpi, which specifies which modules have requested require() access to which other modules. it also records which modules have requested chrome access. this list is generated by scanning all included modules for require(xyz) statements and recording the particular "xyz" strings that they reference. when the manifest implementation is complete the runtime loader will actually prevent modules from require()ing modules that are not listed in the manifest. likewise, it will prevent modules from getting chrome authority unless the manifest indicates that they have asked for it. this will ensure that reviewers see the same authority restrictions that are enforced upon the running code, increasing the effectiveness of the time spent reviewing the add-on. (until this work is comp...
...their statements must therefore be clear and easy to parse. a future manifest format may move the declaration portion out to a separate file, to allow for more fine-grained expression of authority. commands that build a manifest, like "jpm xpi" or "jpm run", will sca...

Enhanced Extension Installation - Archive of obsolete content
s not robust enough. when a newer version fo an existing extension is installed, files for the newer version are copied into the folder used by the older version, and obsolete files are not cleaned up. this can lead to incompatibilities, mysterious crashes and other problems. there are not enough guards in the upgrade and uninstall process to handle failure and abort the operation, restoring the previous state. items that are installed must be visible in the extension manager user interface, even if the extension type is just an integration hook that has no meaningful ui presence. extension installation and registration is also prohibitively difficult/annoying for developers, who are forced to either dangerously hand-edit all the appropriate manifest files, or package their code as a xpi an...
...containment is expressed as a property, user-defined ordering can be respected. extension authors installing into restricted install locations can specify that their item does not show up in the extensions ui by using the <em:hidden>true<em:hidden> property in their install manifests. this property is ignored for extensions installed into unrestricted locations, such as the profile location, to prevent abuse. there is more logging for failures in the installation and update process. the set of error logs written is still neither perfect nor complete, but it's a very good start. log strings are written to the application's error console (in anticipation of that api automatically logging to a file) and to the terminal window. we now check more effectively for system integrity during startup.
...effectively for system integrity during startup. we ask each install location if it is functioning (for a directory install location such as app-profile or app-global the location is functioning if it the directory exists. if any location is not functioning, or any of the manifests listed above does not exist, all manifests are removed and the system rebuilds everything from scratch. this should prevent against random file deletions and allow developers to easily reset their state by deleting one of the required system files. since we can now install by simply detecting the presence of a {guid} folder under the app-profile and app-global install locations, we no longer need installed-extensions.txt for registration of pre-configured items such as the default theme. the firefox build system w...

Extension Versioning, Update and Compatibility - Archive of obsolete content
ng the updateurl. the information returned can be used to notify the user of an updated version to the add-on as well as inform the application of new application versions that the add-on is compatible with. note: starting in gecko 2.0, the automatic add-on update process properly supports cases in which the add-on's guid changes by uninstalling the old version and then installing the new one. previously, it was possible to wind up with two copies of the same add-on installed. compatibility updates during the automatic update checks, applications look for both new versions and updated compatibility information about the currently installed version of an add-on. this means that if your update manifest contains an entry for the currently installed version of the add-on, and the entry's tar...
...you can list multiple add-ons ...
... </em:updates> <em:signature>migtma0gcsqgsib3dqebbquaa4gbamo1o2gwsccth1gwymgscfanakpn40pjfowt ub2hvdg8+oxmcif8d/9evwm8eh/ixuxyzlmrzts3o5tv9eway5ubctqdf1wgtsgk jrgzow1fitkzi7w0//c8ekdmlatguegfns2iltd5p/0kh/hf1rpc1wuqeqkcd4+l bcvq13ad</em:signature> </rdf:description> <!-- this represents the same description within the li from the previous example --> <rdf:description about="urn:mozilla:extension:foobar@developer.mozilla.org:2.2"> <em:version>2.2</em:version> <!-- trimmed the rest of the contents here --> </rdf:description> <rdf:description about="urn:mozilla:extension:foobar@developer.mozilla.org:2.5"> <em:version>2.5</em:version> <!-- trimmed the rest of the contents here --> </rdf:description> <...

Install Manifests - Archive of obsolete content
of add-on. 2 extensions 4 themes 8 locale 32 multiple item package 64 spell check dictionary 128 telemetry experiment 256 webextension experiment examples <em:type>2</em:type> this property was added for firefox 1.5, and is only required for add-on types other than extensions and themes. firefox 2 and previous supported a value of 16 to represent plug-ins. in firefox 3 this has been removed. version a version string identifying the version of the add-on being supplied. for firefox/thunderbird 1.0, the format must conform to the rules specified in extension versioning, update and compatibility. for firefox/thunderbird 1.5, see toolkit version format. examples <em:version>2.0</em:version> <em:v...
...l install on any linux build of the application, regardless of its abi, but not on a windows cygwin build. there may be builds of firefox and thunderbird which do not "know" their abi (most likely ports to rare platforms, or non-official builds). these builds will refuse to install any add-on that requires a specific abi for their platform. this property was added for firefox/thunderbird 1.5. previous versions of these applications will ignore the restrictions and install the add-on regardless of the platform. translator the name(s) of translators. you may specify more than one of this value to specify multiple translators. examples <em:translator>janez novak</em:translator> <em:translator>kari nordmann</em:translator> unpack a true or false value that tells the application whether t...
...when true makes the add-on not show up in the add-ons list, provided the add-on is installed in a restricted access area (so it does not work for add-ons installed in the profile). this is for bundling integration hooks to larger applications where having an entry in the extensions list does not make sense. note: this property is no longer supported under gecko 1.9.2 (firefox 3.6) or later, to prevent extensions from being installed in such a way that the user might not be able to tell they're installed. examples <em:hidden>true</em:hidden> requires firefox 2.0 - 3.6.x. other versions will ignore the restrictions and install the add-on regardless of the requirements. see replacement for install.rdf property "requires" discussion for rationale behind removing this feature and the sugge...

Interaction between privileged and non-privileged pages - Archive of obsolete content
lback could look like this: in the extension: var myextension = { mylistener: function(evt) { alert("received from web page: " + evt.target.getattribute("attribute1") + "/" + evt.target.getattribute("attribute2")); /* the extension answers the page*/ evt.target.setattribute("attribute3", "the extension"); var doc = evt.target.ownerdocument; var answerevt = doc.createelement("myextensionanswer"); answerevt.setattribute("part1", "answers this."); doc.documentelement.appendchild(answerevt); var event = doc.createevent("htmlevents"); event.initevent("myanswerevent", true, false); answerevt.dispatchevent(event); } } document.addeventlistener("myextensionevent", function(e) { myextension.mylistener(e); }, false, true); // the ...
...event = doc.createevent("htmlevents"); event.initevent("myanswerevent", true, false); answerevt.dispatchevent(event); } } document.addeventlistener("myextensionevent", function(e) { myextension.mylistener(e); }, false, true); // the last value is a mozilla-specific value to indicate untrusted content is allowed to trigger the event. ...
...turn settimeout(function() { callback({quux: 4}); }, 3000); } if (request.mozilla) { return alert("alert in chrome"); } return callback(null); } } something.listen_request(something.callback); message passing in chromium sending structured data the above mechanisms use element attributes and are thus only strings. you may want to transfer objects. gecko prevents chrome to access custom object properties added by the content, because that can create security holes. a workaround is to treat the communication between webpage and chrome as a normal network protocol and use xml. with element attributes and e4x, this is fairly easy. you do need to convert your data to/from e4x objects, though. and your chrome needs to carefully check every value passed (y...

Chapter 2: Technologies used in developing extensions - Archive of obsolete content
and was originally published in japanese for the firefox developers conference summer 2007. shimoda-san is a co-author of firefox 3 hacks (o'reilly japan, 2008). before we dive into a thorough explanation, we'll quickly introduce the technologies used to develop firefox extensions. we will also look at the minimum knowledge you'll need to have in order to develop for firefox. technologies used to develop firefox extensions firefox and its extensions are both based on and developed with technologies widely used on the web. ...
...uilt using these four technologies. figure 1: role of each technology in firefox in addition to these technologies, extension development will require you to learn about how to confer privileges to overcome security restrictions on code that you write, and how to embed your code into the firefox ui. these issues are discussed in chapter 5. the minimum knowledge required in the interest of brevity, i will omit explanations of widely understood technologies, and focus instead on introducing new technologies you will need to understand in order to develop for firefox. i will assume that you have experience developing with dynamic html, as well as the topics below. for more information on these technologies, please refer to other sources. xml coding css coding basic javascript syntax ...
...ets a label attribute. ...

Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
and was originally published in japanese for the firefox developers conference summer 2007. mr. shimoda is a co-author of firefox 3 hacks (o'reilly japan, 2008). this chapter explains how to use xpcom to implement advanced processes using only javascript. introduction javascript lacks functions for opening files and character-code conversion, among other things. a different mechanism is needed to perform these functions. ...
... listing 18: converting text from iso-2022-jp to unicode converter.charset = 'iso-2022-jp'; var unicode_str = converter.converttounicode(iso2022jp_str); reading and writing preferences you can use the nsiprefbranch function to access firefox's preferences system. this function can get and set preferences with three types of values: boo...
...eateinstance(components.interfaces.nsistringinputstream); content = 'content-type: application/x-www-form-urlencoded\n'+ 'content-length: '+content.length+'\n\n'+ content; postdata.setdata(content, content.length); var flags = components.interfaces.nsiwebnavigation.load_flags_none; browser.loaduriwithflags('http://piro.sakura.ne.jp/', flags, referrer, null, postdata); « previousnext » ...

Adding menus and submenus - Archive of obsolete content
in this section we'll look into more specialized menus and what you can do with them. adding a new menu we already saw how to add menus in overlays and, as you may have imagined, you can nest submenus as deep as you want. you should avoid having deep menus or too many options, since they are confusing for most users. if your extension requires custom xul windows, you may also need to have menus on those windows. you can do this with a menubar. the menubar element should be a child of a toolbox element because it is treated like another toolbar on systems other than mac os x. ...
...make firefox (and your users) wait for it to fill up before displaying anything. it's best to show an item with a throbber image (see chrome://global/skin/icons/loading_16.png) so the user knows there's something going on, and asynchronously fill its contents. we'll look into some asynchronous techniques further ahead in the tutorial. adding elements to existing menus just as explained in the previous sections, the best place to overlay your extension menu is inside the tools menu. that is, unless there's a place inside the menu structure where your extension menus make more sense. if you're overlaying the tools menu, your overlay code should have something like this: <menupopup id="menu_toolspopup"> <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;" accesskey...
...row segment of the image instead. this seems to happen when remote images are used. menu items are not dynamically updated while they are open. for example, you could have a menuitem that tells you the current time and is updated every second. on other systems you would be able to see the item update itself without having to close the menu and then reopen. this is not the case on mac os. « previousnext » this tutorial was kindly donated to mozilla by appcoast. ...

Connecting to Remote Content - Archive of obsolete content
it is an integral part of the modern web, and all major browsers support it. besides xml, it can be used to retrieve data in other formats, for example json, html and plain text. in this section we'll look into the xml and json communication mechanisms. ...
...uage, it uses a non-xml syntax that provides a flexible way of addressing (pointing to) different parts of an xml document. taken from the xpath page. you can use xpath to quickly access specific nodes in an xml or html document with a simple query mechanism. xpath can also be used to extract information from web pages once they load, along with the page load interception techniques discussed previously. xpath is very useful for cases when you're receiving large and complex xml files, and you only need some of the data contained in them. using xpath to parse a complete xml document is probably not a good idea performance-wise. using xslt xslt (extensible stylesheet language transformations) is another tool used to manipulate xml documents and transform them into other forms of text outp...
..., so use it sparingly. a tutorial on tamper data can be found here. note: you should always test your connection code to cover edge cases, like when there is no internet connection, or the computer is connected to a local network with no internet access (like at an airport or hotel room). make sure you're not telling users everything is ok, or worse, bombarding them with error messages. « previousnext » this tutorial was kindly donated to mozilla by appcoast. ...

Custom XUL Elements with XBL - Archive of obsolete content
the element that the binding is attached to, called the bound element, acquires the new behavior specified by the binding. taken from the xbl page. this somewhat cryptic explanation describes a very simple concept: with xbl you can create your own custom elements. xbl is heavily used in xul, but in theory it could be applied to any xml language. xbl was submitted to the w3c for standardization, but for now it's used in xul almost exclusively. with xbl you can define new elements and define their properties, attributes, methods and event handlers. ...
...nymouselementbyattribute dom method: let namelabel = document.getanonymouselementbyattribute( this, "anonid", "xulshoolhello-name-label"); implementation the implementation section defines most of the scripting side of your element. here you can define methods and properties, as well as a constructor and a destructor for your element. javascript code is enclosed in cdata sections to prevent js and xml syntax conflicts. properties and fields the field and property tags allow you to handle element variables and access them from outside of the element. a field holds a value that can be changed, except when the readonly attribute is set. it's very similar to a js object variable, and we generally use a field for private variables inside of the element. <field name="fieldname">d...
... ...

Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
failure to do so can lead to execution or remote scripts, and in the worst cases to privilege escalation which can leave a user's pc open to remote attack. building dom trees in most cases, dom trees should be built exclusively with dom creation methods. the following methods will all safely create a dom tree without risk of remote execution. ...
... var href = "http://www.google.com/"; var text = "google"; document.getelementbyid("target-div").innerhtml = '<div>\ <a href="' + escapehtml(href) + '" target="_top">' + escapehtml(text) + '</a>\ </div>' it needs to be stressed that this method should not be used in new code and is only a temporary measure to shore up legacy code bases. safe...
... elem.setattribute("onclick", "openwindow(this.getattribute('href'))"); } escaping functions when the code fragment in question is not an event handler attribute and there is no feasible way to pass the data through other means, they must be escaped with functions such as uneval, string.quote, json.stringify, or number. generating scripts in this matter is deprecated and should be avoided wherever possible, but is relatively safe and sometimes acceptable. function createscript(href, otherstuff) { var script = function (href, otherstuff) { dostuffwith(href); dootherstuff(); for (var somestuff in otherstuff) dosomemorestuffwith(somestuff); } return script.tosource() + "(" + [string.quote(href), uneval(otherstuff)] + ")"; } safely using rem...

JavaScript Object Management - Archive of obsolete content
the first step to good javascript object management is having a namespace, or a javascript object that contains our code and data, that you know will not conflict with firefox code or other extensions. namespace declaration is best located in a file of its own, so that you have this one js file that should be included in all of your xul files. we'll be using the placeholder 〈namespace〉 below. this needs to be replaced with an identifier name which is unique to your add-on. ...
...rt, code modules must be loaded using a file: or resource: url pointing to a file on the disk. in particular, chrome: urls (even those that point to a file outside a jar archive) are not valid. to get a better idea, let's look at the code of the modified hello world example. we have defined two files, one to declare namespaces and another one for the message count functionality mentioned in the previous exercise. here again we're using a placeholder, 〈modulenamespace〉, for the identifier name that you'll need to choose. var exported_symbols = [ "〈modulenamespace〉" ]; const { classes: cc, interfaces: ci } = components; /** * 〈modulenamespace〉 namespace. */ var 〈modulenamespace〉 = {}; this should all be familiar enough. we're declaring the namespace we'll use at the...
...h. jsm is the best solution to handle objects that are window-independent. in the following section we'll discuss xpcom, which is an older alternative to jsm and one of the foundations of mozilla applications. you shouldn't skip that section because there are many common situations in extension development where you'll have to use xpcom, maybe even implement xpcom components of your own. « previousnext » this tutorial was kindly donated to mozilla by appcoast. ...

Observer Notifications - Archive of obsolete content
for example, you might want to notify that a task is completed, and then several different actions must be performed. you could do that by calling all those functions directly, but xpcom offers you a better and cleaner way to achieve that using observers and the observer service. an observer is an object that is responsible to observe (wait for) notifications and then to carry out subsequent actions. to create an observer, you need to implement the nsiobserver interface. the interface has only one method observe() which takes three parameters. ...
..., the second parameter is the notification topic and the last parameter is an additional string to pass to those observers (can be null). observerservice.notifyobservers(null, "xulschoolhello-test-topic", "hello"); non-chrome to chrome communication non-chrome to chrome communication is one of the main uses of observers. by non-chrome we mean javascript code modules or xpcom. as we saw in previous sections, you can use javascript code module and xpcom objects very easily from the chrome. but given that chrome is window-dependent and non-chrome objects are not, it's tricky to send a message to the chrome. you would have to invoke a method for the chrome objects in all windows. it's much easier to use observers in this case. let's see the following example code on how to send out a noti...
...observer will be run several times when a notification is sent. useful firefox notifications we have covered sending and receiving custom notification topics using observers and the observer service. in firefox, there are many built-in observer topics that you can observe as well. the observer notifications page lists some useful topics and is definitely worth spending time studying it. « previousnext » this tutorial was kindly donated to mozilla by appcoast. ...

The Box Model - Archive of obsolete content
this is the system that determines how all elements are laid out visually in a xul document. it is important to know how it works in order to make interfaces that are easy to localize, skin and use in different types of operating systems, screen sizes and resolutions. the xul box model is a significant improvement over the html layout model, which is mostly vertical. with xul you can define vertically oriented as well as horizontally oriented interfaces, providing greater flexibility in interface design. ...
... not be kept. you can have even more control over the size of flexible elements using the minwidth, maxwidth, minheight and maxheight attributes, or their css counterparts: min-width, max-width, min-height and max-height. the latter are recommended to keep style code in the skin section of the chrome. as their names should make clear, you can control the flexibility boundaries of elements, thus preventing them from growing or shrinking too much. all css properties involving lengths should be handled with caution. we recommended that you use proportional units (em, %) instead of absolute units (px) whenever possible. using the former allows the ui to scale proportionately depending on font size settings, which are often changed by users with accessibility limitations. a common exception to...
... and status bars, font styles, sizes, etc. note that this is not really what you would expect from an extension, it's more like a theme. however, it's very interesting and useful to see how you can manipulate the appearance of firefox so easily. if you're not familiar with css, you should read this css getting started guide and other online resources before continuing with this tutorial. « previousnext » this tutorial was kindly donated to mozilla by appcoast. ...

User Notifications and Alerts - Archive of obsolete content
using modal dialogs and alerts is usually a bad idea. they interrupt the user's workflow, demanding immediate action before anything else can be done. users will find them annoying and probably will learn to dismiss them as quickly as possible without even reading what they have to say. or they will just get rid of your add-on. this section lists a few alternatives that give you the possibility of notifying the user and requesting action without being too annoying. the notificationbox element you have probably seen these before. the "remember password" prompt is the one that shows up the most often. ...
...tionbox so that we get the notification box that corresponds to the tab currently on display. the appendnotification method takes the message, id, image (32x32), level and buttons. the level argument determines the "strength" of the message, indicated by its background color when it is displayed. you should look for the level that better fits your message, and use the lowest applicable level, to prevent the user from getting used to dismissing high-level notifications. the buttons are represented by simple js data objects. this is all explained in detail in the notificationbox page. notification boxes are designed to be easily dismissed. all notifications have an additional close button, so you should take into account that it's possible that none of your custom buttons will be clicked. also...
... ...

XPCOM Objects - Archive of obsolete content
taken from the xpcom page. firefox can be seen as composed of two layers. the largest of the two is a compiled platform, mostly written in c++. on top of it lies the chrome, mostly written in xml, javascript and css. in fact, you can separate the two. we often mention other "mozilla based applications". well, those are applications that, simply put, take the underlying platform with perhaps a few changes and additions, and then write their own chrome layer. this lower layer is called xulrunner, and it is a very powerful platform, providing a very robust development base for web-enabled, cross-platform applications. ...
...ay in which the two layers (xulrunner and chrome) communicate. most of the objects and functions in the lower layers are hidden from the chrome; those that need to be publicized are exposed through xpcom components and interfaces. you can think of xpcom as a reference to all the capabilities available on the lower layers of firefox. using xpcom components is relatively simple, as you've seen in previous examples. this.obsservice = cc["@mozilla.org/observer-service;1"].getservice(ci.nsiobserverservice); the cc object (components.classes) is an index to static objects and class definitions available through xpcom. the string between the brackets is just an identifier, in this case corresponding to the observer service. you'll usually know what string to use by reading examples and docume...
... components are no longer supported in firefox extensions. they are only available to code built into firefox itself. if you are writing an extension and need to interact with 3rd-party binary code, the best way to do that is to use the system/child_process ipc layer from the addon sdk. the c-types module is also available as a bridge to load and use shared libraries from extension code. « previousnext » this tutorial was kindly donated to mozilla by appcoast. ...