nsITaskbarProgress
widget/public/nsitaskbarprogress.idlscriptable starting in windows 7, applications can display a progress notification in the taskbar.
... 1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview void setprogressstate(in nstaskbarprogressstate state, in unsigned long long currentvalue optional, in unsigned long long maxvalue optional); constants constant value description state_no_progress 0 stop displaying progress on the taskbar button.
... state_indeterminate 1 display a cycling, indeterminate progress bar.
...And 9 more matches

Progress Listeners - Archive of obsolete content
progress listeners progress listeners allow extensions to be notified of events associated with documents loading in the browser and with tab switching events.
... progress listeners implement the nsiwebprogresslistener interface.
... in the examples below the progress listener is attached to the tabbrowser, which means you don't get any notifications for inactive tabs.
...And 8 more matches

ProgressEvent - Web APIs
the progressevent interface represents events measuring progress of an underlying process, like an http request (for an xmlhttprequest, or the loading of the underlying resource of an <img>, <audio>, <video>, <style> or <link>).
... 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/progressevent" target="_top"><rect x="116" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">progressevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor progresseve...
...nt() creates a progressevent event with the given parameters.
...And 8 more matches

SVGRectElement - Web APIs
the svgrectelement interface provides access to the properties of <rect> elements, as well as methods to manipulate them.
...0" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="171" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggeometryelement</text></a><polyline points="81,89 71,84 71,94 81,89" stroke="#d4dde4" fill="none"/><line x1="71" y1="89" x2="41" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgrectelement" target="_top"><rect x="-99" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-29" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgrectelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this inter...
... svgrectelement.x read only returns an svganimatedlength corresponding to the x attribute of the given <rect> element.
...And 7 more matches

progressmeter - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a meter which can be used to display the progress of a lengthy operation.
...in addition, an indeterminate progressmeter may be created by setting the mode attribute to undetermined.
... attributes max, mode, value properties accessibletype, max, mode, value examples <progressmeter mode="determined" value="82"/> <progressmeter mode="undetermined"/> <!-- switching modes while the mouse is over a button --> <progressmeter mode="determined" id="myprogress"/> <button label="example" onmouseover="setloading(true)" onmouseout="setloading(false)"/> function setloading(state){ document.getelementbyid('myprogress').mode = (state) ?
...And 6 more matches

nsIDOMProgressEvent
dom/interfaces/events/nsidomprogressevent.idlscriptable this interface represents the events sent with progress information while uploading data using the xmlhttprequest object.
... 1.0 66 introduced gecko 1.9.1 deprecated gecko 22 inherits from: nsidomevent last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) the nsidomprogressevent is used in the media elements (<video> and <audio>) to inform interested code of the progress of the media download.
... this implementation is a placeholder until the specification is complete, and is compatible with the webkit progressevent.
...And 6 more matches

HTMLProgressElement - Web APIs
the htmlprogresselement interface provides special properties and methods (beyond the regular htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of <progress> elements.
...,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlprogresselement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlprogresselement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inher...
... htmlprogresselement.max is a double value reflecting the content attribute of the same name, limited to numbers greater than zero.
...And 6 more matches

Customizing the download progress bar - Archive of obsolete content
this example illustrates how to customize the progress bar displayed for a given download in the downloads window.
... the myextension.css file will look something like this: richlistitem progressmeter { %ifdef xp_win min-height: 17px !important; %else %ifdef xp_macosx -moz-appearance: none !important; background-image: url(chrome://myextension/skin/progress_bg_osx.png) !important; %endif %endif } richlistitem .progress-bar { %ifdef xp_win -moz-appearance: none !important; background-image: url(chrome://myextension/skin/progress_fd_win.png) !important; %else %i...
...fdef xp_macosx background-image: url(chrome://myextension/skin/progress_fd_osx.gif) !important; %endif %endif } note: this file only supports windows and mac, but it would be straightforward to add support for linux.
...And 5 more matches

GRE Registration - Archive of obsolete content
successfully embedding the gre requires that information about installed gres be stored on the system.
... windows on windows, gre registration information is kept in the win32 registry under the hkey_local_machine/software/mozilla.org/gre and hkey_current_user/software/mozilla.org/gre keys.
... 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 previous gre information in hklm/software/mozilla.org/gre/<version>.
...And 5 more matches

mozIStorageAggregateFunction
it allows consumers to add aggregate functions that are available to sql queries and triggers.
... an aggregate function is a function that returns one value from a series of values.
... there are a number of already defined aggregate functions provided by sqlite.
...And 5 more matches

SVGRect - Web APIs
the svgrect represents a rectangle.
... an svgrect object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgrect" target="_top"><rect x="1" y="1" width="75" height="50" fill="#f4f7f8" 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">svgrect</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties svgrect.x the exact effect of this coordinate depends on each element.
...And 5 more matches

nsIProgressEventSink
netwerk/base/public/nsiprogresseventsink.idlscriptable this interface is used to asynchronously convey channel status and progress information that is generally not critical to the processing of the channel.
... inherits from: nsisupports last changed in gecko 1.7 this interface is used to asynchronously convey channel status and progress information that is generally not critical to the processing of the channel.
...the channel will begin passing notifications to the progress event sink after its asyncopen method has been called.
...And 4 more matches

ProgressEvent() - Web APIs
the progressevent() constructor returns a newly created progressevent, representing the current completion of a long process.
... syntax progressevent = new progressevent(type, {lengthcomputable: abooleanvalue, loaded: anumber, total: anumber}); arguments the progressevent() constructor also inherits arguments from event().
... type is a domstring representing the name of the type of the progressevent.
...And 4 more matches

mozIStorageProgressHandler
the mozistorageprogresshandler interface lets storage consumers receive callbacks during the execution of sqlite requests.
... storage/public/mozistorageprogresshandler.idlscriptable please add a summary to this article.
... last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) inherits from: nsisupports method overview boolean onprogress(in mozistorageconnection aconnection); methods onprogress() the onprogress() method is called periodically while an sqlite operation is ongoing.
...And 3 more matches

::-webkit-progress-inner-element - CSS: Cascading Style Sheets
the ::-webkit-progress-inner-element css pseudo-element represents the outermost container of the <progress> element.
... it is the parent of the ::-webkit-progress-bar pseudo-element.
... note: in order to let ::-webkit-progress-value take effect, -webkit-appearance needs to be set to none on the <progress> element.
...And 3 more matches

AggregateError - JavaScript
the aggregateerror object represents an error when several errors need to be wrapped in a single error.
... constructor aggregateerror() creates a new aggregateerror object.
... instance properties aggregateerror.prototype.message error message, defaults to "".
...And 3 more matches

Aggregating the In-Memory Datasource
introduction you can use xpcom aggregation1 with the in-memory datasource.
...aggregation to the rescue!
...that is, you want to reflect the contents of something as an rdf graph (presumably so that it can be aggregated with other information or displayed as styled content).
...And 2 more matches

HTMLMediaElement: progress event - Web APIs
the progress event is fired periodically as the browser loads a resource.
... bubbles no cancelable no interface event event handler property onprogress examples live example html <div class="example"> <button type="button">load video</button> <video controls width="250"></video> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "button log" "video log"; } button { grid-area: button; width: 10rem; margin: .5rem 0; } video { grid-area: video; } .event-log { grid-area: log; } .event-log>labe...
... { display: block; } javascript const loadvideo = document.queryselector('button'); const video = document.queryselector('video'); const eventlog = document.queryselector('.event-log-contents'); let source = null; function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}\n`; } video.addeventlistener('loadstart', handleevent); video.addeventlistener('progress', handleevent); video.addeventlistener('canplay', handleevent); video.addeventlistener('canplaythrough', handleevent); loadvideo.addeventlistener('click', () => { if (source) { document.location.reload(); } else { loadvideo.textcontent = "reset example"; source = document.createelement('source'); source.setattribute('src', 'https://interactive-examples.
...And 2 more matches

RTCPeerConnection.pendingRemoteDescription - Web APIs
the read-only property rtcpeerconnection.pendingremotedescription returns an rtcsessiondescription object describing a pending configuration change for the remote end of the connection.
... syntax sessiondescription = rtcpeerconnection.pendingremotedescription; return value if a remote description change is in progress, this is an rtcsessiondescription describing the proposed configuration.
... example this example looks at the pendingremotedescription to determine whether or not there's a description change being processed.
...And 2 more matches

::-webkit-progress-bar - CSS: Cascading Style Sheets
the ::-webkit-progress-bar css pseudo-element represents the entire bar of a <progress> element.
... normally it's only visible as the unfilled portion of the bar, since by default it's rendered below the ::-webkit-progress-value pseudo-element.
... it is a child of the ::-webkit-progress-inner-element pseudo-element and the parent of the ::-webkit-progress-value pseudo-element.
...And 2 more matches

::-webkit-progress-value - CSS: Cascading Style Sheets
the ::-webkit-progress-value css pseudo-element represents the filled-in portion of the bar of a <progress> element.
... it is a child of the ::-webkit-progress-bar pseudo-element.
... note: in order to let ::-webkit-progress-value take effect, -webkit-appearance needs to be set to none on the <progress> element.
...And 2 more matches

progressmeter.mode - Archive of obsolete content
« xul reference home mode type: one of the values below a determinedprogressmeter is used in cases where you know how long an operation will take.
... an undeterminedprogressmeter can be used when you don't and will typically be drawn as a spinning barber pole.
... determined the progress meter uses its value attribute to determine the amount of the bar that is filled in.
... undetermined the progressmeter is indeterminate.

Progressive Enhancement - MDN Web Docs Glossary: Definitions of Web-related terms
progressive enhancement is a design philosophy that provides a baseline of essential content and functionality to as many users as possible, while delivering the best possible experience only to users of the most modern browsers that can run all the required code.
... progressive enhancement is a useful technique that allows web developers to focus on developing the best possible websites while making those websites work on multiple unknown user agents.
... graceful degradation is related but is not the same thing and is often seen as going in the opposite direction to progressive enhancement.
... learn more general knowledge progressive enhancement on wikipedia ...

AggregateError() constructor - JavaScript
the aggregateerror() constructor creates an error for several errors that need to be wrapped in a single error.
... syntax new aggregateerror(errors[, message]) parameters errors an iterable of errors, may not actually be error instances.
... messageoptional an optional human-readable description of the aggregate error.
... examples creating an aggregateerror try { throw new aggregateerror([ new error("some error"), ], 'hello'); } catch (e) { console.log(e instanceof aggregateerror); // true console.log(e.message); // "hello" console.log(e.name); // "aggregateerror" console.log(e.errors); // [ error: "some error" ] } specifications specification promise.anythe definition of 'aggregateerror()' in that specification.

progress - Archive of obsolete content
the progress event is fired when the user agent is downloading resources listed by the manifest.
... general info specification offline interface progressevent bubbles no cancelable no target applicationcache default action none properties property type description target eventtarget (dom element) the event target (the topmost target in the dom tree).
... related events checking noupdate downloading progress cached updateready obsolete error ...

-ms-block-progression - Archive of obsolete content
the -ms-block-progression css property is a microsoft extension that specifies the block progression and layout orientation.
... only one block progression is active at a time; these values cannot be combined.
... this property is based on the block-progression property of the css3 text layout module.

FileReader: progress event - Web APIs
the progress event is fired periodically as the filereader reads data.
... bubbles no cancelable no interface progressevent event handler property filereader.onprogress examples live example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } ...
...entlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.result; } } function addlisteners(reader) { reader.addeventlistener('loadstart', handleevent); reader.addeventlistener('load', handleevent); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); reader.addeventlistener('abort', handleevent); } function handleselected(e) { eventlog.textcontent = ''; const selectedfile = fileinput.files[0]; if (selectedfile) { addlisteners(reader); reader.readasdataurl(selectedfile); } } fileinput.addeventlistener('change', handleselected); result ...

FileRequest.onprogress - Web APIs
summary this property specifies a callback function to be run repeatedly while the operation represented by a filerequest object is in progress.
... syntax instanceoffilerequest.onprogress = function; where instanceoffilerequest is a filerequest object and function is the javascript function to execute.
... example // assuming 'request' which is a filerequest object request.onprogress = function (status) { var progress = document.queryselector('progress'); progress.value = status.loaded; progress.max = status.total; } specification not part of any current specification.

HTMLProgressElement.labels - Web APIs
the htmlprogresselement.labels read-only property returns a nodelist of the <label> elements associated with the <progress> element.
... syntax var labelelements = progress.labels; return value a nodelist containing the <label> elements associated with the <progress> element.
... example html <label id="label1" for="test">label 1</label> <progress id="test" value="70" max="100">70%</progress> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const progress = document.getelementbyid("test"); for(var i = 0; i < progress.labels.length; i++) { console.log(progress.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.

ProgressEvent.lengthComputable - Web APIs
the progressevent.lengthcomputable read-only property is a boolean flag indicating if the resource concerned by the progressevent has a length that can be calculated.
... if not, the progressevent.total property has no significant value.
... syntax flag = progressevent.lengthcomputable specifications specification status comment xmlhttprequestthe definition of 'progressevent.lengthcomputable' in that specification.

ProgressEvent.loaded - Web APIs
the progressevent.loaded read-only property is an integer representing the amount of work already performed by the underlying process.
... the ratio of work done can be calculated with the property and progressevent.total.
... syntax value = progressevent.loaded specifications specification status comment xmlhttprequestthe definition of 'progressevent.loaded' in that specification.

SVGRenderingIntent - Web APIs
the svgrenderingintent interface defines the enumerated list of possible values for rendering-intent attributes or descriptors.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgrenderingintent" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgrenderingintent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} warning: this interface was removed in the svg 2 specification.
... specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgrenderingintent' in that specification.

XDomainRequest.onprogress - Web APIs
this method is called periodically as an event handler for progress events on xdomainrequests, so that code can monitor progress while loading content.
... syntax xdr.onprogress = funcref; parameters funcref a function to call when progress events occur.
... example var xdr = new xdomainrequest(); xdr.open("post", "http://example.com/api/method"); xdr.onprogress = function(){ //handle partial response with xdr.responsetext } xdr.onload = function(){ //handle response with xdr.responsetext } xdr.send("param1=value1&param2=value2"); specification not part of any specification.

XMLHttpRequest: progress event - Web APIs
the progress event is fired periodically when a request receives more data.
... bubbles no cancelable no interface progressevent event handler property onprogress examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = docu...
...eryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.type}: ${e.loaded} bytes transferred\n`; } function addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyj...

XMLHttpRequestEventTarget.onprogress - Web APIs
the xmlhttprequesteventtarget.onprogress is the function called periodically with information when an xmlhttprequest before success completely.
... syntax xmlhttprequest.onprogress = callback; values callback is the function to be called periodically before the request is completed.
... xmlhttprequest.onprogress = function (event) { event.loaded; event.total; }; example var xmlhttp = new xmlhttprequest(), method = 'get', url = 'https://developer.mozilla.org/'; xmlhttp.open(method, url, true); xmlhttp.onprogress = function () { //do something }; xmlhttp.send(); specifications specification status comment xmlhttprequest living standard whatwg living standard ...

::-moz-progress-bar - CSS: Cascading Style Sheets
the ::-moz-progress-bar css pseudo-element is a mozilla extension that represents the progress bar inside a <progress> element.
... (the bar represents the amount of progress that has been made.) if you want to select the unfinished part of <progress> in mozilla, please select the <progress> directly.
... syntax ::-moz-progress-bar examples html <progress value="30" max="100">30%</progress> <progress max="100">indeterminate</progress> css ::-moz-progress-bar { background-color: red; } /* force indeterminate bars to have zero width */ :indeterminate::-moz-progress-bar { width: 0; } result specifications not part of any standard.

::-moz-range-progress - CSS: Cascading Style Sheets
the ::-moz-range-progress css pseudo-element is a mozilla extension that represents the lower portion of the track (i.e., groove) in which the indicator slides in an <input> of type="range".
... note: using ::-moz-range-progress with anything but an <input type="range"> doesn't match anything and has no effect.
... syntax ::-moz-range-progress examples html <input type="range" min="0" max="100" step="5" value="50"/> css input[type=range]::-moz-range-progress { background-color: green; height: 1em; } result a progress bar using this style might look something like this: specifications not part of any standard.

How to make PWAs installable - Progressive web apps (PWAs)
previous 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.
... the content of the file looks like this: { "name": "js13kgames progressive web app", "short_name": "js13kpwa", "description": "progressive web app that lists games submitted to the a-frame category in the js13kgames 2017 competition.", "icons": [ { "src": "icons/icon-32.png", "sizes": "32x32", "type": "image/png" }, // ...
... previous overview: progressive next ...

Making PWAs work offline with Service workers - Progressive web apps (PWAs)
previous 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.
... "progressive" in pwa when implemented properly as a progressive enhancement, service workers can benefit users who have modern browsers that support the api by providing offline support, but won't break anything for those using legacy browsers.
... previous overview: progressive web apps next ...

Media - Progressive web apps (PWAs)
place your mouse over the items in this list to see the actual pointer shapes in your browser: selector selects pointer indicating a link wait indicating that the program cannot accept input progress indicating that the program is working, but can still accept input default the default (usually an arrow) an outline property creates an outline that is often used to indicate keyboard focus.
... example these rules specify styles for a button that changes dynamically as the user interacts with it: .green-button { background-color:#cec; color:#black; border:2px outset #cec; padding: 5px 10px; } .green-button[disabled] { background-color:#cdc; color:#777; } .green-button:active, .green-button.active { border-style: inset; } <table> <tbody> <tr> <td><button class="green-button" disabled>click me</button></td> <td><button class="green-button">click me</button></td> ...
... <td><button class="green-button active">click me</button></td> </tr> <tr style="line-height:25%;"> <td>&nbsp;</td> </tr> <tr style="font-style:italic;"> <td>disabled</td> <td>normal</td> <td>active</td> </tr> </tbody> </table> live sample a fully functional button also has a dark outline around the entire button when it is the default, and a dotted outline on the face of the button when it has keyboard focus.

Mobile first - Progressive web apps (PWAs)
if you are using mechanisms like feature detection and matchmedia to conditionally load scripting functionality depending on viewport size, feature support, etc., you should just load the very basics that pretty much all browsers will need first, then progressively enhance browsers higher up the food chain.
...volo has a number of useful commands available, of which we will just use a couple: volo server: starts a local web server at localhost:8080 and runs your app through it: great for easy testing.
... note: firefox's responsive design view is a great way to get a quick idea of how your media queries are behaving themselves.

The building blocks of responsive design - Progressive web apps (PWAs)
if the content, layout, and functionality need to change greatly for different devices, it may not be such a good approach.
...the video always resizes dynamically, but the screen captures taken from it do not, so upon resizing the screen it was possible to end up with a messy layout with different sized elements when using max-width: 100%, such as: media queries fluid grids are a great start, but you'll notice that at certain points (known as breakpoints) the layout starts to break down.
... i'm sure you'll agree that this really isn't what we wanted — why is this happening?

addTabsProgressListener - Archive of obsolete content
« xul reference home addtabsprogresslistener( listener ) return type: no return value add a progress listener to the browser which will monitor loaded documents in all tabs in the tabbed browser.
... the progress listener should be based on the nsiwebprogresslistener interface with an additional "browser" argument as the first argument of every method, which is the browser (not <tabbrowser> = gbrowser) where the event occurred.

removeTabsProgressListener - Archive of obsolete content
« xul reference home removetabsprogresslistener( listener ) return type: no return value removes a progress listener to the browser which has been monitoring all tabs.
... the progress listener should implement the nsiwebprogresslistener interface.

addProgressListener - Archive of obsolete content
« xul reference home addprogresslistener( listener ) return type: no return value add a progress listener to the browser which will monitor loaded documents.
... the progress listener should implement the nsiwebprogresslistener interface.

Progressive web apps - MDN Web Docs Glossary: Definitions of Web-related terms
progressive web apps is a term used to describe the modern state of web app development.
... learn more the app center on mdn progressive web apps on google developers ...

Aggregate view - Firefox Developer Tools
after firefox 48, the default view is the tree map view, and you can switch to the aggregate view using the dropdown labeled "view:": the aggregate view looks something like this: it presents a breakdown of the heap's contents, as a table.
... let's get an allocation trace: open the memory tool check "record call stacks" load https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html take a snapshot select "view/aggregate" select "group by/call stack" you should see something like this: this is telling us that 93% of the total heap snapshot was allocated in functions called from "alloc.js", line 35 (our initial createtoolbars() call).

ProgressEvent.total - Web APIs
the progressevent.total read-only property is an integer representing the total amount of work that the underlying process is in the progress of performing.
... syntax value = progressevent.total specifications specification status comment xmlhttprequestthe definition of 'progressevent.lengthcomputable' in that specification.

How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
previous overview: progressive next having the ability to cache the contents of an app to work offline is a great feature.
... previous overview: progressive next ...

progressmeter.max - Archive of obsolete content
« xul reference home max type: integer the maximum value that progressmeter may have.

progressmeter.value - Archive of obsolete content
« xul reference home value type: integer an integer ranging from 0 to the maximum value that indicates the progress.

removeProgressListener - Archive of obsolete content
« xul reference home removeprogresslistener( listener ) return type: no return value remove a nsiwebprogresslistener from the browser.

webProgress - Archive of obsolete content
« xul reference webprogress type: nsiwebprogress this read-only property contains an nsiwebprogress object which is used to monitor the progress of a document loading.

progressmeter.max - Archive of obsolete content
« xul reference home max type: integer the maximum value that the progressmeter may reach.

::-moz-tree-progressmeter
activated when the type attribute is set to progressmeter.

NSS Tools Man Pages - work in progress
certutil certutil pk12util pk12util modutil modutil crlutil crlutil cmsutil cmsutil vfychain vfychain vfyserv vfyserv ssltap ssltap this is still a work in progress and in early stages.

CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
however, while evergreen browsers mean that many of us are going to see the majority of users having grid layout support very quickly, there are also old or non-supporting browsers to contend with.

Greater than (>) - JavaScript
the greater than operator (>) returns true if the left operand is greater than the right operand, and false otherwise.

Greater than or equal (>=) - JavaScript
the greater than or equal operator (>=) returns true if the left operand is greater than or equal to the right operand, and false otherwise.

Add to Home screen - Progressive web apps (PWAs)
a2hs is thought to be part of the progressive web app philosophy — giving web apps the same user experience advantages as native apps so they can compete in today's ecosystem wars.

Installing and uninstalling web apps - Progressive web apps (PWAs)
the option to install a web application is part of the progressive web app philosophy—giving web apps the same user experience advantages as native apps so they can be competitive.

PWA developer guide - Progressive web apps (PWAs)
in the articles listed here, you'll find guides about every aspect of development specific to the greation of progressive web applications (pwas).

Responsive Navigation Patterns - Progressive web apps (PWAs)
these patterns are a great place to start.

Index - Web APIs
134 audiocontext.resume() api, audio, audiocontext, method, reference, web audio api, resume the resume() method of the audiocontext interface resumes the progression of time in an audio context that has previously been suspended.
... 135 audiocontext.suspend() api, audio, audiocontext, method, reference, web audio api, suspend the suspend() method of the audiocontext interface suspends the progression of time in the audio context, temporarily halting audio hardware access and reducing cpu/battery usage in the process — this is useful if you want an application to power down the audio hardware when it will not be using an audio context for a while.
...this value, specified in degrees, indicates how far off from heading due north the device is.
...And 65 more matches

Index - Archive of obsolete content
perhaps your target audience is people that are using older hardware, for example, and can't upgrade to the latest and greatest browsers.
...the use of modules greatly improves the maintainability of code, by splitting it up into independent components, and enforcing logical boundaries between them.
... 178 customizing the download progress bar no summary!
...And 40 more matches

Image file type and format guide - Web media technologies
for example, an rgb color depth of 8 indicates that each of the red, green, and blue components are represented by an 8-bit value.
... apng is ideal for basic animations that do not need to synchronize to other activities or to a sound track, such as progress indicators, activity throbbers, and other animated sequences.
... file extension(s) .apng specification wiki.mozilla.org/apng_specification browser compatibility chrome 59, edge 12, firefox 3, opera 46, safari 8 maximum dimensions 2,147,483,647×2,147,483,647 pixels supported color modes color mode bits per component (d) description greyscale 1, 2, 4, 8, and 16 each pixel consists of a single d-bit value indicating the brightness of the greyscale pixel.
...And 33 more matches

Listening to events on all tabs
firefox 3.5 adds support for listening to progress events on all tabs.
... adding a listener to listen to progress events on all tabs, call the browser's addtabsprogresslistener() method: gbrowser.addtabsprogresslistener(myprogresslistener); myprogresslistener is an object that implements the callbacks used to provide notifications of progress events.
... removing a listener to remove a previously 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.
...And 26 more matches

Index
3 aggregating the in-memory datasource rdf no summary!
...the xpcom interfaces and tools you've used have been general, cross-platform, and available in the gecko runtime environment or in any gecko-based application after mozilla 1.2 (when the gre began to be used).
... 118 receiving startup notifications component manager, embedding mozilla, needsupdate, xpcom sometimes it's necessary for xpcom components to receive notifications as to the progress of the application's startup process, so they can start new services at appropriate times, for example.
...And 25 more matches

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
color keywords include the standard primary and secondary colors (such as red, blue, or orange), shades of gray (from black to white, including colors like darkgray and lightgrey), and a variety of other blended colors including lightseagreen, cornflowerblue, and rebeccapurple.
... hexadecimal string notation hexadecimal string notation represents a color using hexadecimal digits to represent each of the color components (red, green, and blue).
... "#rrggbb" specifies a fully-opaque color whose red component is the hexadecimal number 0xrr, green component is 0xgg, and blue component is 0xbb.
...And 20 more matches

<color> - CSS: Cascading Style Sheets
color keywords color keywords are case-insensitive identifiers that represent a specific color, such as red, blue, black, or lightseagreen.
... several keywords are aliases for each other: aqua / cyan fuchsia / magenta darkgray / darkgrey darkslategray / darkslategrey dimgray / dimgrey lightgray / lightgrey lightslategray / lightslategrey gray / grey slategray / slategrey though many keywords have been adapted from x11, their rgb values may differ from the corresponding color on x11 systems since manufacturers sometimes tailor x11 colors to their specific hardware.
... specification keyword rgb hex value live keyword css level 1 black #000000 silver #c0c0c0 gray #808080 white #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 aquamarin...
...And 17 more matches

Event reference
progress events event name fired when abort progression has been terminated (not due to an error).
... error progression has failed.
... load progression has been successful.
...And 16 more matches

In depth: Microtasks and the JavaScript runtime environment - Web APIs
consider the javascript program below: let outputelem = document.getelementbyid("output"); let userlanguages = { "mike": "en", "teresa": "es" }; function greetuser(user) { function localgreeting(user) { let greeting; let language = userlanguages[user]; switch(language) { case "es": greeting = `¡hola, ${user}!`; break; case "en": default: greeting = `hello, ${user}!`; break; } return greeting; } outputelem.innerhtml += localgreeting(user) + "<br>\r"; } greetuser("mike"); gre...
...etuser("teresa"); greetuser("veronica"); this short program contains three execution contexts, some of which are created and destroyed several times over the course of the program's execution.
... when greetuser("mike") is reached, a context is created for the greetuser() function; this execution context is pushed onto the execution context stack.
...And 14 more matches

Web applications and ARIA FAQ - Accessibility
you may want to consider implementing aria using progressive enhancement techniques—such as adding aria using javascript, not directly to your markup—in order to more gracefully support older browsers and assistive technologies.
...here's the markup for a progress bar widget: <div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" /> this progress bar is built using a <div>, which is not very descriptive.
...in this example, the role="progressbar" attribute informs the browser that this element is actually a javascript-powered progress bar widget.
...And 14 more matches

Creating a cross-browser video player - Developer guides
the control set most browser's default video controls have the following functionality: play/pause mute volume control progress bar skip ahead go fullscreen the custom control set will also support this functionality, with the addition of a stop button.
...for the progress bar, the progress element is taken advantage of, with a fallback provided for browsers that don't support it (e.g.
... <ul id="video-controls" class="controls"> <li><button id="playpause" type="button">play/pause</button></li> <li><button id="stop" type="button">stop</button></li> <li class="progress"> <progress id="progress" value="0" min="0"> <span id="progress-bar"></span> </progress> </li> <li><button id="mute" type="button">mute/unmute</button></li> <li><button id="volinc" type="button">vol+</button></li> <li><button id="voldec" type="button">vol-</button></li> <li><button id="fs" type="button">fullscreen</button></li> </ul> each button is given an id so it can be easily accessed w...
...And 14 more matches

Drawing graphics - Learn web development
let's add another rectangle into the mix — a green one this time.
...this converts degree values to radians, which is useful because whenever you need to provide an angle value in javascript, it will nearly always be in radians, but humans usually think in degrees.
... function degtorad(degrees) { return degrees * math.pi / 180; }; next, start off your path by adding the following below your previous addition; here we set a color for our triangle, start drawing a path, and then move the pen to (50, 50) without drawing anything.
...And 13 more matches

mozIStorageConnection
method overview void asyncclose([optional] in mozistoragecompletioncallback acallback); void begintransaction(); void begintransactionas(in print32 transactiontype); mozistoragestatement clone([optional] in boolean areadonly); void close(); void committransaction(); void createaggregatefunction(in autf8string afunctionname, in long anumarguments, in mozistorageaggregatefunction afunction); mozistorageasyncstatement createasyncstatement(in autf8string asqlstatement); void createfunction(in autf8string afunctionname, in long anumarguments, in mozistoragefunction afunction); mozistoragestatement createstatement(in autf8string asqlstatement); ...
...numstatements)] in mozistoragebasestatement astatements, in unsigned long anumstatements, [optional] in mozistoragestatementcallback acallback ); void executesimplesql(in autf8string asqlstatement); boolean indexexists(in autf8string aindexname); void preload(); obsolete since gecko 1.9 void removefunction(in autf8string afunctionname); mozistorageprogresshandler removeprogresshandler(); void rollbacktransaction(); void setgrowthincrement(in print32 aincrement, in autf8string adatabasename); mozistorageprogresshandler setprogresshandler(in print32 agranularity, in mozistorageprogresshandler ahandler); boolean tableexists(in autf8string atablename); attributes attribute type description...
... transactioninprogress boolean returns true if there is a transaction in progress on the database.
...And 13 more matches

nsIDownloadManager
manager;1"] .getservice(components.interfaces.nsidownloadmanager); method overview nsidownload adddownload(in short adownloadtype, in nsiuri asource, in nsiuri atarget, in astring adisplayname, in nsimimeinfo amimeinfo, in prtime astarttime, in nsilocalfile atempfile, in nsicancelable acancelable, in boolean aisprivate); void addlistener(in nsidownloadprogresslistener alistener); void canceldownload(in unsigned long aid); void cleanup(); void endbatchupdate(); obsolete since gecko 1.9.1 void flush(); obsolete since gecko 1.8 nsidownload getdownload(in unsigned long aid); void onclose(); obsolete since gecko 1.9.1 void open(in nsidomwindow aparent, in nsidownload adownload); obsolete sin...
...ce gecko 1.9.1 void openprogressdialogfor(in nsidownload adownload, in nsidomwindow aparent, in boolean acanceldownloadonclose); obsolete since gecko 1.9.1 void pausedownload(in unsigned long aid); void removedownload(in unsigned long aid); void removedownloadsbytimeframe(in long long abegintime, in long long aendtime); void removelistener(in nsidownloadprogresslistener alistener); void resumedownload(in unsigned long aid); void retrydownload(in unsigned long aid); void savestate(); obsolete since gecko 1.8 void startbatchupdate(); obsolete since gecko 1.9.1 attributes attribute type description activedownloadcount long the number of files currently being downloaded.
... listener nsidownloadprogresslistener the download manager's progress listener.
...And 13 more matches

Intercepting Page Loads - Archive of obsolete content
http observers are great for load detection, and filtering by url.
... you won't be able to make dom modifications like with the load events, since these notifications are triggered before the response arrives and is parsed into dom tree, so this is not the best approach for the typical greasemonkey-style extensions.
... webprogresslisteners when used in the chrome, this is a more sophisticated way of intercepting and modifying the various stages in page loads.
...And 12 more matches

MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
the name of the file can be anything you want because it is named by a general.config preference that should be added at the end of file mozilla_home/default/pref/autoconf.js or mozilla_home/greprefs/autoconf.js: pref("general.config.filename", "mozilla.cfg");.
... that prefcalls.js is now archive in omni.jar file located at the root of the mozilla apps installation, example of tb5: # jar -tvf /usr/lib/thunderbird/omni.jar | grep prefcalls.js 7499 sat nov 05 09:21:34 cet 2011 defaults/autoconfig/prefcalls.js traditionally (previous apps versions) is was in mozilla_home/default/autoconfig/prefcalls.js.
...hunderbird-3.0/configure 2009-06-29 11:37:21.677372297 +0200 +++ thunderbird-3.0.autoldap/configure 2009-06-29 14:41:11.547435040 +0200 @@ -12855,7 +12855,7 @@ moz_feeds=1 moz_jsdebugger=1 moz_jsloader=1 -moz_ldap_xpcom= +moz_ldap_xpcom=1 moz_mail_news= moz_mork=1 moz_morkreader= and set --enable-extensions=pref in mozconfig file, in fedora source rpm it is: [root@b008-02 sources]# grep enable-extensions /root/rpmbuild/sources/thunderbird-mozconfig ac_add_options --enable-extensions=pref it seems worse this time , as even after applying those compilation options mentioned above, i now get the following error message while stating thunderbird with autoconfig (autoconf.js having pref('general.config.filename','thunderbird.cfg'); ) and thunderbird.cfg calling getldap* functions...
...And 12 more matches

Index - Archive of obsolete content
the purpose of this article is not to describe these items in any great detail but to define what they are in simple terms.
... 300 progressmeter.max no summary!
... 301 progressmeter.mode xul attributes, xul reference no summary!
...And 12 more matches

The Implementation of the Application Object Model - Archive of obsolete content
xul has language constructs for all of the typical dialog controls, as well as for widgets like toolbars, trees, progress bars, and menus.
...this gives you a feature called aggregation, the ability to put completely different kinds of data into the same place.
...this same ability to aggregate data leads to another capability of rdf.
...And 12 more matches

Object-oriented JavaScript for beginners - Learn web development
for example, a student's greeting might be of the form "yo, i'm [firstname]" (e.g yo, i'm sam), whereas a teacher might use something more formal, such as "hello, my name is [prefix] [lastname], and i teach [subject]." (e.g hello, my name is mr griffiths, and i teach chemistry).
...add this function within the script element: function createnewperson(name) { const obj = {}; obj.name = name; obj.greeting = function() { alert('hi!
... i\'m ' + obj.name + '.'); }; return obj; } you can now create a new person by calling this function — try the following lines in your browser's javascript console: const salva = createnewperson('salva'); salva.name; salva.greeting(); this works well enough, but it is a bit long-winded; if we know we want to create an object, why do we need to explicitly create a new empty object and return it?
...And 12 more matches

Background Tasks API - Web APIs
this establishes a box (id "container") that's used to present the progress of an operation (because you never know how long decoding "quantum filament tachyon emissions" will take, after all) as well as a second main box (with the id "logbox"), which is used to display textual output.
...</p> <div class="container"> <div class="label">decoding quantum filament tachyon emissions...</div> <progress id="progress" value="0"></progress> <div class="button" id="startbutton"> start </div> <div class="label counter"> task <span id="currenttasknumber">0</span> of <span id="totaltaskcount">0</span> </div> </div> <div class="logbox"> <div class="logheader"> log </div> <div id="log"> </div> </div> the progress box uses a <progress> element to show the progress, along with a label with sections that are changed to present numeric information about the progress.
...4px 4px 2px black; display: block; overflow: auto; } .label { display: inline-block; } .counter { text-align: right; padding-top: 4px; float: right; } .button { padding-top: 2px; padding-bottom: 4px; width: 100px; display: inline-block; float: left; border: 1px solid black; cursor: pointer; text-align: center; margin-top: 0; color: white; background-color: darkgreen; } #progress { width: 100%; padding-top: 6px; } javascript content now that the document structure is defined, construct the javascript code that will do the work.
...And 12 more matches

Using XMLHttpRequest - Web APIs
*/ } oreq.open("get", url); oreq.responsetype = "arraybuffer"; oreq.send(); for more examples check out the sending and receiving binary data page monitoring progress xmlhttprequest provides the ability to listen to various events that can occur while the request is being processed.
... this includes periodic progress notifications, error notifications, and so forth.
... support for dom progress event monitoring of xmlhttprequest transfers follows the specification for progress events: these events implement the progressevent interface.
...And 12 more matches

Digital video concepts - Web media technologies
rgb most computer graphics models use the rgb color system, wherein some number of bits of data are used to represent each of the red, green, and blue components of the color of an individual pixel, and an image is comprised of a two-dimensional array of these pixels.
...when using integer components, rgb color uses 8 bits each of red, green, and blue, as well as potentially 8 bits of alpha (the amount of transparency).
... contemplating human vision we're able to represent an image this way because the human eye sees far more detail in greyscale than in color, thanks to biology.
...And 12 more matches

Inheritance in JavaScript - Learn web development
for example: person.prototype.greeting = function() { alert('hi!
... an updated greeting() method, which sounds a bit more formal than the standard greeting() method — more suitable for a teacher addressing some students at school.
...to see this, compare the outputs of person.prototype.greeting and teacher.prototype.greeting.
...And 11 more matches

nsIPrintingPrompt
this service enables embedders to implement their own print and progress dialogs.
... defaults for platform service: showprintdialog - displays a native dialog showpagesetup() - displays a xul dialog showprogress() - displays a xul dialog summary for windows embedders: stated once again: there is no "fallback" native platform support in gfx for the displaying of the native print dialog.
... the current default implementation for windows display a native print dialog but a xul-based progress dialog.
...And 11 more matches

Video player styling basics - Developer guides
the custom video controls and <progress> element are now contained within <div> elements, rather than residing inside unordered list items.
... the markup for the custom controls now looks as follows: <div id="video-controls" class="controls" data-state="hidden"> <button id="playpause" type="button" data-state="play">play/pause</button> <button id="stop" type="button" data-state="stop">stop</button> <div class="progress"> <progress id="progress" value="0" min="0"> <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 previous article simply set the display property of the vid...
... the <div> container for the <progress> element also requires some specific settings; it is set to be much wider than the other child elements and its cursor value is set to be pointer: .controls .progress { cursor:pointer; width:75.390625%; } buttons the first major styling task to tackle is to make the video control's buttons actually look like and act like real buttons.
...And 11 more matches

Listening to events in Firefox extensions - Archive of obsolete content
web progress listeners for more information about web loads a web progress listener can be used; these provide more details about the progress of loading data from the web.
... both browser and tabbrowser elements support the following: var progresslistener = { // add nsiwebprogressimplementation here } b.addprogresslistener(progresslistener); where b is the browser or tabbrowser you want to listen to events for.
... there are code snippets available that give more detail on using web progress listeners.
...And 10 more matches

Client-side storage - Learn web development
use of cache and service workers is an advanced topic, and we won't be covering it in great detail in this article, although we will show a simple example in the offline asset storage section below.
...our example will allow you enter a name, after which the page will update to give you a personalized greeting.
... you can find the example html at personal-greeting.html — this contains a simple website with a header, content, and footer, and a form for entering your name.
...And 10 more matches

Examples
components.utils.import("resource://gre/modules/osfile.jsm") let path = os.path.join(os.constants.path.tmpdir, "file.txt"); let promise = os.file.exists(path); let newpromise = promise.then(function onfulfill(aexists) { if (aexists) { console.log("you have file.txt in your temporary directory."); } else { throw new error("you don't have file.txt in your temporary directory."); } }); // unexpected errors should always be reported at the end of a promise chain.
... components.utils.import("resource://gre/modules/osfile.jsm") let path = os.path.join(os.constants.path.tmpdir, "file.txt"); let promise = os.file.exists(path); let newpromise = promise.then(function onfulfill(aexists) { if (aexists) { console.log("you have file.txt in your temporary directory."); } else { console.log("you don't have file.txt in your temporary directory."); } }); // unexpected errors should always be reported at the end of a promise chain.
... using a promise returned by a function (compact) the same code as the previous 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 ?
...And 9 more matches

Mail composition back end
ns_imethod addlistener(nsimsgsendlistener *alistener) = 0; ns_imethod removelistener(nsimsgsendlistener *alistener) = 0; sending listener interfaces the nsimsgsendlistener interface will let a caller keep track of the progress and any status of a send operation.
...an important item to note is the fact that this interface should also implement the nsimsgcopyservicelistener interface if it wants to be notified of the progress and completion of the copy operation.
... ns_imethod onstartsending(const char *amsgid, - the message id for the message being sent pruint32 amsgsize) = 0; - the total message size for the message being sent onprogress the onprogress interface is called with progress notification on the send operation.
...And 9 more matches

Web Accessibility: Understanding Colors and Luminance - Accessibility
a great example of a tool that converts colors for you is tom jewett's "mini color selector" with hsl, rgb, hex options for checking contrast in the browser.
... yellow has a greater luminance than blue, for example.
... our eyes are tuned to perceive certain colors, red, blue, and green, but we do not perceive these colors with equal strength.
...And 9 more matches

repeating-conic-gradient() - CSS: Cascading Style Sheets
syntax /* starburst: a a blue on blue starburst: the gradient is a starburst of lighter and darker blue, centered in the upper left quandrant, offset by 3degrees so there is no up/down straight line */ background: repeating-conic-gradient( from 3deg at 25% 25%, hsl(200, 100%, 50%) 0deg 15deg, hsl(200, 100%, 60%) 10deg 30deg); ); values <angle> preceded by the from keyterm, and taking an angle as its value, defines the gradient rotation in clockwise direction.
... <color-hint> th color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops.
... if neither the first nor the last color stops include include a a color stop angle greater than 0deg or less than 360 degrees respectively, the conic-gradient will not repeat.
...And 9 more matches

Downloading Files - Archive of obsolete content
components.utils.import("resource://gre/modules/privatebrowsingutils.jsm"); const webbrowserpersist = components.constructor("@mozilla.org/embedding/browser/nswebbrowserpersist;1", "nsiwebbrowserpersist"); var persist = webbrowserpersist(); var targetfile = services.dirsvc.get("desk", ci.nsifile); targetfile.append("file.bin"); // obtain the privacy context of the browser window that...
...var privacy = privatebrowsingutils.privacycontextfromwindow(urlsourcewindow); persist.persistflags = persist.persist_flags_from_cache | persist.persist_flags_replace_existing_files; persist.saveuri(uritosave, null, null, null, "", targetfile, privacy); if you don't need detailed progress information, you might be happier with nsidownloader.
... downloading binary files with a progress listener to download a binary file with custom progress listener: components.utils.import("resource://gre/modules/privatebrowsingutils.jsm"); const webbrowserpersist = components.constructor("@mozilla.org/embedding/browser/nswebbrowserpersist;1", "nsiwebbrowserpersist"); var persist = webbrowserpersist(); var targetfile = services.dirsvc.get("desk", ci.nsifile); targetfile.append("file.bin"); var obj_uri = services.io.newuri(aurltodownload, null, null); // obtain the privacy context of the browser window that the url // we are downloading comes from.
...And 8 more matches

Making decisions in your code — conditionals - Learn web development
best to stay in with a cup of hot chocolate, or go build a snowman.'; } else if (choice === 'overcast') { para.textcontent = 'it isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.'; } else { para.textcontent = ''; } } here we've got an html <select> element allowing us to make different weather choices, and a simple paragraph.
... < and > — test if one value is less than or greater than another.
... <= and >= — test if one value is less than or equal to, or greater than or equal to, another.
...And 8 more matches

Color picker tool - CSS: Cascading Style Sheets
tformat(format) { if (format === 'hsv') this.format = 'hsv'; if (format === 'hsl') this.format = 'hsl'; }; /*========== methods to set color properties ==========*/ color.prototype.isvalidrgbvalue = function isvalidrgbvalue(value) { return (typeof(value) === 'number' && isnan(value) === false && value >= 0 && value <= 255); }; color.prototype.setrgba = function setrgba(red, green, blue, alpha) { if (this.isvalidrgbvalue(red) === false || this.isvalidrgbvalue(green) === false || this.isvalidrgbvalue(blue) === false) return; this.r = red | 0; this.g = green | 0; this.b = blue | 0; if (this.isvalidrgbvalue(alpha) === true) this.a = alpha | 0; }; color.prototype.setbyname = function setbyname(name, value) { if (name === 'r' || name === 'g' ||...
...a(c, x, m); return; } if (h >= 1 && h < 2) { this.setrgba(x, c, m); return; } if (h >= 2 && h < 3) { this.setrgba(m, c, x); return; } if (h >= 3 && h < 4) { this.setrgba(m, x, c); return; } if (h >= 4 && h < 5) { this.setrgba(x, m, c); return; } if (h >= 5 && h < 6) { this.setrgba(c, m, x); return; } }; color.prototype.rgbtohsv = function rgbtohsv() { var red = this.r / 255; var green = this.g / 255; var blue = this.b / 255; var cmax = math.max(red, green, blue); var cmin = math.min(red, green, blue); var delta = cmax - cmin; var hue = 0; var saturation = 0; if (delta) { if (cmax === red ) { hue = ((green - blue) / delta); } if (cmax === green ) { hue = 2 + (blue - red) / delta; } if (cmax === blue ) { hue = 4 + (red - green) / delta; } if (cmax) ...
...saturation = delta / cmax; } this.hue = 60 * hue | 0; if (this.hue < 0) this.hue += 360; this.saturation = (saturation * 100) | 0; this.value = (cmax * 100) | 0; }; color.prototype.rgbtohsl = function rgbtohsl() { var red = this.r / 255; var green = this.g / 255; var blue = this.b / 255; var cmax = math.max(red, green, blue); var cmin = math.min(red, green, blue); var delta = cmax - cmin; var hue = 0; var saturation = 0; var lightness = (cmax + cmin) / 2; var x = (1 - math.abs(2 * lightness - 1)); if (delta) { if (cmax === red ) { hue = ((green - blue) / delta); } if (cmax === green ) { hue = 2 + (blue - red) / delta; } if (cmax === blue ) { hue = 4 + (red - green) / delta; } if (cmax) saturation = delta / x; } this.hue = 60 * hue | 0; ...
...And 8 more matches

Web video codec guide - Web media technologies
in some situations, a greater sacrifice of quality in order to bring down the data size is worth that lost quality; other times, the loss of quality is unacceptable and it's necessary to accept a codec configuration that results in a correspondingly larger file.
... effect of source video format on encoded output the degree to which the format of the source video will affect the output varies depending on the codec and how it works.
... the more variability—such as noise—there is in the image, the more complex the compression process and the less success the algorithm is likely to have compressing the image to the same degree.
...And 8 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.greeting); // "hello from add-on" }, false); after firefox 30, you can still do this for primitive values, but can no longer do it for objects.
...k/self"); tabs.open({ url: self.data.url("page.html"), onready: attachscript }); function attachscript(tab) { tab.attach({ contentscriptfile: self.data.url("content-script.js") }); } the content script defines an object and assigns it to unsafewindow twice: the first time using cloneinto(), the second time using simple assignment: // content-script.js var contentscriptobject = {"greeting" : "hello from add-on"}; unsafewindow.clonedcontentscriptobject = cloneinto(contentscriptobject, unsafewindow); unsafewindow.assignedcontentscriptobject = contentscriptobject; the "page.html" file adds two buttons and assigns an event listener to each: one listener displays a property of the cloned object, and the other listener displays a property of the assigned object: <html> <head> ...
... </head> <body> <input id="works" type="button" value="i will work"/> <input id="fails" type="button" value="i will not work"/> <script> var works = document.getelementbyid("works"); works.addeventlistener("click", function() { alert(clonedcontentscriptobject.greeting); }, false); var fails = document.getelementbyid("fails"); fails.addeventlistener("click", function() { alert(assignedcontentscriptobject.greeting); }, false); </script> </body> </html> if you run the example, clicking "i will work" displays the value of "greeting" in an alert.
...And 7 more matches

tabbrowser - Archive of obsolete content
ctrlpageupdown, onbookmarkgroup, onnewtab, tabmodalpromptshowing properties browsers, cangoback, cangoforward, contentdocument, contenttitle, contentvieweredit, contentviewerfile, contentwindow, currenturi, docshell, documentcharsetinfo, homepage, markupdocumentviewer, securityui, selectedbrowser, selectedtab, sessionhistory, tabcontainer, tabs, visibletabs, webbrowserfind, webnavigation, webprogress methods addprogresslistener, addtab, addtabsprogresslistener,appendgroup, getbrowseratindex, getbrowserindexfordocument, getbrowserfordocument, getbrowserfortab, geticon, getnotificationbox, gettabforbrowser, gettabmodalpromptbox, goback, gobackgroup, goforward, goforwardgroup, gohome, gotoindex, loadgroup, loadonetab, loadtabs, loaduri, loaduriwithflags, movetabto, pintab, reload, reloadallt...
...abs, reloadtab, reloadwithflags, removealltabsbut, removecurrenttab, removeprogresslistener, removetab, removetabsprogresslistener,replacegroup, selecttabatindex, seticon, showonlythesetabs, stop, unpintab attributes autocompleteenabled type: boolean set to true to enable autocomplete of fields.
... webprogress type: nsiwebprogress this read-only property contains an nsiwebprogress object which is used to monitor the progress of a document loading.
...And 7 more matches

Index - MDN Web Docs Glossary: Definitions of Web-related terms
in a typical image file, the color channels describe how much red, green, and blue are used to make up the final color.
...dhtml aggregates the combined functionality of html, css, the dom, and javascript.
... 273 mobile first design, glossary, layout, layout mobile mobile first, a form of progressive enhancement, is a web-development and web-design approach that focuses on prioritizing design and development for mobile screen sizes over design and development for desktop screen sizes.
...And 7 more matches

HTML text fundamentals - Learn web development
so, for example, we expect a red traffic light to mean "stop," and a green traffic light to mean "go." things can get tricky very quickly if the wrong semantics are applied.
... hummus is a delicious thick paste used heavily in greek and middle eastern dishes.
... ingredients 1 can (400g) of chick peas (garbanzo beans) 175g of tahini 6 sundried tomatoes half a red pepper a pinch of cayenne pepper 1 clove of garlic a dash of olive oil instructions remove the skin from the garlic, and chop coarsely remove all the seeds and stalk from the pepper, and chop coarsely add all the ingredients into a food processor process all the ingredients into a paste if you want a coarse "chunky" hummus, process it for a short time if you want a smooth hummus, process it for a longer time for a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese.
...And 7 more matches

Download
this property may be populated or changed while the download is in progress, using the mime type provided by the server.
...this value starts at zero, and may be updated regardless of the value of hasprogress.
... this property is relevant while the download is in progress, and also if it failed or has been canceled.
...And 7 more matches

nsIZipWriter
attempting to perform a synchronous operation on the interface while the background queue is in progress will throw an ns_error_in_progress exception.
... inqueue boolean true if operations are being performed in the background queue, or false if background operations are not in progress.
... ns_error_in_progress the zip writer is already performing another operation.
...And 7 more matches

Fundamentals of WebXR - Web APIs
the width of the field of view is measured as the angle defining the arc from the far left edge of your field of view to the far right edge, and is specified in either degrees or radians.
... degrees of freedom the term degrees of freedom is an indication of how much freedom of movement the user has within the virtual world.
... diagram showing the movements possible with 3 degree of freedom hardware: yaw, roll, and pitch.
...And 7 more matches

Using CSS gradients - CSS: Cascading Style Sheets
css gradients are represented by the <gradient> data type, a special type of <image> made of a progressive transition between two or more colors.
... we'll start by introducing linear gradients, then introduce features that are supported in all gradient types using linear gradients as the example, then move on to radial, conic and repeating gradients using linear gradients a linear gradient creates a band of colors that progress in a straight line.
... controlling the progression of a gradient by default, a gradient evenly progresses between the colors of two adjacent color stops, with the midpoint between those two color stops being the midpoint color value.
...And 7 more matches

begin - SVG: Scalable Vector Graphics
begin="2s" dur="6s" fill="freeze" /> </rect> <rect x="60" y="85" height="15" width="0"> <animate attributetype="xml" attributename="width" to="50" begin="4s" dur="4s" fill="freeze" /> </rect> <!-- grid --> <text x="10" y="20" text-anchor="middle">0s</text> <line x1="10" y1="25" x2="10" y2="105" stroke="grey" stroke-width=".5" /> <text x="35" y="20" text-anchor="middle">2s</text> <line x1="35" y1="25" x2="35" y2="105" stroke="grey" stroke-width=".5" /> <text x="60" y="20" text-anchor="middle">4s</text> <line x1="60" y1="25" x2="60" y2="105" stroke="grey" stroke-width=".5" /> <text x="85" y="20" text-anchor="middle">6s</text> <line x1="85" y1="25" x2="85" y2="105" stroke="grey...
..." stroke-width=".5" /> <text x="110" y="20" text-anchor="middle">8s</text> <line x1="110" y1="25" x2="110" y2="105" stroke="grey" stroke-width=".5" /> <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" /> <line x1="10" y1="105" x2="110" y2="105" stroke="grey" stroke-width=".5" /> </svg> begin-1-offset.svg syncbase example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- animated rectangles --> <rect x="10" y="35" height="15" width="0"> <animate attributetype="xml" attributename="width" to="50" id="first" begin="0s;third.end" dur="4s" /> </rect> <rect x="60" y="60" height="15" width="0"> <an...
...e="width" to="25" id="second" begin="first.end" dur="2s" /> </rect> <rect x="85" y="85" height="15" width="0"> <animate attributetype="xml" attributename="width" to="25" id="third" begin="second.end" dur="2s" /> </rect> <!-- grid --> <text x="10" y="20" text-anchor="middle">0s</text> <line x1="10" y1="25" x2="10" y2="105" stroke="grey" stroke-width=".5" /> <text x="35" y="20" text-anchor="middle">2s</text> <line x1="35" y1="25" x2="35" y2="105" stroke="grey" stroke-width=".5" /> <text x="60" y="20" text-anchor="middle">4s</text> <line x1="60" y1="25" x2="60" y2="105" stroke="grey" stroke-width=".5" /> <text x="85" y="20" text-anchor="middle">6s</text> <line x1="85" y1="25" x2="85" y2="105" stroke="grey...
...And 7 more matches

/loader - Archive of obsolete content
it can be loaded as a regular script tag in documents that have system principals (note: this does not appear to work as of 02.2016 due to "use strict" being added to the file): <script type='application/javascript' src='resource://gre/modules/commonjs/toolkit/loader.js'></script> this will expose a single loader object containing all of the api functions described in this document.
... it can be loaded as a javascript code module: let { loader, require, unload } = components.utils.import('resource://gre/modules/commonjs/toolkit/loader.js'); it can be required as a commonjs module from a module loaded in the loader itself: let { loader, require, unload } = require('toolkit/loader'); what is it good for ?
...there are lots of different possibilities, but the most common setup looks like this: let { loader } = require('toolkit/loader'); let loader = loader({ paths: { // resolve all modules starting with `toolkit/` as follows: // toolkit/foo -> resource://gre/modules/commonjs/toolkit/foo.js // toolkit/foo/bar -> resource://gre/modules/commonjs/toolkit/foo/bar.js 'toolkit/': 'resource://gre/modules/commonjs/toolkit/', // resolve all other non-relative module requirements as follows: // devtools/gcli -> resource:///modules/devtools/gcli.js // panel -> resource:///modules/panel.js '': 'resource:///modules/', } ...
...And 6 more matches

File I/O - Archive of obsolete content
creating an nsifile object components.utils.import("resource://gre/modules/fileutils.jsm"); var file = new fileutils.file("/home"); or the same without using fileutils.jsm: var file = components.classes["@mozilla.org/file/local;1"].
... getting files in special directories components.utils.import("resource://gre/modules/fileutils.jsm"); // get the "data.txt" file in the profile directory var file = fileutils.getfile("profd", ["data.txt"]); or the same without using fileutils.jsm: // get profile directory.
...however, you can enumerate available drives using the following code: components.utils.import("resource://gre/modules/fileutils.jsm"); var root = new fileutils.file("\\\\."); var drivesenum = root.directoryentries, drives = []; while (drivesenum.hasmoreelements()) { drives.push(drivesenum.getnext().
...And 6 more matches

Finding window handles - Archive of obsolete content
recall that nsibasewindow -> nativehandle returns the following in the different operating systems: windows - hwnd mac os x - nswindow* linux - gdkwindow* (it will be gdkwindow* no matter what desktop/window manager) is in use, for explanation why see the article: standard os libraries - unix section) windows components.utils.import('resource://gre/modules/services.jsm'); var browserwindow = services.wm.getmostrecentwindow('navigator:browser'); if (!browserwindow) { throw new error('no browser window found'); } var basewindow = browserwindow.queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsiwebnavigation) .queryinterface(ci.nsidocshelltreeitem) ...
... .treeowner .queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsibasewindow); var hwndstring = basewindow.nativehandle; components.utils.import('resource://gre/modules/ctypes.jsm'); var user32 = ctypes.open('user32.dll'); /* http://msdn.microsoft.com/en-us/library/ms633539%28v=vs.85%29.aspx * bool winapi setforegroundwindow( * __in_ hwnd hwnd * ); */ var setforegroundwindow = user32.declare('setforegroundwindow', ctypes.winapi_abi, ctypes.bool, // return bool ctypes.voidptr_t // hwnd ); var hwnd = ctypes.voidptr_t(ctypes.uint64(hwndstring)); var rez_setforegroundwindow = setforegroundwindow(hwnd); console.log('rez_setforegroundwindow:', rez_setforegroundwindow, rez_setforegroundwindow.tostring());...
... user32.close(); mac os x objective-c components.utils.import('resource://gre/modules/services.jsm'); var browserwindow = services.wm.getmostrecentwindow('navigator:browser'); if (!browserwindow) { throw new error('no browser window found'); } var basewindow = browserwindow.queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsiwebnavigation) .queryinterface(ci.nsidocshelltreeitem) .treeowner .queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsibasewindow); var nswindowstring = basewindow.nativehandle; components.utils.import('resource://gre/modules/ctypes.jsm'); var objc = ctypes.open(ctypes.libraryname('objc')); // ...
...And 6 more matches

Advanced form styling - Learn web development
<input type="color"> date-related controls such as <input type="datetime-local"> <input type="range"> <input type="file"> <progress> and <meter> let's first talk about the appearance property, which is pretty useful for making all of the above more stylable.
...prefixed usually means "work in progress", so in the future browser vendors may come to a consensus to drop the prefix.
...e; } we can use the :checked and :disabled pseudo-classes to change the appearance of our custom checkbox as its state changes: input[type="checkbox"] { position: relative; width: 1em; height: 1em; border: 1px solid gray; /* adjusts the position of the checkboxes on the text baseline */ vertical-align: -2px; /* set here so that windows' high-contrast mode can override */ color: green; } input[type="checkbox"]::before { content: "✔"; position: absolute; font-size: 1.2em; right: -1px; top: -0.3em; visibility: hidden; } input[type="checkbox"]:checked::before { /* use `visibility` instead of `display` to avoid recalculating layout */ visibility: visible; } input[type="checkbox"]:disabled { border-color: black; background: #ddd; color: gray; } you'll ...
...And 6 more matches

Other form controls - Learn web development
previous 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 previous article), and progress bars.
... in this case, different browsers behave differently from case to case, so consider such uses as progressive enhancement, and ensure they degrade gracefully.
... meters and progress bars meters and progress bars are visual representations of numeric values.
...And 6 more matches

Index - Learn web development
13 aprender y obtener ayuda beginner, learn, learning, web development, getting help it is great that you are putting some time into learning a new set of skills, but there are good practices to employ that will make your learning more effective.
... there are also are times when you'll get stuck and feel frustrated — even professional web developers feel like this regularly — and it pays to know about the most effective ways to try and get help so you can progress in your work.
... 44 the web and web standards beginner, front-end, learn, web, web standards this article provides some useful background on the web — how it came about, what web standard technologies are, how they work together, why "web developer" is a great career to choose, and what kinds of best practices you'll learn about through the course.
...And 6 more matches

nsIMsgMessageService
amsgwindow nsimsgwindow for progress and status feedback return values aurl the new nsiuri of the message.
... aurllistener an nsiurllistener amsgwindow nsimsgwindow for progress and status feedback return values aurl the new nsiuri of the message.
... amsgwindow nsimsgwindow for progress and status feedback aurllistener an nsiurllistener acharsetoverride (optional) character set over ride to force the message to use.
...And 6 more matches

WebGL constants - Web APIs
returns never, always, less, equal, lequal, greater, gequal, or notequal.
...returns never, always, less, equal, lequal, greater, gequal, or notequal.
... color_clear_value 0x0c22 color_writemask 0x0c23 unpack_alignment 0x0cf5 pack_alignment 0x0d05 max_texture_size 0x0d33 max_viewport_dims 0x0d3a subpixel_bits 0x0d50 red_bits 0x0d52 green_bits 0x0d53 blue_bits 0x0d54 alpha_bits 0x0d55 depth_bits 0x0d56 stencil_bits 0x0d57 polygon_offset_units 0x2a00 polygon_offset_factor 0x8038 texture_binding_2d 0x8069 sample_buffers 0x80a8 samples 0x80a9 sample_coverage_value ...
...And 6 more matches

Web audio spatialization basics - Web APIs
by default, both are 360 degrees.
...make it project to the back when the boombox is rotated 180 degrees and facing away from us.
... let's set up a rotation rate, which we'll convert into a radian range value for use in math.sin and math.cos later, when we want to figure out the new coordinates when we're rotating our boombox: // set up rotation constants const rotationrate = 60; // bigger number equals slower sound rotation const q = math.pi/rotationrate; //rotation increment in radians we can also use this to work out degrees rotated, which will help with the css transforms we will have to create (note we need both an x and y-axis for the css transforms): // get degrees for css const degreesx = (q * 180)/math.pi; const degreesy = (q * 180)/math.pi; let's take a look at our left rotation as an example.
...And 6 more matches

ARIA - Accessibility
here's the markup for a progress bar widget: <div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"> </div> this progress bar is built using a <div>, which has no meaning.
...in this example, the role="progressbar" attribute informs the browser that this element is actually a javascript-powered progress bar widget.
... the aria-valuemin and aria-valuemax attributes specify the minimum and maximum values for the progress bar, and the aria-valuenow describes the current state of it and therefore must be kept updated with javascript.
...And 6 more matches

Linear-gradient Generator - CSS: Cascading Style Sheets
tformat(format) { if (format === 'hsv') this.format = 'hsv'; if (format === 'hsl') this.format = 'hsl'; }; /*========== methods to set color properties ==========*/ color.prototype.isvalidrgbvalue = function isvalidrgbvalue(value) { return (typeof(value) === 'number' && isnan(value) === false && value >= 0 && value <= 255); }; color.prototype.setrgba = function setrgba(red, green, blue, alpha) { if (this.isvalidrgbvalue(red) === false || this.isvalidrgbvalue(green) === false || this.isvalidrgbvalue(blue) === false) return; this.r = red | 0; this.g = green | 0; this.b = blue | 0; if (this.isvalidrgbvalue(alpha) === true) this.a = alpha | 0; }; color.prototype.setbyname = function setbyname(name, value) { if (name === 'r' || name === 'g' ||...
...a(c, x, m); return; } if (h >= 1 && h < 2) { this.setrgba(x, c, m); return; } if (h >= 2 && h < 3) { this.setrgba(m, c, x); return; } if (h >= 3 && h < 4) { this.setrgba(m, x, c); return; } if (h >= 4 && h < 5) { this.setrgba(x, m, c); return; } if (h >= 5 && h < 6) { this.setrgba(c, m, x); return; } }; color.prototype.rgbtohsv = function rgbtohsv() { var red = this.r / 255; var green = this.g / 255; var blue = this.b / 255; var cmax = math.max(red, green, blue); var cmin = math.min(red, green, blue); var delta = cmax - cmin; var hue = 0; var saturation = 0; if (delta) { if (cmax === red ) { hue = ((green - blue) / delta); } if (cmax === green ) { hue = 2 + (blue - red) / delta; } if (cmax === blue ) { hue = 4 + (red - green) / delta; } if (cmax) ...
...saturation = delta / cmax; } this.hue = 60 * hue | 0; if (this.hue < 0) this.hue += 360; this.saturation = (saturation * 100) | 0; this.value = (cmax * 100) | 0; }; color.prototype.rgbtohsl = function rgbtohsl() { var red = this.r / 255; var green = this.g / 255; var blue = this.b / 255; var cmax = math.max(red, green, blue); var cmin = math.min(red, green, blue); var delta = cmax - cmin; var hue = 0; var saturation = 0; var lightness = (cmax + cmin) / 2; var x = (1 - math.abs(2 * lightness - 1)); if (delta) { if (cmax === red ) { hue = ((green - blue) / delta); } if (cmax === green ) { hue = 2 + (blue - red) / delta; } if (cmax === blue ) { hue = 4 + (red - green) / delta; } if (cmax) saturation = delta / x; } this.hue = 60 * hue | 0; ...
...And 6 more matches

Cross-browser audio basics - Developer guides
ntbyid('play'); var pause = document.getelementbyid('pause'); // associate functions with the 'onclick' events play.onclick = playaudio; pause.onclick = pauseaudio; function playaudio() { myaudio.play(); } function pauseaudio() { myaudio.pause(); } } media loading events above we have shown how you can create a very simple audio player, but what if we want to show progress, buffering and only activate the buttons when the media is ready to play?
... myaudio.addeventlistener("loadeddata", function() { //you could display the playhead now }); progress the progress event indicates that the download of media is still in progress.
... myaudio.addeventlistener("progress", function() { // you could let the user know the media is downloading }); canplay canplay is a useful event to detect should you want to determine whether the media is ready to play.
...And 6 more matches

Game promotion - Game development
there are many ways to promote your game — most of them being free, so even if you're struggling to make a living as an indie dev with zero budget you can still do a lot to let people know about your great new game.
... many great games get started as a quick, sloppy demo submitted to a competition.
...a further option is to publish monthly reports that summarize all your progress — it helps you see what you've accomplished throughout the month and what's still left to do, and it keeps reminding people that your game is coming out soon — building buzz is always good.
...And 5 more matches

JavaScript object basics - Learn web development
he likes ' + this.interests[0] + ' and ' + this.interests[1] + '.'); }, greeting: function() { alert('hi!
... i\'m ' + this.name[0] + '.'); } }; after saving and refreshing, try entering some of the following into the javascript console on your browser devtools: person.name person.name[0] person.age person.interests[1] person.bio() person.greeting() you have now got some data and functionality inside your object, and are now able to access them with some nice simple syntax!
...look at this one for example: greeting: function() { alert('hi!
...And 5 more matches

Command line crash course - Learn web development
although there's a great wealth of tools available from the command line, if you're using tools like visual studio code there's also a mass of extensions that can be used as a proxy to using terminal commands without needing to use the terminal directly.
...mputer’s file system along with base level tasks such as create, copy, rename and delete: move around your directory structure: cd create directories: mkdir create files (and modify their metadata): touch copy files: cp move files: mv delete files or directories: rm download files found at specific urls: curl search for fragments of text inside larger bodies of text: grep view a file's contents page by page: less, cat manipulate and transform streams of text (for example changing all the instances of <div>s in an html file to <article>): awk, tr, sed note: there are a number of good tutorials on the web that go much deeper into the command line on the web — this is only a brief introduction!
...the man page lists all the options in great detail, which may be a bit intimidating to begin with, but at least you know it’s there if you need it.
...And 5 more matches

Working with windows in chrome code
in this example, we're using window.opendialog to open a progress dialog.
... we pass in the current status text as well as the maximum and current progress values.
...todo: link to how to pass an xpcom object to a new window when it has a more useful example opener code: window.opendialog("chrome://test/content/progress.xul", "myprogress", "chrome,centerscreen", {status: "reading remote data", maxprogress: 50, progress: 10} ); progress.xul: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window onload="onload();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script><![cdata[ var gstatus, gprogressmeter; var maxprogress = 100; function onload() { gstatus = document.getelementbyid("status"); gprogressmeter = document.getelementbyid("progressmeter"); if("arguments" in window && ...
...And 5 more matches

Web Video Text Tracks Format (WebVTT) - Web APIs
it is also recommended that you use the greater-than escape sequence (&gt;) instead of the greater-than character (>) to avoid confusion with tags.
...in this case, you insert your css rules into the file with each rule preceded by the string "style" all by itelf on a line of text, as shown below: webvtt style ::cue { background-image: linear-gradient(to bottom, dimgray, lightgray); color: papayawhip; } /* style blocks cannot use blank lines nor "dash dash greater than" */ note comment blocks can be used between style blocks.
...the end time must be greater than the start time, and the start time must be greater than or equal to all previous start times.
...And 5 more matches

conic-gradient() - CSS: Cascading Style Sheets
syntax /* a conic gradient rotated 45 degrees, starting blue and finishing red */ conic-gradient(from 45deg, blue, red); /* a a bluish purple box: the gradient goes from blue to red, but as only the bottom right quadrant is visible, as the center of the conic gradient is in at the top left corner */ conic-gradient(from 90deg at 0 0, blue, red); /* colorwheel */ background: conic-gradient( hsl(360, 100%, 50%), hsl(315, 10...
... <color-hint> th color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops.
... to create a conic gradient that repeats so as to fill a 360 degree rotation, use the repeating-conic-gradient() function instead.
...And 5 more matches

linear-gradient() - CSS: Cascading Style Sheets
the linear-gradient() css function creates an image consisting of a progressive transition between two or more colors along a straight line.
... syntax /* a gradient tilted 45 degrees, starting blue and finishing red */ linear-gradient(45deg, blue, red); /* a gradient going from the bottom right to the top left corner, starting blue and finishing red */ linear-gradient(to left top, blue, red); /* color stop: a gradient going from the bottom to top, starting blue, turning green at 40% of its length, and finishing red */ linear-gradient(0deg, blue, green 40%, red); /* color hint: a gradient going from the lef...
...t to right, starting red, getting to the midpoint color 10% of the way across the length of the gradient, taking the rest of the 90% of the length to change to blue */ linear-gradient(.25turn, red, 10%, blue); /* multi-position color stop: a gradient tilted 45 degrees, with a red bottom-left half and a blue top-right half, with a hard line where the gradient changes from red to blue */ linear-gradient(45deg, red 0 50%, blue 50% 100%); values <side-or-corner> the position of the gradient line's starting point.
...And 5 more matches

HTML attribute: max - HTML: Hypertext Markup Language
if the value of the element is greater than this, the element fails constraint validation.
... this value must be greater than or equal to the value of the min attribute.
...if the max attribute is valid and a non-empty value is greater than the maximum allowed by the max attribute, constraint validation will prevent form submission.
...And 5 more matches

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
this table is followed by a list describing each attribute in greater detail, along with which input types they are associated with.those that are common to most or all input types are defined in greater detail below.
... max valid for date, month, week, time, datetime-local, number, and range, it defines the greatest value in the range of permitted values.
...this value must also be greater than or equal to the value of minlength.
...And 5 more matches

HTML documentation index - HTML: Hypertext Markup Language
if the value of the element is greater than this, the element fails constraint validation.
... this value must be greater than or equal to the value of the min attribute.
...if the max attribute is valid and a non-empty value is greater than the maximum allowed by the max attribute, constraint validation will prevent form submission.
...And 5 more matches

How to convert an overlay extension to restartless - Archive of obsolete content
step 1: use services.jsm if you load one of mozilla's internal jsm files, for example services.jsm, you'll do so via privileged javascript code like this: components.utils.import("resource://gre/modules/services.jsm"); from here on out, it is assumed you've imported services.jsm somewhere at the top of whatever file you're in and will be using it in all code examples.
...it's a great way to modularize your code that's been available since firefox 3.
... how to get and load the data of of your add-on's files using the add-on manager api: // this is the old way of getting one of your files const myaddonid = ...; // just store a constant with your id components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid(myaddonid,function(addon) { var file = services.io.newuri("resource://myaddon/filename.ext",null,null) .queryinterface(components.interfaces.nsifileurl) .file; var stream = components.classes["@mozilla.org/network/file-input-stream;1"] .createinstance(compon...
...And 4 more matches

Promises - Archive of obsolete content
a task example like the following: components.utils.import("resource://gre/modules/task.jsm"); task.spawn(function* () { var response = yield request("login", { username: user, password: password }); if (response.messages) { try { yield publish({ username: user, messages: response.messages }); } catch (e) { self.reporterror("publication failed", e); } } }); can be converted to a pure promise-based equ...
... representative example usage components.utils.import("resource://gre/modules/osfile.jsm"); task.spawn(function* () { // retrieve file metadata to check modification time.
...the downloads object provides a promise-based api for downloading remote files, with full support for progress tracking, pause and resume, and, optionally, integration with the download manager ui.
...And 4 more matches

Introduction to Public-Key Cryptography - Archive of obsolete content
similarly, a digital signature on an html form, combined with a certificate that identifies the signer, can provide evidence, after the fact, that the person identified by that certificate did agree to the contents of the form.
... in addition to authentication, the digital signature in both cases ensures a degree of nonrepudiation-that is, a digital signature makes it difficult for the signer to claim later not to have sent the email or the form.
... organizations have a great deal of flexibility in terms of the way they set up their ca hierarchies.
...And 4 more matches

The Business Benefits of Web Standards - Archive of obsolete content
by using semantic markup we greatly assist the search engines in their indexing process.
...a lot of other sites would greatly increase their seo by simply using proper tags for the content.
...as style sheet technology gives designers good typographic control and permits effects such as roll-overs, it greatly reduces the need for javascript programming and creation of graphics.
...And 4 more matches

Call stack - MDN Web Docs Glossary: Definitions of Web-related terms
example function greeting() { // [1] some codes here sayhi(); // [2] some codes here } function sayhi() { return "hi!"; } // invoke the `greeting` function greeting(); // [3] some codes here the code above would be executed like this: ignore all functions, until it reaches the greeting() function invocation.
... add the greeting() function to the call stack list.
... call stack list: - greeting execute all lines of code inside the greeting() function.
...And 4 more matches

CSS values and units - Learn web development
so each successive level of nesting gets progressively larger, as each has its font size set to 1.3em — 1.3 times its parent's font size.
...each <li> has a font-size of 80%, therefore the nested list items become progressively smaller as they inherit their sizing from their parent.
... the standard color system available in modern computers is 24 bit, which allows the display of about 16.7 million distinct colors via a combination of different red, green and blue channels with 256 different values per channel (256 x 256 x 256 = 16,777,216.) let's have a look at some of the ways in which we can specify colors in css.
...And 4 more matches

Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
(in other words, when the stack is empty.) you will learn more on this matter as you progress through this article.
... in the following example, the browser will wait two seconds before executing the anonymous function, then will display the alert message (see it running live, and see the source code): let mygreeting = settimeout(function() { alert('hello, mr.
...the following two versions of the code snippet are equivalent to the first one: // with a named function let mygreeting = settimeout(function sayhi() { alert('hello, mr.
...And 4 more matches

Aprender y obtener ayuda - Learn web development
it is great that you are putting some time into learning a new set of skills, but there are good practices to employ that will make your learning more effective.
... there are also are times when you'll get stuck and feel frustrated — even professional web developers feel like this regularly — and it pays to know about the most effective ways to try and get help so you can progress in your work.
... focused thinking is great for concentrating hard on specific subjects, getting into deep problem solving, and improving your mastery of the techniques required — strengthening the neural pathways in your brain where that information is stored.
...And 4 more matches

Software accessibility: Where are we today?
this article reviews the progress and technology as it has developed.
...one great place to go and learn about this industry is the csun conference in los angeles, which takes place every year in mid-late march.
...screen magnifiers also have some built-in text-to-speech and the ability to filter text and images through various color palettes, such as black on yellow for high contrast, or green on blue for low contrast.
...And 4 more matches

Embedding Tips
implement the nsiwebprogresslistener interface and register it with the appropriate web browser object via the nsiwebbrowser::addwebbrowserlistener() method.
...register your own nsiwebprogresslistener object to listen for progress and state notifications.
... your web progress listener must also implement nsiauthprompt if you want to be able to upload to a password protected location (e.g.
...And 4 more matches

WebRequest.jsm
usage to import webrequest, use code like: let {webrequest} = cu.import("resource://gre/modules/webrequest.jsm", {}); the webrequest object has the following properties, each of which corresponds to a specific stage in executing a web request: onbeforerequest onbeforesendheaders onsendheaders onheadersreceived onresponsestarted oncompleted each of these objects defines two functions: addlistener(callback, filter, opt_extrainfospec) removelistener(callback) adding li...
...the matchpattern constructor accepts: either: a string defining a single pattern or: an array of such strings cu.import("resource://gre/modules/matchpattern.jsm"); let pattern = new matchpattern("https:/developer.mozilla.org/*"); cu.import("resource://gre/modules/matchpattern.jsm"); let pattern = new matchpattern(["https://mozorg.cdn.mozilla.net/*", "https://mdn.mozillademos.org/*", "https://developer.cdn.mozilla.net/*"]); see the match patterns article for det...
... examples basic examples this example just logs the url for every request initiated: let {webrequest} = cu.import("resource://gre/modules/webrequest.jsm", {}); webrequest.onbeforerequest.addlistener(logurl); function logurl(e) { console.log("loading: " + e.url); } filtering this example logs urls for requests under "https://developer.mozilla.org/": let {webrequest} = cu.import("resource://gre/modules/webrequest.jsm", {}); cu.import("resource://gre/modules/matchpattern.jsm"); let pattern = new matchpattern("https:/de...
...And 4 more matches

Localization and Plurals
verything: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, … plural rule #1 (2 forms) families: germanic (danish, dutch, english, faroese, frisian, german, norwegian, swedish), finno-ugric (estonian, finnish, hungarian), language isolate (basque), latin/greek (greek), semitic (hebrew), romanic (italian, portuguese, spanish, catalan), vietnamese is 1: 1 everything else: 0, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, … plural rule #2 (2 forms) families: romanic (french, brazilian portuguese), lingala is...
... pluralrule=2 seconds=seconde;secondes minutes=minute;minutes hours=heure;heures days=jour;jours like many other times when localizing words, gender agreement might force you to rearrange words in a way that the gender is always the same.
... components.utils.import("resource://gre/modules/pluralform.jsm"); methods: get these methods make use of the browser's current locale specified by chrome://global/locale/intl.properties's pluralrule value.
...And 4 more matches

Index
because public key encryption is more expensive (more calculations required) than symmetric encryption (where both parties use the same key), a key agreement protocol will be executed, where the public and private keys are used to proof and verify the exchanged initial information.
... once the key agreement is done, a symmetric encryption will be used (until a potential re-handshake on an existing channel).
... therefore, you should take great care to ensure that you can stand behind any file you sign and distribute.
...And 4 more matches

XPCOM Interface Reference
tallinfoamiwebinstalllisteneramiwebinstallpromptamiwebinstallerimgicacheimgicontainerimgicontainerobserverimgidecoderimgidecoderobserverimgiencoderimgiloaderimgirequestinidomutilsjsdistackframemoziasyncfaviconsmoziasynchistorymozicoloranalyzermozijssubscriptloadermozipersonaldictionarymoziplaceinfomoziplacesautocompletemoziregistrymozirepresentativecolorcallbackmozispellcheckingenginemozistorageaggregatefunctionmozistorageasyncstatementmozistoragebindingparamsmozistoragebindingparamsarraymozistoragecompletioncallbackmozistorageconnectionmozistorageerrormozistoragefunctionmozistoragependingstatementmozistorageprogresshandlermozistorageresultsetmozistoragerowmozistorageservicemozistoragestatementmozistoragestatementcallbackmozistoragestatementparamsmozistoragestatementrowmozistoragestatementwra...
...nsidomglobalpropertyinitializernsidomhtmlaudioelementnsidomhtmlformelementnsidomhtmlmediaelementnsidomhtmlsourceelementnsidomhtmltimerangesnsidomjswindownsidommousescrolleventnsidommoznetworkstatsnsidommoznetworkstatsdatansidommoznetworkstatsmanagernsidommoztoucheventnsidomnshtmldocumentnsidomnavigatordesktopnotificationnsidomnodensidomofflineresourcelistnsidomorientationeventnsidomparsernsidomprogresseventnsidomserializernsidomsimplegestureeventnsidomstoragensidomstorage2nsidomstorageeventobsoletensidomstorageitemnsidomstoragelistnsidomstoragemanagernsidomstoragewindownsidomuserdatahandlernsidomwindownsidomwindow2nsidomwindowinternalnsidomwindowutilsnsidomxpathevaluatornsidomxpathexceptionnsidomxpathexpressionnsidomxpathresultnsidomxulcontrolelementnsidomxulelementnsidomxullabeledcontrolelem...
...icemotionlistenernsidialogcreatornsidialogparamblocknsidictionarynsidirindexnsidirindexlistenernsidirindexparsernsidirectoryenumeratornsidirectoryiteratornsidirectoryservicensidirectoryserviceprovidernsidirectoryserviceprovider2nsidiskcachestreaminternalnsidispatchsupportnsidocshellnsidocumentloadernsidownloadnsidownloadhistorynsidownloadmanagernsidownloadmanageruinsidownloadobservernsidownloadprogresslistenernsidownloadernsidragdrophandlernsidragservicensidragsessionnsidroppedlinkhandlernsidroppedlinkitemnsidynamiccontainernsieditornsieditorboxobjectnsieditordocshellnsieditorimesupportnsieditorloggingnsieditormailsupportnsieditorobservernsieditorspellchecknsieffectivetldservicensienumeratornsienvironmentnsierrorservicensieventlistenerinfonsieventlistenerservicensieventsourcensieventtargetnsi...
...And 4 more matches

Using js-ctypes
this is as simple as including the following line of code in the desired javascript scope: components.utils.import("resource://gre/modules/ctypes.jsm") loading a native library once you've imported the code module, you can call the ctypes.open() method to load each native library you wish to use.
... components.utils.import("resource://gre/modules/ctypes.jsm"); var lib = ctypes.open("c:\\windows\\system32\\user32.dll"); /* declare the signature of the function we are going to call */ var msgbox = lib.declare("messageboxw", ctypes.winapi_abi, ctypes.int32_t, ctypes.int32_t, ctypes.jschar.ptr, ctypes.jschar.p...
... note: this example will not work on 64bit os x, see below for core foundation for 64bit os x /* build a str255 ("pascal style") string from the passed-in string */ function makestr(str) { return string.fromcharcode(str.length) + str; } components.utils.import("resource://gre/modules/ctypes.jsm"); var carbon = ctypes.open("/system/library/frameworks/carbon.framework/carbon"); stdalert = carbon.declare("standardalert", /* function name */ ctypes.default_abi, /* abi type */ ctypes.int16_t, /* return type */ ctypes.int16_t, /* alert type */ cty...
...And 4 more matches

Detecting device orientation - Web APIs
in particular, hand-held devices such as mobile phones can use this information to automatically rotate the display to remain upright, presenting a wide-screen view of the web content when the device is rotated so that its width is greater than its height.
...these are described in greater detail in the orientation and motion data explained article which is summarized below.
... the deviceorientationevent.alpha value represents the motion of the device around the z axis, represented in degrees with values ranging from 0 to 360.
...And 4 more matches

Text.wholeText - Web APIs
syntax str = textnode.wholetext; notes and example suppose you have the following simple paragraph within your webpage (with some whitespace added to aid formatting throughout the code samples here), whose dom node is stored in the variable para: <p>thru-hiking is great!
... <strong>no insipid election coverage!</strong> however, <a href="http://en.wikipedia.org/wiki/absentee_ballot">casting a ballot</a> is tricky.</p> you decide you don’t like the middle sentence, so you remove it: para.removechild(para.childnodes[1]); later, you decide to rephrase things to, “thru-hiking is great, but casting a ballot is tricky.” while preserving the hyperlink.
... so you try this: para.firstchild.data = "thru-hiking is great, but "; all set, right?
...And 4 more matches

Color masking - Web APIs
so, by masking off the blue and green channels, you are only allowing the red component of pixels to be updated, and therefore it is as if you were looking through a red tinted glass.
...so, clearly masking both blue and red, would give us shades of green.
... masking only the blue channel would give us shades of yellow (including shades of orange, brown, olive and yellow-green), the complementary of blue.
...And 4 more matches

Accessibility documentation index - Accessibility
26 using the aria-valuemax attribute aria, accessibility the aria-valuemax attribute is used to define the maximum value allowed for a range widget such as a slider, spinbutton or progressbar.
... 27 using the aria-valuemin attribute aria, accessibility, needscontent the aria-valuemin attribute is used to define the minimum value allowed for a range widget such as a slider, spinbutton or progressbar.
... 28 using the aria-valuenow attribute aria, accessibility, needscontent the aria-valuenow attribute is used to define the current value for a range widget such as a slider, spinbutton or progressbar.
...And 4 more matches

appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
arance: auto; appearance: menulist-button; appearance: textfield; /* "compat-auto" values, which have the same effect as 'auto' */ appearance: button; appearance: searchfield; appearance: textarea; appearance: push-button; appearance: slider-horizontal; appearance: checkbox; appearance: radio; appearance: square-button; appearance: menulist; appearance: listbox; appearance: meter; appearance: progress-bar; /* partial list of available values in gecko */ -moz-appearance: scrollbarbutton-up; -moz-appearance: button-bevel; /* partial list of available values in webkit/blink (as well as gecko and edge) */ -webkit-appearance: media-mute-button; -webkit-appearance: caret; values standard keywords value demo browser description none div{ color: black; ...
...; } <div>lorem</div> firefox chrome safari edge menulist div { color: black; -moz-appearance: menulist; -webkit-appearance: menulist; } <div>lorem</div> firefox chrome safari edge meter div{ color: black; -webkit-appearance: meter; } <div>lorem</div> chrome safari firefox progress-bar div{ color: black; -webkit-appearance: progress-bar; } <div>lorem</div> chrome safari firefox push-button div{ color: black; -webkit-appearance: push-button; } <div>lorem</div> chrome safari edge radio div { color: black; -moz-appearance: radio; -webkit-appearance: radio; } <div>l...
... number-input div { color: black; -moz-appearance: number-input; -webkit-appearance: number-input; } <div>lorem</div> firefox progress-bar-value div{ color: black; -webkit-appearance: progress-bar-value; } <div>lorem</div> chrome safari progressbar div { color: black; -moz-appearance: progressbar; -webkit-appearance: progressbar; } <div>lorem</div> firefox the element is styled like a progress bar.
...And 4 more matches

Media buffering, seeking, and time ranges - Developer guides
sometimes it's useful to know how much <audio> or <video> has downloaded or is playable without delay — a good example of this is the buffered progress bar of an audio or video player.
... var startx = myaudio.buffered.start(i) * inc; var endx = myaudio.buffered.end(i) * inc; var width = endx - startx; context.fillrect(startx, 0, width, mycanvas.height); context.rect(startx, 0, width, mycanvas.height); context.stroke(); } }); } this works better with longer pieces of audio or video, but press play and click about the player progress bar and you should get something like this.
...the html for our player looks like this: <audio id="my-audio" preload controls> <source src="music.mp3" type="audio/mpeg"> </audio> <div class="buffered"> <span id="buffered-amount"></span> </div> <div class="progress"> <span id="progress-amount"></span> </div> we'll use the following css to style the buffering display: .buffered { height: 20px; position: relative; background: #555; width: 300px; } #buffered-amount { display: block; height: 100%; background-color: #777; width: 0; } .progress { margin-top: -20px; height: 20px; position: relative; width: 300px; } #progress-amoun...
...And 4 more matches

<input type="range"> - HTML: Hypertext Markup Language
the value won't be greater than max.
... see the range control with hash marks below for an example of how the options on a range are denoted in supported browsers max the greatest value in the range of permitted values.
... this value must be greater than or equal to the value of the min attribute.
...And 4 more matches

SVG documentation index - SVG: Scalable Vector Graphics
29 azimuth filters, svg, svg attribute the azimuth attribute specifies the direction angle for the light source on the xy plane (clockwise), in degrees from the x axis.
... 66 elevation filters, svg, svg attribute the elevation attribute specifies the direction angle for the light source from the xy plane towards the z-axis, in degrees.
... 126 limitingconeangle filters, svg, svg attribute the limitingconeangle attribute represents the angle in degrees between the spot light axis (i.e.
...And 4 more matches

Compiling from Rust to WebAssembly - WebAssembly
let's write some rust let's put this code into src/lib.rs instead: use wasm_bindgen::prelude::*; #[wasm_bindgen] extern { pub fn alert(s: &str); } #[wasm_bindgen] pub fn greet(name: &str) { alert(&format!("hello, {}!", name)); } this is the contents of our rust project.
... producing rust functions that javascript can call the final part is this one: #[wasm_bindgen] pub fn greet(name: &str) { alert(&format!("hello, {}!", name)); } once again, we see the #[wasm_bindgen] attribute.
... this function is named greet, and takes one argument, a string (written &str), name.
...And 4 more matches

Adding menus and submenus - Archive of obsolete content
the toolbox should be positioned near the top of the xul document, and the code should be similar to this: <toolbox> <menubar id="xulschoolhello-menubar"> <menu id="xulschoolhello-greeting-menu" label="&xulschoolhello.greeting.label;"> <menupopup> <menuitem label="&xulschoolhello.greet.short.label;" oncommand="xulschoolchrome.greetingdialog.greetingshort(event);" /> <menuitem label="&xulschoolhello.greet.medium.label;" oncommand="xulschoolchrome.greetingdialog.greetingmedium(event);" /> <menuitem label="&xulschoolhello.greet.lo...
...ng.label;" oncommand="xulschoolchrome.greetingdialog.greetinglong(event);" /> <menuseparator /> <menuitem label="&xulschoolhello.greet.custom.label;" oncommand="xulschoolchrome.greetingdialog.greetingcustom(event);" /> </menupopup> </menu> </menubar> </toolbox> this code displays a simple menu with options for 3 different types of greetings, a menuseparator, and finally an option to show a custom greeting.
...menus require a menupopup element as a container for its children, which are usually menuitem elements, but can also be menuseparator, or menu in order to have multiple nesting levels: <toolbox> <menubar id="xulschoolhello-menubar"> <menu id="xulschoolhello-greeting-menu" label="&xulschoolhello.greeting.label;"> <menupopup> <menu id="xulschoolhello-greeting-sizes-menu" label="&xulschoolhello.greetingsizes.label;"> <menupopup> <menuitem label="&xulschoolhello.greet.short.label;" oncommand="xulschoolchrome.greetingdialog.greetingshort(event);" /> <menuitem label="&xulschoolhello.greet.medium.la...
...And 3 more matches

The Essentials of an Extension - Archive of obsolete content
toolbars, menu bars, progress bars, and window title bars are all examples of elements that are typically part of the chrome.
...this gives firefox extensions a great deal of flexibility.
...event handlers are explained in greater depth further ahead.
...And 3 more matches

Building Trees - Archive of obsolete content
the mode is used for progress meter columns.
... it may be set to either “normal” for a normal progress meter or “undetermined” for an undetermined progress meter.
... the value attribute is used to set the current progress value for normal progress meters.
...And 3 more matches

Styling a Tree - Archive of obsolete content
::-moz-tree-progressmeter: content for progressmeter cells.
... you can create a progressmeter column by setting the type attribute on the column to progressmeter.
...the example below sets the background color to grey for rows that have the 'readonly' and 'unread' properties.
...And 3 more matches

Archived Mozilla and build documentation - Archive of obsolete content
chromeless [this project may not be active — check github https://github.com/mozilla/chromeless] creating a firefox sidebar extension this article describes how to create a registered sidebar for firefox 2 or greater.
... download manager improvements in firefox 3 firefox 3 offers improvements to the download manager that allow multiple progress listeners, use of the storage api for data management, download resuming, and more.
... gre hacking wiki to be able to hack the mdc wiki software, you'll need a local webserver install, which can run mediawiki.
...And 3 more matches

Common Firefox theme issues and solutions - Archive of obsolete content
"about" pages about:addons disabled add-on icons are not grey scale in tools > add-ons, the icons of disabled icons need to be converted to grey scale.
... to accomplish this copy the file chrome://mozapps/skin/extensions/extensions.svg from the default theme into the mozapps/extensions/ folder of your theme and add the following style rule to the css file extensions.css: .addon[active="false"] .icon { filter: url("chrome://mozapps/skin/extensions/extensions.svg#greyscale"); opacity:0.3; } about:memory about:memory nodes do not collapse the styling of about:memory is a little messed up in that nodes do not collapse as they should when clicked on.
...this is document is a work in progress so feedback and/or suggestions is appreciated.
...And 3 more matches

Supporting older browsers - Learn web development
in my experience, developers are often very worried about the experience of 1% of users in an old version of internet explorer, while not considering at all the far greater number who have accessibility needs.
...supporting everyone means serving a version of your content that is designed defensively, so that it will look great on modern browsers, but will still be usable at a basic level for users of older browsers.
... flexbox as a fallback for grid flexbox has greater browser support than grid due to being supported by ie10 and 11, although do check out the information later in this lesson explaining the rather patchy and confusing support for flexbox in older browsers.
...And 3 more matches

Useful string methods - Learn web development
filtering greeting messages in the first exercise we'll start you off simple — we have an array of greeting card messages, but we want to sort them to list just the christmas messages.
... playable code <h2>live output</h2> <div class="output" style="min-height: 125px;"> <ul> </ul> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 290px; width: 95%"> const list = document.queryselector('.output ul'); list.innerhtml = ''; let greetings = ['happy birthday!', 'merry christmas my love', 'a happy christmas to all the family', 'you\'re all i want for christmas', 'get well soon']; for (let i = 0; i < greetings.length; i++) { let input = greetings[i]; // your conditional test needs to go inside the parentheses // in the line below, replacing what's curren...
...tly there if (greetings[i]) { let listitem = document.createelement('li'); listitem.textcontent = input; list.appendchild(listitem); } } </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('cl...
...And 3 more matches

Introduction to cross browser testing - Learn web development
different devices with different capabilities, from the latest greatest tablets and smartphones, through smart tvs, right down to cheap tablets and even older feature phones that may run browsers with limited capabilities.
...as a web developer, you need to agree on a range of browsers and devices that the code definitely needs to work on with the site owner, but beyond that, you need to code defensively to give other browsers the best chance possible of being able to use your content.
... this is one of the great challenges of web development.
...And 3 more matches

CSUN Firefox Materials
firefox 1.5, beyond the status quo "...firefox is a great little browser.
...firefox's "www for everyone" philosophy is also a great accessibility story.
...many users are finding the true greatness of firefox lies in support for third party extensions.
...And 3 more matches

Overview of Mozilla embedding APIs
contract-id: ns_pref_contractid implemented interfaces: nsiprefservice nsiprefbranch related interfaces: nsipreflistener profile manager service contract-id: implemented interfaces: document loader service (webprogress) eventually, this service will be replaced by thewebprogress service...
... contract-id: ns_document_loader_service_contractid implemented interfaces: nsiwebprogress nsidocumentloader related interfaces: nsiwebprogresslistener public components nswebbrowser the nswebbrowser is the main embedding component which gecko exposes.
...contract-id: ns_webbrowser_contractid implemented interfaces: nsiwebbrowser nsiwebnavigation nsiwebbrowsersetup nsiwebbrowserpersist nsiwebbrowserfind nsiwebbrowserprint nsiwebbrowserfocus nsibasewindow requestor interfaces: nsidomwindow nsidomdocument nsiwebprogress nsiclipboardcommands nsiprompt related interfaces: nsiprompt nsiwebbrowserchrome nsiwebbrowsersitewindow nsiwebprogresslistener nsicontextmenulistener nsiprintoptions overview: most of gecko's functionality is exposed through the nswebbrowser component.
...And 3 more matches

InstallListener
installlisteners are notified of an addoninstall's progress.
... method overview void onnewinstall(in addoninstall install) void ondownloadstarted(in addoninstall install) void ondownloadprogress(in addoninstall install) void ondownloadended(in addoninstall install) void ondownloadcancelled(in addoninstall install) void ondownloadfailed(in addoninstall install) void oninstallstarted(in addoninstall install) void oninstallended(in addoninstall install, in addon addon) void oninstallcancelled(in addoninstall install) void oninstallfailed(in addoninstall install) void onexternalinstall(in addon install, in addon existingaddo...
...n, in boolean needsrestart) methods onnewinstall() called when a new instance of addoninstall is created, primarily so ui can display some kind of progress for all installs.
...And 3 more matches

PromiseWorker.jsm
promiseworker.jsm path: resource://gre/modules/promiseworker.jsm a javascript code module used by the main thread to create a worker thread and communicate with it.
... promiseworker.js path: resource://gre/modules/workers/promiseworker.js a javascript file used by the worker thread, which is created by promiseworker.jsm in main thread, to communicate with the main thread.
...the code below is what should be copied and pasted: importscripts('resource://gre/modules/workers/require.js'); let promiseworker = require('resource://gre/modules/workers/promiseworker.js'); // instantiate abstractworker (see below).
...And 3 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.
... search plugin changes this greatly impacts productization.
... once you have made the formal request in bugzilla and you have pushed your work into your l10n repo, refer to the dashboards to follow your review's progress.
...And 3 more matches

Rhino overview
rhino 1.3 and greater conform to edition 3 of the standard.
... rhino 1.6 and greater implement ecma-357 ecmascript for xml (e4x).
... version 1.3 and greater are ecma conformant.
...And 3 more matches

nsITreeView
tcelltext(in long row, in nsitreecolumn col); astring getcellvalue(in long row, in nsitreecolumn col); astring getcolumnproperties(in nsitreecolumn col, in nsisupportsarray properties obsolete since gecko 22); astring getimagesrc(in long row, in nsitreecolumn col); long getlevel(in long index); long getparentindex(in long rowindex); long getprogressmode(in long row, in nsitreecolumn col); astring getrowproperties(in long index, in nsisupportsarray properties obsolete since gecko 22); boolean hasnextsibling(in long rowindex, in long afterindex); boolean iscontainer(in long index); boolean iscontainerempty(in long index); boolean iscontaineropen(in long index); boolean iseditable(in long ...
... constants constant value description progress_normal 1 note: renamed from progressnormal in gecko 1.8 progress_undetermined 2 note: renamed from progressundetermined in gecko 1.8 progress_none 3 note: renamed from progressnone in gecko 1.8 drop_before -1 drop_on 0 drop_after 1 indropbefore 0 obsolete since gecko 1.8...
... getprogressmode() the progress mode for a given cell.
...And 3 more matches

nsIWinTaskbar
see bug 744992 for details and to track progress on a fix.
...to create an instance, use: var wintaskbar = components.classes["@mozilla.org/windows-taskbar;1"] .getservice(components.interfaces.nsiwintaskbar); method overview nsijumplistbuilder createjumplistbuilder(); nsitaskbartabpreview createtaskbartabpreview(in nsidocshell shell, in nsitaskbarpreviewcontroller controller); nsitaskbarprogress gettaskbarprogress(in nsidocshell shell); nsitaskbarwindowpreview gettaskbarwindowpreview(in nsidocshell shell); void setgroupidforwindow(in nsidomwindow aparent, in astring aidentifier); attributes attribute type description available boolean returns true if the operating system supports windows 7 or later taskbar features; you can use this instead of in-place operating system ver...
...= navigator2.queryinterface(components.interfaces.nsidocshell); // get the parent docshell; this is the top-level docshell var docshelltreeitem = docshell.queryinterface(components.interfaces.nsidocshelltreeitem); var parent = docshelltreeitem.parent; var ds = parent.queryinterface(components.interfaces.nsidocshell); // create the preview taskbar.createtaskbartabpreview(ds, {}); gettaskbarprogress() gets the taskbar progress for a window.
...And 3 more matches

Add to iPhoto
the first declaration to be done here is to actually declare the cfstringref data type; this is an opaque pointer to a cfstring object.
... this.cfstringref = new ctypes.pointertype("cfstringref"); now that we've declared the core type, we can declare the methods we use that work with cfstring objects.
... this.cfstringcreatewithcharacters = this.lib.declare("cfstringcreatewithcharacters", ctypes.default_abi, this.cfstringref, // returns a new cfstringref ctypes.voidptr_t, // allocator ctypes.jschar.ptr, // pointer to the unicode string ctypes.int32_t); // length of the string cfstringcreatewithcharacters() is used to create a new cfstring object using a unicode string as the source string, which is copied into the new cfstring object.
...And 3 more matches

Standard OS Libraries
components.utils.import("resource://gre/modules/ctypes.jsm"); var lib = ctypes.open("user32.dll"); /* note: if you go to getcursorpos page on msdn, it says first argument is of structure point, so lets create that structure, * the link here shows that that x and y are type long which is ctypes.long */ // https://msdn.microsoft.com/en-us/library/windows/desktop/dd162805%28v=vs.85%29.aspx var point = new ctypes.structtype("tagpoint", ...
... components.utils.import('resource://gre/modules/ctypes.jsm'); var gdk = ctypes.open('libgdk-x11-2.0.so.0'); // types var gint = ctypes.int; var gdkdevice = ctypes.structtype('gdkdevice'); var gdkmodifiertype = ctypes.int; var gdkwindow = ctypes.structtype('gdkwindow'); var void = ctypes.void_t; // https://developer.gnome.org/gdk3/stable/gdk3-windows.html#gdk-get-default-root-window var gdk_get_default_root_window = gdk.declare('gdk_...
...x, x.tostring()); console.info('y:', y, y.tostring()); console.info('mask:', mask, mask.tostring()); gdk.close(); example: gdk_window_get_device_position this example works only for gdk3, as the function gdk_window_get_device_position was not available in gdk2, for gdk2 equivalent see above warning this example does not work yet it needs some bug fixing components.utils.import('resource://gre/modules/ctypes.jsm'); var gdk = ctypes.open('libgdk-x11-2.0.so.0'); var gdk3 = ctypes.open('libgdk-3.so.0'); // types var gint = ctypes.int; var gdkdevice = ctypes.structtype('gdkdevice'); var gdkdevicemanager = ctypes.structtype('gdkdevicemanager'); var gdkdisplay = ctypes.structtype('gdkdisplay'); var gdkmodifiertype = ctypes.int; var gdkwindow = ctypes.structtype('gdkwindow'); // https://dev...
...And 3 more matches

Using files from web applications - Web APIs
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 previews of images before the user actually uploads them.
... function fileupload(img, file) { const reader = new filereader(); this.ctrl = createthrobber(img); const xhr = new xmlhttprequest(); this.xhr = xhr; const self = this; this.xhr.upload.addeventlistener("progress", function(e) { if (e.lengthcomputable) { const percentage = math.round((e.loaded * 100) / e.total); self.ctrl.update(percentage); } }, false); xhr.upload.addeventlistener("load", function(e){ self.ctrl.update(100); const canvas = self.ctrl.ctx.canvas; canvas.parentnode.removechild(canvas); }, false); xhr.open("p...
...ost", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php"); xhr.overridemimetype('text/plain; charset=x-user-defined-binary'); reader.onload = function(evt) { xhr.send(evt.target.result); }; reader.readasbinarystring(file); } the fileupload() function shown above creates a throbber, which is used to display progress information, and then creates an xmlhttprequest to handle uploading the data.
...And 3 more matches

WebGL2RenderingContext.texImage3D() - Web APIs
possible values: gl.alpha: discards the red, green and blue components and reads the alpha component.
... gl.rgb: discards the alpha components and reads the red, green and blue components.
... gl.rgba: red, green, blue and alpha components are read from the color buffer.
...And 3 more matches

WebGL2RenderingContext.texSubImage3D() - Web APIs
possible values: gl.alpha: discards the red, green and blue components and reads the alpha component.
... gl.rgb: discards the alpha components and reads the red, green and blue components.
... gl.rgba: red, green, blue and alpha components are read from the color buffer.
...And 3 more matches

WebGLRenderingContext.texImage2D() - Web APIs
gba ui16 ui16 ui16 ui16 ● rgba32i rgba i32 i32 i32 i32 ● rgba32ui rgba ui32 ui32 ui32 ui32 ● possible values in webgl2 for the versions of teximage2d that take a texture an htmlimageelement, htmlcanvaselement, htmlvideoelement, imagebitmap, or imagedata gl.alpha: discards the red, green and blue components and reads the alpha component.
... gl.rgb: discards the alpha components and reads the red, green and blue components.
... gl.rgba: red, green, blue and alpha components are read from the color buffer.
...And 3 more matches

WebGLRenderingContext.texSubImage2D() - Web APIs
possible values: gl.alpha: discards the red, green and blue components and reads the alpha component.
... gl.rgb: discards the alpha components and reads the red, green and blue components.
... gl.rgba: red, green, blue and alpha components are read from the color buffer.
...And 3 more matches

A basic 2D WebGL animation example - Web APIs
let uscalingfactor; let uglobalcolor; let urotationvector; let avertexposition; // animation timing let previoustime = 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: gl.fragment_shader, ...
... then the current rotation angle (in degrees) is set to 0.0, since we haven't performed any rotation yet, and the rotation speed (in degrees per screen refresh period, typically 60 fps) is set to 6.
...ertexposition = 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 - previoustime) / 1000.0) * degreespersecond; currentangle = (currentangle + deltaangle) % 360; previoustime = 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.
...And 3 more matches

Clearing with colors - Web APIs
set up the rendering context and then just clear it solid green.
... note that css sets the background color of the canvas to black, so when the canvas turns green we know that webgl's magic has worked.
...first, we set the clear color to green, using the method clearcolor().
...And 3 more matches

Signaling and video calling - Web APIs
this process is called signaling and involves both devices connecting to a third, mutually agreed-upon server.
... once the two peers agree upon a mutually-compatible candidate, that candidate's sdp is used by each peer to construct and open a connection, through which media then begins to flow.
... if they later agree on a better (usually higher-performance) candidate, the stream may change formats as needed.
...And 3 more matches

Movement, orientation, and motion: A WebXR example - Web APIs
the code looks like this: const xrotationdegreespersecond = 25; const yrotationdegreespersecond = 15; const zrotationdegreespersecond = 35; const enablerotation = true; const allowmouserotation = true; const allowkeyboardmotion = true; const enableforcepolyfill = false; //const session_type = "immersive-vr"; const session_type = "inline"; const mouse_speed = 0.003; xrotationdegreespersecond the number of degrees of rotation to apply arou...
... yrotationdegreespersecond the number of degrees to rotate around the y axis each second.
... zrotationdegreespersecond the number of degrees per second to rotate around the z axis.
...And 3 more matches

ARIA Test Cases - Accessibility
regression testers should test both tabbing forward and back, to make sure that the groupbox description and button description are both read when the button is the first item focused in the groupbox.
...ts: at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 - - - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - progressbar dojo nightly build progress bar in "off" live region progressbar in "assertive" live region expected at behavior: the progress updates should be treated as the screen reader treats any progress updates.
... the live region markup should not affect how the progress updates are presented.
...And 3 more matches

Web accessibility for seizures and physical reactions - Accessibility
for a great introduction on the topic of musicogenic seizures, visit epilepsy ontario's web page on musicogenic seizures.
...section 508 prohibits flickering effects with a frequency greater than 3 hz (flickers per second) and lower than 55 hz.
... @media screen and (prefers-reduced-motion: reduce) { } @media screen and (prefers-reduced-motion) { } to see a great example of how to use the code prefers-reduced-motion, visit the mdn document, prefers-reduced-motion, or see the example below from the section on new in chrome 74.
...And 3 more matches

Specificity - CSS: Cascading Style Sheets
when two conflicting declarations with the !important rule are applied to the same element, the declaration with a greater specificity will be applied.
...by indicating one or more elements before the element you're selecting, the rule becomes more specific and gets higher priority: <div id="test"> <span>text</span> </div> div#test span { color: green; } div span { color: blue; } span { color: red; } no matter the order, text will be green because that rule is most specific.
... *#foo { color: green; } *[id="foo"] { color: purple; } ...
...And 3 more matches

cross-fade() - CSS: Cascading Style Sheets
cross-fade( url(white.png) 0%, url(black.png) 100%); /* fully black */ cross-fade( url(white.png) 25%, url(black.png) 75%); /* 25% white, 75% black */ cross-fade( url(white.png) 50%, url(black.png) 50%); /* 50% white, 50% black */ cross-fade( url(white.png) 75%, url(black.png) 25%); /* 75% white, 25% black */ cross-fade( url(white.png) 100%, url(black.png) 0%); /* fully white */ cross-fade( url(green.png) 75%, url(red.png) 75%); /* both green and red at 75% */ if any percentages are omitted, all the specified percentages are summed together and subtracted from 100%.
... if the result is greater than 0%, the result is then divided equally between all images with omitted percentages.
...een written as: cross-fade( url(white.png) 0%, url(black.png)); /* fully black */ cross-fade( url(white.png) 25%, url(black.png)); /* 25% white, 75% black */ cross-fade( url(white.png), url(black.png)); /* 50% white, 50% black */ cross-fade( url(white.png) 75%, url(black.png)); /* 75% white, 25% black */ cross-fade( url(white.png) 100%, url(black.png)); /* fully white */ cross-fade( url(green.png) 75%, url(red.png) 75%); /* both green and red at 75% */ if no percentages are declared, both the images will be 50% opaque, with a cross-fade rendering as an even merge of both images.
...And 3 more matches

async function - JavaScript
await expressions suspend progress through an async function, yielding control and subsequently resuming progress only when an awaited promise-based asynchronous operation is either fulfilled or rejected.
...in this way a promise chain is progressively constructed with each reentrant step through the function.
...progress moves through function foo in three stages.
...And 3 more matches

Handling media support issues in web content - Web media technologies
one of the realities of working with audio and video presentation and manipulation on the web is that there are a number of media formats available, of varying degrees of popularity and with a variety of capabilities.
... poster frames for video progressive images images—whether embedded using <img> or <picture>—don't support a concept similar to poster frames.
...this requires creating your images using progressive formats, such as progressive jpeg or interlaced png.
...And 3 more matches

end - SVG: Scalable Vector Graphics
begin="0s" end="6s" fill="freeze" /> </rect> <rect x="10" y="85" height="15" width="0"> <animate attributetype="xml" attributename="width" to="50" begin="0s" end="4s" fill="freeze" /> </rect> <!-- grid --> <text x="10" y="20" text-anchor="middle">0s</text> <line x1="10" y1="25" x2="10" y2="105" stroke="grey" stroke-width=".5" /> <text x="35" y="20" text-anchor="middle">2s</text> <line x1="35" y1="25" x2="35" y2="105" stroke="grey" stroke-width=".5" /> <text x="60" y="20" text-anchor="middle">4s</text> <line x1="60" y1="25" x2="60" y2="105" stroke="grey" stroke-width=".5" /> <text x="85" y="20" text-anchor="middle">6s</text> <line x1="85" y1="25" x2="85" y2="105" stroke="grey...
..." stroke-width=".5" /> <text x="110" y="20" text-anchor="middle">8s</text> <line x1="110" y1="25" x2="110" y2="105" stroke="grey" stroke-width=".5" /> <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" /> <line x1="10" y1="105" x2="110" y2="105" stroke="grey" stroke-width=".5" /> </svg> event example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- animated rectangle --> <rect x="10" y="35" height="15" width="0"> <animate attributetype="xml" attributename="width" from="0" to="100" begin="0s" end="endbutton.click" dur="8s" repeatcount="indefinite" fill="freeze" /> </rect> <!-- trigge...
...r --> <rect id="endbutton" style="cursor:pointer;" x="19.5" y="62.5" rx="5" height="25" width="80" fill="#efefef" stroke="black" stroke-width="1" /> <text x="60" y="80" text-anchor="middle" style="pointer-events:none;">click me.</text> <!-- grid --> <text x="10" y="20" text-anchor="middle">0s</text> <line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" /> <text x="35" y="20" text-anchor="middle">2s</text> <line x1="35" y1="25" x2="35" y2="55" stroke="grey" stroke-width=".5" /> <text x="60" y="20" text-anchor="middle">4s</text> <line x1="60" y1="25" x2="60" y2="55" stroke="grey" stroke-width=".5" /> <text x="85" y="20" text-anchor="middle">6s</text> <line x1="85" y1="25" x2="85" y2="55" stroke="grey" st...
...And 3 more matches

glyph-orientation-vertical - SVG: Scalable Vector Graphics
when the inline-progression-direction is vertical and the glyph-orientation-vertical results in an orientation angle that is a multiple of 180 degrees, then the current text position is incremented according to the vertical metrics of the glyph.
... otherwise, if the angle is not a multiple of 180 degrees, then the current text position is incremented according to the horizontal metrics of the glyph.
... as a presentation attribute, it can be applied to any element but it has effect only on the following five elements: <altglyph>, <textpath>, <text>, <tref>, and <tspan> context notes value auto | <angle> default value auto animatable no auto fullwidth ideographic and fullwidth latin text will be set with a glyph orientation of 0 degrees.
...And 3 more matches

transform - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="-40 0 150 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g fill="grey" transform="rotate(-10 50 100) translate(-36 45.5) skewx(40) scale(1 0.5)"> <path id="heart" d="m 10,30 a 20,20 0,0,1 50,30 a 20,20 0,0,1 90,30 q 90,60 50,90 q 10,60 10,30 z" /> </g> <use xlink:href="#heart" fill="none" stroke="red"/> </svg> note: as of svg2, transform is a presentation attribute, meaning it can be used as a css property.
...x} x_{\mathrm{prevcoordsys}} \\ y_{\mathrm{prevcoordsys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{prevcoordsys}} + c y_{\mathrm{prevcoordsys}} + e \\ b x_{\mathrm{prevcoordsys}} + d y_{\mathrm{prevcoordsys}} + 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 * ...
... in other words: xnew = xold + <x> ynew = yold + <y> example html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- no translation --> <rect x="5" y="5" width="40" height="40" fill="green" /> <!-- horizontal translation --> <rect x="5" y="5" width="40" height="40" fill="blue" transform="translate(50)" /> <!-- vertical translation --> <rect x="5" y="5" width="40" height="40" fill="red" transform="translate(0 50)" /> <!-- both horizontal and vertical translation --> <rect x="5" y="5" width="40" height="40" fill="yellow" transform="translate(...
...And 3 more matches

Paths - SVG: Scalable Vector Graphics
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> <path d="m 10 80 q 52.5 10, 95 80 t 180 80" stroke="black" fill="transparent"/> </svg> both curves produce similar results, although the cubic one allows greater freedom in exactly what the curve looks like.
...this is best explained with an example: <svg width="320" height="320" xmlns="http://www.w3.org/2000/svg"> <path d="m 10 315 l 110 215 a 30 50 0 0 1 162.55 162.45 l 172.55 152.45 a 30 50 -45 0 1 215.1 109.9 l 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/> </svg> the example shows a <path> element that goes diagonally across the page.
...for the second arc, though, the x-axis-rotation is set to -45 degrees.
...And 3 more matches

Chapter 1: Introduction to Extensions - Archive of obsolete content
about extensions management using the add-ons manager firefox's add-ons manager is an excellent way to manage extensions, and is a great step up in ease of use.
...this class of extension requires a greater level of knowledge and programming ability.
... greasemonkey userchrome.js both of these provide an environment for running user scripts (javascript) in firefox itself, where the scripts can target specific websites.
...And 2 more matches

Adding sidebars - Archive of obsolete content
keyboard shortcuts are an essential feature of firefox, and you can add your own into your extensions, which is also great.
...trees are another strong option when you need to show a great amount of information in a compact presentation.
...here's an example of a simple tree: <tree flex="1"> <treecols> <treecol label="&xulschoolhello.namecolumn.label;" flex="1" /> <treecol label="&xulschoolhello.greetingcolumn.label;" flex="3" /> </treecols> <treechildren> <treeitem> <treerow> <treecell label="peter" /> <treecell label="hey, what's up?" /> </treerow> </treeitem> <treeitem> <treerow> <treecell label="john"/> <treecell label="good evening, how are you doing?" /> </treerow> </treeitem> </treechildren> </tree> the t...
...And 2 more matches

The Box Model - Archive of obsolete content
with xul you can define vertically oriented as well as horizontally oriented interfaces, providing greater flexibility in interface design.
... any xul interface can be broken down into the following basic components: boxes text images alignment and flexibility widths and heights margins and paddings menus, toolbar buttons, and even the most complex elements in xul are composed of these simple ingredients.
...once you grasp this simple idea, you'll be able to use the dom inspector and css to mold xul elements and layouts with great precision and flexibility.
...And 2 more matches

browser - Archive of obsolete content
ry, disablesecurity, droppedlinkhandler, homepage, showcaret, src, type properties accessibletype, cangoback, cangoforward, contentdocument, contentprincipal, contenttitle, contentvieweredit, contentviewerfile, contentwindow, currenturi, docshell, documentcharsetinfo, homepage, markupdocumentviewer, messagemanager, preferences, securityui, sessionhistory, webbrowserfind, webnavigation, webprogress methods addprogresslistener, goback, goforward, gohome, gotoindex, loaduri, loaduriwithflags, reload, reloadwithflags, removeprogresslistener, stop, swapdocshells examples <!-- shows mozilla homepage inside a groupbox --> <groupbox flex="1"> <caption label="mozilla homepage"/> <browser type="content" src="http://www.mozilla.org" flex="1"/> </groupbox> attributes autocomp...
... webprogress type: nsiwebprogress this read-only property contains an nsiwebprogress object which is used to monitor the progress of a document loading.
...hildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata addprogresslistener( listener ) return type: no return value add a progress listener to the browser which will monitor loaded documents.
...And 2 more matches

Browser Detection and Cross Browser Support - Archive of obsolete content
fortunately, other browsers such as opera (versions 7 & later) and to a lesser extent, internet explorer (versions 5.5 & later) also support the standards to a degree.
... we are still faced with the question of how to develop standards based content while supporting the differing implementations of modern browsers while at the same time supporting (to a lesser degree) older and less capable browsers.
...the abilities of browsers to support the latest and greatest content changed on an almost daily basis.
...And 2 more matches

::-ms-fill - Archive of obsolete content
the ::-ms-fill css pseudo-element is a microsoft extension that represents a progress bar displayed by <progress>.
... all allowable properties except animation-name apply to a determinate progress bar.
...(a progress bar is determinate if it has a value attribute set; otherwise it is indeterminate.
...And 2 more matches

Unconventional controls - Game development
as well as being great for virtual interfaces, it can also be used for a casual 2d gaming experiences.
... we will need a few helper variables for our code to work — one for the purpose of calculating the degrees from radians, two for holding the horizontal and vertical amount of degrees our hand is leaning above the controller, one for the threshold of that lean, and one for the state of our hand's grab status.
... we next add these lines after all the event listeners for keyboard and mouse, but before the draw method: var todegrees = 1 / (math.pi / 180); var horizontaldegree = 0; var verticaldegree = 0; var degreethreshold = 30; var grabstrength = 0; right after that we use the leap's loop method to get the information held in the hand variable on every frame: leap.loop({ hand: function(hand) { horizontaldegree = math.round(hand.roll() * todegrees); verticaldegree = math.round(hand.pitch() * todegrees); grabstrength = hand.grabstrength; output.innerhtml = 'leap motion: <br />' + ' roll: ' + horizontaldegree + '° <br />' + ' pitch: ' + verticaldegree + '° <br />' + ' strength: ' + grabstrength + ''; } }); the code above i...
...And 2 more matches

Test your skills: Selectors - Learn web development
give the element with a class of alert a 1px grey border.
... if the element with a class of alert also has a class of go, make the background green.
... style links, making the link-state orange, visited links green, and remove the underline on hover.
...And 2 more matches

UI pseudo-classes - Learn web development
the above form isn't bad, but it isn't great either.
... for a start, we are signalling required versus optional status using color alone, which isn't great for colorblind people.
...e" 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; right: -20px; top: 5px; } input:invalid { border: 2px solid red; } input:invalid + span::before { content: '✖'; color: red; } input:valid + span::before { content: '✓'; color: green; } as before, we set the <span>s to position: relative so that we can position the generated content relative to them.
...And 2 more matches

A first splash into JavaScript - Learn web development
you got it right!'; lastresult.style.backgroundcolor = 'green'; loworhi.textcontent = ''; setgameover(); } else if (guesscount === 10) { lastresult.textcontent = '!!!game over!!!'; loworhi.textcontent = ''; setgameover(); } else { lastresult.textcontent = 'wrong!'; lastresult.style.backgroundcolor = 'red'; if(userguess < randomnumber) { loworhi.textcontent = 'last guess ...
...try entering the following lines, one at a time: let name = 'bingo'; name; let hello = ' says hello!'; hello; let greeting = name + hello; greeting; there are also some shortcut operators available, called augmented assignment operators.
...it exactly the same?) 5 === 2 + 4 // false 'chris' === 'bob' // false 5 === 2 + 3 // true 2 === '2' // false; number versus string !== non-equality (is it not the same?) 5 !== 2 + 4 // true 'chris' !== 'bob' // true 5 !== 2 + 3 // false 2 !== '2' // true; number versus string < less than 6 < 10 // true 20 < 10 // false > greater than 6 > 10 // false 20 > 10 // true conditionals returning to our checkguess() function, i think it's safe to say that we don't want it to just spit out a placeholder message.
...And 2 more matches

Basic math in JavaScript — numbers and operators - Learn web development
doubles are a specific type of floating point number that have greater precision than standard floating point numbers (meaning that they are accurate to a greater number of decimal places).
... 10 < 6 > greater than tests whether the left value is greater than the right one.
... 3 <= 2 >= greater than or equal to tests whether the left value is greater than or equal to the right one.
...And 2 more matches

Object building practice - Learn web development
the last two parameters specify the start and end number of degrees around the circle that the arc is drawn between.
... here we specify 0 degrees, and 2 * pi, which is the equivalent of 360 degrees in radians (annoyingly, you have to specify this in radians).
...if you had specified only 1 * pi, you'd get a semi-circle (180 degrees).
...And 2 more matches

Multimedia: Images - Learn web development
if you want to play it safe, then you would go for well compressed progressive jpegs.
... progressive jpegs, in contrast to normal jpegs, render progressively (hence the name), meaning the user sees a low-resolution version that gains clarity as the image downloads, rather than the image loading at full resolution top-to-bottom or even only rendering once completely downloaded.
...supports transparency and also animation, but not progressive display.
...And 2 more matches

Perceived performance - Learn web development
how fast a website feels like it's loading and rendering has a greater impact on user experience than how fast the website actually loads and renders.
... there is no unicorn metric that can measure what the user feels, but metrics are useful in guaging improvements (and regressions).
...loading essential data in initial requests and progressively loading features and data only as needed helps mitigate low bandwidth and lower spec hardware.
...And 2 more matches

Getting started with Vue - Learn web development
a clearer vue vue is a modern javascript framework that provides useful facilities for progressive enhancement — unlike many other frameworks, you can use vue to enhance existing html.
... in addition to allowing you to progressively integrate vue into your applications, vue also provides a progressive approach to writing markup.
...this allows you to start using vue on existing sites, which is why vue prides itself on being a progressive framework.
...And 2 more matches

Gecko info for Windows accessibility vendors
mfcembed testing client: this is a very simple package, great for testing basic html accessibility with your products and the gecko rendering engine.
... event_valuechange is fired for sliders, progress meters and other objects who's get_accvalue() may change.
...the exception is progress meters, which are guaranteed to fire event_show and event_hide events when they are displayed or hidden.
...And 2 more matches

Testopia
this is not an trivial task, it takes time (it started in august 2014), and we decided that it was not a good idea to release half-baked code which still needs testing to make sure we didn't regress anything.
... the good news is that the current code in the git repository already works with bugzilla 5.0, and so if you upgraded to 5.0 already, and if you don't mind having a work-in-progress extension on your machine, you can decide to pull the code from the git repository.
... this would also let us get some early feedback in case you find regressions.
...And 2 more matches

Creating reftest-based unit tests
if one has software that multiplies numbers, one wants a regression test to show that 2 * 2 continues to be calculated to be 4, not something similar to but not quite exactly 4.
...if a regression test harness has false failures, it makes the harness not trustworthy and the harness will not be used.
...g></body> </html> step 4 create a file named bar.html with the following: <html><head><title>reftest0001</title> <body><b>hello!</b></body> </html> step 5 create a file named reftest.list with the following: == foo.html bar.html you are now ready to run the test (but first you must go back to the root of firefox's source code tree): $ ./mach reftest path/to/reftest.list 2>&1 | grep reftest reftest pass: file:///users/ray/mozilla-central/path/to/foo.html $ congratulations!
...And 2 more matches

Eclipse CDT Manual Setup
click on the little green button beside this message to open the "progress" tab, and keep an eye on the "refreshing workspace" item as you continue with the steps below.
... building the index once you see the end of the build output in the console tab and the build item has disappeared from the progress tab, you can start indexing the source.
... if indexing started automatically (see the progress tab), cancel it, since there seems to be a bug that makes it give bad results when it starts automatically at this stage.
...And 2 more matches

DownloadSummary
provides an aggregated view on the contents of a downloadlist.
... progresstotalbytes read only number indicates the total number of bytes to be transferred before completing all the downloads that are currently in progress.
... this is zero if no downloads are currently in progress.
...And 2 more matches

Downloads.jsm
to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/downloads.jsm"); method overview promise<download> createdownload(object aproperties); promise<void> fetch(asource, atarget, [optional] object aoptions); promise<downloadlist> getlist(atype); promise<downloadsummary> getsummary(atype); constants constant description public work on downloads that were not started from a private browsing window.
... examples downloading to a local file this example downloads an html file without showing progress, handling errors programmatically.
... components.utils.import("resource://gre/modules/downloads.jsm"); components.utils.import("resource://gre/modules/osfile.jsm") components.utils.import("resource://gre/modules/task.jsm"); task.spawn(function () { yield downloads.fetch("http://www.mozilla.org/", os.path.join(os.constants.path.tmpdir, "example-download.html")); console.log("example-download.html has been downloaded."); }).then(null, components.utils.reporterror); observing downloads this example logs a message every time a change occurs in one of the global download lists.
...And 2 more matches

Sqlite.jsm
before you can use this module, you need to import it into your scope: components.utils.import("resource://gre/modules/sqlite.jsm") obtaining a connection sqlite.jsm exports the sqlite symbol.
... here is an example: components.utils.import("resource://gre/modules/sqlite.jsm"); try { const conn = await sqlite.openconnection({ path: "mydatabase.sqlite", sharedmemorycache: false }); // connection is the opened sqlite connection (see below for api).
... if a transaction is in progress at the time this function is called, the transaction will be forcibly rolled back.
...And 2 more matches

Task.jsm
to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/task.jsm"); introduction for an introduction to tasks, you may start from the task.js documentation, keeping in mind that only the core subset is implemented in this module.
... async() simplifies the common pattern of implementing a method via a task, like this simple object with a greet method that has a name parameter and spawns a task to send a greeting and return its reply: let greeter = { message: "hello, name!", greet: function(name) { return task.spawn((function* () { return yield sendgreeting(this.message.replace(/name/, name)); }).bind(this); }) }; with async(), the method can be declared succinctly: let greeter = { message: "hello, name!", g...
...reet: task.async(function* (name) { return yield sendgreeting(this.message.replace(/name/, name)); }) }; while maintaining identical semantics: greeter.greet("mitchell").then((reply) => { ...
...And 2 more matches

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.
... tracking your progress you can track your reviews progress two ways: within the bug and through your team's dashboard.
...these bugs are also pulled into the dashboards, which track your revision's progress.
...And 2 more matches

Mozilla Development Strategies
minimize how you are affected by regressions unless you are the type to go out and tackle daily regressions, you need to find a way to not let them affect you.
...you'll need this one for regressions that require your immediate attention (a new crasher, a blocker, or problem in your area, for example).
... use this same tree for small, quick bugs or recent regressions or crashers.
...And 2 more matches

nss tech note3
there are 8 key usages: cert_sign crl_sign data_encipherment digital_signature govt_approved key_agreement key_encipherment non_repudiation there are 9 cert types: email email_ca object_signing object_signing_ca ssl_ca ssl_client ssl_server status_responder time_stamp for the cert being checked, the requirements are: cert usage requried key usage required cert type -------------------- -------------------- ----------------------- sslclient: digital_signature; ssl_client; ...
... sslserver: key_agreement or key_encipherment; ssl_server; sslserverwithstepup: govt_approved and ssl_server key_agreement or key_encipherment sslca: cert_sign; ssl_ca; emailsigner: digital_signature; email; emailrecipient: key_agreement or key_encipherment; email; objectsigner: digital_signature; object_signing; statusresponder: digital_signature; status_responder; verifyca cert_sign ssl_ca or email_ca or object_signing_ca or status_responder for ca certs in the cert chain, the requirements are: cert usage requried key usage required cert type -------------------- -------------------- ----------------------- sslserverwithstepup: govt_approved and cert_sign; ssl_ca; sslclient: cert_sign; ssl_ca; sslserver: cert_sign; s...
... cert_sign; ssl_ca; emailsigner: cert_sign; email_ca or ssl_ca emailrecipient: cert_sign; email_ca or ssl_ca objectsigner: cert_sign; object_signing_ca; usageanyca: cert_sign; object_signing_ca or email_ca or ssl_ca; statusresponder: cert_sign; object_signing_ca or email_ca or ssl_ca; note: when the required key usage is key_agreement or key_encipherment, the actual key usage required depends on the key's algorithm.
...And 2 more matches

An Overview of XPCOM
interfaces and programming by contract an interface forms a contractual agreement between components and clients.
... there is no code that enforces these agreements, but ignoring them can be fatal.
...this is the contractual agreement of this unencapsulated class: a set of rules that define when each method can be called and what it is expected to do.
...And 2 more matches

nsITransportEventSink
inherits from: nsisupports last changed in gecko 1.7 method overview void ontransportstatus(in nsitransport atransport, in nsresult astatus, in unsigned long long aprogress, in unsigned long long aprogressmax); methods ontransportstatus() transport status notification.
... void ontransportstatus( in nsitransport atransport, in nsresult astatus, in unsigned long long aprogress, in unsigned long long aprogressmax ); parameters atransport the transport sending this status notification.
...aprogress the amount of data either read or written depending on the value of the status code.
...And 2 more matches

XPCOM Interface Reference by grouping
(i'm fully aware that this will be a great point of discussion and probably will end in tears, but since i'm the first person to apparently take a swing at this, i get first dibs.) the primary sections consist of: browser this section contains elements associated with the view pane or the content of the "browser window" proper.
...ndow nsidomnode nsidomnshtmldocument nsidomstorageitem nsidomstoragemanager nsidomwindow nsidomwindow2 nsidomwindowinternal nsidomwindowutils nsidynamiccontainer nsieditor event nsidomevent nsidomeventgroup nsidomeventlistener nsidomeventtarget nsidommousescrollevent nsidommoztouchevent nsidomorientationevent nsidomprogressevent nsidomsimplegestureevent nsidragdrophandler nsidragservice nsidragsession html nsiaccessibilityservice nsiaccessiblecoordinatetype nsiaccessibledocument nsiaccessibleeditabletext nsiaccessibleevent nsiaccessiblehyperlink nsiaccessiblehypertext nsiaccessibleimage nsiaccessibleprovider nsiaccessibleretrieval nsiaccessiblero...
...tableunicodeconverter nsiscripterror nsiscripterror2 stylesheet nsistylesheetservice url nsiuri nsiurl util nsidomserializer nsidomxpathevaluator nsidomxpathexception nsidomxpathexpression nsidomxpathresult xslt nsixsltexception nsixsltprocessor download nsidownload nsidownloadmanager nsidownloadprogresslistener element internal nsiworker nsiworkerglobalscope nsiworkermessageevent nsiworkermessageport nsiworkerscope tree nsitreeboxobject nsitreecolumn nsitreecolumns nsitreecontentview nsitreeselection nsitreeview xform nsixformsmodelelement nsixformsnsinstanceelement nsixformsnsmodelelement xmlhttprequest ...
...And 2 more matches

WebIDL bindings
(e.g., if (arg.foo.waspassed() { /* do nice things!*/ }) dictionary.isanymemberpresent() - great for checking if you need to do anything.
...so, for example, given this idl: interface firstinterface { stringifier; }; interface secondinterface { stringifier domstring getstringrepresentation(); }; the corresponding c++ would be: class firstinterface { public: void stringify(nsastring& aresult); }; class secondinterface { public: void getstringrepresentation(nsastring& aresult); }; legacy callers only anonymous legacy callers are supported, and will invoke the c++ method called legacycall.
... the nameisenumerable and getsupportednames methods need to agree on which names are and are not enumerable.
...And 2 more matches

Work with animations - Firefox Developer Tools
the bar is: blue if a transition was used to animate a property orange if a @keyframes animation was used green if the web animations api was used the bar contains a lightning bolt icon if the property was animated using the compositor thread (see more about the cost of animating different css properties).
... the img#icon animation: animated the filter and transform properties, to scale the icon and color it lasted 750ms, had an enddelay of 100ms used the compositor thread was given an easing value of ease-in: you can see this by the concave shape of the green bar.
... the span#note animation: animated the width and opacity properties, to make the name gradually appear lasted 500ms, and had a delay of 150ms was given an easing value of ease-out: you can see this by the convex shape of the green bar.
...And 2 more matches

Flame Chart - Firefox Developer Tools
but while the call tree organizes this data to show you where your program is spending most time in aggregate across the recording, the flame chart uses it to show you when in the recording particular functions are executing.
...underneath that, colored olive-green, are the calls it's making to sort().
...the sort() code is just this: function sort(unsorted) { console.log(bubblesort(unsorted)); console.log(selectionsort(unsorted)); console.log(quicksort(unsorted)); } the markers labeled "bubb..." and colored olive-green are presumably bubblesort().
...And 2 more matches

BiquadFilterNode.getFrequencyResponse() - Web APIs
the two output arrays, magresponseoutput and phaseresponseoutput, must be created before calling this method; they must be the same size as the array of input frequency values (frequencyarray).
... syntax biquadfilternode.getfrequencyresponse(frequencyarray, magresponseoutput, phaseresponseoutput); parameters frequencyarray a float32array containing an array of frequencies, specified in hertz, which you want to filter.
... magresponseoutput a float32array to receive the computed magnitudes of the freqency response for each frequency value in the frequencyarray.
...And 2 more matches

BiquadFilterNode.type - Web APIs
the greater the value is, the greater is the peak.
...the greater the value, the greater the peak.
...the greater the q value, the larger the frequency band.
...And 2 more matches

BiquadFilterNode - Web APIs
the greater the value is, the greater is the peak.
...the greater the value, the greater the peak.
...the greater the q value, the smaller the frequency band.
...And 2 more matches

Manipulating video using canvas - Web APIs
this tutorial demonstrates how to perform chroma-keying (also known as the "green screen effect") using javascript code.
... canvas c1 is used to display the current frame of the original video, while c2 is used to display the video after performing the chroma-keying effect; c2 is preloaded with the still image that will be used to replace the green background in the video.
... the for loop that begins on line 6 scans through the frame's pixels, pulling out the red, green, and blue values for each pixel, and compares the values against predetermined numbers that are used to detect the green screen that will be replaced with the still background image imported from foo.png.
...And 2 more matches

Pixel manipulation with canvas - Web APIs
the data property returns a uint8clampedarray which can be accessed to look at the raw pixel data; each pixel is represented by four one-byte values (red, green, blue, and alpha, in that order; that is, "rgba" format).
...0 * 4)) + 2]; if given a set of coordinates (x and y), you may end up doing something like this: var xcoord = 50; var ycoord = 100; var canvaswidth = 1024; function getcolorindicesforcoord(x, y, width) { var red = y * (width * 4) + x * 4; return [red, red + 1, red + 2, red + 3]; } var colorindices = getcolorindicesforcoord(xcoord, ycoord, canvaswidth); var redindex = colorindices[0]; var greenindex = colorindices[1]; var blueindex = colorindices[2]; var alphaindex = colorindices[3]; var redforcoord = imagedata.data[redindex]; var greenforcoord = imagedata.data[greenindex]; var blueforcoord = imagedata.data[blueindex]; var alphaforcoord = imagedata.data[alphaindex]; or, if es2015 is appropriate: const xcoord = 50; const ycoord = 100; const canvaswidth = 1024; const getcolorindice...
...sforcoord = (x, y, width) => { const red = y * (width * 4) + x * 4; return [red, red + 1, red + 2, red + 3]; }; const colorindices = getcolorindicesforcoord(xcoord, ycoord, canvaswidth); const [redindex, greenindex, blueindex, alphaindex] = colorindices; you may also access the size of the pixel array in bytes by reading the uint8clampedarray.length attribute: var numbytes = imagedata.data.length; creating an imagedata object to create a new, blank imagedata object, you should use the createimagedata() method.
...And 2 more matches

IIRFilterNode.getFrequencyResponse() - Web APIs
the two output arrays, magresponseoutput and phaseresponseoutput, must be created before calling this method; they must be the same size as the array of input frequency values (frequencyarray).
... syntax iirfilternode.getfrequencyresponse(frequencyarray, magresponseoutput, phaseresponseoutput); parameters frequencyarray a float32array containing an array of frequencies, specified in hertz, which you want to filter.
... magresponseoutput a float32array to receive the computed magnitudes of the freqency response for each frequency value in the frequencyarray.
...And 2 more matches

Key Values - Web APIs
dead_e (0xfe83) gdk_key_dead_i (0xfe84) gdk_key_dead_i (0xfe85) gdk_key_dead_o (0xfe86) gdk_key_dead_o (0xfe87) gdk_key_dead_u (0xfe88) gdk_key_dead_u (0xfe89) gdk_key_dead_small_schwa (0xfe8a) ə gdk_key_dead_capital_schwa (0xfe8b) Ə gdk_key_dead_greek (0xfe8c) function keys while various platforms support different numbers of the general-purpose function keys, such as f1–f12 (or f1–f10, or f1–f15, etc.), the first few are specifically defined as follows.
... vk_colored_key_0 keycode_prog_red (183) "colorf1green" [3] general-purpose media funciton key, color-coded green.
... vk_colored_key_1 keycode_prog_green (184) "colorf2yellow" [3] general-purpose media funciton key, color-coded yellow.
...And 2 more matches

WebRTC connectivity - Web APIs
this is the most recent connection that both sides have fully agreed to use.
... the pending description (returned by rtcpeerconnection.pendinglocaldescription and rtcpeerconnection.pendingremotedescription) indicates a description which is currently under consideration following a call to setlocaldescription() or setremotedescription(), respectively.
... when reading the description (returned by rtcpeerconnection.localdescription and rtcpeerconnection.remotedescription), the returned value is the value of pendinglocaldescription/pendingremotedescription if there's a pending description (that is, the pending description isn't null); otherwise, the current description (currentlocaldescription/currentremotedescription) is returned.
...And 2 more matches

Geometry and reference spaces in WebXR - Web APIs
to convert degrees to radians, simply multiply the value in degrees by π/180.
... the following code snippet shows two simple functions, degreestoradians() and radianstodegrees(), which convert back and forth between the two units for measuring angles.
... const radians_per_degree = math.pi / 180.0; let degreestoradians = (deg) => deg * radians_per_degree; let radianstodegrees = (rad) => rad / radians_per_degree; times and durations note that for security reasons, domhighrestimestamp usually introduces a small amount of imprecision to the clock in order to prevent it from being used in fingerprinting and timing-based attacks.
...And 2 more matches

Using IIR filters - Web APIs
musicdsp.org is also a great resource if you want to read more about different filters and how they are implemented digitally.
... // arrays for our frequency response const totalarrayitems = 30; let myfrequencyarray = new float32array(totalarrayitems); let magresponseoutput = new float32array(totalarrayitems); let phaseresponseoutput = new float32array(totalarrayitems); let's fill our first array with frequency values we want data to be returned on: myfrequencyarray = myfrequencyarray.map(function(item, index) { return math.pow(1.4, index); }); we could go for a linear approach, but it's far better when working with frequencies to take a log app...
... now let's get our response data: iirfilter.getfrequencyresponse(myfrequencyarray, magresponseoutput, phaseresponseoutput); we can use this data to draw a filter frequency plot.
...And 2 more matches

XMLHttpRequest - Web APIs
please use server-sent events, web sockets, or responsetext from progress events instead.
... since then, a number of additional event handlers have been implemented in various browsers (onload, onerror, onprogress, etc.).
... progress fired periodically when a request receives more data.
...And 2 more matches

Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
without downloading the sdk, you won't get the extremely useful tools, which help a great deal in the learning process.
...true, it's not great for documents, but it's the only existing widely-used standard for exposing accessibility.
... don't use msaa if you're working with a small number of at vendors, you can get everyone to agree on a different solution, and you're sure that you won't be needing to support other assistive technologies later.
...And 2 more matches

Variable fonts guide - CSS: Cascading Style Sheets
this is typically set in css using the font-stretch property, with values expressed as a percentage above or below ‘normal’ (100%), any number greater than 0 is technically valid—though it is far more likely that the range would fall closer to the 100% mark, such as 75%-125%.
...the allowed range is generally 0 (upright) to 20 degrees — any number value along that range can be supplied, so the font can be slanted just a tiny bit.
... however, any value from -90–90 degrees is valid.
...And 2 more matches

<easing-function> - CSS: Cascading Style Sheets
depending on the specific function used, the calculated output can sometimes grow to be greater than 1.0 or smaller than 0.0 during the course of an animation.
...for example, a color component greater than 255 or smaller than 0 will be clipped to the closest allowed value (255 and 0, respectively).
... ease-in the animation starts slowly, and then progressively speeds up until the end, at which point it stops abruptly.
...And 2 more matches

<gradient> - CSS: Cascading Style Sheets
the <gradient> css data type is a special type of <image> that consists of a progressive transition between two or more colors.
... linear gradient linear gradients transition colors progressively along an imaginary line.
... radial gradient radial gradients transition colors progressively from a center point (origin).
...And 2 more matches

repeating-radial-gradient() - CSS: Cascading Style Sheets
syntax /* a gradient at the center of its container, starting red, changing to blue, and finishing green, with the colors repeating every 30px */ repeating-radial-gradient(circle at center, red 0, blue, green 30px); /* an elliptical gradient near the top left of its container, starting red, changing to green and back again, repeating five times between the center and the bottom right corner, and only once between the center and the top left corner */ repeating-radial-gradient(farthest...
...-corner at 20% 20%, red 0, green, red 20%); values <position> the position of the gradient, interpreted in the same way as background-position or transform-origin.
....radial-gradient { width: 120px; height: 120px; } .radial-gradient { background: repeating-radial-gradient(black, black 5px, white 5px, white 10px); } farthest-corner <div class="radial-gradient"></div> .radial-gradient { width: 240px; height: 120px; } .radial-gradient { background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%, red, black 5%, blue 5%, green 10%); background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%, red 0 5%, green 5% 10%); } the elliptical gradient will be centered 20% from the top left, and will repeat 10 times between the center and the farthest corner (the bottom right corner).
...And 2 more matches

revert - CSS: Cascading Style Sheets
so if you have a color: green for all sections and all: revert on a specific section the color of the section will be black.
... h3 { font-weight: normal; color: blue; border-bottom: 1px solid grey; } <h3>this will have custom styles</h3> <p>just some text</p> <h3 style="all: revert">this should be reverted to browser/user defaults</h3> <p>just some text</p> revert on a parent reverting effectively removes the value for the element you select with some rule and only for that element.
... to illustrate this we will set a green color on a section and red color on a paragraph.
...And 2 more matches

transform-origin - CSS: Cascading Style Sheets
right | top | bottom ] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?where <length-percentage> = <length> | <percentage> examples code sample transform: none; <div class="box1">&nbsp;</div> .box1 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: none; -webkit-transform: none; } transform: rotate(30deg); <div class="box2">&nbsp;</div> .box2 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: rotate(30deg); -webkit-transform: rotate(30deg); } transform: rotate(30deg); transform-origin: 0 0...
...; <div class="box3">&nbsp;</div> .box3 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform-origin: 0 0; -webkit-transform-origin: 0 0; transform: rotate(30deg); -webkit-transform: rotate(30deg); } transform: rotate(30deg); transform-origin: 100% 100%; <div class="box4">&nbsp;</div> .box4 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; transform: rotate(30deg); -webkit-transform: rotate(30deg); } transform: rotate(30deg); transform-origin: -1em -3em; <div class="box5">&nbsp;</div> .box5 { margin: 0...
....5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform-origin: -1em -3em; -webkit-transform-origin: -1em -3em; transform: rotate(30deg); -webkit-transform: rotate(30deg); } transform: scale(1.7); <div class="box6">&nbsp;</div> .box6 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: scale(1.7); -webkit-transform: scale(1.7); } transform: scale(1.7); transform-origin: 0 0; <div class="box7">&nbsp;</div> .box7 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: scale(1.7); -webkit-transform: scale(1.7); transform-origin: 0 0; -webkit-transform-origin:...
...And 2 more matches

<input type="checkbox"> - HTML: Hypertext Markup Language
essentially, then, the indeterminate attribute adds a third possible state to the checkbox: "i don't know." in this state, the browser may draw the checkbox in grey or with a different mark inside the checkbox.
...in this example we keep track of the ingredients we are collecting for a recipe.
... when you check or uncheck an ingredient's checkbox, a javascript function checks the total number of checked ingredients: if none are checked, the recipe name's checkbox is set to unchecked.
...And 2 more matches

<meter>: The HTML Meter element - HTML: Hypertext Markup Language
this must be greater than the minimum value (min attribute), if specified.
...this must be greater than the minimum value (min attribute), and it also must be less than the high value and maximum value (high attribute and max attribute, respectively), if any are specified.
...this must be less than the maximum value (max attribute), and it also must be greater than the low value and minimum value (low attribute and min attribute, respectively), if any are specified.
...And 2 more matches

itemscope - HTML: Hypertext Markup Language
the itemtypes, recipe, aggregaterating, and nutritioninformation in the following example are part of the schema.org structured data for a recipe, as specified by the first itemtype, http://schema.org/recipe.
...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 ...
...me><br> yield: <span itemprop="recipeyield">1 9" pie (8 servings)</span><br> <span itemprop="nutrition" itemscope itemtype="http://schema.org/nutritioninformation"> serving size: <span itemprop="servingsize">1 medium slice</span><br> calories per serving: <span itemprop="calories">250 cal</span><br> fat per serving: <span itemprop="fatcontent">12 g</span><br> </span> <p> ingredients:<br> <span itemprop="recipeingredient">thinly-sliced apples: 6 cups<br></span> <span itemprop="recipeingredient">white sugar: 3/4 cup<br></span> ...
...And 2 more matches

Microformats - HTML: Hypertext Markup Language
summary microformats (sometimes abbreviated μ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.
...search engines benefit greatly from direct access to this structured data because it allows them to understand the information on web pages and provide more relevant results to users.
...erty description p-name entry name/title p-author who wrote the entry, optionally embedded h-card dt-published when the entry was published p-summary short entry summary e-content full content of the entry parsed reply h-entry example <div class="h-entry"> <p><span class="p-author h-card"> <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ><img class="u-photo" src="https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg"/></a> <a class="p-name u-url" href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">greg mcverry</a></span> replied to <a class="u-in-reply-to" href="/docs/web/html/microformats">a post on <strong>developer.mozilla.org</st...
...And 2 more matches

Regular expression syntax cheatsheet - JavaScript
this page provides an overall cheat sheet of all the capabilities of regexp syntax by aggregating the content of the articles in the regexp guide.
...for example, /green|red/ matches "green" in "green apple" and "red" in "red apple".
...for example, /e?le?/ matches the "el" in "angel" and the "le" in "angle." if used immediately after any of the quantifiers *, +, ?, or {}, makes the quantifier non-greedy (matching the minimum number of times), as opposed to the default, which is greedy (matching the maximum number of times).
...And 2 more matches

Quantifiers - JavaScript
for example, /e?le?/ matches the "el" in "angel" and the "le" in "angle." if used immediately after any of the quantifiers *, +, ?, or {}, makes the quantifier non-greedy (matching the minimum number of times), as opposed to the default, which is greedy (matching the maximum number of times).
... by default quantifiers like * and + are "greedy", meaning that they try to match as much of the string as possible.
...character after the quantifier makes the quantifier "non-greedy": meaning that it will stop as soon as it finds a match.
...And 2 more matches

Web audio codec guide - Web media technologies
upon decoding, the output is, to varying degrees, still understandable.
...if you need the ability to record audio at a minimal impact to network and/or storage capacity, amr can be a great choice.
... flac is a great choice for smaller audio effects files where pristine quality and tonal accuracy are desired, as well as for archival of music.
...And 2 more matches

Optimizing startup performance - Web Performance
you should present some kind of interface, such as a progress bar, so that the user knows how much longer they'll need to wait while your app starts up.
...include a progress indicator so the user knows what's going on and how long they'll be waiting.
...the source application might have a main loop that can easily be made to operate asynchronously (by running each main loop iteration separately); startup is often just a continuous, monolithic procedure that might periodically update a progress meter.
...And 2 more matches

Performance Monitoring: RUM vs synthetic monitoring - Web Performance
rum is generally best suited for understanding long-term trends whereas synthetic monitoring is very well suited to regression testing and mitigating shorter-term performance issues during development.
... synthetic monitoring can be an important component of regression testing and production site monitoring.
...this is particularly important for large sites or complex apps, where the functionality or content is constantly changing, and where the population accessing the application may differ greatly in life experiences from those creating it.
...And 2 more matches

d - SVG: Scalable Vector Graphics
25,10 50,10 s 70,90 90,90" /> <!-- cubic bézier curve with relative coordinates --> <path fill="none" stroke="red" d="m 110,90 c 20,0 15,-80 40,-80 s 20,80 40,80" /> <!-- highlight the curve vertex and control points --> <g id="controlpoints"> <!-- first cubic command control points --> <line x1="10" y1="90" x2="30" y2="90" stroke="lightgrey" /> <circle cx="30" cy="90" r="1.5"/> <line x1="50" y1="10" x2="25" y2="10" stroke="lightgrey" /> <circle cx="25" cy="10" r="1.5"/> <!-- second smooth command control points (the first one is implicit) --> <line x1="50" y1="10" x2="75" y2="10" stroke="lightgrey" stroke-dasharray="2" /> <circle cx="75" cy="10" r="1.5" fill="lightgrey"/> <line x1="90" y1="90" x2="70"...
... y2="90" stroke="lightgrey" /> <circle cx="70" cy="90" r="1.5" /> <!-- curve vertex points --> <circle cx="10" cy="90" r="1.5"/> <circle cx="50" cy="10" r="1.5"/> <circle cx="90" cy="90" r="1.5"/> </g> <use xlink:href="#controlpoints" x="100" /> </svg> quadratic bézier curve quadratic bézier curves are smooth curve definitions using three points: starting point (current point) po = {xo, yo} end point pn = {xn, yn} control point pc = {xc, yc} (controls curvature) after drawing, the end point (pn) becomes the current point for the next command (po′).
...oints="10,50 25,25 40,50" stroke="rgba(0,0,0,.2)" fill="none" /> <circle cx="25" cy="25" r="1.5" /> <!-- curve vertex points --> <circle cx="10" cy="50" r="1.5"/> <circle cx="40" cy="50" r="1.5"/> <g id="smoothquadraticdown"> <polyline points="40,50 55,75 70,50" stroke="rgba(0,0,0,.2)" stroke-dasharray="2" fill="none" /> <circle cx="55" cy="75" r="1.5" fill="lightgrey" /> <circle cx="70" cy="50" r="1.5" /> </g> <g id="smoothquadraticup"> <polyline points="70,50 85,25 100,50" stroke="rgba(0,0,0,.2)" stroke-dasharray="2" fill="none" /> <circle cx="85" cy="25" r="1.5" fill="lightgrey" /> <circle cx="100" cy="50" r="1.5" /> </g> <use xlink:href="#smoothquadraticdown" x="60" /> <use xlink:href="#smoothquadraticup" x=...
...And 2 more matches

XUL Migration Guide - Archive of obsolete content
but there are some notable limitations in the sdk apis and even a fairly simple ui may need some degree of redesign to work with them.
... if you can find a third party package that does what you want, this is a great way to use features not supported in the sdk without having to use the low-level apis.
... but this means that the more powerful modules you require(), the greater is your exposure if your add-on is compromised.
...this applies with even greater force to require("chrome"), since this gives full access to the browser's capabilities.

places/bookmarks - Archive of obsolete content
save() and search() are both asynchronous functions: they synchronously return a placesemitter object, which then asynchronously emits events as the operation progresses and completes.
... // latest snapshot from the server as `saved` (with properties // such as `updated` and `id`), as well as the initial input // item as `inputitem` console.log(saved.title === inputitem.title); // true console.log(saved !== inputitem); // true console.log(inputitem === bookmark); // true }).on("end", function (saveditems, inputitems) { // similar to "data" events, except "end" is an aggregate of // all progress events, with ordered arrays as `saveditems` // and `inputitems` }); creating several bookmarks with a new group let { bookmark, group, save } = require("sdk/places/bookmarks"); let group = group({ title: "guitars" }); let bookmarks = [ bookmark({ title: "ran", url: "http://ranguitars.com", group: group }), bookmark({ title: "ibanez", url: "http://ibanez.com", gro...
... data events are emitted for every individual operation (such as: each item saved, or each item found by a search query), whereas end events are emitted as the aggregate of an operation, passing an array of objects into the handler.
... end the end event is called when all bookmark items and dependencies have been saved, or an aggregate of all items returned from a search query.

On page load - Archive of obsolete content
if you need finer control over custom code execution—for example, as documents are loading or when tabs are switched—see progress listeners.
... progress listeners allow extensions to be notified of events associated with documents loading in the browser and with tab switching events.
... progress listeners implement the nsiwebprogresslistener interface.
... // if (win.frameelement) return; // skip iframes/frames alert("page is loaded \n" +doc.location.href); } } window.addeventlistener("load", function load(event){ window.removeeventlistener("load", load, false); //remove listener, no longer needed myextension.init(); },false); references if you need to have a more complicated listener (not just onload), use progress listeners.

Custom XUL Elements with XBL - Archive of obsolete content
person.setattribute("name", name); person.setattribute("greeting", greeting); // ...
... <content> <xul:hbox> <xul:image class="xulshoolhello-person-image" xbl:inherits="src=image" /> <xul:vbox flex="1"> <xul:label xbl:inherits="value=name" /> <xul:description xbl:inherits="value=greeting" /> </xul:vbox> <xul:vbox> <xul:button label="&xulshoolhello.remove.label;" accesskey="&xulshoolhello.remove.accesskey;" oncommand="document.getbindingparent(this).remove(event);" /> </xul:vbox> </xul:hbox> </content> our element is very simple, displaying an image, a couple of text lines and a button.
...so, if you have this: <xshelloperson name="pete" greeting="good morning" image="" />, then those attribute values are "inherited" to the content nodes that have this special attribute.
...we have a "click" handler that displays the greeting when the "person" element is clicked: <handler phase="bubbling" event="click"><![cdata[ window.alert(this.greeting); ]]></handler> handlers are not necessary all that often, since in most cases you'll need the events to only apply to a part of the binding, not the whole thing.

Mozilla Documentation Roadmap - Archive of obsolete content
there's a great deal of free online documentation available on xul and extension development, but finding it and turning it into useful information can be a daunting task.
... the amo developer hub the amo developer hub is a great guide for add-on developers.
...this is a great place to ask questions and have them answered by experienced developers.
...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.

Tabbed browser - Archive of obsolete content
xul: <menuitem oncommand="myextension.foo(event)" onclick="checkformiddleclick(this, event)" label="click me"/> js: var myextension = { foo: function(event) { openuilink("http://www.example.com", event, false, true); } } opening a url in an on demand tab cu.import("resource://gre/modules/xpcomutils.jsm"); xpcomutils.definelazyservicegetter(this, "gsessionstore", "@mozilla.org/browser/sessionstore;1", "nsisessionstore"); // create new tab, but don't load the content.
...("tabmove", exampletabmoved, false); container.addeventlistener("tabclose", exampletabremoved, false); // when no longer needed container.removeeventlistener("tabopen", exampletabadded, false); container.removeeventlistener("tabmove", exampletabmoved, false); container.removeeventlistener("tabclose", exampletabremoved, false); note: starting in gecko 1.9.1, there's an easy way to listen on progress events on all tabs.
... components.utils.import('resource://gre/modules/services.jsm'); services.obs.addobserver(httpobs, 'http-on-modify-request', false); //services.obs.removeobserver(httpobs, 'http-on-modify-request'); //uncomment this line, or run this line when you want to remove the observer var httpobs = { observe: function (asubject, atopic, adata) { if (atopic == 'http-on-modify-request') { /*start - do not edit here*/ ...
...but if its an ajax call you may end up here } } } }; here's a cleaner example of the same thing: cu.import('resource://gre/modules/services.jsm'); var httprequestobserver = { observe: function (subject, topic, data) { var httpchannel, requesturl; if (topic == "http-on-modify-request") { httpchannel = subject.queryinterface(ci.nsihttpchannel); requesturl = httpchannel.uri.spec; var newrequesturl, i; if (/someurl/.test(requesturl)) { ...

Index of archived content - Archive of obsolete content
using xpcom without chrome using third-party modules (jpm) bootstrapped extensions code snippets alerts and notifications autocomplete bookmarks boxes canvas code snippets cookies customizing the download progress bar delayed execution dialogs and prompts downloading files drag & drop embedding svg examples and demos from articles file i/o finding window handles forms related code snippets html in xul for rich tooltips html to dom isdefaultnamespace j...
...ugger service javascript timers javascript daemons management label and description lookupnamespaceuri lookupprefix miscellaneous modules on page load page loading post data to window preferences progress listeners queryselector rosetta running applications svg animation svg general scrollbar sidebar stringview tabbox toolbar tree uri parsing view source for xul applications windows xml-related code snipp...
... layout system overview multiple firefox profiles repackaging firefox style system overview using microformats firefox sync code snippets javascript client api syncing custom preferences force rtl gre gre registration gecko coding help wanted http class overview hacking wiki help viewer creating a help content pack helper apps (and a bit of save as) hidden prefs how to write and land nanojit patches io guide/di...
... standard makefile header static analysis for windows code under linux stress testing string quick reference string rosetta stone structure of an installable bundle supporting per-window private browsing supporting private browsing mode table cellmap table cellmap - border collapse table layout regression tests table layout strategy tamarin abcasm tamarin acceptance testing abc assembler tests actionscript acceptance tests tamarin acceptance test template actionscript performance...

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(); greversionrange[] range = new greversionrange[1]; range[0] = new greversionrange("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 ...
...exception is thrown if gregrepathwithproperties cannot find a gre } catch (xpcomexception e) { // this exception is thrown if initembedding failed } locationprovider is a class provided by the java application.
... if your code cannot find the gre and keeps throwing filenotfoundexceptions during the getgrepathwithproperties(...) call, check whether you already registered the gre on your system: gre registration the initembedding method kicks off the embedding process, allowing the java application to work with xpcom and mozilla.
...l); // set this as the active window windowwatcher.setactivewindow(win); // hand over the application to xpcom/xul, this will block: appstartup.run(); here is an example of a locationprovider that works : public class locationprovider implements iappfilelocprovider { private final file libxulpath; int counter = 0; public locationprovider(file grepath) { this.libxulpath = grepath; } public file getfile(string aprop, boolean[] apersistent) { file file = null; if (aprop.equals("gred") || aprop.equals("grecomsd")) { file = libxulpath; if (aprop.equals("grecomsd")) { file = new file(file, "components"); } } else if (aprop.equals("mozbind") || ...

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
the text changes occur because authors encapsulate the areas with the anchor-setting markup: css: a:hover {color: green;} html: <a href="foo.com">this text should turn green when you hover over it.</a> <a name="anchor-name"> this text should change color when hovered over, but doesn't in internet explorer.
... </a> mozilla follows the css specification correctly and will change the color to green in this example.
... you can use two ways to make mozilla behave like internet explorer and not change the color of the text when hovered over: first, you can change the css rule to be a:link:hover {color: green;}, which will only change the color if the element is a link (has an href attribute).
... doctypes (short for document type declarations) look like this: <!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> the section in blue is called the public identifier, the green part is the system identifier, which is a uri.

Venkman Introduction - Archive of obsolete content
on other platforms, including mac os and unix, it is alone in offering this degree of flexibility, depth, and power in a visual debugging environment.
...when you enable profiling by clicking this button, a green checkmark appears next to the button and profile data for every function is collected, and can be saved by choosing save profile data as...
... when pretty print is enabled you will see a green check mark on the toolbar button, and the menu item will be checked as well.
... properties that show up in a bold grey font are defined on an object from the prototype chain, and not on the actual object you are inspecting.

Document Object Model - Archive of obsolete content
our find files example it doesn't make sense to have the progress bar and the dummy tree data displayed when the find files dialog is first displayed.
... we'll change the progress meter so that its initially hidden.
...<splitter id="splitbar" resizeafter="grow" hidden="true"/> <hbox> <progressmeter id="progmeter" value="50%" style="margin: 4px;" hidden="true"/> we've added the hidden attribute and set the value to true.
... function dofind(){ var meter = document.getelementbyid('progmeter'); meter.hidden = false; } this function first gets a reference to the progress meter using its id, progmeter.

Skinning XUL Files by Hand - Archive of obsolete content
this independence of function and form is a great advantage of xul, and it should not be overlooked.
... add the following lines to the file: @import url(chrome://global/skin/); box#bbox { background-color: lightgrey; } button#rd { background-color: red; color: white; } save it in the same directory as your xul file.
... when you reload the xul file you have been working on, the box element you have used to create the navigation area in the xul file appear as follows: the skinned browser is not much to look at right now -- and you may note that this basic skin has transgressed upon some of the skinning guidelines because it overrides color information, but you can get a sense of what the possibilities are with the combination of the xul structure and the style rules of css.
... the syntax for creating all this information with text -- added to the distributed nature and the sheer volume of text required to define a single chrome -- can sometimes make the progress seem slow.

XML - Archive of obsolete content
it attempts to balance precise control of layout with flexibility and ease of use, and in this respect it does a great job.
... using a combination of xul's ready-made widgets (e.g., menubar, scrollbar, progressmeter, and so on) and xul's incorporation of such standards as html4, dom1/2, and cascading stylesheets, you can design any interface that you can imagine, using any number of different features, tools, and methodologies.
... xul is made out of xml you don't need to know all about xml in order to use xul, but you may want to read through this article to get a sense of xul's pedigree as a specialized markup language.
... the heavy lifting is done by the ingredients rather than the chef.

Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
e4x (ecmascript for xml) is an extension of javascript which provides direct support for xml, greatly simplifying the process of consuming xml via javascript.
...however, taking advantage of frameworks such as aptana jaxer (spidermonkey) and helma (rhino) can reveal even greater rewards as a great deal of work has already been done for you.
... as stated earlier, aptana jaxer is built using the mozilla browser engine engine that powers mozilla firefox, which includes spidermonkey as its javascript interpreter, but lots more features beyond ssjs alone such as dom, db, file io, css, server sessions, e4x, etc...] this is a great advantage to the developer as it presents a consistent server-side and client-side development environment for both browser and server contexts that is centered on open source and web standards.
...to be able to use jaxer to essentially create an xml based restful service in javascript is useful and shifts a great deal of power to the javascript developer.

2D collision detection - Game development
green means collision, blue means no collision.</p> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crafty/0.5.4/crafty-min.js"></script> crafty.init(200, 200); var dim1 = {x: 5, y: 5, w: 50, h: 50} var dim2 = {x: 20, y: 10, w: 60, h: 40} var rect1 = crafty.e("2d, canvas, color").attr(dim1).color("red"); var rect2 = crafty.e("2d, canvas, color, keyboard, fourway").four...
... this.color("green"); } else { // no collision this.color("blue"); } }); note: another example without canvas or external libraries.
...green means collision, blue means no collision.</p> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crafty/0.5.4/crafty-min.js"></script> #cr-stage { position: static !important; height: 200px !important; } crafty.init(200, 200); var dim1 = {x: 5, y: 5} var dim2 = {x: 20, y: 20} crafty.c("circle", { circle: function(radius, color) { this.radius = radius; this.w = this.h = radius * 2; this.color = co...
... this.color = "green"; } else { // no collision this.color = "blue"; } }); var circle1 = {radius: 20, x: 5, y: 5}; var circle2 = {radius: 12, x: 10, y: 5}; var dx = circle1.x - circle2.x; var dy = circle1.y - circle2.y; var distance = math.sqrt(dx * dx + dy * dy); if (distance < circle1.radius + circle2.radius) { // collision detected!

2D maze game with device orientation - Game development
we're loading two images first that will be used later in the preload state to show the progress of loading all the other assets.
...in this state the preloadbar is showing the progress on the screen.
... that progress of the loaded assets is visualized by the framework with the use of one image.
... html5 gives us raw tools, the frameworks built on top of it are getting faster and better, so now is a great time get into web game development.

RGB - MDN Web Docs Glossary: Definitions of Web-related terms
red green blue (rgb) is a color model that represents colors as mixtures of three underlying components (or channels), namely, red, green, and blue.
... each color is described by a sequence of three numbers (typically between 0.0 and 1.0, or between 0 and 255) that represent the different intensities (or contributions) of red, green, and blue, in determining the final color.
...in css they can be represented as a single 24-bit integer in hexadecimal notation (for example, #add8e6 is light blue), or in functional notation as three separate 8-bit integers (for example, rgb(46, 139, 87) is sea green).
... in opengl, webgl, and glsl the red-green-blue components are fractions (floating-point numbers between 0.0 and 1.0), although in the actual color buffer they are typically stored as 8-bit integers.

Getting started with CSS - Learn web development
to turn all paragraphs green you would use: p { color: green; } you can target multiple selectors at once, by separating the selectors with a comma.
... if i want all paragraphs and all list items to be green my rule looks like this: p, li { color: green; } try this out in the interactive editor below (edit the code boxes), or in your local css document.
...you can use css to target these different states — the css below styles unvisited links pink and visited links green.
... a:link { color: pink; } a:visited { color: green; } you can change the way the link looks when the user hovers over it, for example removing the underline, which is achieved by in the next rule: a:hover { text-decoration: none; } in the live example below, you can play with different values for the various states of a link.

Client-side form validation - Learn web development
(required)</label> <input id="choose" name="i_like" required> <button>submit</button> </form> note the css that is included in the example file: input:invalid { border: 2px dashed red; } input:invalid:required { background-image: linear-gradient(to right, pink, lightgreen); } input:valid { border: 2px solid black; } this css causes the input to have a red dashed border when it is invalid and a more subtle solid black border when valid.
... tooshort: returns true if the value is shorter than the minimum length specified by the minlength attribute, or false if it is greater than or equal to the minimum.
... rangeoverflow: returns true if the value is greater than the maximum specified by the max attribute, or false if it is less than or equal to the maximum.
... rangeunderflow: returns true if the value is less than the minimum specified by the min attribute, or false if it is greater than or equal to the minimum.

Sending form data - Learn web development
consider the following form: <form action="http://www.foo.com" method="get"> <div> <label for="say">what greeting do you want to say?</label> <input name="say" id="say" value="hi"> </div> <div> <label for="to">who do you want to say it to?</label> <input name="to" id="to" value="mom"> </div> <div> <button>send my greetings</button> </div> </form> since the get method has been used, you'll see the url www.foo.com/?say=hi&to=mom appear in the browser address bar when you submit ...
... <form action="https://www.foo.com" method="post"> <div> <label for="say">what greeting do you want to say?</label> <input name="say" id="say" value="hi"> </div> <div> <label for="to">who do you want to say it to?</label> <input name="to" id="to" value="mom"> </div> <div> <button>send my greetings</button> </div> </form> when the form is submitted using the post method, you get no data appended to the url, and the http request looks like so, with the ...
... from flask import flask, render_template, request app = flask(__name__) @app.route('/', methods=['get', 'post']) def form(): return render_template('form.html') @app.route('/hello', methods=['get', 'post']) def hello(): return render_template('greeting.html', say=request.form['say'], to=request.form['to']) if __name__ == "__main__": app.run() the two templates referenced in the above code are as follows (these need to be in a subdirectory called templates in the same directory as the python-example.py file, if you try to run the example yourself): form.html: the same form as we saw above in the the post method section but with the...
... greeting.html: this template just contains a line that renders the two bits of data passed to it when it is rendered.

The web and web standards - Learn web development
this article provides some useful background on the web — how it came about, what web standard technologies are, how they work together, why "web developer" is a great career to choose, and what kinds of best practices you'll learn about through the course.
... web standards are created by standards bodies — institutions that invite groups of people from different technology companies to come together and agree on how the technologies should work in the best way to fulfill all of their use cases.
... "open" standards one of the key aspects of web standards, which timbl and the w3c agreed on from the start, is that the web (and web technologies) should be free to both contribute and use, and not encumbered by patents/licensing.
...this includes using technologies that all the browsers support, delivering better experiences to browsers that can handle them (progressive enhancement), and/or writing code so that it falls back to a simpler but still usable experience in older browsers (graceful degradation).

HTML table advanced features and accessibility - Learn web development
rather than have a screenreader read out the contents of many cells just to find out what the table is about, he or she can rely on a caption and then decide whether or not to read the table in greater detail.
...>location</th> <th>date</th> <th>evaluation</th> <th>cost (€)</th> </tr> </thead> <tfoot> <tr> <td colspan="4">sum</td> <td>118</td> </tr> </tfoot> <tbody> <tr> <td>haircut</td> <td>hairdresser</td> <td>12/09</td> <td>great idea</td> <td>30</td> </tr> <tr> <td>lasagna</td> <td>restaurant</td> <td>12/09</td> <td>regrets</td> <td>18</td> </tr> <tr> <td>shoes</td> <td>shoeshop</td> <td>13/09</td> <td>big regrets</td> <td>65</td> </tr> ...
...ke this: <thead> <tr> <th scope="col">purchase</th> <th scope="col">location</th> <th scope="col">date</th> <th scope="col">evaluation</th> <th scope="col">cost (€)</th> </tr> </thead> and each row could have a header defined like this (if we added row headers as well as column headers): <tr> <th scope="row">haircut</th> <td>hairdresser</td> <td>12/09</td> <td>great idea</td> <td>30</td> </tr> screenreaders will recognize markup structured like this, and allow their users to read out the entire column or row at once, for example.
...e rewritten like this: <thead> <tr> <th id="purchase">purchase</th> <th id="location">location</th> <th id="date">date</th> <th id="evaluation">evaluation</th> <th id="cost">cost (€)</th> </tr> </thead> <tbody> <tr> <th id="haircut">haircut</th> <td headers="location haircut">hairdresser</td> <td headers="date haircut">12/09</td> <td headers="evaluation haircut">great idea</td> <td headers="cost haircut">30</td> </tr> ...

Test your skills: Object basics - Learn web development
run the greeting() method using dot notation (it will log the greeting to the browser devtools' console).
...we want you to rewrite the greeting() method so that it logs "hello, said bertie the cymric." to the browser devtools' console, but in a way that will work across any cat object of the same structure, regardless of its name or breed.
... when you are done, write your own object called cat2, which has the same structure, exactly the same greeting() method, but a different name, breed, and color.
... call both greeting() methods to check that they log appropriate greetings to the console.

Accessibility in React - Learn web development
just above the return statement is a good place: const listheadingref = useref(null); prepare the heading heading elements like our <h2> are not usually focusable.
... let's add the tabindex attribute — written as tabindex in jsx — to the heading above our list of tasks, along with our headingref: <h2 id="list-heading" tabindex="-1" ref={listheadingref}> {headingtext} </h2> note: the tabindex attribute is great for accessibility edge-cases, but you should take great care to not overuse it.
... add the following into the body of your app() function, just below your previous additions: useeffect(() => { if (tasks.length - prevtasklength === -1) { listheadingref.current.focus(); } }, [tasks.length, prevtasklength]); we only try to focus on our list heading if we have fewer tasks now than we did before.
...the skills you’ve learned here will be a great foundation to build on as you continue working with react.

Accessibility Features in Firefox
many users are finding the true greatness of firefox lies in support for third party extensions.
... here are some examples of accessible extensions, although there are hundreds more to try (thank you to the gw micro knowledge base for some of this information): adblock plus removes ads (and other objects, like banners) from web pages greasemonkey lets you add bits of javascript ("user scripts") to any web page to change its behavior.
...chen is a screen reader extension built just for firefox which can read mathml community contributions the real reason behind firefox's success is the great community of volunteers and organizations that realize they have something to benefit from a browser open to utilizing their ideas and hard work.
... that's the great thing about the open firefox community model and source code license -- anyone can contribute, and everyone benefits.

How to implement a custom autocomplete search component
const ci = components.interfaces; const cu = components.utils; cu.import('resource://gre/modules/xpcomutils.jsm'); const class_id = components.id('x753d830-ba1e-11e0-962b-0800200c9a66'); // ← change this const class_name = "basic autocomplete"; const contract_id = '@mozilla.org/autocomplete/search;1?name=basic-autocomplete'; /** * @constructor * * @implements {nsiautocompleteresult} * * @param {string} searchstring * @param {number} searchresult * @param {number} defaultin...
...ch is complete */ startsearch: function(searchstring, searchparam, previousresult, listener) { var results = ['mary', 'john']; var autocomplete_result = new providerautocompleteresult(searchstring, ci.nsiautocompleteresult.result_success, 0, "", results, null); listener.onsearchresult(this, autocomplete_result); }, /** * stops an asynchronous search that is in progress */ stopsearch: function() { }, queryinterface: xpcomutils.generateqi([ ci.nsiautocompletesearch ]) }; // the following line is what xpcom uses to create components const nsgetfactory = xpcomutils.generatensgetfactory([ providerautocompletesearch ]); then register your xpcom component.
... if (searchresults[i].comment) comments.push(searchresults[i].comment); else comments.push(null); } } var newresult = new simpleautocompleteresult(searchstring, ci.nsiautocompleteresult.result_success, 0, "", results, comments); listener.onsearchresult(this, newresult); } }, /* * stop an asynchronous search that is in progress */ stopsearch: function() { }, queryinterface: function(aiid) { if (!aiid.equals(ci.nsiautocompletesearch) && !aiid.equals(ci.nsisupports)) throw components.results.ns_error_no_interface; return this; } }; // factory var simpleautocompletesearchfactory = { singleton: null, createinstance: function (aouter, aiid) { if (aouter != null) throw components.r...
...esults.ns_error_no_aggregation; if (this.singleton == null) this.singleton = new simpleautocompletesearch(); return this.singleton.queryinterface(aiid); } }; // module var simpleautocompletesearchmodule = { registerself: function(acompmgr, afilespec, alocation, atype) { acompmgr = acompmgr.queryinterface(components.interfaces.nsicomponentregistrar); acompmgr.registerfactorylocation(class_id, class_name, contract_id, afilespec, alocation, atype); }, unregisterself: function(acompmgr, alocation, atype) { acompmgr = acompmgr.queryinterface(components.interfaces.nsicomponentregistrar); acompmgr.unregisterfactorylocation(class_id, alocation); }, getclassobject: function(acompmgr, acid, aiid) { if (!aiid.equals(components.interfaces.nsifactory)) ...

Implementing QueryInterface
it addrefs the resulting interface, not this, thus following the com-correct way (particularly important in aggregation) it uses nscomtypeinfo<t>::getiid() instead of ktiid thus saving a global declaration and global space it uses c 's static_cast, via ns_static_cast, which detects errors when you can't really get to the desired interface.
... it will be difficult, if not impossible, to get the right thing to happen if any of your base classes participate in true aggregation.
... you won't be able to catch calls to queryinterface on the aggregated objects, which may then return wrong interfaces.
... one more reason to avoid aggregation specifically, and complicated hierarchies in general.

Add-on Repository
to import the add-on repository code module, use: components.utils.import("resource://gre/modules/addonrepository.jsm"); method overview string getrecommendedurl() string getsearchurl(in string searchterms) void cancelsearch() void retrieverecommendedaddons(in integer maxresults, in searchcallback callback) void searchaddons(in string searchterms, in integer maxresults, in searchcallback callback) properties property ...
... issearching boolean true if a search is currently in progress; otherwise false.
... cancelsearch() cancels the search in progress.
... does nothing if there is no search in progress.

Assert.jsm
otequal(actual, expected, message); undefined deepequal(actual, expected, message); undefined notdeepequal(actual, expected, message); undefined strictequal(actual, expected, message); undefined notstrictequal(actual, expected, message); undefined throws(block, expected, message); promise rejects(promise, expected, message); undefined greater(lhs, rhs, message); undefined greaterorequal(lhs, rhs, message); undefined less(lhs, rhs, message); undefined lessorequal(lhs, rhs, message); undefined setreporter(reporterfunc); undefined report(failed, actual, expected, message, operator); constructor creates a new assert object.
... promise rejects( promise, expected, message ); parameters promise promise promise to wait for rejection and catch eventual thrown errors expected test reference to evaluate against the thrown result from block message short explanation of the expected result greater() the greater than assertion tests two numbers with the > operator.
... undefined greater( lhs, rhs, message ); parameters lhs the left hand side of the operator rhs the right hand side of the operator message short explanation of the expected result greaterorequal() the greater or equal than assertion tests two numbers with the >= operator.
... undefined greaterorequal( lhs, rhs, message ); parameters lhs the left hand side of the operator rhs the right hand side of the operator message short explanation of the expected result less() the lesser than assertion tests two numbers with the < operator.

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.
...repeating the process allows a localizer to create a testable package to see his or her work as they progress to a final version.
...you are free to add, edit, remove, and localize everything in this section according to how the localization team for your language agrees.

MathML Accessibility in Mozilla
torture test 21: ∑ p prime f ( p ) = ∫ t > 1 f ( t ) d π ( t ) __________ sum over pee prime of f of pee is equal to integral over t is greater than 1 of f of t d pi of open t close __________ ∑ f ( p ) = ∫, subscript t > 1, f ( t ) d π ( t ) see webkit's bug 146407 sum.
...subscript t greater 1.
... column 2 vertical ellipsis column 3 vertical ellipsis column 4 column 5 vertical ellipsis row 5 column 1 c sub n column 2 c sub n plus 1 end sub column 3 c sub n plus 2 end sub column 4 dot dot dot column 5 c sub 2 n end sub end determinant is greater than 0 __________ det | table start, row 1, column 1, c subscript 0, row 1, column 2, c subscript 1, row 1, column 3, c subscript 2, row 1, column 4, ..., row 1, column 5, c subscript n, row 2, column 1, c subscript 1, row 2, column 2, c subscript 2, row 2, column 3, c subscript 3, row 2, column 4, ..., row 2, column 5, c subscript n + 1, row 3, column 1, c subscript 2, row 3, co...
...vertical bar greater than 0 torture test 25: y x 2 __________ y sub x sub 2 end sub __________ y, subscript x, subscript 2, y.

Gecko Profiler FAQ
how to profile startup code that regresses just a little (<10-15ms ts_paint/tpaint) [mstange] we currently don’t have a good way to do that.
...then the call stacks whose cost increased the most in the “after” profile will be at the top, and those are the ones you usually want to look at if you caused a regression.
... for example, see julian’s great investigation on the impact of cache line sharing across multiple cores on jemalloc’s multi-core performance in https://bugzilla.mozilla.org/show_bug.cgi?id=1291355#c26.
... how do we find performance regressions caused by third-party and system addons, especially ones that only show up after extended uptime?

Profiling with the Firefox Profiler
there are lighter grey names to the right of tree elements that indicate where the code comes from.
... as we progress into a more specific part of the tree, you'll notice that the 'running time' decreases.
...i’d be eager to hear people’s experience giving this a go – it might be a great tool in determining what’s going on in firefox when it’s hung!
...at present there is no central list of these thread names, but you can find them by grepping the source.

Scroll-linked effects
<body style="height: 5000px" onscroll="document.getelementbyid('toolbar').style.top = math.max(100, window.scrolly) + 'px'"> <div id="toolbar" style="position: absolute; top: 100px; width: 100px; height: 20px; background-color: green"></div> </body> this implementation of sticky positioning relies on the scroll event listener to reposition the "toolbar" div.
...one way to implement this without the scroll event listener is to use the css property designed for this purpose: <body style="height: 5000px"> <div id="toolbar" style="position: sticky; top: 0px; margin-top: 100px; width: 100px; height: 20px; background-color: green"></div> </body> this version works well with asynchronous scrolling because position of the "toolbar" div is updated by the browser as the user scrolls.
...estination); } } var timeoutid = null; addeventlistener("scroll", function() { if (timeoutid) cleartimeout(timeoutid); timeoutid = settimeout(snap, 200, parseint(document.getelementbyid('snaptarget').style.top)); }, true); </script> <div id="snaptarget" class="snaptarget" style="position: relative; top: 200px; width: 100%; height: 200px; background-color: green"></div> </body> in this example, there is a scroll event listener which detects if the scroll position is within 200 pixels of the top of the "snaptarget" div.
... <body style="height: 5000px"> <style> body, /* blink currently has bug that requires declaration on `body` */ html { scroll-snap-type: y proximity; } .snaptarget { scroll-snap-align: start; position: relative; top: 200px; height: 200px; background-color: green; } </style> <div class="snaptarget"></div> </body> this version can work smoothly in the browser even if there is slow-running javascript on the browser's main thread.

nss tech note5
you can find a list of cipher mechanisms in security/nss/lib/softoken/pkcs11.c - grep for ckf_en_de_.
...you can find a list of digest mechanisms in security/nss/lib/softoken/pkcs11.c - grep for ckf_digest.
...you can find a list of hmac mechanisms in security/nss/lib/softoken/pkcs11.c - grep for ckf_sn_vr, and choose the mechanisms that contain hmac in the name ck_mechanism_type hmacmech = ckm_md5_hmac; <big>(for example)</big> choose a slot on which to to do the operation pk11slotinfo* slot = pk11_getbestslot(hmacmech, null); or pk11slotinfo* slot = pk11_getinternalkeyslot(); /* always returns int slot, may not be optimal */ prepare the key if using a r...
...you can find a list of key generation mechanisms in security/nss/lib/softoken/pkcs11.c - grep for ckf_generate.

sslerr.html
ssl_error_bad_mac_read -12273 "ssl received a record with an incorrect message authentication code." this usually indicates that the client and server have failed to come to agreement on the set of keys used to encrypt the application data and to check message integrity.
...this usually indicates that the client and server have failed to come to agreement on the set of keys used to encrypt the application data and to check message integrity.
...the receipt of this alert is an error only if it occurs while a handshake is in progress.
... ssl_error_token_insertion_removal -12205 "pkcs #11 token was inserted or removed while operation was in progress." a cryptographic operation required to complete the handshake failed because the token that was performing it was removed while the handshake was underway.

Index
if str1 is greater than str2, *result is greater than 0.
...if the returned value is greater than the length you specified, the string was truncated.
... 540 spidermonkey 1.8 spidermonkey spidermonkey 1.8 has one known significant regression from 1.7.
... 542 spidermonkey 1.8.7 spidermonkey draft in progress - this is a draft, and right now it's mostly just a copy of the 1.8.5 release notes.

Web Replay
the current position within the recording is shown on the timeline with a progress indicator.
... using the middleman provides the following advantages: ipdl communication is greatly simplified.
... to allow these threads to be snapshotted, the call is instead performed on a separate thread that does not participate in the recording, so that the calling thread may enter the correct idle state even while its progress is blocked on the call completing.
... in general, redirections are needed for any function that is (a) not compiled as part of gecko, and either (b) may behave differently between recording and replaying, or (c) depends on data produced by other redirected functions (for example, corefoundation types like cfarrayref and cfstringref).

mozIStorageStatement
the optional callback routine receives notifications about the progress of the query.
... mozistoragependingstatement executeasync( [optional] mozistoragestatementcallback acallback ); parameters acallback a callback object that will be notified of progress, errors, and query completion.
... mozistorageaggregatefunction create a new sqlite aggregate function.
... mozistorageprogresshandler monitor progress during the execution of a statement.

nsIApplicationUpdateService
obsolete since gecko 1.9.1.7pre isdownloading boolean true if a download is in progress, otherwise false.
... methods adddownloadlistener() adds a listener that receives progress and state information about the update that is currently being downloaded.
...void adddownloadlistener( in nsirequestobserver listener ); parameters listener an object implementing nsirequestobserver and optionally nsiprogresseventsink that will be notified of state and progress information as the update is downloaded.
...removedownloadlistener() removes a listener that is receiving progress and state information about the update that is currently being downloaded.

nsIDocumentLoader
it is also responsible for sending nsiwebprogresslistener notifications.
...nents.classes["@mozilla.org/docloaderservice;1"] .createinstance(components.interfaces.nsidocumentloader); method overview void clearparentdocloader(); obsolete since gecko 1.8 void createdocumentloader(out nsidocumentloader aninstance); obsolete since gecko 1.8 void destroy(); obsolete since gecko 1.8 void fireonlocationchange(in nsiwebprogress awebprogress, in nsirequest arequest, in nsiuri auri); obsolete since gecko 1.8 void fireonstatuschange(in nsiwebprogress awebprogress, in nsirequest arequest, in nsresult astatus, in wstring amessage); obsolete since gecko 1.8 void getcontentviewercontainer(in nsisupports adocumentid, out nsicontentviewercontainer aresult); native code only!
... fireonlocationchange() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) void fireonlocationchange( in nsiwebprogress awebprogress, in nsirequest arequest, in nsiuri auri ); parameters awebprogress arequest auri fireonstatuschange() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) void fireonstatuschange( in nsiwebprogress awebprogress, in nsirequest arequest, in nsresult astatus, in wstring amessage ); parameters ...
... awebprogress arequest astatus amessage native code only!getcontentviewercontainer obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0)this feature is obsolete.

nsIHttpChannel
exceptions thrown ns_error_in_progress if set after the channel has been opened.
... exceptions thrown ns_error_in_progress if set after the channel has been opened.
... exceptions thrown ns_error_in_progress if called after the channel has been opened.
... exceptions thrown ns_error_in_progress if called after the channel has been opened.

nsIURI
ts.interfaces.nsiioservice); return ioservice.newuri(aurl, aorigincharset, abaseuri); } components of a uri prepath path scheme userpass host port ref ftp :// username@password @ hostname : portnumber /pathname?query=value #ref method overview nsiuri clone(); nsiuri cloneignoringref(); boolean equals(in nsiuri other); boolean equalsexceptref(in nsiuri other); autf8string resolve(in autf8string relativepath); boolean schemeis(in string scheme); attributes attribute type description asciihost acstring the uri host with an ascii compatible encoding.
... specignoringref autf8string returns a string representation of the uri without the ref (part after the #) portion.
... cloneignoringref() clones the current uri, clearing the 'ref' attribute in the clone.
... nsiuri cloneignoringref(); parameters none.

nsIUpdateCheckListener
toolkit/mozapps/update/nsiupdateservice.idlscriptable an interface describing an object that listens to the progress of an update check operation.
... 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void oncheckcomplete(in nsixmlhttprequest request, [array, size_is(updatecount)] in nsiupdate updates, in unsigned long updatecount); void onerror(in nsixmlhttprequest request, in nsiupdate update); void onprogress(in nsixmlhttprequest request, in unsigned long position, in unsigned long totalsize); methods oncheckcomplete() called when the update check is completed.
... onprogress() called every time there is a progress notification loading the update service file.
... void onprogress( in nsixmlhttprequest request, in unsigned long position, in unsigned long totalsize ); parameters request the nsixmlhttprequest object handling the update check.

Storage
opening a connection javascript example of opening my_db_file_name.sqlite in the profile directory: components.utils.import("resource://gre/modules/services.jsm"); components.utils.import("resource://gre/modules/fileutils.jsm"); let file = fileutils.getfile("profd", ["my_db_file_name.sqlite"]); let dbconn = services.storage.opendatabase(file); // will also create the file if it does not exist likewise, the c++ would look like this: nscomptr<nsifile> dbfile; rv = ns_getspecialdirectory(ns_app_user_profile_50_dir, ...
...if a transaction is already in progress, no transaction is obtained.
... mozistorageaggregatefunction create a new sqlite aggregate function.
... mozistorageprogresshandler monitor progress during the execution of a statement.

Color vision simulation - Firefox Developer Tools
"color blindness" is a bit of a misnomer, since most people with these disorders can see colors, but do not see all of the distinctions that people with normal color vision can see; color vision deficiencies affect perception across the color spectrum, not only of specific colors like red or green.
...the most common forms of color blindness (commonly lumped together as "red-green color blindness") affect more men than women, because they are due to a mutation in a gene in the x chromosome, which men usually have only one copy of.
... in the simulate menu, you can choose one option at a time from the following list: none — choose this to return to normal display protanomaly (low red) deuteranomaly (low green) tritanomaly (low blue) protanopia (no red) deuteranopia (no green) tritanopia (no blue) contrast loss these simulations are not completely medically accurate.
... simulation image displayed none protanomaly (low red) deuteranomaly (low green) tritanomaly (low blue) protanopia (no red) deuteranopia (no green) tritanopia (no blue) contrast loss ...

DeviceOrientationEvent - Web APIs
deviceorientationevent.alpha read only a number representing the motion of the device around the z axis, express in degrees with values ranging from 0 to 360.
... deviceorientationevent.beta read only a number representing the motion of the device around the x axis, express in degrees with values ranging from -180 to 180.
... deviceorientationevent.gamma read only a number representing the motion of the device around the y axis, express in degrees with values ranging from -90 to 90.
... deviceorientationevent.webkitcompassheading read only a number represents the difference between the motion of the device around the z axis of the world system and the direction of the north, express in degrees with values ranging from 0 to 360.

EffectTiming.iterationStart - Web APIs
web animations api's effecttiming dictionary's iterationstart property specifies the repetition number which repetition the animation begins at and its progress through it.
...the value of iterationstart corresponds directly to animationeffecttimingreadonly.iterationstart in timing objects returned by animationeffectreadonly, keyframeeffectreadonly, and keyframeeffect.
...iterationstart represents the iteration index at which the animation effect begins as well as its progress through that iteration.
... it's currently undefined what happens if you specify a value of iterationstart which is greater than the value of animationeffecttimingproperties.iterations.

FileHandle API - Web APIs
var mysnapshot = null; var request = myfilehandle.getfile(); request.onsuccess = function () { mysnapshot = this.result; } managing progress all the methods from the lockedfile interface return a filerequest object.
... such an object is basically a domrequest with an extra power: it allows to monitor the progress of an operation.
...such monitoring can be done using the filerequest.onprogress event handler.
... var progress = document.queryselector('progress'); var myfile = myfilehandle.open('readonly'); // let's read a 1gb file var action = myfile.readasarraybuffer(1000000000); action.onprogress = function (event) { if (progress) { progress.value = event.loaded; progress.max = event.total; } } action.onsuccess = function () { console.log('yeah \o/ just read a 1gb file'); } action.onerror = function () { console.log('oups :( unable to read a 1gb file') } file storage when a file handle is created, the associated file only exists as a "temporary file" as long as you hold the filehandle instance.

GeolocationCoordinates.longitude - Web APIs
the geolocationcoordinates interface's read-only longitude property is a double-precision floating point value which represents the longitude of a geographical position, specified in decimal degrees.
... syntax let longitude = geolocationcoordinatesinstance.longitude value the value in longitude is the geographical longitude of the location on earth described by the coordinates object, in decimal degrees.
... note: the zero meridian (also known as the prime meridian or the reference meridian) is not precisely the same as the greenwhich meridian that most people think of.
... it is, instead, the iers reference meridian, which is located 5.3 arcseconds (102 meters / 335 feet) east of the greenwich meridian.

GeolocationCoordinates - Web APIs
geolocationcoordinates.latitude read only secure context returns a double representing the position's latitude in decimal degrees.
... geolocationcoordinates.longitude read only secure context returns a double representing the position's longitude in decimal degrees.
...this value, specified in degrees, indicates how far off from heading true north the device is.
... 0 degrees represents true north, and the direction is determined clockwise (which means that east is 90 degrees and west is 270 degrees).

Node - Web APIs
node.nextsiblingread only returns a node representing the next node in the tree, or null if there isn't such node.
... node.previoussiblingread only returns a node representing the previous node in the tree, or null if there isn't such node.
... we use a wrapper function named grep to do the searching: function grep(parentnode, pattern) { const matches = [] let endscan = false eachnode(parentnode, function(node){ if (endscan) { return false } // ignore anything which isn't a text node if (node.nodetype !== node.text_node) { return } if (typeof pattern === "string") { if (-1 !== node.textcontent.indexof(pattern)) { matches.push...
...if (pattern.test(node.textcontent)) { if (!pattern.global) { endscan = true matches = node } else { matches.push(node) } } }) return matches } for example, to find text nodes that contain typos: const typos = ["teh", "adn", "btu", "adress", "youre", "msitakes"] const pattern = new regexp("\\b(" + typos.join("|") + ")\\b", "gi") const mistakes = grep(document.body, pattern) console.log(mistakes) specifications specification status comment domthe definition of 'node' in that specification.

PannerNode.coneInnerAngle - Web APIs
the coneinnerangle property of the pannernode interface is a double value describing the angle, in degrees, of a cone inside of which there will be no volume reduction.
...rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e.
...ew oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the size of the area in which the sound volume decreases gradually // if coneouterangle == 45 and coneinnerangle == 30, it means that when the sound is rotated // by between 15 (30/2) and 22.5 (45/2) degrees either direction, // the volume will decrease gradually panner.coneouterangle = 45; // this va...
... // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.orientationy.setvalueattime(y1, context.currenttime); panner.orientationz.setvalueattime(z1, context.currenttime); // calculate the vector for -22.4 degrees // since our coneouterangle is 45, this will just about make the sound audible // if we set it to +/-22.5, the sound volume will be 0, as the threshold is exclusive const [x2, y2, z2] = yrotationtovector(-22.4); panner.orientationx.setvalueattime(x2, context.currenttime + 2); panner.orientationy.setvalueattime(y2, context.currenttime + 2); panner.orientationz.setvalueattime(z2, context.currentt...

PannerNode.coneOuterAngle - Web APIs
the coneouterangle property of the pannernode interface is a double value describing the angle, in degrees, of a cone outside of which the volume will be reduced by a constant value, defined by the coneoutergain property.
...rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e.
...ew oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the size of the area in which the sound volume decreases gradually // if coneouterangle == 45 and coneinnerangle == 30, it means that when the sound is rotated // by between 15 (30/2) and 22.5 (45/2) degrees either direction, // the volume will decrease gradually panner.coneouterangle = 45; // this va...
... // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.orientationy.setvalueattime(y1, context.currenttime); panner.orientationz.setvalueattime(z1, context.currenttime); // calculate the vector for -22.4 degrees // since our coneouterangle is 45, this will just about make the sound audible // if we set it to +/-22.5, the sound volume will be 0, as the threshold is exclusive const [x2, y2, z2] = yrotationtovector(-22.4); panner.orientationx.setvalueattime(x2, context.currenttime + 2); panner.orientationy.setvalueattime(y2, context.currenttime + 2); panner.orientationz.setvalueattime(z2, context.currentt...

SVGAnimatedRect - Web APIs
the svganimatedrect interface is used for attributes of basic svgrect which can be animated.
... interface overview also implement none methods none properties readonly svgrect baseval readonly svgrect animval normative document svg 1.1 (2nd edition) properties name type description baseval svgrect the base value of the given attribute before applying any animations.
... animval svgrect a read only svgrect representing the current animated value of the given attribute.
... if the given attribute is not currently being animated, then the svgrect will have the same contents as baseval.

SVGTransformList - Web APIs
if the index is greater than or equal to numberofitems, then the new item is appended to the end of the list.
... a domexception with code index_size_err is raised if the index number is greater than or equal to numberofitems.
... a domexception with code index_size_err is raised if the index number is greater than or equal to numberofitems.
... </script> <polygon fill="orange" stroke="black" stroke-width="5" points="100,225 100,115 130,115 70,15 70,15 10,115 40,115 40,225" onclick="transformme(evt)"/> <rect x="200" y="100" width="100" height="100" fill="yellow" stroke="black" stroke-width="5" onclick="transformme(evt)"/> <text x="40" y="250" font-family="verdana" font-size="16" fill="green" > click on a shape to transform it </text> </svg> live preview: specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgtransformlist' in that specification.

Using Service Workers - Web APIs
service worker syntax is more complex than that of appcache, but the trade off is that you can use javascript to control your appcache-implied behaviors with a fine degree of granularity, allowing you to handle this problem and many more.
... the below graphic shows a summary of the available service worker events: promises promises are a great mechanism for running async operations, with success dependant on one another.
... note: one great thing about service workers is that if you use feature detection like we’ve shown above, browsers that don’t support service workers can just use your app online in the normal expected fashion.
...with some kind of default fallback page as a response using match(), like this: caches.match('./fallback.html'); you can retrieve a lot of information about each request by calling parameters of the request object returned by the fetchevent: event.request.url event.request.method event.request.headers event.request.body recovering failed requests so caches.match(event.request) is great when there is a match in the service worker cache, but what about cases when there isn’t a match?

WebGLRenderingContext.getRenderbufferParameter() - Web APIs
possible return values: gl.rgba4: 4 red bits, 4 green bits, 4 blue bits 4 alpha bits.
... gl.rgb565: 5 red bits, 6 green bits, 5 blue bits.
... gl.rgb5_a1: 5 red bits, 5 green bits, 5 blue bits, 1 alpha bit.
... gl.renderbuffer_green_size: returns a glint that is the resolution size (in bits) for the green color.

Matrix math for the web - Web APIs
// manually rotating a point about the origin without matrices let point = [10, 2]; // calculate the distance from the origin let distance = math.sqrt(point[0] * point[0] + point[1] * point[1]); // the equivalent of 60 degrees, in radians let rotationinradians = math.pi / 3; let transformedpoint = [ math.cos(rotationinradians) * distance, math.sin(rotationinradians) * distance ]; it is possible to encode these type of steps into a matrix, and do it for each of the x, y, and z dimensions.
...for instance, to scale something down by 80%, move it down 200 pixels, and then rotate about the origin 90 degrees would look something like the following in pseudo-code.
... let transformmatrix = mdn.multiplyarrayofmatrices([ rotatearoundzaxis(math.pi * 0.5), // step 3: rotate around 90 degrees translate(0, 200, 0), // step 2: move down 100 pixels scale(0.8, 0.8, 0.8), // step 1: scale down ]); view on jsfiddle finally, a fun step to show how matrices work is to reverse the steps to bring the matrix back to the original identity matrix.
... let transformmatrix = mdn.multiplyarrayofmatrices([ scale(1.25, 1.25, 1.25), // step 6: scale back up translate(0, -200, 0), // step 5: move back up rotatearoundzaxis(-math.pi * 0.5), // step 4: rotate back rotatearoundzaxis(math.pi * 0.5), // step 3: rotate around 90 degrees translate(0, 200, 0), // step 2: move down 100 pixels scale(0.8, 0.8, 0.8), // step 1: scale down ]); why matrices are important matrices are important because they comprise a small set of numbers that can describe a wide range of transformations in space.

WebGL model view projection - Web APIs
box.draw({ top : 0.5, // x bottom : -0.5, // x left : -0.5, // y right : 0.5, // y depth : 0, // z color : [1, 0.4, 0.4, 1] // red }); next, draw a green box up top and behind the red box.
... box.draw({ top : 0.9, // x bottom : 0, // x left : -0.9, // y right : 0.9, // y depth : 0.5, // z color : [0.4, 1, 0.4, 1] // green }); finally, for demonstration that clipping is actually going on, this box doesn't get drawn because it's entirely outside of clip space.
... box.draw({ top : 0.5, // y bottom : -0.5, // y left : -0.5, // x right : 0.5, // x w : 0.7, // w - enlarge this box depth : 0, // z color : [1, 0.4, 0.4, 1] // red }); now, we draw a green box up top, but shrink it by setting the w component to 1.1 box.draw({ top : 0.9, // y bottom : 0, // y left : -0.9, // x right : 0.9, // x w : 1.1, // w - shrink this box depth : 0.5, // z color : [0.4, 1, 0.4, 1] // green }); this last box doesn't get drawn because it's outside of clip spac...
...in reality we want to make sure that z is greater than 0 for points in view, so we'll modify it slightly by changing the value to ((1.0 + z) * scalefactor).

Rendering and the WebXR frame animation callback - Web APIs
and because of those differences between what is seen by the left eye versus the right eye, the brain is able to infer a great deal of information about how deep the object is, its size, and more.
... by combining that inferred depth information with other cues such as perspective, shadows, memories of what these relationships mean, and so forth, we can figure out a great deal about the world around us.
... a basic renderer in this version of the webxr renderering callback, we use a very straightforward approach that works great for relatively simple projects.
...for instance, if an object is rotating, you might apply the rotation like this: const xdeltarotation = (xrotationdegreespersecond * radians_per_degree) * deltatime; const ydeltarotation = (yrotationdegreespersecond * radians_per_degree) * deltatime; const zdeltarotation = (zrotationdegreespersecond * radians_per_degree) * deltatime; this computes the amount by which the object has rotated around each of the three axes since the last time the frame was drawn.

Starting up and shutting down a WebXR session - Web APIs
be sure to read the readme carefully; the polyfill comes in several versions depending on what degree of compatibility with newer javascript features your target browsers include.
...this is great—if your player's viewpoint starts in the exact center of the world.
... similarly, the specific methodology you use for loading models and other information and setting up your webgl data—textures, vertex buffers, shaders, and so on—will vary a great deal depending on your needs, what if any frameworks you're using, and the like.
...presumably the renderer uses this value to compute how often to render new frames as the animation loop progresses, thus rendering less frequently the more "blurred" the scene becomes.

color - CSS: Cascading Style Sheets
the color css media feature can be used to test the number of bits per color component (red, green, blue) of the output device.
... syntax the color feature is specified as an <integer> value that represents the number of bits per color component (red, green, blue) of the output device.
...for example, if a display uses 5 bits for blue and red and 6 bits for green, then the device is considered to use 5 bits per color component.
... examples html <p>this text should be black on non-color devices, red on devices with a low number of colors, and greenish on devices with a high number of colors.</p> css p { color: black; } /* any color device */ @media (color) { p { color: red; } } /* any color device with at least 8 bits per color component */ @media (min-color: 8) { p { color: #24ba13; } } result specifications specification status comment media queries level 4the definition of 'color' in that specification.

Attribute selectors - CSS: Cascading Style Sheets
/* <a> elements with a title attribute */ a[title] { color: purple; } /* <a> elements with an href matching "https://example.org" */ a[href="https://example.org"] { color: green; } /* <a> elements with an href containing "example" */ a[href*="example"] { font-size: 2em; } /* <a> elements with an href ending ".org" */ a[href$=".org"] { font-style: italic; } /* <a> elements whose class attribute contains the word "logo" */ a[class~="logo"] { padding: 2px; } syntax [attr] represents elements with an attribute name of attr.
...links with "insensitive" anywhere in the url, regardless of capitalization */ a[href*="insensitive" i] { color: cyan; } /* links with "case" anywhere in the url, with matching capitalization */ a[href*="case" s] { color: pink; } /* links that end in ".org" */ a[href$=".org"] { color: red; } /* links that start with "https" and end in ".org" */ a[href^="https"][href$=".org"] { color: green; } html <ul> <li><a href="#internal">internal link</a></li> <li><a href="http://example.com">example link</a></li> <li><a href="#insensitive">insensitive internal link</a></li> <li><a href="http://example.org">example org link</a></li> <li><a href="https://example.org">example https org link</a></li> </ul> result languages css /* all divs with a `lang` attribute are bold.
...*/ div[lang~="en-us"] { color: blue; } /* all divs in portuguese are green.
... */ div[lang="pt"] { color: green; } /* all divs in chinese are red, whether simplified (zh-cn) or traditional (zh-tw).

Using feature queries - CSS: Cascading Style Sheets
in this guide you will learn how to implement progressive enhancement using feature queries.
... how to use feature queries for progressive enhancement feature queries are an incredibly useful tool when progressively enhancing a site.
...in practice however, when using feature queries for progressive enhancement, this doesn't matter.
... see also the @supports rule learn layout: supporting older browsers css grid layout and progressive enhancement using feature queries in css ...

CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
rid; grid-gap: 20px; grid-template-columns: 1fr auto; font: 1em helvetica, arial, sans-serif; } .wrapper nav { writing-mode: vertical-lr; } .wrapper ul { list-style: none; margin: 0; padding: 1em; display: flex; justify-content: space-between; } .wrapper a { text-decoration: none; } <div class="wrapper"> <div class="content"> <p>turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale.
...lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.
...corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p> <p>nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery.
... bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip.

CSS Scrollbars - CSS: Cascading Style Sheets
basic example in this example we have chosen to use a thin scrollbar, with a green track and purple thumb.
... .scroller { width: 300px; height: 100px; overflow-y: scroll; scrollbar-color: rebeccapurple green; scrollbar-width: thin; } html <div class="scroller"> veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
... gumbo beet greens corn soko endive gumbo gourd.
... parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.

clamp() - CSS: Cascading Style Sheets
the maximum value is the largest (most positive) expression value to which the value of the property will be assigned if the preferred value is greater than this upper bound.
...this means that the font-size will be set at 1.2rem, unless the computed value of 1.2vw is greater than that of 1.2rem, in which case it will be set to that value instead.
...this means that the font-size will be set at 1.8rem, until the computed value of 2.5vw becomes greater than that of 1.8rem.
... at this point, font-size will be set at 2.5vw, until 2.5vw's computed value becomes greater than that of 2.8rem.

cursor - CSS: Cascading Style Sheets
for example, this specifies two images using <url> values, providing <x><y> coordinates for the second one, and falling back to the progress keyword value if neither image can be loaded: cursor: url(one.svg), url(two.svg) 5 5, progress; values <url> a url(…) or a comma separated list url(…), url(…), …, pointing to an image file.
... progress the program is busy in the background, but the user can still interact with the interface (in contrast to wait).
... wait the program is busy, and the user can't interact with the interface (in contrast to progress).
..., ]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ] examples setting cursor types .foo { cursor: crosshair; } .bar { cur...

font-style - CSS: Cascading Style Sheets
valid values are degree values of -90deg to 90deg inclusive.
... if an angle is not specified, an angle of 14 degrees is used.
... in general, for a requested angle of 14 degrees or greater, larger angles are prefered; otherwise, smaller angles are preferred (see the spec's font matching section for the precise algorithm).
... variable fonts variable fonts can offer a fine control over the degree to which an oblique face is slanted.

font-variant - CSS: Cascading Style Sheets
to change preferences in firefox, visit about:config.opera android full support 41safari ios full support 9.3samsung internet android full support 6.0greek accented characterschrome no support nonotes no support nonotes notes some operating systems may correctly omit accents in all-uppercase greek text.edge no support nonotes no support nonotes notes some operating sys...
...tems may correctly omit accents in all-uppercase greek text.firefox no support nonotes no support nonotes notes some operating systems may correctly omit accents in all-uppercase greek text.ie no support noopera no support nonotes no support nonotes notes some operating systems may correctly omit accents in all-uppercase greek text.safari no support nowebview android no support nonotes no support nonotes notes some operating systems may...
... correctly omit accents in all-uppercase greek.chrome android no support nonotes no support nonotes notes some operating systems may correctly omit accents in all-uppercase greek text.firefox android no support nonotes no support nonotes notes some operating systems may correctly omit accents in all-uppercase greek text.opera android no support nonotes no support nonotes notes some operating systems may correctly omit accents in all-uppercase greek text.safari ios no support nosam...
...sung internet android no support nonotes no support nonotes notes some operating systems may correctly omit accents in all-uppercase greek.i → İ and ı → ichrome full support 31edge full support 12firefox full support 14ie full support 4opera full support 18safari full support 8webview android full support ≤37chrome android full support 31fire...

font-weight - CSS: Cascading Style Sheets
if no match is found, look for available weights greater than 500, in ascending order.
...if no match is found, look for available weights greater than the target, in ascending order.
... if a weight greater than 500 is given, look for available weights greater than the target, in ascending order.
...however some fonts, called variable fonts, can support a range of weights with a more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight.

page-break-after - CSS: Cascading Style Sheets
recto if pages progress left-to-right, then this acts like right.
... if pages progress right-to-left, then this acts like left.
... verso if pages progress left-to-right, then this acts like left.
... if pages progress right-to-left, then this acts like right.

page-break-before - CSS: Cascading Style Sheets
recto if pages progress left-to-right, then this acts like right.
... if pages progress right-to-left, then this acts like left.
... verso if pages progress left-to-right, then this acts like left.
... if pages progress right-to-left, then this acts like right.

scrollbar-color - CSS: Cascading Style Sheets
syntax /* keyword values */ scrollbar-color: auto; scrollbar-color: dark; scrollbar-color: light; /* <color> values */ scrollbar-color: rebeccapurple green; /* two valid colors.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples coloring overflow scrollbars css .scroller { width: 300px; height: 100px; overflow-y: scroll; scrollbar-color: rebeccapurple green; } html <div class="scroller">veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
... gumbo beet greens corn soko endive gumbo gourd.
... parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.

text-transform - CSS: Cascading Style Sheets
in greek (el), vowels lose their accent when the whole word is in uppercase (ά/Α), except for the disjunctive eta (ή/Ή).
... in greek (el), the lowercase sigma character has two forms: σ and ς.
... uppercase (greek vowels) <p>initial string <strong>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</strong> </p> <p>text-transform: uppercase <strong><span>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</span></strong> </p> span { text-transform: uppercase; } strong { float: right; } this demonstrates how greek vowels except disjunctive eta should have no accent...
... lowercase (greek Σ) <p>initial string <strong>Σ is a greek letter that appears several times in ΟΔΥΣΣΕΥΣ.</strong> </p> <p>text-transform: lowercase <strong><span>Σ is a greek letter that appears several times in ΟΔΥΣΣΕΥΣ.</span></strong> </p> span { text-transform: lowercase; } strong { float: right; } this demonstrates how the greek character sigma (Σ) is transformed into the regu...

Audio and video manipulation - Developer guides
for example, let's process a video to display it in greyscale.
... in this case, we'll show both the source video and the output greyscale frames.
... ordinarily, if you were implementing a "play video in greyscale" feature, you'd probably add display: none to the style for the <video> element, to keep the source video from being drawn to the screen while showing only the canvas showing the altered frames.
...tener("play", function() { self.width = self.video.width; self.height = self.video.height; self.timercallback(); }, false); }, computeframe: function() { this.ctx1.drawimage(this.video, 0, 0, this.width, this.height); var frame = this.ctx1.getimagedata(0, 0, this.width, this.height); var l = frame.data.length / 4; for (var i = 0; i < l; i++) { var grey = (frame.data[i * 4 + 0] + frame.data[i * 4 + 1] + frame.data[i * 4 + 2]) / 3; frame.data[i * 4 + 0] = grey; frame.data[i * 4 + 1] = grey; frame.data[i * 4 + 2] = grey; } this.ctx1.putimagedata(frame, 0, 0); return; } }; once the page has loaded you can call processor.doload() result this is a pretty simple example showing how to manipulate video frames ...

Challenge solutions - Developer guides
solution css supports common color names like orange, yellow, blue, green, or black.
...the resulting file looks like this: p {color: blue; } strong {color: orange; text-decoration: underline;} later sections of this tutorial describe style rules and declarations in greater detail.
... solution the following values are reasonable approximations of the named colors: strong { color: #f00; /* red */ background-color: #ddf; /* pale blue */ font: 200% serif; } .carrot { color: #fa0; /* orange */ } .spinach { color: #080; /* dark green */ } p { color: #00f; /* blue */ } content add an image challenge add a one rule to your stylesheet so that it displays the image at the start of each line.
... solution the following rule achieves the desired result: #fixed-pin { position:fixed; top: 3px; right: 3px; } tables borders on data cells only challenge change the stylesheet to make the table have a green border around only the data cells.

Content categories - Developer guides
, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr> and text.
... elements belonging to this category are <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <picture>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> and plain text (not only consisting of white spaces characters).
... <button> <fieldset> <input> <keygen> <label> <meter> <object> <output> <progress> <select> <textarea> this category contains several sub-categories: listed elements that are listed in the form.elements and fieldset.elements idl collections.
...contains <button>, <input>, <keygen>, <meter>, <output>, <progress>, <select>, and <textarea>.

HTML5 - Developer guides
performance and integration: providing greater speed optimization and better usage of computer hardware.
... new semantic elements beside sections, media and forms elements, there are numerous new elements, like <mark>, <figure>, <figcaption>, <data>, <time>, <output>, <progress>, or <meter> and <main>, increasing the number of valid html5 elements.
...this leads to far greater predictability and interoperability between html5-compliant browsers.
... jit-compiling javascript engines the new generation of javascript engines is much more powerful, leading to greater performance.

HTML attribute reference - HTML: Hypertext Markup Language
crossorigin <audio>, <img>, <link>, <script>, <video> how the element handles cross-origin requests csp <iframe> specifies the content security policy that an embedded document must agree to enforce upon itself.
... form <button>, <fieldset>, <input>, <keygen>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea> indicates the form that is the owner of the element.
... max <input>, <meter>, <progress> indicates the maximum value allowed.
... usemap <img>, <input>, <object> value <button>, <data>, <input>, <li>, <meter>, <option>, <progress>, <param> defines a default value which will be displayed in the element on page load.

Date and time formats used in HTML - HTML: Hypertext Markup Language
year numbers in order to simplify the basic format used for date strings in html, the specification requires that all years be given using the modern (or proleptic) gregorian calendar.
... while user interfaces may allow entry of dates using other calendars, the underlying value always uses the gregorian calendar.
... while the gregorian calendar wasn't created until the year 1582 (replacing the similar julian calendar), for html's purposes, the gregorian calendar is extended back to the year 1 c.e.
...there are two standard time bases, which are very close to the same, but not exactly the same: for dates after the establishment of coordinated universal time (utc) in the early 1960s, the time base is z and the offset indicates a particular time zone's offset from the time at the prime meridian at 0º longitude (which passes through the royal observatory at greenwich, england).

<strong>: The Strong Importance element - HTML: Hypertext Markup Language
usage notes the <strong> element is for content that is of "strong importance," including things of great seriousness or urgency (such as warnings).
... this could be a sentence that is of great importance to the whole page, or you could merely try to point out that some words are of greater importance compared to nearby content.
...the <strong> element is for content that is of greater importance, while the <b> element is used to draw attention to text without indicating that it's more important.
...this is very dangerous.") both <strong> and <em> can be nested to increase the relative degree of importance or stress emphasis, respectively.

HTML elements reference - HTML: Hypertext Markup Language
the <em> element can be nested, with each level of nesting indicating a greater degree of emphasis.
...there's a great deal of further information about this available in the html forms guide.
... <progress> the html <progress> element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
...the html 2 standard recommended that lines shouldn't be broken when not greater than 132 characters.

Microdata - HTML: Hypertext Markup Language
search engines benefit greatly from direct access to this structured data because it allows search engines to understand the information on web pages and provide more relevant results to users.
... 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!
... example html <div itemscope itemtype="http://schema.org/softwareapplication"> <span itemprop="name">angry birds</span> - requires <span itemprop="operatingsystem">android</span><br> <link itemprop="applicationcategory" href="http://schema.org/gameapplication"/> <div itemprop="aggregaterating" itemscope itemtype="http://schema.org/aggregaterating"> rating: <span itemprop="ratingvalue">4.6</span> ( <span itemprop="ratingcount">8864</span> ratings ) </div> <div itemprop="offers" itemscope itemtype="http://schema.org/offer"> price: $<span itemprop="price">1.00</span> <meta itemprop="pricecurrency" content="usd" /> </div> </div> structured data ...
... itemscope itemtype softwareapplication (http://schema.org/softwareapplication) itemprop name angry birds itemprop operatingsystem android itemprop applicationcategory gameapplication (http://schema.org/gameapplication) itemscope itemprop[itemtype] aggregaterating [aggregaterating] itemprop ratingvalue 4.6 itemprop ratingcount 8864 itemscope itemprop[itemtype] offers [offer] itemprop price 1.00 itemprop pricecurrency usd result note: a handy tool for extracting microdata structures from html is google's structured data testing tool.

Evolution of HTTP - HTTP
http/1.1 – the standardized protocol in parallel to the somewhat chaotic use of the diverse implementations of http/1.0, and since 1995, well before the publication of http/1.0 document the next year, proper standardization was in progress.
... content negotiation, including language, encoding, or type, has been introduced, and allows a client and a server to agree on the most adequate content to exchange.
... since 2005, the set of apis available to web pages greatly increased and several of these apis created extensions, mostly new specific http headers, to the http protocol for specific purposes: server-sent events, where the server can push occasional messages to the browser.
... http/2 – a protocol for greater performance over the years, web pages have become much more complex, even becoming applications in their own right.

Browser detection using the user agent - HTTP
there are ways to develop your website to progressively enhance itself based on the availability of features rather than by targeting specific browsers.
...also, rethink your design: can you use progressive enhancement or fluid layouts to help remove the need to do this?
... progressive enhancement this design technique involves developing your web site in 'layers', using a bottom-up approach, starting with a simpler layer and improving the capabilities of the site in successive layers, each using more features.
...this can be harder to do, and less effective, than progressive enhancement, but may be useful in some cases.

JavaScript modules - JavaScript
} which we then export: export { square }; over in main.js, we import it like this: import { square } from './modules/square.js'; and then use the class to draw our square: let square1 = new square(mycanvas.ctx, mycanvas.listid, 50, 50, 100, 'blue'); square1.draw(); square1.reportarea(); square1.reportperimeter(); aggregating modules there will be times where you'll want to aggregate modules together.
...this is possible using export syntax of the following forms in the parent module: export * from 'x.js' export { name } from 'x.js' for an example, see our module-aggregation directory.
... in this example (based on our earlier classes example) we've got an extra module called shapes.js, which aggregates all the functionality from circle.js, square.js, and triangle.js together.
... export { square }; next up comes the aggregation part.

Numbers and dates - JavaScript
76931348623157e+308) number.min_value the smallest representable number (±5e-324) number.nan special "not a number" value number.negative_infinity special negative infinite value; returned on overflow number.positive_infinity special positive infinite value; returned on overflow number.epsilon difference between 1 and the smallest value greater than 1 that can be represented as a number (2.220446049250313e-16) number.min_safe_integer minimum safe integer in javascript (−253 + 1, or −9007199254740991) number.max_safe_integer maximum safe integer in javascript (+253 − 1, or +9007199254740991) methods of number method description number.parsefloat() parses a string argum...
... floor(), ceil() returns the largest/smallest integer less/greater than or equal to an argument.
...the first statement creates a variable temp, assigning it a value using a conditional expression; if hour is greater than 12, (hour - 12), otherwise simply hour, unless hour is 0, in which case it becomes 12.
... finally, a conditional expression appends "p.m." to temp if hour is 12 or greater; otherwise, it appends "a.m." to temp.

Assertions - JavaScript
buggymultiline = `tey, ihe light-greon apple tangs on ihe greon traa`; // 1) use ^ to fix the matching at the begining of the string, and right after newline.
...fixedmultiline = buggymultiline.replace(/\bo/gim,'e'); console.log(4, fixedmultiline); // fix 'greon' but does not touch 'on'.
... let fruitsstartswithnota = fruits.filter(fruit => /^[^a]/.test(fruit)); console.log(fruitsstartswithnota); // [ 'watermelon', 'orange', 'strawberry' ] matching a word boundary let fruitswithdescription = ["red apple", "orange orange", "green avocado"]; // select descriptions that contains 'en' or 'ed' words endings: let enedselection = fruitswithdescription.filter(descr => /(en|ed)\b/.test(descr)); console.log(enedselection); // [ 'red apple', 'green avocado' ] lookahead assertion // js lookahead assertion x(?=y) let regex = /first(?= test)/g; console.log('first test'.match(regex)); // [ 'first' ] console.log('first peach'.ma...
...an orange)[^?!]+[?!]/gi console.log(orangenotlemon.match(selectnotorangeregex)); // [ ' yes, i do not want to have a lemon!' ] lookbehind assertion let oranges = ['ripe orange a ', 'green orange b', 'ripe orange c',]; let ripe_oranges = oranges.filter( fruit => fruit.match(/(?<=ripe )orange/)); console.log(ripe_oranges); // [ 'ripe orange a ', 'ripe orange c' ] specifications specification ecmascript (ecma-262)the definition of 'regexp: assertions' in that specification.

Date.prototype.setHours() - JavaScript
if a value greater than 23 is provided, the datetime will be incremented by the extra hours.
...if a value greater than 59 is provided, the datetime will be incremented by the extra minutes.
...if a value greater than 59 is provided, the datetime will be incremented by the extra seconds.
...if a value greater than 999 is provided, the datetime will be incremented by the extra milliseconds.

Intl.DateTimeFormat.prototype.formatToParts() - JavaScript
relatedyear the string used for the related 4-digit gregorian year, in the event that the calendar's representation would be a yearname instead of a year, for example "2019".
... these years are disambiguated by relationship to corresponding years on the gregorian calendar.
... when this is the case, the result of formattoparts() will contain an entry for relatedyear when a year would normally be present, containing the 4-digit gregorian year, instead of an entry for year.
... setting an entry in the bag for year (with any value) will yield both the and the yearname gregorian relatedyear: let opts = { year: "numeric", month: "numeric", day: "numeric" }; let df = new intl.datetimeformat("zh-u-ca-chinese", opts); df.formattoparts(date.utc(2012, 11, 17, 3, 0, 42)); // return value [ { type: 'relatedyear', value: '2012' }, { type: 'literal', value: '年' }, { type: 'month', value: '十一月' }, { type: 'day', value: '4' } ] if the year option is not set in the bag (to any value), the result will include only the relatedyear: let df = new intl.datetimeformat("zh-u-ca-chinese"); df.formattoparts(date.utc(2012, 11, 17, 3, 0, 42)); // return value [ { type: 'relatedyear', value: '2012' }, { type: 'literal', value: '年' }, { type: 'month', va...

Math - JavaScript
math.ceil(x) returns the smallest integer greater than or equal to x.
... examples converting between degrees and radians the trigonometric functions sin(), cos(), tan(), asin(), acos(), atan(), and atan2() expect (and return) angles in radians.
... since humans tend to think in degrees, and some functions (such as css transforms) can accept degrees, it is a good idea to keep functions handy that convert between the two: function degtorad(degrees) { return degrees * (math.pi / 180); }; function radtodeg(rad) { return rad / (math.pi / 180); }; calculating the height of an equalateral triangle if we want to calculate the height of an equalateral triangle, and we know its side length is 100, we can use the formulae length of the adjacent multiplied by the tangent of the angle is equal to the opposite.
... we use our degtorad() function to convert 60 degrees to radians, as math.tan() expects an input value in radians.

Promise.any() - JavaScript
if no promises in the iterable fulfil (if all of the given promises are rejected), then the returned promise is rejected with an aggregateerror, a new subclass of error that groups together individual errors.
... rejection if all of the passed-in promises reject, promise.any asynchronously rejects with an aggregateerror object, which extends error, and contains an errors property with an array of rejection values.
...ve, reject) => { reject("always fails"); }); const pslow = new promise((resolve, reject) => { settimeout(resolve, 500, "done eventually"); }); const pfast = new promise((resolve, reject) => { settimeout(resolve, 100, "done quick"); }); promise.any([perr, pslow, pfast]).then((value) => { console.log(value); // pfast fulfils first }) // expected output: "done quick" rejections with aggregateerror promise.any() rejects with an aggregateerror if no promise fulfils.
... const perr = new promise((resolve, reject) => { reject('always fails'); }); promise.any([perr]).catch((err) => { console.log(err); }) // expected output: "aggregateerror: no promise in promise.any was resolved" displaying the first image loaded in this example, we have a function that fetches an image and returns a blob.

String.prototype.charCodeAt() - JavaScript
if the unicode code point cannot be represented in a single utf-16 code unit (because its value is greater than 0xffff) then the code unit returned will be the first part of a surrogate pair for the code point.
... syntax str.charcodeat(index) parameters index an integer greater than or equal to 0 and less than the length of the string.
... because of this, in order to examine (or reproduce) the full character for individual character values of 65536 or greater, for such characters, it is necessary to retrieve not only charcodeat(i), but also charcodeat(i+1) (as if manipulating a string with two letters), or to use codepointat(i) instead.
... charcodeat() returns nan if the given index is less than 0, or if it is equal to or greater than the length of the string.

String.prototype.replace() - JavaScript
replacing a fahrenheit degree with its celsius equivalent the following example replaces a fahrenheit degree with its equivalent celsius degree.
... the fahrenheit degree should be a number ending with "f".
...the number of fahrenheit degree is accessible to the function through its second parameter, p1.
... the function sets the celsius number based on the fahrenheit degree passed in a string to the f2c() function.

export - JavaScript
n }; // renaming exports export { variable1 as name1, variable2 as name2, …, namen }; // exporting destructured assignments with renaming export const { name1, name2: bar } = o; // default exports export default expression; export default function (…) { … } // also class, function* export default function name1(…) { … } // also class, function* export { name1 as default, … }; // aggregating modules export * from …; // does not set the default export export * as name1 from …; // draft ecmascript® 2o21 export { name1, name2, …, namen } from …; export { import1 as name1, import2 as name2, …, namen } from …; export { default } from …; namen identifier to be exported (so that it can be imported via import in another script).
... name for example: // file test.js let k; export default k = 12; // some other file import m from './test'; // note that we have the freedom to use import m instead of import k, because k was default export console.log(m); // will log 12 you can also rename named exports to avoid naming conflicts: export { myfunction as function1, myvariable as variable }; re-exporting / aggregating it is also possible to "import/export" from different modules in a parent module so that they are available to import from that module.
... default function cube(x) { return x * x * x; } then, in another script, it is straightforward to import the default export: import cube from './my-module.js'; console.log(cube(3)); // 27 using export from let's take an example where we have the following hierarchy: childmodule1.js: exporting myfunction and myvariable childmodule2.js: exporting myclass parentmodule.js: acting as an aggregator (and doing nothing else) top level module: consuming the exports of parentmodule.js this is what it would look like using code snippets: // in childmodule1.js let myfunction = ...; // assign something useful to myfunction let myvariable = ...; // assign something useful to myvariable export {myfunction, myvariable}; // in childmodule2.js let myclass = ...; // assign something useful to...
... myclass export myclass; // in parentmodule.js // only aggregating the exports from childmodule1 and childmodule2 // to re-export them export { myfunction, myvariable } from 'childmodule1.js'; export { myclass } from 'childmodule2.js'; // in top-level module // we can consume the exports from a single module since parentmodule // "collected"/"bundled" them in a single source import { myfunction, myvariable, myclass } from 'parentmodule.js' specifications specification ecmascript (ecma-262)the definition of 'exports' in that specification.

glyph-orientation-horizontal - SVG: Scalable Vector Graphics
when the reference orientation direction is horizontal and the glyph-orientation-horizontal results in an orientation angle that is a multiple of 180 degrees, then the current text position is incremented according to the horizontal metrics of the glyph.
... otherwise, if the value of this attribute is not a multiple of 180 degrees, then the current text position is incremented according to the vertical metrics of the glyph.
... as a presentation attribute, it can be applied to any element but it has effect only on the following five elements: <altglyph>, <textpath>, <text>, <tref>, and <tspan> context notes value <angle> default value 0deg animatable no <angle> the value of the angle is restricted to 0, 90, 180, and 270 degrees.
...a value of 90deg indicates an orientation of 90 degrees clockwise from the reference orientation.

<feColorMatrix> - SVG: Scalable Vector Graphics
r' = r1*r + r2*g + r3*b + r4*a + r5 g' = g1*r + g2*g + g3*b + g4*a + g5 b' = b1*r + b2*g + b3*b + b4*a + b5 a' = a1*r + a2*g + a3*b + a4*a + a5 take the amount of red in the new pixel, or r': it is the sum of r1 times the old pixel's red r, r2 times the old pixel's green g, r3 times of the old pixel's blue b, r4 times the old pixel's alpha a, plus a shift r5.
... r' = r1 * r + r2 * g + r3 * b + r4 * a + r5 new red = [ r1 * old red ] + [ r2 * old green ] + [ r3 * old blue ] + [ r4 * old alpha ] + [ shift of r5 ] if, say, we want to make a completely black image redder, we can make the r5 a positive real number x, boosting the redness on every pixel of the new image by x.
... example svg <svg width="100%" height="100%" viewbox="0 0 150 500" preserveaspectratio="xmidymid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- ref --> <defs> <g id="circles"> <circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" /> <circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" /> <circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" /> </g> </defs> <use href="#circles" /> <text x="70" y="50">reference</text> <!-- identity matrix --> <filter id="colormethesame"> <fecolormatrix in="sourcegraphic" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1...
... 0" /> </filter> <use href="#circles" transform="translate(0 70)" filter="url(#colormethesame)" /> <text x="70" y="120">identity matrix</text> <!-- combine rgb into green matrix --> <filter id="colormegreen"> <fecolormatrix in="sourcegraphic" type="matrix" values="0 0 0 0 0 1 1 1 1 0 0 0 0 0 0 0 0 0 1 0" /> </filter> <use href="#circles" transform="translate(0 140)" filter="url(#colormegreen)" /> <text x="70" y="190">rgbtogreen</text> <!-- saturate --> <filter id="colormesaturate"> <fecolormatrix in="sourcegraphic" type="saturate" values="0.2" /> </filter> <use href="#circles" transform="translate(0 210)" filter="url(#colormesaturate)" /> <text x="70" y="260">saturate</text> ...

SVG fonts - SVG: Scalable Vector Graphics
defining a font there are some ingredients required for embedding a font in svg.
...again, you can use arbitrary svg to define the glyph, which allows for great effects in supporting user agents.
...a" u2="v" k="20" /> referencing a font when you have put together your font declaration as described above, you can just use a simple font-family attribute to actually apply the font to some svg text: <font> <font-face font-family="super sans" /> <!-- and so on --> </font> <text font-family="super sans">my text uses super sans</text> however, you are free to combine several methods for great freedom of how and where to define the font.
... to reference remote (and not so remote) fonts: <font id="super_sans"> <!-- and so on --> </font> <style type="text/css"> @font-face { font-family: "super sans"; src: url(#super_sans); } </style> <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> « previousnext » ...

Communicating With Other Scripts - Archive of obsolete content
type="button" value="send a message"/> <script type="text/javascript" src="page-script.js"></script> </body> </html> the content script "content-script.js" adds an event listener to the button, that sends a custom event containing a message: var messenger = document.getelementbyid("message"); messenger.addeventlistener("click", sendcustomevent, false); function sendcustomevent() { var greeting = {"greeting" : "hello world"}; var event = document.createevent('customevent'); event.initcustomevent("addon-message", true, true, greeting); document.documentelement.dispatchevent(event); } finally, the page script "page-script.js" listens for the message and logs the greeting to the web console: window.addeventlistener("addon-message", function(event) { console.log(event.detail.
...greeting); }, false); after firefox 30: clone the message object this technique depends on being able to share the message payload between the content script scope and the page script scope.
... from firefox 30 this sharing requires an extra step: the content script needs to explicitly clone the message payload into the page script's scope using the global cloneinto() function: var messenger = document.getelementbyid("message"); messenger.addeventlistener("click", sendcustomevent, false); function sendcustomevent() { var greeting = {"greeting" : "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.

simple-storage - Archive of obsolete content
accessing storage from the console in the add-on debugger, you can access your add-on's simple-storage programmatically from the console using the following: loader.modules['resource://gre/modules/commonjs/sdk/simple-storage.js'].exports.storage clarification from mozilla needed: writing the above line in add-on debugger console results in "referenceerror: loader is not defined".
...if your add-on is using more than its quota, this value is greater than 1.0.
...a value greater than 1 indicates that the storage exceeds quota.

Creating Event Targets - Archive of obsolete content
then open "index.js" and add the following code: var {cc, ci} = require("chrome"); var { xpcomutils } = require("resource://gre/modules/xpcomutils.jsm"); var bookmarkservice = cc["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(ci.nsinavbookmarksservice); var bookmarkobserver = { onitemadded: function(aitemid, afolder, aindex) { console.log("added ", bookmarkservice.getbookmarkuri(aitemid).spec); }, onitemvisited: function(aitemid, avisitid, time) { console.log("visited ...
... create a new file in "lib" called "bookmarks.js", and add the following code: var { emit, on, once, off } = require("sdk/event/core"); var {cc, ci} = require("chrome"); var { xpcomutils }= require("resource://gre/modules/xpcomutils.jsm"); var bookmarkservice = cc["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(ci.nsinavbookmarksservice); var bookmarkobserver = { onitemadded: function(aitemid, afolder, aindex) { emit(exports, "added", bookmarkservice.getbookmarkuri(aitemid).spec); }, onitemvisited: function(aitemid, avisitid, time) { emit(exports, "visit...
... open "bookmarks.js" and replace its contents with this code: var { emit } = require("sdk/event/core"); var { eventtarget } = require("sdk/event/target"); var { class } = require("sdk/core/heritage"); var { merge } = require("sdk/util/object"); var {cc, ci} = require("chrome"); var { xpcomutils } = require("resource://gre/modules/xpcomutils.jsm"); var bookmarkservice = cc["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(ci.nsinavbookmarksservice); function createobserver(target) { var bookmarkobserver = { onitemadded: function(aitemid, afolder, aindex) { emit(target, "added", bookmarkservice.getbookmarkuri(aitemid).spec); }, onitemvisited: function(ait...

Miscellaneous - Archive of obsolete content
var osstring = services.appinfo.os; detecting the host application and version // get the name of the application running us services.appinfo.name; // returns "firefox" for firefox services.appinfo.version; // returns "2.0.0.1" for firefox version 2.0.0.1 retrieving the version of an extension as specified in the extension's install.rdf components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("extension-guid@example.org", function(addon) { // this is an asynchronous callback function that might not be called immediately alert("my extension's version is " + addon.version); }); restarting firefox/thunderbird/seamonkey_2.0 for firefox 3 see onwizardfinish around here: http://mxr.mozilla.org/seamonkey/sou...pdates.js#1639 for ...
...put this code in the components/certsservice.js file: const cc = components.classes; const ci = components.interfaces; components.utils.import("resource://gre/modules/xpcomutils.jsm"); const gobserver = cc['@mozilla.org/observer-service;1'].getservice(ci.nsiobserverservice); const gioservice = cc["@mozilla.org/network/io-service;1"].getservice(ci.nsiioservice); function certsservice() {} certsservice.prototype = { observe: function(asubject, atopic, adata) { switch(atopic) { case "app-startup": gobserver.addob...
... window.addeventlistener('fullscreen', function(){ alert('fullscreen mode on or off') }, false) getting addon install path first one using addon manager: components.utils.import('resource://gre/modules/addonmanager.jsm'); addonmanager.getaddonbyid('example@addon', function(addon) { let path = addon.getresourceuri().path; // something like /home/username/....

Custom about: URLs - Archive of obsolete content
const {classes: cc, interfaces: ci, manager: cm, results: cr, utils: cu, constructor: cc} = components; cm.queryinterface(ci.nsicomponentregistrar); components.utils.import("resource://gre/modules/services.jsm"); // globals const aboutpage_description = 'this is my custom about page'; const aboutpage_id = 'aa132730-2278-11e5-867f-0800200c9a66'; // make sure you generate a unique id from https://www.famkruithof.net/uuid/uuidgen const aboutpage_word = 'myaboutpage' const aboutpage_uri = 'data:text/html,hi this is the page that is shown when navigate to about:myaboutpage'; // const a...
...queryinterface() { return xpcomutils.generateqi([ci.nsiaboutmodule]); } constructor() { object.freeze(this); } geturiflags(auri) { return ci.nsiaboutmodule.allow_script; } newchannel(auri, asecurity_or_aloadinfo) { let channel; if (services.vc.compare(services.appinfo.version, '47.*') > 0) { const uri = services.io.newuri(aboutpage_uri, null, null); // greater than or equal to firefox48 so asecurity_or_aloadinfo is aloadinfo channel = services.io.newchannelfromuriwithloadinfo(uri, asecurity_or_aloadinfo); } else { channel = services.io.newchannel(aboutpage_uri, null, null); } channel.originaluri = auri; return channel; } } class factory { constructor(component) { this.component = component; this.register...
...(); object.freeze(this); } createinstance(outer, iid) { if (outer) { throw cr.ns_error_no_aggregation; } return new this.component(); } register() { cm.registerfactory(this.component.classid, this.component.classdescription, this.component.contractid, this); } unregister() { cm.unregisterfactory(this.component.prototype.classid, this); } } instantiation firefox 4+ now in the startup procedure of your bootstrapped addon make sure to do register the factory, for example: let factory; function startup(adata, areason) { // ...

Enhanced Extension Installation - Archive of obsolete content
in the profile directory, the file compatibility.ini stores information about the version of the application (build info) that last started this profile - during startup this file is checked and if the version info held by the running app disagrees with the info held by this file, a compatibility check is run on all installed items.
... the install operation finalization process loops continuously installing, upgrading and uninstalling items at progressively lower locations until the size of the pending operations list is finally zero.
...this allows for the removal of the installlogreader/writer objects in the extension manager.

Appendix: What you should know about open-source software licenses - Archive of obsolete content
when the user clicks “i agree,” the installation process finishes.
... because the oss license is intended to foster source-code reuse and mutual development, it avoids restrictions on source-code duplication, distribution, and modification to the greatest extent possible.
... gpl license declaration template if you develop a new program, and you want it to be of the greatest possible use to the public, the best way to achieve this is to make it free software that everyone can redistribute and change under these terms.

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
they can both take the values start (top or left), center, end (bottom or right), or stretch (extend this element to match the element with the greatest height or width).
...listing 21 shows an example of a thermometer-style progress bar, with its output shown in figure 17.
... <stack> <progressmeter mode="normal" value="50"/> <hbox align="center"> <label value="in progress…"/> </hbox> </stack> listing 21: overlapping with stack figure 17: progress bar tab use the tab element to divide multiple pages, as used in the properties dialog; use the tabbox element to group related elements.

Performance best practices in extensions - Archive of obsolete content
one of firefox's great advantages is its extreme extensibility.
...loading modules incurs a small cost, so breaking code up to an unnecessary degree can be counter-productive.
... performing sequential, asynchronous operations can often be greatly simplified using promises.

Security best practices in extensions - Archive of obsolete content
non-chrome urls in chrome xul or html such as the following example are not allowed: <script type="text/javascript" src="http://mysite.greatsite.com/js/wow-content.js" /> in general, scripts that are from remote sources that run in the chrome context are not acceptable, as many times the source of the script can never be 100% guaranteed, and they are vulnerable to man-in-the-middle attacks.
...the usefulness of it and power of how it works is best illustrated by the popular greasemonkey extension, which works on the premise of scripts being downloaded and stored locally, to be injected into the web content context via the sandbox.
... many extensions use the greasemonkey compiler to bundle it in their extension for convenience.

Search Extension Tutorial (Draft) - Archive of obsolete content
cu.import("resource://gre/modules/services.jsm"); // keep track of whether this is the first run.
...cu.import("resource://gre/modules/services.jsm"); // the details of the engine to add const engine_details = { name: "example engine", iconurl: "data:image/png;base64,...", alias: "example-engine", description: "an example search engine", method: "get", // the http request method url: "https://www.example.com/?q=_searchterms_" }; // keep track of whether this is the first run.
...cu.import("resource://gre/modules/services.jsm"); // these must be the same details as in your search.xml file.

CSS3 - Archive of obsolete content
though today no module with a level greater than 3 is standardized, this will change in the future.
... the next iteration of the selectors specification is already in progress, though it still hasn't reached the first public working draft stage.
... the css4 iteration of the backgrounds and borders specification is already in progress, though it still hasn't reached the first public working draft stage, it plans to add the ability to clip a border (with the css border-clip, border-clip-top, border-clip-right, border-clip-bottom, and border-clip-left properties) or to control the shape of the border in a corner (using the css border-corner-shape property).

MMgc - Archive of obsolete content
furthermore we can run this check even more frequently than every mark increment, for instance every time our gc memory allocators request a new block from our primary allocator (the way our extremely helpful greedy collection mode works).
...at the finest level of granularity everytime a a white object is written to a black object we push the white object onto the work queue (thus making it grey).
...the ideal solution will result in only one mark incremental per frame unless the mutator is allocating memory so fast we need to mark more aggressively to get to the sweep.

Dehydra Object Reference - Archive of obsolete content
.parameters array of variable objects a function definition's parameter names and types .memberof aggregate type object indicates the aggregate type(class/struct) in the type system that this variable is a member of.
...applicable when accessing member variables or nonstatic member functions of aggregate types, e.g.
... aggregate types (class/struct/union/enum) this type object represents aggregate types in gcc.

Download Manager improvements in Firefox 3 - Archive of obsolete content
firefox 3 offers improvements to the download manager that allow multiple progress listeners, use of the storage api for data management, download resuming, and more.
... download manager interfaces nsidownloadmanager gives applications and extensions access to the download manager, allowing them to add and remove files to the download list, retrieve information about past and present downloads, and request notifications as to the progress of downloads.
... nsidownloadprogresslistener applications and extensions implement this interface to be made aware of changes in the status of downloads.

Monitoring downloads - Archive of obsolete content
this is part of the nsidownloadprogresslistener interface.
...setattribute("style", "text-align:right"); row.appendchild(cell); var status = statement.getint32(5); var style = "color:black"; cell = document.createelement('listcell'); var statusstr; switch(status) { case 0: statusstr = "downloading"; break; case 1: statusstr = "complete"; style = "color:green"; break; case 2: statusstr = "failed"; style = "color:red"; break; case 3: statusstr = "canceled"; style = "color:purple"; break; case 4: statusstr = "paused"; style = "color:blue"; break; case 5: statusstr = "queued"; style = "c...
... see also storage, nsidownloadmanager, nsidownload, nsidownloadprogresslistener ...

LIR - Archive of obsolete content
48 not in use immediate 49 immi int immediate 50 immq 64 bit quad immediate 51 immd double immediate 52 not in use comparisons 53 eqi integer int equality 54 lti integer signed int less-than 55 gti integer signed int greater-than 56 lei integer signed int less-than-or-equal 57 gei integer signed int greater-than-or-equal 58 ltui integer unsigned int less-than 59 gtui integer unsigned int greater-than 60 leui integer unsigned int less-than-or-equal 61 geui integer unsigned int greater-than-or-equal 62 not in use ...
... 63 eqq integer 64 bit quad equality 64 ltq integer 64 bit signed quad less-than 65 gtq integer 64 bit signed quad greater-than 66 leq integer 64 bit signed quad less-than-or-equal 67 geq integer 64 bit signed quad greater-than-or-equal 68 ltuq integer 64 bit unsigned quad less-than 69 gtuq integer 64 bit unsigned quad greater-than 70 leuq integer 64 bit unsigned quad less-than-or-equal 71 geuq integer 64 bit unsigned quad greater-than-or-equal 72 not in use arithmetic 73 eqd integer double equality 74 ltd integer double less-than 75 gtd integer double greater-than 76 led integer double less-than-or-equal 77 ...
... ged integer double greater-than-or-equal 78 negi integer negate int 79 addi integer add int 80 subi integer subtract int 81 muli integer multiply int 82 divi integer i386/64 divide int 83 modi integer modulo int - lir_modi is a hack.

Priority Content - Archive of obsolete content
book length works in progress: netscape gecko plugin api reference 1.0 original: netscape gecko plugin api reference 1.0 wiki location: gecko plugin api reference migrators: started: core javascript reference 1.5 original: core javascript reference 1.5 wiki location: core javascript 1.5 reference migrators: deb richardson in progress: transforming xml: netscape and xslt 1.0 original: transforming xml: netscape ...
...keller in progress: rapid application development with mozilla original: author's page and planned host, ben's temporary host wiki location: toc and links page still under construction.
...rted: scripting plugins: macromedia flash original: scripting plugins: macromedia flash wiki location: scripting plugins: macromedia flash migrators: dependant on (these parts need to be done, put your name down) completed: soap in netscape gecko-based browsers original: soap in netscape gecko-based browsers wiki location: soap in gecko-based browsers migrators: doron rosenberg in progress: css support charts original: css support charts and archive.org mirror wiki location: css support charts migrators: serge k.

RDF Datasource How-To - Archive of obsolete content
aggregate the in-memory datasource.
... this is an extreme case of delegation, where you use xpcom aggregation to implement the nsirdfdatasource interface.
... see aggregating the in-memory datasource for technical details.

Supporting per-window private browsing - Archive of obsolete content
detecting private browsing mode determining whether or not a given dom window is private is simple: import resource://gre/modules/privatebrowsingutils.jsm and use privatebrowsingutils.iswindowprivate(window).
... try { // firefox 20+ components.utils.import("resource://gre/modules/privatebrowsingutils.jsm"); if (!privatebrowsingutils.iswindowprivate(window)) { ...
...to do this, import resource://gre/modules/privatebrowsingutils.jsm and use privatebrowsingutils.getprivacycontextfromwindow(win), passing a window object that is related to the content in question.

Tamarin build documentation - Archive of obsolete content
there is also an aggregate target that will build both targets.
... note that, whereas before when you selected the aggregate target you got a 'shell' 32-bit executable and a 'shell64' 64-bit executable in the same folder, now because of the fix to bug 478714 you will get an 'avm' executable in two separate folders, /debug and /debug64 respectively.
... tryserver etiquette the sandbox is not a good substitute for running the regression tests locally to catch obvious problems.

Creating XPI Installer Modules - Archive of obsolete content
jar is a file format based on the zip file format and is used for aggregating multiple files into a single file.
...though the chrome directory still includes subdirectories of uncompressed files by default, a new way to aggregate and distribute the files has improved performance, made the ui components more portable and easier to install, and made the installation process a much easier one.
...barley/ content/ barley.gif barley.js barley.xul creating the contents.rdf file one of the most important ingredients of the software package is the contents.rdf file that describes the contents of the package in terms that the chrome registry can make sense of.

treecell.mode - Archive of obsolete content
« xul reference home mode type: one of the values below for columns that are progress meters, this determines the type of progress meter to use.
... none no progress meter is displayed.
... undetermined the progressmeter is indeterminate.

Introduction to XUL - Archive of obsolete content
ui descriptions, then, look a great deal like html 4.
...that's been done, and is a great deal of work.
...a single xul specification can only cross-platform to a degree.

The Joy of XUL - Archive of obsolete content
this degree of separation results in applications that are easier to maintain by programmers and readily customized by designers and language translators.
... by using xbl, developers can easily build custom user interface widgets such as progress meters, fancy pop-up menus, and even toolbars and search forms.
...to improve performance a greater proportion of application logic was migrated from javascript to the xpcom component.

Adding Style Sheets - Archive of obsolete content
<spacer class="titlespace"/> <hbox> <progressmeter id="progmeter" value="50%" style="display:none;"/> the new xml-stylesheet line is used to import the style sheet.
...one that wasn't was the display property on the progressmeter.
... this will be changed by a script so it was left in, as it doesn't really make sense to have the progress bar visible initially.

Additional Install Features - Archive of obsolete content
the following code will make a copy of the file "/bin/grep" and put it in the directory "/main".
... var binfolder = getfolder("file:///","bin"); var grep = getfolder(binfolder, "grep"); var mainfolder = getfolder("file:///", "main"); file.copy(grep, mainfolder); the first line will retrieve a reference to the /bin directory.
... from there, we get the file 'grep' which is contained inside the 'bin' directory.

XUL Questions and Answers - Archive of obsolete content
what is an example of addprogresslistener?
... an example of this is this: // associate the progress listener for a "browser" to a listener object browserobject.addprogresslistener( listobj, components.interfaces.nsiwebprogress.notify_state_window ); // remember to define the object, something like this: listobj = new object(); listobj.wpl = components.interfaces.nsiwebprogresslistener; listobj.queryinterface = function(aiid) { if (aiid.equals(listobj.wpl) || aiid.equals(components.interfaces.nsisupportsweakreference) || aiid.equals(components.interfaces.nsisupports)) return this; throw components.results.ns_nointerface; } listobj.onstatechange = function(aprogress, arequest, aflag, astatus) { if (aflag & listobj.wpl.state_start) { // this fires when the load event is initiated } else { if (a...
... if ( aflag & listobj.wpl.state_is_network ) { // fires when all load are really over, // do something "final" here // (my two cents) } else { // this fires when a load finishes } } } return 0; } // this fires when the location bar changes i.e load event is confirmed // or when the user switches tabs listobj.onlocationchange = function(aprogress, arequest, auri) { // do whatever you want to do return 0; } // for definitions of the remaining functions see xulplanet.com listobj.onprogresschange = function() { return 0 }; listobj.onstatuschange = function() { return 0 }; listobj.onsecuritychange = function() { return 0 }; listobj.onlinkiconavailable = function() { return 0 }; /* i use the progress listener to trap the end of a local...

XUL controls - Archive of obsolete content
menulist reference related elements: menupopup menuitem <progressmeter> a progress meter is used to display the progress of a lengthy task.
... <progressmeter value="40"/> more information about the progressmeter element.
... progressmeter reference <radio> a radio button is used when only one of a set of options may be selected at a time.

treecell - Archive of obsolete content
mode type: one of the values below for columns that are progress meters, this determines the type of progress meter to use.
... none no progress meter is displayed.
... undetermined the progressmeter is indeterminate.

XULRunner tips - Archive of obsolete content
work in progress.
...the following prefs must also be set to make the xpinstall dialog, extension manager, and theme manager work: pref("xpinstall.dialog.confirm", "chrome://mozapps/content/xpinstall/xpinstallconfirm.xul"); pref("xpinstall.dialog.progress.skin", "chrome://mozapps/content/extensions/extensions.xul?type=themes"); pref("xpinstall.dialog.progress.chrome", "chrome://mozapps/content/extensions/extensions.xul?type=extensions"); pref("xpinstall.dialog.progress.type.skin", "extension:manager-themes"); pref("xpinstall.dialog.progress.type.chrome", "extension:manager-extensions"); pref("extensions.update.enabled", true); pref("extensions.u...
...when using xulrunner 1.9 or greater, you can create your own alias in your chrome manifest add a "skin" line: skin communicator classic/1.0 skin/communicator/ add a skin folder named "communicator" and add a single css file named "communicator.css" with this content: @import url("chrome://global/skin"); dom inspector to add dom inspector 2.0.* to your xulrunner 1.9.0.* application follow these s...

Gecko Compatibility Handbook - Archive of obsolete content
while they support the css 1 standard to some degree, the implementations are not complete and have non-standard features added.
...as time progresses and the older browsers drop in market share, web page authors can transition to standards-based layout by using the appropriate doctype.
... the toolbox aggregates several invaluable w3c tools for diagnosing web page problems as well as validators, code samples, and more.

Mozilla release FAQ - Archive of obsolete content
this isn't quite so far fetched, but it has the problem of possibly doing a great deal of harm to the relations between netscape and several unix vendors who bundle netscape's servers.
...also, progressive display of the webpage would be completely gone with this idea.
...both are great ways to meet others working on mozilla, including lots of netscape employees as well as other interested people (like myself).

Mozilla.dev.apps.firefox-2006-10-06 - Archive of obsolete content
a wiki and irc channel have been created to track their progress.
... engineering student project - industry coach paul betts from ohio state university is looking for someone from mozilla to be his "industry coach" for engineering 494 - how great ideas turn into great products.
... mozilla is a great product afterall.

2006-10-06 - Archive of obsolete content
a wiki and irc channel have been created to track their progress.
... engineering student project - industry coach paul betts from ohio state university is looking for someone from mozilla to be his "industry coach" for engineering 494 - how great ideas turn into great products.
... mozilla is a great product afterall.

2006-10-06 - Archive of obsolete content
adam gutherie replied that cbeard's blog post from nov 2005 is as close to a roadmap as exists right now and agrees that needs to be done about this.
...ziga sancin replies with a link and regrets about it being a bit out of date.
...beltzner says that (as per bon echo status meeting) that rc2 is going to be re-spun to fix some final bugs that were regressed and patches that were just landed.

Adobe Flash - Archive of obsolete content
determine if the flash version is greater than 6r.49 // 3.
...if the browser is a mach-o browser, determine whether the version of the plugin // is greater than 12, a hypothetical version when flash will fix the plugin to be // scriptable on mach-o browsers also var flashversionosxscriptable = 12; if(navigator.useragent.indexof("mach-o")!=-1) { if(flashversion < flashversionosxscriptable) // flash version is less than version 12, thus not scriptable on os x } // 6.
... accessing flash from javascript the simple example below shows how input into an html text box in a form field can be transferred to a flash animation (the grey text box below).

Why use RSS - Archive of obsolete content
there are too many desktop and web-based rss aggregators out there to list them all.
... rss aggregators are everywhere one reason to use rss to syndicate is because there are an enormous amount of desktop and web-based rss aggregators out there.
... (too many to list.) and if you syndicate using rss, then all those desktop and web-based rss aggregators will be able to make use of and read your rss feed.

-ms-scrollbar-arrow-color - Archive of obsolete content
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples the following example shows how to use -ms-scrollbar-arrow-color and -ms-scrollbar-face-color to display a scroll bar with a blue scroll box and arrows, and a scroll bar with a green scroll box and arrows.
... div { width: 150px; height: 150px; overflow-y: scroll; border-style: solid; border-width: thin; font-family: sans-serif; float: left; margin-right: 10px; } .bluescrollbox { scrollbar-face-color: blue; scrollbar-arrow-color: blue; } .greenscrollbox { scrollbar-face-color: green; scrollbar-arrow-color: green; } <body> <div class="bluescrollbox"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
... </div> <div class="greenscrollbox"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

-ms-scrollbar-face-color - Archive of obsolete content
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples this example uses -ms-scrollbar-face-color and -ms-scrollbar-arrow-color to display a scroll bar with a blue scroll box and arrows, and a scroll bar with a green scroll box and arrows.
... div { width: 150px; height: 150px; overflow-y: scroll; border-style: solid; border-width: thin; font-family: sans-serif; float: left; margin-right: 10px; } .bluescrollbox { scrollbar-face-color: blue; scrollbar-arrow-color: blue; } .greenscrollbox { scrollbar-face-color: green; scrollbar-arrow-color: green; } <body> <div class="bluescrollbox"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
... </div> <div class="greenscrollbox"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

::-ms-check - Archive of obsolete content
ce font-size font-style font-weight height margin-bottom margin-left margin-right margin-top opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-check example html <form> <label for="redbutton">red</label> <input type="radio" id="redbutton"><br> <label for="greencheckbox">green</label> <input type="checkbox" id="greencheckbox"> </form> css input, label { display: inline; } input[type=radio]::-ms-check { border-color: red; /* this will make the border red when the button is checked.
...*/ } input[type=checkbox]::-ms-check { border-color: green; /* this will make the box green when the button is checked.
... */ color: green; /* this will make the checkmark green when the button is checked.

CSS - Archive of obsolete content
it only works on mac os x.-ms-acceleratorthe -ms-accelerator css property is a microsoft extension that sets or retrieves a string indicating whether the object represents a keyboard shortcut.-ms-block-progressionthe -ms-block-progression css property is a microsoft extension that specifies the block progression and layout orientation.-ms-content-zoom-chainingthe -ms-content-zoom-chaining css property is a microsoft extension specifying the zoom behavior that occurs when a user hits the zoom limit during page manipulation.-ms-content-zoom-limitthe -ms-content-zoom-limit css shorthand property is a mic...
...typically it is a triangle that points downward.::-ms-fillthe ::-ms-fill css pseudo-element is a microsoft extension that represents a progress bar displayed by <progress>.::-ms-fill-lowerthe ::-ms-fill-lower css pseudo-element represents the lower portion of the track of a slider control; that is, the portion corresponding to values less than the value currently selected by the thumb.
... a slider control is one possible representation of <input type="range">.::-ms-fill-upperthe ::-ms-fill-upper css pseudo-element is a microsoft extension that represents the upper portion of the track of a slider control; that is, the portion corresponding to values greater than the value currently selected by the thumb.

XForms Custom Controls - Archive of obsolete content
implementation status the framework we use in the mozilla xforms processor is very much a "work in progress".
... please keep in mind that just about everything we mention here may change to some degree as we continue to work on it.
...so you can always refer to our source code to get some great examples of how xforms controls can be written.

RDF in Mozilla FAQ - Archive of obsolete content
for this reason, there is an observer interface that allows you to spy on a datasource's progress.
... the following code illustrates its usage: // this is the object that will observe the rdf/xml load's progress var observer = { onbeginload: function(asink) {}, oninterrupt: function(asink) {}, onresume: function(asink) {}, onendload: function(asink) { asink.removexmlsinkobserver(this); alert("done!"); }, onerror: function(asink, astatus, aerrormsg) { alert("error!
... { alert("the datasource was already loaded!"); } else { alert("the datasource wasn't loaded, but it's loading now!"); // rdf/xml datasources are all nsirdfxmlsinks var sink = ds.queryinterface(components.interfaces.nsirdfxmlsink); // attach the observer to the datasource-as-sink sink.addxmlsinkobserver(observer); // now observer's methods will be called-back as // the load progresses.

Game distribution - Game development
you've followed a tutorial or two and created an html5 game — that's great!
...you can put your html5 games into the same arena (see native desktop, later on) and you should because it's good to diversify the platforms you support, but you have to remember that developers creating desktop games have years of experience, great tools and stable distribution channels.
...native stores are already filled with established devs selling great games, so you have to be talented and lucky to get noticed.

Efficient animation for web games - Game development
though javascript animations can be easier to express at times, unless you have a great need to synchronise ui animation state with game animation state, you’re unlikely to be able to do a better job than the browser.
...you may have a callback that ends up looking something like this: var starttime = -1; var animationlength = 2000; // animation length in milliseconds function doanimation(timestamp) { // calculate animation progress var progress = 0; if (starttime < 0) { starttime = timestamp; } else { progress = timestamp - starttime; } // do animation ...
... if (progress < animationlength) { requestanimationframe(doanimation); } } // start animation requestanimationframe(doanimation); you will note that we set starttime to -1 at the beginning, when we could just as easily have set the time using the date() object and avoided the extra code in the animation callback.

Tools for game development - Game development
asm.js asm.js is a very limited subset of the javascript language, which can be greatly optimized and run in an ahead-of-time (aot) compiling engine for much faster performance than your typical javascript performance.
... this is, of course, great for games.
...this is a great tool for porting applications to the web!

Global object - MDN Web Docs Glossary: Definitions of Web-related terms
explanation: the global variable foo was stored in the window object, like this: foo: "foobar" access global functions function greeting() { console.log("hi!"); } window.greeting(); // it is the same as the normal invoking: greeting(); the example above explains how global functions are stored as properties in the window object.
... we created a global function called greeting, then invoked it using the window object.
... explanation: the global function greeting was stored in the window object, like this: greeting: function greeting() { console.log("hi!"); } ...

HTML: A good basis for accessibility - Learn web development
previous 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.
...for example, a control button to play a video on your site could be marked up like this: <div>play video</div> but as you'll see in greater detail later on, it makes sense to use the correct element for the job: <button>play video</button> not only do html <button>s have some suitable styling applied by default (which you will probably want to override), they also have built-in keyboard accessibility — users can navigate between buttons using the tab key and activate their selection using return or enter.
...if you try navigating through this, you'll see that this is pretty easy to navigate: the screen reader reads each header out as you progress through the content, notifying you what a heading is, what is a paragraph, etc.

HTML: A good basis for accessibility - Learn web development
previous 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.
...for example, a control button to play a video on your site could be marked up like this: <div>play video</div> but as you'll see in greater detail later on, it makes sense to use the correct element for the job: <button>play video</button> not only do html <button>s have some suitable styling applied by default (which you will probably want to override), they also have built-in keyboard accessibility — users can navigate between buttons using the tab key and activate their selection using return or enter.
...if you try navigating through this, you'll see that this is pretty easy to navigate: the screen reader reads each header out as you progress through the content, notifying you what a heading is, what is a paragraph, etc.

Organizing your CSS - Learn web development
you will thank yourself when you come back to this project in a year or so, and can vaguely remember there was a great tutorial about that thing, but where is it?
... .comment { display: grid; grid-template-columns: 1fr 3fr; } .comment img { border: 1px solid grey; } .comment .content { font-size: .8rem; } .list-item { display: grid; grid-template-columns: 1fr 3fr; border-bottom: 1px solid grey; } .list-item .content { font-size: .8rem; } in oocss, you would create one pattern called media that would have all of the common css for both patterns — a base class for things that are generally the shape of the media object.
... .media { display: grid; grid-template-columns: 1fr 3fr; } .media .content { font-size: .8rem; } .comment img { border: 1px solid grey; } .list-item { border-bottom: 1px solid grey; } in your html the comment would need both the media and comment classes applied: <div class="media comment"> <img /> <div class="content"></div> </div> the list-item would have media and list-item applied: <ul> <li class="media list-item"> <img /> <div class="content"></div> </li> </ul> the work that nicole sullivan did in describing this approach and promoting it means that even people who are not strictly following an oocss approach today will generally be reu...

HTML forms in legacy browsers - Learn web development
the webkit blog and planet webkit aggregate the best articles by webkit core developers.
... graceful degradation is web developer's best friend graceful degradation and progressive enhancement are development patterns that allow you to build great stuff by supporting a wide range of browsers at the same time.
... complete : function () { app.init(); } }); the modernizr team conveniently maintains a list of great polyfills.

Styling web forms - Learn web development
this has historically been difficult — form controls vary greatly in how easy they are to customize with css — but it is getting easier as old browsers are retired and modern browsers give us more features to use.
... <progress> and <meter> again, we'll describe what can be done in terms of styling these elements in advanced form styling.
...simply put, we remove their borders and backgrounds, and redefine their padding and margin: input, textarea { font : 1.4em/1.5em "handwriting", cursive, sans-serif; border : none; padding : 0 10px; margin : 0; width : 80%; background : none; } when one of these fields gains focus, we highlight them with a light grey, transparent, background (it is always important to have focus style, for usability and keyboard accessibility): input:focus, textarea:focus { background : rgba(0,0,0,.1); border-radius: 5px; } now that our text fields are complete, we need to adjust the display of the single and multiple line text fields to match, since they won't typically look the same using the defaults.

JavaScript basics - Learn web development
you may have to start small, and progress gradually.
...if values couldn't change, then you couldn't do anything dynamic, like personalize a greeting message or change an image displayed in an image gallery.
...this takes references to the new button and the heading, storing each inside variables: let mybutton = document.queryselector('button'); let myheading = document.queryselector('h1'); add the function below to set the personalized greeting.

What’s in the head? Metadata in HTML - Learn web development
it will look something like this (although it may change over time): <meta name="description" content="the mdn web docs site provides information about open web technologies including html, css, and apis for both web sites and progressive web apps."> now search for "mdn web docs" in your favorite search engine (we used google.) you'll notice the description <meta> and <title> element content used in the search result — definitely worth having!
... don't worry too much about implementing all these types of icon right now — this is a fairly advanced feature, and you won't be expected to have knowledge of this to progress through the course.
... the css has caused the background to go green, and the text to become bigger.

Making asynchronous programming easier with async and await - Learn web development
here is a trivial example: async function hello() { return greeting = await promise.resolve("hello"); }; hello().then(alert); of course, the above example is not very useful, although it does serve to illustrate the syntax.
...take a look at the es class code we saw in our object-oriented javascript article, and then look at our modified version with an async method: class person { constructor(first, last, age, gender, interests) { this.name = { first, last }; this.age = age; this.gender = gender; this.interests = interests; } async greeting() { return await promise.resolve(`hi!
...bye for now!`); }; } let han = new person('han', 'solo', 25, 'male', ['smuggling']); the first class method could now be used something like this: han.greeting().then(console.log); browser support one consideration when deciding whether to use async/await is support for older browsers.

Functions — reusable blocks of code - Learn web development
you can also assign an anonymous function to be the value of a variable, for example: const mygreeting = function() { alert('hello'); } this function could now be invoked using: mygreeting(); this effectively gives the function a name; you can also assign the function to be the value of multiple variables, for example: let anothergreeting = mygreeting; this function could now be invoked using either of: mygreeting(); anothergreeting(); but this would just be confusing, so don't do it...
...when creating functions, it is better to just stick to this form: function mygreeting() { alert('hello'); } you will mainly use anonymous functions to just run a load of code in response to an event firing — like a button being clicked — using an event handler.
... for example, say you have an html file that is calling in two external javascript files, and both of them have a variable and a function defined that use the same name: <!-- excerpt from my html --> <script src="first.js"></script> <script src="second.js"></script> <script> greeting(); </script> // first.js let name = 'chris'; function greeting() { alert('hello ' + name + ': welcome to our company.'); } // second.js let name = 'zaptec'; function greeting() { alert('our company is called ' + name + '.'); } both functions you want to call are called greeting(), but you can only ever access the first.js file's greeting() function (the second one is ignored).

Server-side web frameworks - Learn web development
exact, case-insensitive, greater than, etc.), and can support complex statements (for example, you can specify a search on u11 teams that have a team name that starts with "fr" or ends with "al").
...by contrast, flask is a much lighter-weight framework and is great for creating web apps running on embedded devices.
...there are many other great server-side frameworks that you can discover using a basic internet search.

Introduction to client-side frameworks - Learn web development
users write papers, manage their budgets, stream music, watch movies, and communicate with others over great distances instantaneously, with text, audio or video chat.
...this abstraction is great for your experience as a developer, but it isn't free.
...this rfc serves as a great example of the kind of research you should do for yourself when planning to use a front-end framework.

TypeScript support in Svelte - Learn web development
so typescript is going through a great phase of adoption.
...you can now start adding types progressively.
... there is work in progress to support typescript in svelte projects in several code editors; the most complete support so far is available in the svelte for vs code extension, which is developed and maintained by the svelte team.

Deployment and next steps - Learn web development
after creating a new repo gitlab will greet you with a message explaining different options to upload your existing files.
... you can also check the progress of the current and previous jobs from the ci / cd > jobs menu option of your gitlab project.
... nevertheless, svelte.js — the complete guide by academind is a very popular option with great ratings.

Handling common HTML and CSS problems - Learn web development
after the packages have finished installing, try loading up an html file and a css file: you'll see any issues highlighted with green (for warnings) and red (for errors) circles next to the line numbers, and a separate panel at the bottom provides line numbers, error messages, and sometimes suggested values or other fixes.
... note: of course, this may not be a great solution for your project's needs — the difference in visual presentation is not great, plus it is harder to guarantee the data will be entered in the format you want it in.
...so for example: mozilla uses -moz- chrome/opera/safari use -webkit- microsoft uses -ms- here's some examples: -webkit-transform: rotate(90deg); background-image: -moz-linear-gradient(left,green,yellow); background-image: -webkit-gradient(linear,left center,right center,from(green),to(yellow)); background-image: linear-gradient(to right,green,yellow); the first line shows a transform property with a -webkit- prefix — this was needed to make transforms work in chrome, etc.

Handling common JavaScript problems - Learn web development
ouble with javascript historically, javascript was plagued with cross-browser compatibility problems — back in the 1990s, the main browser choices back then (internet explorer and netscape) had scripting implemented in different language flavours (netscape had javascript, ie had jscript and also offered vbscript as an option), and while at least javascript and jscript were compatible to some degree (both based on the ecmascript specification), things were often implemented in conflicting, incompatible ways, causing developers many nightmares.
... after the packages have finished installing, try loading up a javascript file: you'll see any issues highlighted with green (for warnings) and red (for errors) circles next to the line numbers, and a separate panel at the bottom provides line numbers, error messages, and sometimes suggested values or other fixes.
... for example: promises are a great new feature for performing asynchronous operations and making sure those operations are complete before code that relies on their results is used for something else.

Introducing a complete toolchain - Learn web development
it offers a way to "commit" blocks of work as you progress, along with comments such as "x new feature implemented", or "bug z now fixed due to y changes".
...if you're interested in using hooks, husky is a greatly simplified route into using hooks.
...it's a key ingredient of a good toolchain and one that many development projects will include by default.

Chrome Worker Modules
you only need to do it once for each worker, from within the chrome worker itself: importscripts("resource://gre/modules/workers/require.js"); note: although you only need to do this once for each worker, it doesn't hurt if you do it more than once.
... this defines a global value require(), that you may now use as follows: // import the module // (here, we import the core of os.file) let core = require("resource://gre/modules/osfile/osfile_shared_allthreads.jsm"); // we may now use module core.
...ports.key = publickey; // secretkey is not exported // publickey is exported with name "key" alternatively, if you prefer that style, you may write // variable |module| is a special global introduced by require() module.exports = { key: publickey }; once this is done, we may load the module and use the values that have been exported // assuming that mymodule.js is installed to resource://gre/modules/mymodule.js let module = require("resource://gre/modules/mymodule.js") foo(module.key); // module.key == "this is public"; // however, secretkey is not exported and cannot be used for the installation of resources, please see the documentation on moz.build (if your code is part of the platform) or on chrome manifests (if your code is part of an add-on).

Mozilla accessibility architecture
in the past, this was accomplished through aggregation -- two separate trees of objects were kept, one in accessible/src and one in widget/src.
...we cannot assume that all of the accessible children will come from the direct children, grandchildren or even great-great-great-children of the current accessible's node.
... event_menuend nsdocaccessible::scrollpositiondidchange(), then nsdocaccessible::scrolltimercallback() nsiscrollpositonlistener and nsitimer callbacks event_scrollingend (quick timer is used to determine when scrolling pauses or stops, to avoid extra events being fired) nsdocaccessible::onstatechange(), :nsdocaccessible:onlocationchange() nsiwebprogresslistener callback event_state_change (msaa) event_reorder (atk) dom mutation events - multiple uses dom mutation events are a great thing.

Continuous Integration
the sheriffs' role is to "keep the tree green", or in other words, to keep the code in our respositories in a good state, to the extent that the state is reflected in the output shown on treeherder.
... each taskcluster job is represented by a colored label; green means a job has succeeded, while other colors represent different kinds of problems.
... the talos indicators in treeherder appear green if the job successfully completed; to see the performance data generated by the jobs, click on the performance tab of the job details panel that pops up when you click on a job in treeherder.

Creating a spell check dictionary add-on
the em:version should follow the rules of mozilla add-on version numbers, and if you update an existing dictionary add-on, the new version number must be greater than the old one.
...the em:minversion should therefore be the same as in the example above (or greater).
... update the em:maxversion to the greatest versions available.

Debugging JavaScript
you can also start the browser console when you launch firefox, by launching firefox from the command line and passing --jsconsole as a flag: /path/to/firefox --jsconsole log to the browser console using the standard console api after importing console.jsm: let console = (cu.import("resource://gre/modules/console.jsm", {})).console; console.log("hello from firefox code"); error console this is obsolete and is no longer enabled in firefox by default.
... console.log in browser console you can dump variables in the browser console from addon code, by adding this line to import the console utility: const { console } = components.utils.import("resource://gre/modules/devtools/console.jsm", {}); this has an advantage over dump in that you can list out properties of an object logged with console.log.
... components.utils.import("resource://gre/modules/log.jsm"); "debugger" keyword you can halt venkman or chromebug at a line using the keyword debugger.

Eclipse CDT
eclipse is open source, of course so if anyone feels like doing a bit of java hacking to fix these issues that'd be great.
...it would be great if the console tab gave you a shell prompt so that you could invoke commands to build directly from there.
...tick this (all of its sub-options should then be ticked), click "next" twice, accept the license agreement, and then click "finish".

Experimental features in Firefox
the specification is still a work-in-progress.
... see bug 1602129 for our progress on this api.
...see bug 1622409 for implementation progress.

Limitations of chrome scripts
nsiwebprogresslistener this api will work in the chrome process.
... there is a shim that gives you access to the domwindow property of the nsiwebprogress object passed into onstatechange.
... alternatively, you can use nsiwebprogresslistener in the content process.

Code Samples
components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("yourextensionid", function(addon) { var addonlocation = addon.getresourceuri("").queryinterface(components.interfaces.nsifileurl).file.path; }); accessing file and version information components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("my-addon@foo.com", function(addon) { alert("my extension's version is " + addon.version); alert("did i remember to include that file.txt file in my xpi?
..."yes!" : "no"); alert("let's pretend i did, it's available from the url " + addon.getresourceuri("file.txt").spec); }); uninstall an add-on components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("youraddon@youraddon.com", function(addon) { addon.uninstall(); }); disable an add-on components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("youraddon@youraddon.com", function(addon) { if (addon.isactive) addon.userdisabled = addon.isactive; }); listening for add-on uninstall this example sets a variable beinguninstalled that you can check when you get a profile-before-change message to do cleanup for your add-on on uninstall.
...einguninstalled; let listener = { onuninstalling: function(addon) { if (addon.id == "youraddon@youraddon.com") { beinguninstalled = true; } }, onoperationcancelled: function(addon) { if (addon.id == "youraddon@youraddon.com") { beinguninstalled = (addon.pendingoperations & addonmanager.pending_uninstall) != 0; } } } try { components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.addaddonlistener(listener); } catch (ex) {} ...

Add-on Manager
for example: components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getalladdons(function(aaddons) { // here aaddons is an array of addon objects }); // this code will execute before the code inside the callback notifications about changes to installed add-ons are dispatched to any registered addonlisteners.
...these will pass an addoninstall instance to the callback, which can then be used to install the add-on: components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getinstallforurl("http://www.foo.com/test.xpi", function(ainstall) { // ainstall is an instance of addoninstall ainstall.install(); }, "application/x-xpinstall"); the progress of addoninstalls can be monitored using an installlistener.
... for example, to take a look at the add-ons that were disabled at startup: components.utils.import("resource://gre/modules/addonmanager.jsm"); let addonids = addonmanager.getstartupchanges(addonmanager.startup_change_disabled); if (addonids.length > 0) { // addonids is now an array of the add-on ids that have been disabled alert("note: " + addonids.length + " add-ons have been disabled."); } open add-on manager tab the add-on manager tab can be opened programatically with the function browseropenaddonsm...

Using JavaScript code modules
there are multiple pre-defined aliases set up by the xul runtime: app - alias to the location of the xul application gre - alias to the location of the xul runtime the <relative-path> can be multiple levels deep and is always relative to the location defined by the <alias>.
...for example: // import services.jsm unless in a scope where it's already been imported components.utils.import("resource://gre/modules/services.jsm"); var resprot = services.io.getprotocolhandler("resource") .queryinterface(components.interfaces.nsiresprotocolhandler); var aliasfile = components.classes["@mozilla.org/file/local;1"] .createinstance(components.interfaces.nsilocalfile); aliasfile.initwithpath("/some/absolute/path"); var aliasuri = services.io.newfileuri(ali...
...just call the following: const { require } = cu.import("resource://gre/modules/commonjs/toolkit/require.js", {}) this will import require() into your scope.

Webapps.jsm
importing components.utils.import("resource://gre/modules/webapps.jsm"); // exported symbol is domapplicationregistry method overview init: function() loadcurrentregistry: function() notifyappsregistrystart: function notifyappsregistrystart() notifyappsregistryready: function notifyappsregistryready() sanitizeredirects: function sanitizeredirects(asource) _savewidgetsfullpath: function(amanifest, adestapp) appkind: function(aapp, amanifest) updatepermissionsforapp: function(aid, aispreinstalled) updateofflinecacheforapp: function(aid) installpreinstalledapp: function installpreinstalledapp(aid) removeifhttpsduplicate: function(aid) installsystemapps: funct...
...d) _writemanifestfile: function(aid, aispackage, ajsonmanifest) _nextlocalid: function() _appidformanifesturl: function(auri) makeappid: function() _saveapps: function() _readmanifests: function(adata) _ensuresufficientstorage: function(anewapp) _checkdownloadsize: function(afreebytes, anewapp) _getrequestchannel: function(afullpackagepath, aislocalfileinstall, aoldapp,) _senddownloadprogressevent: function(anewapp, aprogress) _getpackage: function(arequestchannel, aid, aoldapp, anewapp) _computefilehash: function(afilepath) _sendappliedevent: function(aapp) _openandreadpackage: function(azipfile, aoldapp, anewapp, aislocalfileinstall,) _openpackage: function(azipfile, aapp, aislocalfileinstall) _opensignedpackage: function(ainstallorigin, amanifesturl, azipfile, acertdb) _re...
... function(alocalid) getapplocalidbymanifesturl: function(amanifesturl) getcoreappsbasepath: function() getwebappsbasepath: function() _islaunchable: function(aapp) _notifycategoryandobservers: function(subject, topic, data, msg) registerbrowserelementparentforapp: function(amsg, amn) receiveappmessage: function(appid, message) _clearprivatedata: function(appid, browseronly, msg) _sendprogressevent: function() updatestatechanged: function appobs_update(aupdate, astate) applicationcacheavailable: function appobs_cacheavail(aapplicationcache) ...

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 previously.
...for example, if an extension named "myextension" bundles foo.jsm and bar.jsm, and foo.jsm needs to load bar.jsm, it can do so like this: components.utils.import("resource://gre/modules/xpcomutils.jsm"); xpcomutils.importrelative(this, "bar.jsm"); in other words: importrelative will only work from other code modules (such as jsm files).
... examples definelazygetter var myservices = {}; cu.import('resource://gre/modules/xpcomutils.jsm'); //set it up xpcomutils.definelazygetter(myservices, 'as', function () { return cc['@mozilla.org/alerts-service;1'].getservice(ci.nsialertsservice) }); //when you need to use it myservices.as.showalertnotification('chrome://branding/content/icon64.png', 'this was lazyloaded', 'this is a notification from myservices.as', null, null); ...

Application Translation with Mercurial
progress tracking tool to track which strings and files already have been translated and later also to see which new strings have already been tested in the product as being a good translation for the functionality behind the translated strings and that the translated texts fit into the available, the translation progress should be tracked.
... paste the following content into the file: [ui] username = firstname lastname <mynick@example.com> merge = internal:merge [alias] qexport = export -g -r qtip qexportall = diff -r qparent [defaults] commit = -v diff = -p -u 8 qdiff = -p -u 8 qnew = -u [diff] git = 1 showfunc = 1 unified = 8 [extensions] hgext.mq = progress = [hooks] put in your name and email address which later will be public on the internet after your translation patch got accepted and uploaded.
... tracking the translation progress if you translate more than a few strings, you usually want to keep track of what has already been translated (and later if the text has been tested in the product as fitting into the available area and suiting the functionality it describes).

Mozilla DOM Hacking Guide
mozilla gives you the opportunity not only to use very powerful and complete dom support, but also to work on a world-class implementation of one of the greatest internet technologies ever created.
...if you can contribute any time or knowledge to this document, it is greatly appreciated!
... the great thing is that one can easily see the interfaces available from js through interface flattening by looking at the code.

Investigating leaks using DMD heap scan mode
if you are investigating a leak of www.example.com, then from $logdir you can do "grep nsglobalwindow cc-edges* | grep example.com".
... the result of that grep will contain output that looks something like this: cc-edges.15873.log:0x7f0897082c00 [rc=1285] nsglobalwindowinner # 2147483662 inner https://www.example.com/ * cc-edges.15873.log: the first part is the file name where it was found.
... the output will look something like this, after a message about loading progress: 0x7f0882fe3230 [fragmentorelement (xhtml) script https://www.example.com] --[[via hash] mlistenermanager]--> 0x7f0899b4e550 [eventlistenermanager] --[mlisteners event=onload listenertype=3 [i]]--> 0x7f0882ff8f80 [callbackobject] --[mincumbentglobal]--> 0x7f0897082c00 [nsglobalwindowinner # 2147483662 inner https://www.example.com] root 0x7f0882fe3230 is a ref counted objec...

Memory reporting
mystring *gmystring; class mystringreporter moz_final : public nsimemoryreporter { moz_define_malloc_size_of(mallocsizeof) public: ns_decl_isupports ns_method collectreports(nsihandlereportcallback* ahandlereport, nsisupports* adata) { // btw: if gmystring wasn't a pointer, you'd use // |gmystring.sizeofexcludingthis(mallocsizeof)| instead.
... return moz_collect_report( "explicit/mystring", kind_heap, units_bytes, gmystring->sizeofincludingthis(mallocsizeof), "memory used for mystring."); } }; ns_impl_isupports1(mystringreporter, nsimemoryreporter) note that moz_define_malloc_size_of defines a function of type mozilla::mallocsizeof that is specific to this memory reporter (and will be identified as such in dmd's output).
...for example: foo->sizeofincludingthis() // yes foo.sizeofexcludingthis() // yes foo.sizeofincludingthis() // no foo->sizeofexcludingthis() // no sometimes memory reporters are stand-alone objects, like the mystringreporter example above.

Power profiling overview
c-states intel processors have aggressive power-saving features.
... the correlation between each proxy measure and power consumption is hard to know and can vary greatly.
...this can identify specific changes that caused regressions, for example.

Optimizing Applications For NSPR
this has proven to be quite challenging, a challenge that was met to a large degree, but there is always room for improvement.
... interrupting threads (via <tt>pr_interrupt()</tt>) on threads blocked in i/o functions is implemented to various degrees on different platforms.
...on windows 3.1, when nspr detects a value in a 64 bit file offset greater than 32bit significance, it terminates with an assert.

PRCallOnceType
syntax #include <prinit.h> typedef struct prcalloncetype { printn initialized; print32 inprogress; prstatus status; } prcalloncetype; fields the structure has these fields: initialized if not zero, the initialization process has been completed.
... inprogress if not zero, the initialization process is currently being executed.
... calling threads that observe this status block until inprogress is zero.

PR_ConnectContinue
if pr_connectcontinue() returns pr_failure, call pr_geterror(): - pr_in_progress_error: the nonblocking connect is still in progress and has not completed yet.
...after a nonblocking connect is initiated with pr_connect() (which fails with pr_in_progress_error), one should call pr_poll() on the socket, with the in_flags pr_poll_write | pr_poll_except.
... when pr_poll() returns, one calls pr_connectcontinue() on the socket to determine whether the nonblocking connect has completed or is still in progress.

NSS 3.17.2 release notes
this is a patch release to fix a regression and other bugs.
...this fixes a regression introduced in nss 3.16.2 that prevented nss from importing some rsa private keys (such as in pkcs #12 files) generated by other crypto libraries.
...previously nss would only validate the peer's public key before performing ecdh key agreement.

Handling Mozilla Security Bugs
thus people have strong feelings about how security-related bugs are handled, and in particular about the degree to which information about such bugs is publicly disclosed.
... expanding the mozilla security bug group as previously described, the mozilla security module owner can select one or more peers to share the core work of coordinating investigation and resolution of mozilla security vulnerabilities, and will work with them to create some agreed-upon ground rules for how this work can be most effectively shared among themselves.
... disclosure of security vulnerabilities the security module owner, peers, and other members of the mozilla security bug group will not be asked to sign formal nondisclosure agreements or other legal paperwork.

AT APIs Support
introduction documentation is in progress still.
... on windows platform mfcembed testing client - this is a very simple package, great for testing basic html accessibility with your products and the gecko rendering engine (please contact us for a copy).
...the rest of the mozilla universal access support is in progress.

XUL Accessibility
it is much in progress.
...aggregating the text from element subtree if the child node is hidden then it's ignored excepting the case when the element used as label is hidden itself if the child node is text node then its rendered value is appended if the child node is element then if it implements nsidomxullabeledcontrolelement then the value of label property is appended otherwise if it's a label element then then value attribute is appended otherwise append tooltiptext attribute append the accessible value searching specific element in neighbour of the element search inside the element subtree go up through parents (max level is 5) and search inside theirs subtrees if the element is anonymous then sear...
...l for control" control="control" /> <hbox role="grouping" id="control" /> get tooltiptext attribute if the element is anonymous child of the element that is the direct child of toolbaritem element or the element is direct child of toolbaritem element then title attribute of toolbaritem element is used (currently it's used in firefox ui only) if the element has aria role and the role allows to aggregate name from subtree of element then generate name from subtree of the element description the following rules to generate accessible description are applied: check aria-describedby attribute, description is generated from elements pointed by aria-describedby attribute <description id="descr1">label1</description> <description id="descr2">label2</description> <textbox aria-describedby="desc...

How to build an XPCOM component in JavaScript
depth = @depth@ topsrcdir = @top_srcdir@ srcdir = @srcdir@ vpath = @srcdir@ include $(depth)/config/autoconf.mk # module specifies where header files from this makefile are installed # use dom if your component implements a dom api module = dom # name of the typelib xpidl_module = dom_apps # set to 1 if the module should be part of the gecko runtime common to all applications gre_module = 1 # the idl sources xpidlsrcs = \ helloworld.idl \ $(null) include $(topsrcdir)/config/rules.mk xpidl_flags += \ -i$(topsrcdir)/dom/interfaces/base \ -i$(topsrcdir)/dom/interfaces/events \ $(null) creating the component using xpcomutils in firefox 3 and later you can use import xpcomutils.jsm using components.utils.import to simplify the process of writing your component sligh...
...to begin, include a line at the top of your interface to import the xpcomutils library: components.utils.import("resource://gre/modules/xpcomutils.jsm"); then implement your interface the same way you did above, except with a few modifications so that xpcomutils can set it up properly: /*********************************************************** class definition ***********************************************************/ //class constructor function helloworld() { // if you only need to access your component from jav...
... var nsgetfactory = xpcomutils.generatensgetfactory(components); // firefox 4.0 and higher else var nsgetmodule = xpcomutils.generatensgetmodule(components); // firefox 3.x so the total simplified version of your component now looks like (of course documentation and comments aren't a bad thing, but as a template something smaller is nice to have): components.utils.import("resource://gre/modules/xpcomutils.jsm"); function helloworld() { } helloworld.prototype = { classdescription: "my hello world javascript xpcom component", classid: components.id("{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}"), contractid: "@dietrich.ganx4.com/helloworld;1", queryinterface: xpcomutils.generateqi([components.interfaces.nsihelloworld]), hello: function() { return "hello world!

Components.utils.cloneInto
example this add-on script creates an object, clones it into the content window and makes it a property of the content window global: // add-on script var addonscriptobject = {"greeting" : "hello from add-on"}; contentwindow.addonscriptobject = cloneinto(addonscriptobject, contentwindow); scripts running in the page can now access the object: // page script button.addeventlistener("click", function() { console.log(window.addonscriptobject.greeting); // "hello from add-on" }, false); of course, you don't have to assign the clone to the window itself: you can assign it...
...suppose the page script defines a function like this: // page script function foo(greeting) { console.log("they said: " + greeting.message); } the add-on script can define an object, clone it, and pass it into this function: // add-on script var addonscriptobject = {"message" : "hello from add-on"}; contentwindow.foo(cloneinto(addonscriptobject, contentwindow)); // "they said: hello from add-on" cloning objects that have functions if the object to be cloned contains functions, you must pass the {clonefunctions:true} flag or you'll get an error.
... if you do pass this flag, then functions in the object are cloned using the same mechanism as that used in components.utils.exportfunction: // add-on script var addonscriptobject = { greetme: function() { alert("hello from add-on"); } }; contentwindow.addonscriptobject = cloneinto(addonscriptobject, contentwindow, {clonefunctions: true}); // page script var test = document.getelementbyid("test"); test.addeventlistener("click", function() { window.addonscriptobject.greetme(); }, false); cloning objects that contain dom elements by default, if the object you clone contains objects that are reflected from c++, such as dom elements, the cloning operation will fail with an error.

Components.utils.exportFunction
example export to global scope this add-on script defines a function, then exports it to a content window: // addon-script.js var salutation = "hello "; function greetme(user) { return salutation + user; } components.utils.exportfunction(greetme, contentwindow, {defineas: "foo"}); instead of using defineas, the script can assign the result of exportfunction to an object in the target scope: // addon-script.js var salutation = "hello "; function greetme(user) { return salutation + user; } contentwindow.foo = components.utils.exportfunction(greetme, ...
...contentwindow); either way, code running in the content window's scope can now call the function: // page-script.js var greeting = foo("alice"); console.log(greeting); // "hello alice" export to an existing local object instead of attaching the function to the target's global window object, the caller can attach it to any other object in the target context.
... suppose the content window defines a local variable bar: // page-script.js var bar = {}; now the add-on script can attach the function to bar: // addon-script.js components.utils.exportfunction(greetme, contentwindow.bar, {defineas: "greetme"}); // page-script.js var value = bar.greetme("bob"); console.log(value); // "hello bob" ...

imgIDecoderObserver
it lets you monitor the progress of loading an image.
...this means that the frames no longer exist in decoded form, and any attempt to access or draw the image will initiate a new series of progressive decode notifications.
...by the time this callback is been called, the size has been set on the container and status_size_available has been set on the associated imgrequest.

nsIAccessibleRetrieval
; nsiaccessible getcachedaccessible(in nsidomnode anode, in nsiweakreference ashell); obsolete since gecko 2.0 nsiaccessnode getcachedaccessnode(in nsidomnode anode, in nsiweakreference ashell); obsolete since gecko 2.0 nsidomnode getrelevantcontentnodefor(in nsidomnode anode); astring getstringeventtype(in unsigned long aeventtype); astring getstringrelationtype(in unsigned long arelationtype); astring getstringrole(in unsigned long arole); nsidomdomstringlist getstringstates(in unsigned long astates, in unsigned long aextrastates); methods getaccessiblefor() return an nsiaccessible for a dom node in pres shell 0.
...getstringrelationtype() get the type of accessible relation as a string.
... astring getstringrelationtype( in unsigned long arelationtype ); parameters arelationtype the accessible relation type constant.

nsICacheEntryDescriptor
inherits from: nsicacheentryinfo last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void close(); void doom(); void doomandfailpendingrequests(in nsresult status); string getmetadataelement(in string key); void markvalid(); nsiinputstream openinputstream(in unsigned long offset); nsioutputstream openoutputstream(in unsigned long offset); void setdatasize(in unsigned long size); void setexpirationtime(in pruint32 expirationtime); void setmetadataelement(in string key, in string value); void visitmetadata(in nsicachemetadatavisitor visitor); attributes attribute type description accessgranted nscacheaccessmode ge...
...doomandfailpendingrequests() this method with the write access can doom the cache entry and choose to fail pending requests.
...void doomandfailpendingrequests( in nsresult status ); parameters status the access status.

nsIChannel
this is set by clients, who wish to provide a means to receive progress, status and protocol-specific notifications.
... interfaces commonly requested include: nsiprogresseventsink, nsiprompt, and nsiauthprompt / nsiauthprompt2.
... exceptions thrown ns_error_in_progress if the channel is reopened.

nsIDOMGeoPositionCoords
last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) inherits from: nsisupports attributes attribute type description latitude double the user's current latitude, in degrees.
... longitude double the user's current longitude, in degrees.
... heading double the current heading at which the user is moving, in degrees.

nsIFactory
(see also nsicomponentmanager.createinstance.) void createinstance( in nsisupports aouter, in nsiidref iid, [retval, iid_is(iid)] out nsqiresult result ); parameters aouter pointer to a component that wishes to be aggregated in the resulting instance.
... this can be nsnull if no aggregation is requested.
... ns_error_no_aggregation indicates that aggregation is not supported.

nsIFeedResultListener
toolkit/components/feeds/public/nsifeedlistener.idlscriptable this interface should be implemented by programs to receive events from the feed parser as parsing progresses.
...if you don't care about doing progress display or the like, this is all you need to implement in order to receive the parsed feed.
... see also nsifeedprogresslistener nsisupports interwiki link ...

nsIFile
to create an nsifile from a path you can use fileutils.jsm: var fileutils = cu.import("resource://gre/modules/fileutils.jsm").fileutils var nsifile = new fileutils.file( filename ) note: nsilocalfile was merged with this interface in gecko 14.
... the value of this attribute is milliseconds since midnight (00:00:00), january 1, 1970 greenwich mean time (gmt).
... the value of this attribute is milliseconds since midnight (00:00:00), january 1, 1970 greenwich mean time (gmt).

nsIHTMLEditor
void getindentstate( out boolean acanindent, out boolean acanoutdent ); parameters acanindent acanoutdent getinlineproperty() gets aggregate properties of the current selection.
... the selection is set to parent-of-aelement with an offset 1 greater than aelement's offset but it enforces the html 4.0 dtd "cancontain" rules, so it should be useful for other elements.
... setcssinlineproperty() setinlineproperty() sets the aggregate properties on the current selection.

nsIMsgDBHdr
tyval); void markread(in boolean read); void markflagged(in boolean flagged); void markhasattachments(in boolean hasattachments); void setprioritystring(in string priority); unsigned long orflags(in unsigned long flags); unsigned long andflags(in unsigned long flags); void setreferences(in string references); acstring getstringreference(in long refnum); void setrecipientsarray(in string names, in string addresses,in unsigned long numaddresses); void setcclistarray(in string names, in string addresses,in unsigned long numaddresses); void setbcclistarray(in string names, in string addresses,in unsigned long numaddresses);new in thunderbird 3.1 [noscript] void getauthorcollationkey(out oct...
... getstringreference() returns one of the references in the list of references.
... acstring getstringreference(in long refnum); parameters refnum the index of the reference to return.

nsIMsgDatabase
idbchangelistener instigator); void markoffline(in nsmsgkey key, in boolean offline, in nsidbchangelistener instigator); void setlabel(in nsmsgkey key, in nsmsglabelvalue label); void setstringproperty(in nsmsgkey akey, in string aproperty, in string avalue); void markimapdeleted(in nsmsgkey key, in boolean deleted, in nsidbchangelistener instigator); void applyretentionsettings(in nsimsgretentionsettings amsgretentionsettings, in boolean adeleteviafolder); boolean hasnew(); void clearnewlist(in boolean notify); void addtonewlist(in nsmsgkey key); void startbatch(); void endbatch(); nsimsgofflineimapoperation getofflineopforkey(in nsmsgkey messagekey, in boolean create); void removeofflineop(in nsimsgofflineimapoperation op); nsisimpleenumerator enumerateofflineops()...
...anumkeys) in nsmsgkey anewhits, out unsigned long anumbadhits, array, size_is(anumbadhits) out nsmsgkey astalehits); void updatehdrincache(in string asearchfolderuri, in nsimsgdbhdr ahdr, in boolean aadd); boolean hdrisincache(in string asearchfolderuri, in nsimsgdbhdr ahdr); attributes attribute type description dbfolderinfo nsidbfolderinfo readonly: firstnew nsmsgkey readonly: msgretentionsettings nsimsgretentionsettings msgdownloadsettings nsimsgdownloadsettings lowwaterarticlenum nsmsgkey readonly: highwaterarticlenum nsmsgkey readonly: nextpseudomsgkey nsmsgkey for undo-redo of move pop->imap.
... void applyretentionsettings(in nsimsgretentionsettings amsgretentionsettings, in boolean adeleteviafolder); hasnew() boolean hasnew(); clearnewlist() void clearnewlist(in boolean notify); addtonewlist() void addtonewlist(in nsmsgkey key); startbatch() batching - can be used to cache file stream for local mail, and perhaps to use the mdb batching mechanism as well.

nsIWebBrowser
the chrome object may optionally implement nsiwebprogresslistener instead of explicitly calling addwebbrowserlistener() and removewebbrowserlistener() to register a progress listener object.
...typically this method will be called to register an object to receive nsiwebprogresslistener or nsishistorylistener notifications in which case the the iid is that of the interface.
... see also nsibasewindow nsicontextmenulistener nsidomwindow nsiembeddingsitewindow nsiinterfacerequestor nsishistorylistener nsitooltiplistener nsiuricontentlistener nsiweakreference nsiwebbrowserchrome nsiwebbrowserchromefocus nsiwebprogresslistener ...

nsIXMLHttpRequestEventTarget
onprogress nsidomeventlistener a javascript function object that gets invoked zero or more times, after the loadstart event, but before any abort, error, or load events occur.
... handling the events when the handler functions for these events are called, they receive as a parameter a progressevent, which implements the nsidomprogressevent interface.
... see also using xmlhttprequest xmlhttprequest nsixmlhttprequest nsidomprogressevent ...

nsIXPConnect
obsolete since gecko 2.0 jsval varianttojs(in jscontextptr ctx, in jsobjectptr scope, in nsivariant value); void wrapjs(in jscontextptr ajscontext, in jsobjectptr ajsobj, in nsiidref aiid, [iid_is(aiid),retval] out nsqiresult result); void wrapjsaggregatedtonative(in nsisupports aouter, in jscontextptr ajscontext, in jsobjectptr ajsobj, in nsiidref aiid, [iid_is(aiid),retval] out nsqiresult result); nsixpconnectjsobjectholder wrapnative(in jscontextptr ajscontext, in jsobjectptr ascope, in nsisupports acomobj, in nsiidref aiid); void wrapnativetojsval(in jscontextptr ajscontext, in jsobjectptr ascope, in nsisupports acomobj, ...
... void wrapjs( in jscontextptr ajscontext, in jsobjectptr ajsobj, in nsiidref aiid, [iid_is(aiid),retval] out nsqiresult result ); parameters ajscontext missing description ajsobj missing description aiid missing description result missing description exceptions thrown missing exception missing description wrapjsaggregatedtonative() wrapjsaggregatedtonative() is just like wrapjs() except it is used in cases where the jsobject is also aggregated to some native xpcom object.
... void wrapjsaggregatedtonative( in nsisupports aouter, in jscontextptr ajscontext, in jsobjectptr ajsobj, in nsiidref aiid, [iid_is(aiid),retval] out nsqiresult result ); parameters aouter missing description ajscontext missing description ajsobj missing description aiid missing description result missing description exceptions thrown missing exception missing description wrapnative() wrapnative() will create a new jsobject or return an existing one.

Weak reference
this would be possible if the weak reference was actually aggregated to the target object.
...this is impossible in our situation, since we explicitly rely on the the fact that part of the `aggregate' can be destroyed.
... it's clear, therefore, that the weak reference can't be aggregated to the target object.

XPCOM tasks
see bug 23737 work is progressing on this.
... work is progressing on this.
... p3 we need to check for aggregation in createinstance().

Debugging Tips
let { ctypes } = components.utils.import("resource://gre/modules/ctypes.jsm", {}); let i = ctypes.int32_t(10); console.log(i); let point = ctypes.structtype("point", [{ x: ctypes.int32_t }, { y: ctypes.int32_t }]) let p = point(10, 20); console.log(p); let pp = p.address(); console.log(pp); the result will be as following: cdata { value: 10 } cdata { x: 10, y: 20 } cdata { contents: cdata } to see more descriptive information, you can use .tosource().
... let { ctypes } = components.utils.import("resource://gre/modules/ctypes.jsm", {}); let i = ctypes.int32_t(10); console.log(i.tosource()); let point = ctypes.structtype("point", [{ x: ctypes.int32_t }, { y: ctypes.int32_t }]) let p = point(10, 20); console.log(p.tosource()); let pp = p.address(); console.log(pp.tosource()); the result will be : ctypes.int32_t(10) point(10, 20) point.ptr(ctypes.uint64("0x15fdafb08")) to see the complete type information, you can use .constructor.tosource(), to print the source of ctype.
... let { ctypes } = components.utils.import("resource://gre/modules/ctypes.jsm", {}); let i = ctypes.int32_t(10); console.log(i.constructor.tosource()); let point = ctypes.structtype("point", [{ x: ctypes.int32_t }, { y: ctypes.int32_t }]) let p = point(10, 20); console.log(p.constructor.tosource()); let pp = p.address(); console.log(pp.constructor.tosource()); the result will be as per the following: ctypes.int32_t ctypes.structtype("point", [{ "x": ctypes.int32_t }, { "y": ctypes.int32_t }]) ctypes.structtype("point", [{ "x": ctypes.int32_t }, { "y": ctypes.int32_t }]).ptr ...

CData
readstringreplacemalformed() converts a character array to a javascript string.
... string readstringreplacemalformed(); parameters none.
... here is a method to read "malformed", it attempts to do readstring on it, if it errors then it tries to read it in another way, so this is an alternative to readstringreplacemalformed, it is an attempt at readingmalformed function readaschar8thenaschar16(stringptr, known_len, jschar) { // when reading as jschar it assumes max length of 500 // stringptr is either char or jschar, if you know its jschar for sure, pass 2nd arg as true // if known_len is passed, then assumption is not made, at the known_len position in array we will see a null char // i tried getting known_len from stringptr but its not possible, it has be known, i trie...

Plug-in Basics - Plugins
advanced: you can determine which directories a gecko program checks with the linux strace command, for example: strace -e open /usr/bin/firefox 2>&1 | grep plugin but with version firefox-41.0.2 we can not check.
... i found other way how check which paths support firefox : $ strace -y /usr/bin/firefox 2>&1 | grep acces | grep -v search | grep plugins access("/home/user_name/.mozilla/firefox/dqh2nb5k.default-1441864569209/plugins", f_ok) = -1 enoent (no such file or directory) access("/home/user_name/.mozilla/plugins", f_ok) = -1 enoent (no such file or directory) access("/usr/lib64/firefox/browser/plugins", f_ok) = -1 enoent (no such file or directory) access("/usr/lib/mozilla/plugins", f_ok) = 0 this output i have after close firefox.
...although plug-ins are platform-specific, the plug-in api is designed to provide the maximum degree of flexibility and to be functionally consistent across all platforms.

Streams - Plugins
the plug-in can set the output parameter type to one of these transmission modes: np_normal: (default): the plug-in can process the data progressively as it arrives from the network or file system through a series of calls to npp_writeready and npp_write.
... after a call to npp_newstream, in which the plug-in requested a normal-mode stream, the browser delivers the data in the stream progressively in a series of calls to npp_writeready and npp_write.
...after a call to npp_newstream, in which the plug-in requested a normal-mode stream, the browser delivers the data in the stream progressively in a series of calls to npp_writeready and npp_write.

Index - Firefox Developer Tools
11 application application, debugging, devtools, firefox, guide, manifests, service workers the application panel provides tools for inspecting and debugging modern web apps (also known as progressive web apps).
... 38 aggregate view before firefox 48, this was the default view of a heap snapshot.
... after firefox 48, the default view is the tree map view, and you can switch to the aggregate view using the dropdown labeled "view:": 39 basic operations before firefox 50, the memory tool is not enabled by default.

Applying styles and colors - Web APIs
we use the two variables i and j to generate a unique rgb color for each square, and only modify the red and green values.
...it is then equal to the cosecant of half the minimum inner angle of connecting segments below which no miter join will be rendered, but only a bevel join: miterlimit = max miterlength / linewidth = 1 / sin ( min θ / 2 ) the default miter limit of 10.0 will strip all miters for sharp angles below about 11 degrees.
...you do this to make very sharp color transitions—in this case from white to green.

Drawing shapes with canvas - Web APIs
note: angles in the arc function are measured in radians, not degrees.
... to convert degrees to radians you can use the following javascript expression: radians = (math.pi/180)*degrees.
...the endangle starts at 180 degrees (half a circle) in the first column and is increased by steps of 90 degrees, culminating in a complete circle in the last column.

Transformations - Web APIs
reminder: angles are in radians, not degrees.
... to convert, we are using: radians = (math.pi/180)*degrees.
... function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); // left rectangles, rotate from canvas origin ctx.save(); // blue rect ctx.fillstyle = '#0095dd'; ctx.fillrect(30, 30, 100, 100); ctx.rotate((math.pi / 180) * 25); // grey rect ctx.fillstyle = '#4d4e53'; ctx.fillrect(30, 30, 100, 100); ctx.restore(); // right rectangles, rotate from rectangle center // draw blue rect ctx.fillstyle = '#0095dd'; ctx.fillrect(150, 30, 100, 100); ctx.translate(200, 80); // translate to rectangle center // x = x + 0.5 * width // y = y + 0.5 * height ctx.rotate((math.pi / 180) * 25); // rotate ctx.translate(-200, -80); // translate back // draw grey rect ctx.fillstyle = '#4d4e53'; ctx.fi...

Canvas API - Web APIs
basic example this simple example draws a green rectangle onto a canvas.
...the fillstyle property makes the rectangle green.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'green'; ctx.fillrect(10, 10, 150, 100); result reference htmlcanvaselement canvasrenderingcontext2d canvasgradient canvasimagesource canvaspattern imagebitmap imagedata renderingcontext textmetrics offscreencanvas path2d imagebitmaprenderingcontext note: the interfaces related to the webglrenderingcontext are referenced under webgl.

DeviceMotionEventRotationRate - Web APIs
properties devicemotioneventrotationrate.alpha read only the amount of rotation around the z axis, in degrees per second.
... devicemotioneventrotationrate.beta read only the amount of rotation around the x axis, in degrees per second.
... devicemotioneventrotationrate.gamma read only the amount of rotation around the y axis, in degrees per second.

DeviceOrientationEvent.DeviceOrientationEvent() - Web APIs
options optional options are as follows: alpha: a number representing the motion of the device around the z axis, express in degrees with values ranging from 0 to 360.
... beta: a number representing the motion of the device around the x axis, express in degrees with values ranging from -180 to 180.
... gamma: a number representing the motion of the device around the y axis, express in degrees with values ranging from -90 to 90.

Document Object Model (DOM) - Web APIs
lement svghatchpathelement svghkernelement svgimageelement svglineargradientelement svglineelement svgmarkerelement svgmaskelement svgmeshelement svgmeshgradientelement svgmeshpatchelement svgmeshrowelement svgmetadataelement svgmissingglyphelement svgmpathelement svgpathelement svgpatternelement svgpolylineelement svgpolygonelement svgradialgradientelement svgrectelement svgscriptelement svgsetelement svgsolidcolorelement svgstopelement svgstyleelement svgsvgelement svgswitchelement svgsymbolelement svgtextcontentelement svgtextelement svgtextpathelement svgtextpositioningelement svgtitleelement svgtrefelement svgtspanelement svguseelement svgunknownelement svgviewelement svgvkernelement svg data type interfaces here are th...
...raticrel svgpathsegarcabs svgpathsegarcrel svgpathseglinetohorizontalabs svgpathseglinetohorizontalrel svgpathseglinetoverticalabs svgpathseglinetoverticalrel svgpathsegcurvetocubicsmoothabs svgpathsegcurvetocubicsmoothrel svgpathsegcurvetoquadraticsmoothabs svgpathsegcurvetoquadraticsmoothrel svgpathseglist svgpoint svgpointlist svgpreserveaspectratio svgrect svgstringlist svgtransform svgtransformlist animated type svganimatedangle svganimatedboolean svganimatedenumeration svganimatedinteger svganimatedlength svganimatedlengthlist svganimatednumber svganimatednumberlist svganimatedpathdata svganimatedpoints svganimatedpreserveaspectratio svganimatedrect svganimatedstring svganimatedtransformlist smil-related interfaces...
... elementtimecontrol timeevent other svg interfaces getsvgdocument shadowanimation svgcolorprofilerule svgcssrule svgdocument svgexception svgexternalresourcesrequired svgfittoviewbox svglangspace svglocatable svgrenderingintent svgstylable svgtests svgtransformable svgunittypes svguseelementshadowroot svgurireference svgviewspec svgzoomandpan svgzoomevent specifications specification status comment dom living standard ...

EXT_texture_compression_rgtc - Web APIs
rgtc is a block-based texture compression format suited for unsigned and signed red and red-green textures (red-green texture compression).
... ext.compressed_red_green_rgtc2_ext each 4x4 block of texels consists of 64 bits of compressed unsigned red image data followed by 64 bits of compressed unsigned green image data.
... ext.compressed_signed_red_green_rgtc2_ext each 4x4 block of texels consists of 64 bits of compressed signed red image data followed by 64 bits of compressed signed green image data.

FileReader - Web APIs
filereader.onprogress a handler for the progress event.
... progress fired periodically as data is read.
... also available via the onprogress property.

HTMLElement.hidden - Web APIs
example here's an example where a hidden block is used to contain a thank you message that is displayed after a user agrees to an unusual request.
... the welcome panel <div id="welcome" class="panel"> <h1>welcome to foobar.com!</h1> <p>by clicking "ok" you agree to be awesome every day!</p> <button class="button" id="okbutton">ok</button> </div> this html creates a panel (in a <div> block) that welcomes the user to a site and tells them what they're agreeing to by clicking the ok button.
...the follow-up panel looks like this in html: <div id="awesome" class="panel" hidden> <h1>thanks!</h1> <p>thank you <strong>so</strong> much for agreeing to be awesome today!

HTMLInputElement - Web APIs
for checkboxes, the effect is that the appearance of the checkbox is obscured/greyed in some way as to indicate its state is indeterminate (not checked but not unchecked).
...(if you set this to a negative number, an exception will be thrown.) min string: returns / sets the element's min attribute, containing the minimum (numeric or date-time) value for this item, which must not be greater than its maximum (max attribute) value.
...if this is not set to any, the control accepts only values at multiples of the step value greater than the minimum.

MediaTrackConstraints - Web APIs
colortemperature a constraindouble (a double-precision integer) specifying a desired color temperature in degrees kelvin.
... contrast a constraindouble (a double-precision integer) specifying the degree of difference between light and dark.
... saturation a constraindouble (a double-precision integer) specifying the degree of color intensity.

Using the Notifications API - Web APIs
this is not only best practice — you should not be spamming users with notifications they didn't agree to — but going forward browsers will explicitly disallow notification permission requests not triggered in response to a user gesture.
... var n = new notification('my great song'); document.addeventlistener('visibilitychange', function() { if (document.visibilitystate === 'visible') { // the tab has become visible so clear the now-stale notification.
...tion // if not, let's ask for it if (window.notification && notification.permission !== "granted") { notification.requestpermission(function (status) { if (notification.permission !== status) { notification.permission = status; } }); } var button = document.getelementsbytagname('button')[0]; button.addeventlistener('click', function () { // if the user agreed to get notified // let's try to send ten notifications if (window.notification && notification.permission === "granted") { var i = 0; // using an interval cause some browsers (including firefox) are blocking notifications if there are too much in a certain time.

PannerNode.coneOuterGain - Web APIs
rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e.
...ew oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the size of the area in which the sound volume decreases gradually // if coneouterangle == 45 and coneinnerangle == 30, it means that when the sound is rotated // by between 15 (30/2) and 22.5 (45/2) degrees either direction, // the volume will decrease gradually panner.coneouterangle = 45; // this va...
... // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.orientationy.setvalueattime(y1, context.currenttime); panner.orientationz.setvalueattime(z1, context.currenttime); // calculate the vector for -22.4 degrees // since our coneouterangle is 45, this will just about make the sound audible // if we set it to +/-22.5, the sound volume will be 0, as the threshold is exclusive const [x2, y2, z2] = yrotationtovector(-22.4); panner.orientationx.setvalueattime(x2, context.currenttime + 2); panner.orientationy.setvalueattime(y2, context.currenttime + 2); panner.orientationz.setvalueattime(z2, context.currentt...

PannerNode.orientationX - Web APIs
rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e.
...ew oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the size of the area in which the sound volume decreases gradually // if coneouterangle == 45 and coneinnerangle == 30, it means that when the sound is rotated // by between 15 (30/2) and 22.5 (45/2) degrees either direction, // the volume will decrease gradually panner.coneouterangle = 45; // this va...
... // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.orientationy.setvalueattime(y1, context.currenttime); panner.orientationz.setvalueattime(z1, context.currenttime); // calculate the vector for -22.4 degrees // since our coneouterangle is 45, this will just about make the sound audible // if we set it to +/-22.5, the sound volume will be 0, as the threshold is exclusive const [x2, y2, z2] = yrotationtovector(-22.4); panner.orientationx.setvalueattime(x2, context.currenttime + 2); panner.orientationy.setvalueattime(y2, context.currenttime + 2); panner.orientationz.setvalueattime(z2, context.currentt...

PannerNode.orientationY - Web APIs
rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e.
...ew oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the size of the area in which the sound volume decreases gradually // if coneouterangle == 45 and coneinnerangle == 30, it means that when the sound is rotated // by between 15 (30/2) and 22.5 (45/2) degrees either direction, // the volume will decrease gradually panner.coneouterangle = 45; // this va...
... // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.orientationy.setvalueattime(y1, context.currenttime); panner.orientationz.setvalueattime(z1, context.currenttime); // calculate the vector for -22.4 degrees // since our coneouterangle is 45, this will just about make the sound audible // if we set it to +/-22.5, the sound volume will be 0, as the threshold is exclusive const [x2, y2, z2] = yrotationtovector(-22.4); panner.orientationx.setvalueattime(x2, context.currenttime + 2); panner.orientationy.setvalueattime(y2, context.currenttime + 2); panner.orientationz.setvalueattime(z2, context.currentt...

PannerNode.orientationZ - Web APIs
rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e.
...ew oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the size of the area in which the sound volume decreases gradually // if coneouterangle == 45 and coneinnerangle == 30, it means that when the sound is rotated // by between 15 (30/2) and 22.5 (45/2) degrees either direction, // the volume will decrease gradually panner.coneouterangle = 45; // this va...
... // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.orientationy.setvalueattime(y1, context.currenttime); panner.orientationz.setvalueattime(z1, context.currenttime); // calculate the vector for -22.4 degrees // since our coneouterangle is 45, this will just about make the sound audible // if we set it to +/-22.5, the sound volume will be 0, as the threshold is exclusive const [x2, y2, z2] = yrotationtovector(-22.4); panner.orientationx.setvalueattime(x2, context.currenttime + 2); panner.orientationy.setvalueattime(y2, context.currenttime + 2); panner.orientationz.setvalueattime(z2, context.currentt...