Arrays - Learn web development
n much the same way as any other type of value, the difference being that we can access each value inside the list individually, and do super useful and efficient things with the list, like loop through it and do the same thing to every value. maybe we've got a series of product items and their prices stored in an array, and we want to loop through them all and print them out on an invoice, while totaling all the prices together and printing out the total price at the bottom. if we didn't have arrays, we'd have to store every item in a separate variable, then call the code that does the printing and adding separately for each item. this would be much longer to write out, less efficient, and more error-prone. if we had 10 items to add to the invoice it would already be annoying, but what about ...
...ept that they work on the beginning of the array, not the end. first unshift() — try the following commands: myarray.unshift('edinburgh'); myarray; now shift(); try these! let removeditem = myarray.shift(); myarray; removeditem; active learning: printing those products! let's return to the example we described earlier — printing out product names and prices on an invoice, then totaling the prices and printing them at the bottom. in the editable example below there are comments containing numbers — each of these marks a place where you have to add something to the code. they are as follows: below the // number 1 comment are a number of strings, each one containing a product name and price separated by a colon. we'd like you to turn this into an array and store it in an a...
... the price. if you are not sure how to do this, consult the useful string methods article for some help, or even better, look at the converting between strings and arrays section of this article. as part of the above line of code, you'll also want to convert the price from a string to a number. if you can't remember how to do this, check out the first strings article. there is a variable called total that is created and given a value of 0 at the top of the code. inside the loop (below // number 4) we want you to add a line that adds the current item price to that total in each iteration of the loop, so that at the end of the code the correct total is printed onto the invoice. you might need an assignment operator to do this. we want you to change the line just below // number 5 so that the i...
...And 5 more matches

Dynamic behavior in Svelte: working with variables and props - Learn web development
mode. repl to code along with us using the repl, start at https://svelte.dev/repl/c862d964d48d473ca63ab91709a0a5a0?version=3.23.2 working with todos our todos.svelte component is currently just displaying static markup; let's start making it a bit more dynamic. we'll take the tasks information from the markup and store it in a todos array. we'll also create two variables to keep track of the total number of tasks and the completed tasks. the state of our component will be represented by these three top-level variables. create a <script> section at the top of src/components/todos.svelte and give it some content, as follows: <script> let todos = [ { id: 1, name: 'create a svelte starter app', completed: true }, { id: 2, name: 'create your first component', completed: true...
...by these three top-level variables. ...
... to prove it, go to that array, and try changing some of the todo object's completed property values, and even add a new todo object. observe how the numbers in the message are updated appropriately. ...
...And 5 more matches

nsIWebProgressListener
nsiwebprogress describes the parent-child relationship of nsiwebprogress instances. ...
...the parent-child relationship of nsiwebprogress instances. ...
...ired the notification. arequest the associated nsirequest. this may be null in some cases. alocation the uri of the location that is being loaded. aflags this is a value which explains the situation or the reason why the location has changed. optional from gecko 11 onprogresschange() notification that the progress has changed for one of the requests associated with awebprogress. progress totals are reset to zero when all requests in awebprogress complete (corresponding to onstatechange() being called with astateflags including the state_stop and state_is_window flags). note: if any progress value is unknown, or if its value would exceed the maximum value of type long, then its value is replaced with -1. note: if the object also implements nsiwebprogresslistener2 and the caller knows ...
...And 5 more matches

nsIWebProgressListener2
n extended version of nsiwebprogresslistener. uriloader/base/nsiwebprogresslistener2.idlscriptable please add a summary to this article. ...
...resslistener. uriloader/base/nsiwebprogresslistener2.idlscriptable please add a summary to this article. ...
...this function is identical to nsiwebprogresslistener.onprogresschange(), except that this function supports 64-bit values. ...
...And 5 more matches

PaymentRequest.shippingOption - Web APIs
nts are dispatched. in each calls to updatedetails() are made, one using a promise, and the other with a plain js object. this demotrates synchrounous and asynchronous updates to a payment sheet. ...
...us and asynchronous updates to a payment sheet. ...
...eet. ...
...And 5 more matches

Legacy layout methods - Learn web development
{ width: 90%; max-width: 900px; margin: 0 auto; } the body will be 90% of the viewport wide until it gets to 900px wide, in which case it will stay fixed at this width and center itself in the viewport. by default, its children (the <h1> and the two <div>s) will span 100% of the width of the body. if we want the two <div>s to be floated alongside one another, we need to set their widths to total 100% of the width of their parent element or smaller so they can fit alongside one another. add the following to the bottom of your css: div:nth-of-type(1) { width: 48%; } div:nth-of-type(2) { width: 48%; } here we've set both to be 48% of their parent's width — this totals 96%, leaving us 4% free to act as a gutter between the two columns, giving the content some space to breathe. now w...
... float one column up next to another in order to create something that looks like a grid. working through the process of creating a grid with floats shows you how this works and also introduces some more advanced concepts to build on the things you learned in the lesson on floats and clearing. the easiest type of grid framework to create is a fixed width one — we just need to work out how much total width we want our design to be, how many columns we want, and how wide the gutters and columns should be. if we instead decided to lay out our design on a grid with columns that grow and shrink according to browser width, we would need to calculate percentage widths for the columns and gutters between them. in the next sections we will look at how to create both. we will create a 12 column grid...
...aim is to turn this into a demonstration grid of two rows on a twelve column grid — the top row demonstrating the size of the individual columns, the second row some different sized areas on the grid. in the <style> element, add the following code, which gives the wrapper container a width of 980 pixels, with padding on the right hand side of 20 pixels. this leaves us with 960 pixels for our total column/gutter widths — in this case, the padding is subtracted from the total content width because we have set box-sizing to border-box on all elements on the site (see changing the box model completely for more explanation). * { box-sizing: border-box; } body { width: 980px; margin: 0 auto; } .wrapper { padding-right: 20px; } now use the row container that is wrapped around each r...
...And 4 more matches

Mail and RDF
style representation of an rdf graph, i've made arcs italic and resources bold. ...
...child --> | imap_message://alecf@imap.mywork.com/inbox#4 | etc... +-- http://home.netscape.com/nc-rdf#child --> | mailbox://alecf@pop.mywork.com | +-- http://home.netscape.com/nc-rdf#isserver --> "true" | +-- http://home.netscape.com/nc-rdf#child --> | mailbox://alecf@pop.mywork.com/inbox | +-- http://home.netscape.com/nc-rdf#totalmessages --> "2" | +-- http://home.netscape.com/nc-rdf#isserver --> "false" | +-- http://home.netscape.com/nc-rdf#messagechild --> | | mailbox_message://alecf@pop.mywork.com/inbox#1 | +-- http://home.netscape.com/nc-rdf#messagechild --> | mailbox_message://alecf@pop.mywork.com/inbox#2 | etc... there are of course many m...
...is it returns. nsmsgfolderdatasource - answer queries about any mail folders, including toplevel server folders. if asked about a folder along the #child arc, it will return resources for all subfolders in that folder. if asked about a folder along the #messagechild arc, it will return resources for all messages in a folder. it also answers queries about various properties of folders such as the total number of messages, whether or not this folder is actually a root server, and so forth. nsmsgmessagedatasource - answers queries about messages in folders. all rdf properties of a message currently come from the database that backs the containing folder. datasources and the ui mail does not link the ui to datasources in a "traditional" manner. instead of having a singleton datasource that is...
...And 4 more matches

Connecting to Remote Content - Archive of obsolete content
any code contained in the string, workarounds had to be devised in order to close security holes. luckily, firefox now provides a few alternatives for extension developers. the json page explains in detail how to parse json data in different versions of firefox and other applications. assume we need to parse the following data: {"shops": [{"name": "apple", "code": "a001"}, {"name": "orange"}], "total": 100} when the onload callback function is called, the response text is converted into a js object using the parse method. you can then use this object like any other javascript objects in your code. request.onload = function(aevent) { let text = aevent.target.responsetext; let jsobject = json.parse(text); window.alert(jsobject.shops[1].name); // => "orange" window.alert(jsobject.tot...
...so be serialized back with the stringify method. let string = json.stringify(jsobject); xml content xml is possibly the most popular data interchange format. let's assume that the xml returned from remote server is this: <?xml version="1.0"?> <data> <shops> <shop> <name>apple</name> <code>a001</code> </shop> <shop> <name>orange</name> </shop> </shops> <total>2</total> </data> when a valid xml response comes back from the remote server, the xml document object can be manipulated using different dom methods, to display the data in the ui or store it into a local datasource. request.onload = function(aevent) { let responsexml = aevent.target.responsexml; let rootelement = responsexml.documentelement; if (rootelement && "parseerror" != rootelem...
...l document object can be manipulated using different dom methods, to display the data in the ui or store it into a local datasource. ...
...And 3 more matches

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

nsIDOMProgressEvent
) 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. method overview void initprogressevent(in domstring typearg, in boolean canbubblearg, in boolean cancelablearg, in boolean lengthcomputablearg, in unsigned long long loadedarg, in unsigned long long totalarg); deprecated since gecko 22.0 attributes attribute type description lengthcomputable boolean specifies whether or not the total size of the transfer is known. read only. loaded unsigned long long the number of bytes transferred since the beginning of the operation. this doesn't include headers and other overhead, but only the content itself.
...read only. ...
...read only. methods initprogressevent() deprecated since gecko 22.0 this method has been removed from use in javascript in gecko 22.0. ...
...And 3 more matches

Mail event system
warning: the content of this article may be out of date. it was imported from mozilla.org and last updated in 2002. mozilla mail requires an event system to notify different subsystems that data has changed. this document describes the system that events are passed amongst the mail objects. for example, when a folder gets a new message, its total message count increases. the folder pane needs to know that this changed so that it can update the message count so the user can see it. interfaces the key interfaces here are: nsifolder.idl is an interface for storing a hierarchy of objects with properties. this interface is not (should not be) mail-related. nsifolders each store individual lists of folder listeners which are maintained with addlistener() and removelistener(). whe...
...low here is an example of a possible flow of control when a new message is added to a folder. in this example, there is a dialog open that shows properties for this folder including the message count. this dialog is a listener on this particular folder. a message is added to an nsimapmailfolder containing 4 messages. ...
... shows properties for this folder including the message count. this dialog is a listener on this particular folder. a message is added to an nsimapmailfolder containing 4 messages. because the number of messages in the folder have increased, this change in total message count needs to be broadcast to the world. the folder calls notifyintpropertychanged on itself with the atom that represents "totalmessages": this->notifyintpropertychanged(ktotalmessagesatom, 4, 5);. notifypropertychanged broadcasts this event to each its nsifolderlisteners by calling onitemintpropertychanged on each listener: listener->onintpropertychanged(this, ktotalmessagesatom, 4, 5); the dialog is one of these folder-specific listeners. in its implementation of onintpropertychanged, it uses this information ...
...And 3 more matches

Aggregate view - Firefox Developer Tools
nt or window strings: listed as "strings" javascript sources: listed as "jsscript" internal objects: such as "js::shape". these are prefixed with "js::". each type gets a row in the table, and rows are ordered by the amount of memory occupied by objects of that type. for example, in the screenshot above you can see that javascript objects account for most memory, followed by strings. the "total count" column shows you the number of objects of each category that are currently allocated. the "total bytes" column shows you the number of bytes occupied by objects in each category, and that number as a percentage of the whole heap size for that tab. the screenshots in this section are taken from a snapshot of the monster example page. for example, in the screenshot above, you can see t...
... next to the type's name, there's an icon that contains three stars arranged in a triangle: click this to see every instance of that type. for example, the entry for array tells us that there are four array objects in the snapshot. ...
...gle: click this to see every instance of that type. for example, the entry for array tells us that there are four array objects in the snapshot. if we click the star-triangle, we'll see all four array instances: for each instance, you can see the retained size and shallow size of that instance. in this case, you can see that the first three arrays have a fairly large shallow size (5% of the total heap usage) and a much larger retained size (26% of the total). on the right-hand side is a pane that just says "select an item to view its retaining paths". if you select an item, you'll see the retaining paths panel for that item: call stack the call stack shows you exactly where in your code you are making heap allocations. because tracing allocations has a runtime cost, it must be e...
...And 3 more matches

PaymentRequest.PaymentRequest() - Web APIs
ect that provides optional information that might be needed by the supported payment methods. this has to conform to the type expected by the payment handler indicated by supportedmethods. for basic credit card services, this structure should match the basiccardrequest dictionary. details provides information about the requested transaction. this parameter contains the following fields: total the total amount of the payment request. id optional a free-form identifier for this payment request. if a value is not supplied, the browser will construct one. displayitems an array of optional line items for the payment request that the user agent may display, such as product details, tax, and shipping. shippingoptions the shipping options the user may choose from. if this sequen...
...yment request that the user agent may display, such as product details, tax, and shipping. shippingoptions the shipping options the user may choose from. if this sequence is blank, it indicates the merchant cannot ship to the current shipping address. the default shipping option may be indicated in this sequence. modifiers modifiers for specific payment methods; for example, adjusting the total amount based on the payment method. this parameter contains the following fields: additionaldisplayitems an array of items to be appended to the details.displayitems property. this property is commonly used to add a discount or surcharge line item indicating the different amount in details.modifiers.total. data a json-serializable object that provides optional information that migh...
...this is typically used when details.modifiers.additionalitems adds a discount or a surchase to the request. ...
...And 3 more matches

mozIStorageAggregateFunction
t this is the return value of the function. sample code both of the following code samples assume that the variable dbconn is an opened mozistorageconnection. javascript // first, create our object that will represent our function. ...
...assume that the variable dbconn is an opened mozistorageconnection. javascript // first, create our object that will represent our function. var standarddeviationfunc = { _numbers: [], onstep: function(aarguments) { this._numbers.push(aarguments.getint32(0)); }, onfinal: function() { let total = 0; let ilength = this._numbers.length; this._numbers.foreach(function(elt) { total += elt }); let mean = total / this._numbers.length; let data = this._numbers.map(function(elt) { let value = elt - mean; return value * value; }); total = 0; data.foreach(function(elt) { total += elt }); this._numbers = []; return math.sqrt(total / ilength); } }; // now, register our function with the database connection. dbconn.createaggregatefunction("...
... c++ // first, create our class that will represent our function. ...
...And 2 more matches

Mail composition back end
onstartsending the onstartsending interface is called when the sending operation has begun. this is called after messages creation has completed. if message creation fails, the nsimsgsend operation will return an ns_failed() return code. 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. ns_imethod onprogress(const char *amsgid, - the message id for the message being sent pruint32 aprogress, - the progress so far pruint32 aprogressmax) = 0; - the maximum progress (aprogres...
...rlistener *alistener) = 0; sending unsent messages listener the nsimsgsendlaterlistener interface will notify the implementor of the progress and completion of the send later operations. createandsendmessage the onstartsending interface is called when the send later operation has begun. ...
... sending unsent messages listener the nsimsgsendlaterlistener interface will notify the implementor of the progress and completion of the send later operations. createandsendmessage the onstartsending interface is called when the send later operation has begun. ...
...And 2 more matches

Tutorial: Show Allocations Per Call Path - Firefox Developer Tools
re new, and firefox doesn't yet understand that they // are safe for chrome code to use, so we must tell it // so explicitly. ...
... // so explicitly. site = components.utils.waivexrays(site.frame); if (!counts.has(site)) counts.set(site, 0); counts.set(site, counts.get(site) + 1); } // walk from each site that allocated something up to the // root, computing allocation totals that include // children. remember that 'null' is a valid site, // representing the root. var totals = new map; for (let [site, count] of counts) { for(;;) { if (!totals.has(site)) totals.set(site, 0); totals.set(site, totals.get(site) + count); if (!site) break; site = site.parent; } } // compute parent-to-child links, since saved stack frames // have only parent links. var rootchildren = new map; function...
...rent-to-child links, since saved stack frames // have only parent links. var rootchildren = new map; function childmapfor(site) { if (!site) return rootchildren; let parentmap = childmapfor(site.parent); if (parentmap.has(site)) return parentmap.get(site); var m = new map; parentmap.set(site, m); return m; } for (let [site, total] of totals) { childmapfor(site); } // print the allocation count for |site|. print // |children|'s entries as |site|'s child nodes. indent // the whole thing by |indent|. function walk(site, children, indent) { var name, place; if (site) { name = site.functiondisplayname; place = ' ' + site.source + ':' + site.line + ':' + site.column; ...
...And 2 more matches

Allocations - Firefox Developer Tools
view the allocations view looks something like this: the allocations view periodically samples allocations that are made over the recording. each row represents a function in which at least one allocation-sample was taken during the recording. ...
...ew looks something like this: the allocations view periodically samples allocations that are made over the recording. each row represents a function in which at least one allocation-sample was taken during the recording. ...
...recording. each row represents a function in which at least one allocation-sample was taken during the recording. it includes the following columns: self count: the number of allocation-samples that were taken in this function (also shown as a percentage of the total) self bytes: the total number of bytes allocated in the allocation-samples in this function (also shown as a percentage of the total) rows are sorted by the "self bytes" column. so in the example above: 8904 samples were taken in signallater(), which is 28.57% of the total number of samples taken those samples allocated 1102888 bytes, which is 30.01% of the total memory allocated in all samples next to each function name is a disclosure arrow. click this to see the places this function was called from: here you can...
...And 2 more matches

Using the Payment Request API - Web APIs
equest always starts with the creation of a new paymentrequest object — using the paymentrequest() constructor. this takes two mandatory parameters and one option parameter: methoddata — an object containing information concerning the payment provider, such as what payment methods are supported, etc. details — an object containing information concerning the specific payment, such as the total payment amount, tax, shipping cost, etc. options (optional) — an object containing addtional options related to the payment. so for example, you could create a new paymentrequest instance like so: var request = new paymentrequest(buildsupportedpaymentmethoddata(), buildshoppingcartdetails()); the functions invoked inside the constructor simply return the re...
...this returns a promise that fulfills with a paymentresponse object if the payment is successful: request.show().then(function(paymentresponse) { // he...
...this returns a promise that fulfills with a paymentresponse object if the payment is successful: request.show().then(function(paymentresponse) { // here we would process the...
...And 2 more matches

RTCOutboundRtpStreamStats - Web APIs
stream being sent by an rtcrtpsender. properties the rtcoutboundrtpstreamstats dictionary includes the following properties in addition to those it inherits from rtcsentrtpstreamstats, rtcrtpstreamstats, and rtcstats. averagertcpinterval a floating-point value indicating the average rtcp interval between two consecutive compound rtcp packets. fircount an integer value which indicates the total number of full intra request (fir) packets which this rtcrtpsender has sent to the remote rtcrtpreceiver. this is an indicator of how often the stream has lagged, requiring frames to be skipped in order to catch up. valid only for video streams. framesencoded the number of frames that have been successfully encoded so far for sending on this rtp stream. only valid for video streams. lastpacket...
... of frames that have been successfully encoded so far for sending on this rtp stream. only valid for video streams. lastpacketsenttimestamp a domhighrestimestamp indicating the time at which the last packet was sent for this ssrc. the timestamp property, on the other hand, indicates the time at which the rtcoutboundrtpstreamstats object was generated. nackcount an integer value indicating the total number of negative acknolwedgement (nack) packets this rtcrtpsender has received from the remote rtcrtpreceiver. perdscppacketssent a record of key-value pairs with strings as the keys mapped to 32-bit integer values, each indicating the total number of packets this rtcrtpsender has transmitted for this source for each differentiated services code point (dscp). plicount an integer specifying ...
...lue from the rtcqualitylimitationreason enumerated type explaining why the resolution and/or frame rate is being limited for this rtp stream. valid only for video streams. remoteid a string which identifies the rtcremoteinboundrtpstreamstats object that provides statistics for the remote peer for this same ssrc. this id is stable across multiple calls to getstats(). retransmittedbytessent the total number of bytes that have been retransmitted for this source as of the time the statistics were sampled. these retransmitted bytes comprise the packets included in the value returned by retransmittedpacketssent. retransmittedpacketssent the total number of packets that have needed to be retransmitted for this source as of the time the statistics were sampled. these retransmitted packets are inc...
...And 2 more matches

Using IIR filters - Web APIs
let's draw a frequency plot of the filter we've created with the data we get back from this method. we need to create three arrays. one of frequency values for which we want to receive the magnitude response and phase response for, and two empty arrays to receive the data. all three of these have to be of type float32array and all be of the same size. ...
...the data we get back from this method. we need to create three arrays. one of frequency values for which we want to receive the magnitude response and phase response for, and two empty arrays to receive the data. all three of these have to be of type float32array and all be of the same size. ...
...hree arrays. one of frequency values for which we want to receive the magnitude response and phase response for, and two empty arrays to receive the data. all three of these have to be of type float32array and all be of the same size. ...
...And 2 more matches

Controlling Ratios of Flex Items Along the Main Axis - CSS: Cascading Style Sheets
s each 100 pixels wide, then i have 200 pixels of positive free space, which could be distributed between the items if i wanted them to fill the container. we have negative free space when the natural size of the items adds up to larger than the available space in the flex container. if i have a 500 pixel-wide container like the one above, but the three flex items are each 200 pixels wide, the total space i need will be 600 pixels, so i have 100 pixels of negative free space. this could be removed from the items in order to make them fit the container. it is this distribution of positive free space and removal of negative free space that we need to understand in order to understand the flex properties. in the following examples i am working with flex-direction set to row, therefore the s...
...them fit the container. it is this distribution of positive free space and removal of negative free space that we need to understand in order to understand the flex properties. in the following examples i am working with flex-direction set to row, therefore the size of items will always come from their width. we will be calculating the positive and negative free space created by comparing the total width of all the items with the container width. you could equally try out each example with flex-direction: column. the main axis would then be the column, and you would then need to compare the height of the items and that of the container they are in to work out the positive and negative free space. the flex-basis property the flex-basis property specifies the initial size of the flex item b...
...sis value is auto and the items don’t have a width set, and so are auto-sized. this means that flexbox is looking at the max-content size of the items. after laying the items out we have some positive free space in the flex container, shown in this image as the hatched area: we are working with a flex-basis equal to the content size so the available space to distribute is subtracted from the total available space (the width of the flex container), and the leftover space is then shared out equally among each item. our bigger item ends up bigger because it started from a bigger size, even though it has the same amount of spare space assigned to it as the others: if what you actually want is three equally-sized items, even if they start out at different sizes, you should use this: flex: 1...
...And 2 more matches

box-sizing - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. by default in the css box model, the width and height you assign to an element is applied only to the element's content box. if the element has any border or padding, this is then added to the width and height to arrive at the size of the box that's rendered on the screen. this means that when you set width and height, you have to adjust the value you give to allow for any border or padding that may be added. ...
... with content-box and border-box this example shows how different box-sizing values alter the rendered size of two otherwise identical elements. ...
...different box-sizing values alter the rendered size of two otherwise identical elements. ...
...And 2 more matches

Downloading Files - Archive of obsolete content
hat the url // we are downloading comes from. if, and only if, the url is not // related to a window, null should be used instead. ...
...re downloading comes from. if, and only if, the url is not // related to a window, null should be used instead. ...
...// related to a window, null should be used instead. ...
...ow, null should be used instead. ...

Index - Archive of obsolete content
r as the stream listener to give the data to). 445 documentation for bidi mozilla developing mozilla, internationalization this is preliminary documentation of the changes introduced to mozilla as part of the bidi support contributed by ibm (a.k.a. ibmbidi), written by simon montagu and posted to the mozilla-layout mailing list. while it was published in 2001 and might not be totally accurate, it does help understanding the internals of the bidi code. 446 downloading nightly or trunk builds needsupdate, qa there are some terms that are used by the mozilla community. one sees them on irc or in bugs. it can be helpful to know exactly what these refer to. note that this is an attempt at describing the current usage of these terms. this usage may change. ...
...imple, ini-style text file that specifies some parameters about a webapp. the profile can be used to launch the webapp in prism. the parameters also control some of the features of the prism host window. here is the list of parameters: 614 extensions prism has support for extensions. extensions are built using the same methods as any mozilla-based extension. since prism is a totally separate host application, there are some prism-specific issues that you need to handle when creating your extension. most notably, the prism application id and the differences in the user interface (ui). extensions typically overlay the host application's ui to add toolbar buttons, menus and other features. one of prism's features is an extreme lack of ui elements, which means that trying to u...
... xul reference clicktoscroll, if true, the arrows must be clicked to scroll the scrollbox content. 1822 assign xul elements, xul reference for xml templates, specifies an additional variable to assign a value to. 1823 attribute.align the align attribute specifies how child elements of the box are aligned, when the size of the box is larger than the total size of the children. for boxes that have horizontal orientation, it specifies how its children will be aligned vertically. for boxes that have vertical orientation, it is used to specify how its children are algined horizontally. the pack attribute is related to the alignment but is used to specify the position in the opposite direction. you can also specify the value of align using the style pr...
...df add-ons, themes copy the following text and paste it into a text file, then save that file as "install.rdf": 3787 making sure your theme works with rtl locales add-ons, right-to-left, themes some languages are written from right to left. of the languages firefox and thunderbird are shipped in, that includes arabic and hebrew, with persian available as beta, for a total population in excess of 100 million potential users. the important thing to understand about these locales, is that the entire interface is mirrored right-to-left. that means that text that had a left margin will have a right margin instead (or -moz-margin-start), arrows that pointed right will have to point left and vice versa, and so on. 3788 theme changes in firefox 2 add-ons, t...

XUL element attributes - Archive of obsolete content
« xul reference home the following attributes are common to all xul elements: align type: one of the values below the align attribute specifies how child elements of the box are aligned, when the size of the box is larger than the total size of the children. for boxes that have horizontal orientation, it specifies how its children will be aligned vertically. for boxes that have vertical orientation, it specifies how its children will be aligned horizontally. start child elements are aligned starting from the left or top edge of the box. if the box is larger than the total size of the children, the extra space is placed on the right or bottom side. center extra space i...
... baseline this value applies to horizontally oriented boxes only. it causes the child elements to be aligned so that their text labels are lined up. stretch this is the default value. the child elements are stretched to fit the size of the box. ...
...ion of children horizontally. for boxes with vertical orientation, it is used to indicate the position of children vertically. the align attribute is used to specify the position in the opposite direction. you can also specify the value of pack using the style property -moz-box-pack. start child elements are placed starting from the left or top edge of the box. ...
... persist type: space-separated list of attribute names a space-separated list of attributes that are maintained when the window is closed. when the window is re-opened, the values of persistent attributes are restored. ...

DMD
e. the presence of any such records indicates bugs in one or more memory reporters. "unreported stack trace records". this tells you which heap blocks were not reported, which indicate where additional memory reporters would be most helpful. "once-reported stack trace records": like the "unreported stack trace records" section, but for blocks reported once. "summary": gives measurements of the total heap, and the unreported/once-reported/twice-reported portions of it. the "twice-reported stack trace records" and "unreported stack trace records" sections are the most important, because they indicate ways in which the memory reporters can be improved. here's an example stack trace record from the "unreported stack trace records" section. unreported { 150 blocks in heap block record 283 o...
...ontentsink.cpp:1007) } } it tells you that there were 150 heap blocks that were allocated from the program point indicated by the "allocated at" stack trace, that these blocks took up 21,600 bytes, that all 150 blocks had a size of 144 bytes, and that 1,200 of those bytes were "slop" (wasted space caused by the heap allocator rounding up request sizes). it also indicates what percentage of the total heap size and the unreported portion of the heap these blocks represent. within each section, records are listed from largest to smallest. once-reported and twice-reported stack trace records also have stack traces for the report point(s). for example: reported at { #01: mozilla::dmd::report(void const*) (/home/njn/moz/mi2/memory/replace/dmd/dmd.cpp:1740) 0x7f68652581ca #02: cyclecollector...
...e for all blocks is controlled by an option (see below). "live" mode output for "live" mode, dmd.py's output describes what live heap blocks are present. this output is broken into multiple sections. "invocation". this tells you how dmd was invoked, i.e. what options were used. "live stack trace records". this tells you which heap blocks were present. "summary": gives measurements of the total heap. the individual records are similar to those output in "dark matter" mode. "cumulative" mode output for "cumulative" mode, dmd.py's output describes how the live heap blocks are covered by memory reports. this output is broken into multiple sections. "invocation". this tells you how dmd was invoked, i.e. what options were used. "cumulative stack trace records". this tells you which h...
..."cumulative" mode output for "cumulative" mode, dmd.py's output describes how the live heap blocks are covered by memory reports. this output is broken into multiple sections. "invocation". this tells you how dmd was invoked, i.e. what options were used. "cumulative stack trace records". this tells you which heap blocks were allocated during the session. "summary": gives measurements of the total (cumulative) heap. the individual records are similar to those output in "dark matter" mode. "scan" mode output for "scan" mode, the output of dmd.py is the same as "live" mode. a separate script, block_analyzer.py, can be used to find out information about which blocks refer to a particular block. dmd.py --clamp-contents needs to be run on the log first. see this other page for an overview o...

JS::PerfMeasurement
at occur while code of interest is running; it does not do call traces or sampling. ...
... the current implementation can measure eleven different types of low-level hardware and software events: events that can be measured bitmask passed to constructor counter variable what it measures perfmeasurement::cpu_cycles .cpu_cycles raw cpu clock cycles ::instructions .instructions total instructions executed ::cache_references .cache_references total number of memory accesses ::cache_misses .cache_misses memory accesses that missed the cache ::branch_instructions .branch_instructions branch instructions executed ::branch_misses .branch_misses branch instructions that were not predicted correctly ::bus_cycles .bus_cycles total memory bus cycles ::page_...
...sses ::cache_misses .cache_misses memory accesses that missed the cache ::branch_instructions .branch_instructions branch instructions executed ::branch_misses .branch_misses branch instructions that were not predicted correctly ::bus_cycles .bus_cycles total memory bus cycles ::page_faults .page_faults total page-fault exceptions fielded by the os ::major_page_faults .major_page_faults page faults that required disk access ::context_switches .context_switches context switches involving the profiled thread ::cpu_migrations .cpu_migrations migrations of the profiled thread from one cpu core to another these events map directly to "generic even...
...is the complete c++-level api: perfmeasurement::eventmask this is an enumeration defining all of the bit mask values in the above table. you bitwise-or the ones you want together and pass them to the constructor. perfmeasurement::all in a constructor call, this special value means "measure everything that can possibly be measured." perfmeasurement::num_measurable_events this constant equals the total number of events defined by the api - not necessarily the total number of events that a particular os allows you to measure. (at time of writing, linux allows all the above events to be measured, and we don't have back ends for any other operating system. static bool perfmeasurement::canmeasuresomething() this class method returns true if and only if some -- not necessarily all -- events can be ...

NSS Code Coverage
link points to annotated source file (in tcov directory), otherwise to original source file (cvs directory). colors green: 70-100% of blocks tested. yellow: 40-70% of blocks tested. orange: 0-40% of blocks tested. red: file not tested. file is not part of any binary or library used by test suite. ...
...rectory). colors green: 70-100% of blocks tested. yellow: 40-70% of blocks tested. orange: 0-40% of blocks tested. red: file not tested. file is not part of any binary or library used by test suite. numbers in tested files example: 72.69% (165/227/731) 72.69% - ratio of tested blocks and total blocks in file (generated by tcov). 165 - tested blocks in file (generated by tcov). 227 - total blocks in file (generated by tcov). 31 - total lines in file (by wc -l command). numbers in not tested files example: not tested (0/?/878). 0 - tested blocks in file (always 0). ? - total blocks in file (there is no trivial method to get this number without tcov). 878 - total lines in file (by wc -l command). numbers in total count example: total: 42% (574/1351). 42% - ratio of tes...
... (generated by tcov). 31 - total lines in file (by wc -l command). numbers in not tested files example: not tested (0/?/878). 0 - tested blocks in file (always 0). ? ...
...t tested (0/?/878). 0 - tested blocks in file (always 0). ? - total blocks in file (there is no trivial method to get this number without tcov). 878 - total lines in file (by wc -l command). numbers in total count example: total: 42% (574/1351). 42% - ratio of tested blocks and total blocks in file. 165 - tested blocks in all files in directory (sum of numbers generated by tcov). 227 - total blocks in all files in directory (sum of numbers generated by tcov). these numbers doesn't count blocks in files which are not tested (marked with red color), because we don't know number of blocks there. total count at the end of report counts blocks in all tested files in all directories. ...

Call Tree - Firefox Developer Tools
the call tree presents the results in a table. each row represents a function in which at least one sample was taken, and the rows are ordered by the number of samples taken while in that function, highest to lowest. samples is the number of samples that were taken when we were executing this particular function, including its children (the other functions called by this particular function). total time is that number translated into milliseconds, based on the total amount of time covered by the selected portion of the recording. these numbers should roughly be the same as the number of samples. total cost is that number as a percentage of the total number of samples in the selected portion of the recording. self time is calculated as the time spent in that particular function, excluding ...
... in the current version of the call tree, these are the most important columns. functions with a relatively high self cost are good candidates for optimization, either because they take a long time to run, or because they are called very often. ...
...e swap(). but swap() was reached by two different paths: both bubblesort() and selectionsort() use it. we can also see that 252 of the 253 samples in swap() were taken in the bubblesort() branch, and only one in the selectionsort() branch. this result means that bubble sort is even less efficient than we had thought! it can shoulder the blame for another 252 samples, or almost another 10% of the total cost. with this kind of digging, we can figure out the whole call graph, with associated sample count: sortall() // 8 -> sort() // 37 -> bubblesort() // 1345 -> swap() // 252 -> selectionsort() // 190 -> swap() // 1 -> quicksort() //...
...resent internal browser calls. this can be useful information too. if your site is making the browser work hard, this might not show up as samples recorded in your code, but it is still your problem. in our example, there are 679 samples assigned to gecko - the second-largest group after bubblesort(). let's expand that: this result is telling us that 614 of those samples, or about 20% of the total cost, are coming from our sort() call. if we look at the code for sort(), it should be fairly obvious that the high platform data cost is coming from repeated calls to console.log(): function sort(unsorted) { console.log(bubblesort(unsorted)); console.log(selectionsort(unsorted)); console.log(quicksort(unsorted)); } it would certainly be worthwhile considering more efficient ways of imple...

PaymentRequest: shippingoptionchange event - Web APIs
of available options. the string identifying the currently-selected shipping option can be found in the shippingoption property. bubbles no cancelable no interface paymentrequestupdateevent event handler property onshippingoptionchange examples this code snippet sets up a handler for the shippingoptionchange event. the code recalculates the total charge for the payment based on the selected shipping option. for example, if there are three options (such as "free ground shipping", "2-day air", and "next day"), each time the user chooses one of those options, this event handler is called to recalculate the total based on the changed shipping option. paymentrequest.addeventlistener("shippingoptionchange", event => { const value = calculate...
...arge for the payment based on the selected shipping option. for example, if there are three options (such as "free ground shipping", "2-day air", and "next day"), each time the user chooses one of those options, this event handler is called to recalculate the total based on the changed shipping option. ...
...pping option. for example, if there are three options (such as "free ground shipping", "2-day air", and "next day"), each time the user chooses one of those options, this event handler is called to recalculate the total based on the changed shipping option. paymentrequest.addeventlistener("shippingoptionchange", event => { const value = calculatenewtotal(paymentrequest.shippingoption); const total = { currency: "eur", label: "total due", value, }; event.updatewith({ total }); }, false); after caling a custom function, calculatenewtotal(), to compute the updated total based on the newly-selected shipping option as specified by the shippingoption. the revised total is submitted back to the payment request by calling the event's updatewith() method. you can also create an e...
...l based on the newly-selected shipping option as specified by the shippingoption. the revised total is submitted back to the payment request by calling the event's updatewith() method. you can also create an event handler for shippingoptionchange using its corresponding event handler property, onshippingoptionchange: paymentrequest.onshippingoptionchange = event => { const value = calculatenewtotal(paymentrequest.shippingoption); const total = { currency: "eur", label: "total due", value, }; event.updatewith({ total }); }; specifications specification status comment payment request apithe definition of 'shippingoptionchange' in that specification. candidate recommendation initial definition. ...

PaymentRequest.show() - Web APIs
he selected payment method // paymentresponse.details contains a payment method specific response await response.complete("success"); } catch (err) { console.error("uh oh, something bad happened", err.message); } } the following example shows how to update the payment sheet as it's being presented to the end-user. async function requestpayment() { // we start with au$0 as the total. ...
...entresponse.details contains a payment method specific response await response.complete("success"); } catch (err) { console.error("uh oh, something bad happened", err.message); } } the following example shows how to update the payment sheet as it's being presented to the end-user. async function requestpayment() { // we start with au$0 as the total. ...
...tains a payment method specific response await response.complete("success"); } catch (err) { console.error("uh oh, something bad happened", err.message); } } the following example shows how to update the payment sheet as it's being presented to the end-user. async function requestpayment() { // we start with au$0 as the total. ...
...t() { // we start with au$0 as the total. const initialdetails = { total: { label: "total", amount: { value: "0", currency: "aud" }, }, }; const request = new paymentrequest(methods, initialdetails, options); // check if the the user supports the `methods` if (!await request.canmakepayment()) { return; // no, so use a web form instead. } // let's update the total as the sheet is shown const updateddetails = { total: { label: "total", amount: { value: "20", currency: "aud" }, }, }; const response = await request.show(updateddetails); // check response, etc... } document.getelementbyid("buybutton").onclick = requestpayment; specifications specification status comment payment request apithe definition of...

RTCInboundRtpStreamStats - Web APIs
eceiving end of an rtp stream on the local end of the rtcpeerconnection. properties the rtcinboundrtpstreamstats dictionary is based on the rtcreceivedrtpstreamstats dictionary, whose properties are also available. averagertcpinterval a floating-point value indicating the average rtcp interval between two consecutive compound rtcp packets. bytesreceived a 64-bit integer which indicats the total numer of bytes that have been received so far for this media source. fecpacketsdiscarded an integer value indicating the number of rtp forward error correction (fec) packets which have been received for this source, for which the error correction payload was discarded. fecpacketsreceived an integer value indicating the total number of rtp fec packets received for this source. this counter may...
...) packets which have been received for this source, for which the error correction payload was discarded. fecpacketsreceived an integer value indicating the total number of rtp fec packets received for this source. this counter may also be incremented when fec packets arrive in-band along with media content; this can happen with opus, for example. fircount an integer value which indicates the total number of full intra request (fir) packets which this receiver has sent to the sender. this is an indicator of how often the stream has lagged, requiring frames to be skipped in order to catch up. this value is only available for video streams. framesdecoded a long integer value indicating the total number of frames of video which have been correctly decoded so far for this media source. this i...
...a source. this is the number of frames that would have been rendered if none were dropped. only valid for video streams. lastpacketreceivedtimestamp a domhighrestimestamp indicating the time at which the last packet was received for this source. the timestamp property, on the other hand, indicates the time at which the statistics object was generated. nackcount an integer value indicating the total number of negative acknolwedgement (nack) packets this receiver has sent. packetsduplicated an integer value indicating the total number of packets that have been discarded because they were duplicates. these packets are not counted by packetsdiscarded. packetsfaileddecryption an integer totaling the number of rtp packets that could not be decrypted. these packets are not counted by packetsdi...
...of packets that have been discarded because they were duplicates. these packets are not counted by packetsdiscarded. packetsfaileddecryption an integer totaling the number of rtp packets that could not be decrypted. these packets are not counted by packetsdiscarded. perdscppacketsreceived a record of key-value pairs with strings as the keys mapped to 32-bit integer values, each indicating the total number of packets this receiver has received on this rtp stream from this source for each differentiated services code point (dscp). plicount an integer specifying the number of times the receiver has notified the sender that some amount of encoded video data for one or more frames has been lost, using picture loss indication (pli) packets. this is only available for video streams. qpsum a 64...

Using XMLHttpRequest - Web APIs
addeventlistener("progress", updateprogress); oreq.addeventlistener("load", transfercomplete); oreq.addeventlistener("error", transferfailed); oreq.addeventlistener("abort", transfercanceled); oreq.open(); // ... ...
...e); oreq.addeventlistener("error", transferfailed); oreq.addeventlistener("abort", transfercanceled); oreq.open(); // ... // progress on transfers from the server to the client (downloads) function updateprogress (oevent) { if (oevent.lengthcomputable) { var percentcomplete = oevent.loaded / oevent.total * 100; // ... ...
...the transfer has been canceled by the user."); } lines 3-6 add event listeners for the various events that are sent while performing a data transfer using xmlhttprequest. note: you need to add the event listeners before calling open() on the request. otherwise the progress events will not fire. the progress event handler, specified by the updateprogress() function in this example, receives the total number of bytes to transfer as well as the number of bytes transferred so far in the event's total and loaded fields. however, if the lengthcomputable field is false, the total length is not known and will be zero. progress events exist for both download and upload transfers. the download events are fired on the xmlhttprequest object itself, as shown in the above sample. the upload events are fi...
...*/ /* dosomething(odata); */ /* console.log("ajaxsubmit - the form is now serialized. submitting..."); */ submitdata (odata); } function pushsegment (ofrevt) { this.owner.segments[this.segmentidx] += ofrevt.target.result + "\r\n"; this.owner.status--; processstatus(this.owner); } function plainescape (...

pathLength - SVG: Scalable Vector Graphics
this value is then used to calibrate the browser's distance calculations with those of the author, by scaling all distance computations using the ratio pathlength/(computed value of path length). this can affect the actual rendered lengths of paths; including text paths, animation paths, and various stroke operations. basically, all computations that require the length of the path. stroke-dasharray, for example, will assume the start of the path being 0 and the end point the value defined in the pathlength attribute. ...
...ke if the path length was 50 user units long --> <path d="m 0,30 h100" pathlength="50"/> <!-- compute everything like if the path length was 30 user units long --> <path d="m 0,40 h100" pathlength="30"/> <!-- compute everything like if the path length was 10 user units long --> <path d="m 0,50 h100" pathlength="10"/> </svg> circle for <circle>, pathlength lets authors specify a total length for the circle, in user units. value <number> default value none animatable yes ellipse for <ellipse>, pathlength lets authors specify a total length for the ellipse, in user units. value <number> default value none animatable yes line for <line>, pathlength lets authors specify a total length for the...
...lets authors specify a total length for the ellipse, in user units. value <number> default value none animatable yes line for <line>, pathlength lets authors specify a total length for the line, in user units. value <number> default value none animatable yes path for <path>, pathlength lets authors specify a total length for the path, in user units. value <number> default value none animatable yes polygon for <polygon>, pathlength lets authors specify a total length for the shape, in user units. ...
... specify a total length for the path, in user units. value <number> default value none animatable yes polygon for <polygon>, pathlength lets authors specify a total length for the shape, in user units. value <number> default value none animatable yes polyline for <polyline>, pathlength lets authors specify a total length for the shape, in user units. value <number> default value none animatable yes rect for <rect>, pathlength lets authors specify a total length for the rectangle, in user units. value <number> default value none animatable yes specification specification status comment scala...

An Interview With Douglas Bowman of Wired News - Archive of obsolete content
raphy, navigation, and others. so i'm very familiar with standards and the benefits of using them. with the wired news design process, the scenario was reversed. as i was designing the product, i began discovering a broader set of web standards, and was quickly swayed by the advantages i could see if we were to adopt them. it was a no-brainer to us that wired news was a perfect candidate for the total conversion to xhtml and css. the content of the site tells the story of how technology affects our daily lives, especially in the realms of business, culture, and politics. why not attempt to use technology standards for the web to live out that story? the visual design of wired news and the vignette templates were all sorely stale, and we had no significant effort invested into either for more t...
...d a critical role in our team's willingness to try out something completely new. our engineering team actually needed the least convincing to convert over to a standards-based design, because they could also immediately envision the benefits to their workload and maintenance of the site. how is the site styled now that you've ripped out all the html-based presentation? technically, there are 13 total stylesheets used at any one time. the breakdown: 1 master screen media file which imports 4 files: a base file (bulk of formatting) a file for finance/table formatting color file (override colors and background images for specific color scheme) temp file (used for styles associated with temporary features and ad-related pages) 1 print media file 1 aural media file 3 mast...
...left or right column for primary navigation, this content order requirement of float usage may produce desired and advantageous behavior. i also found a lot of trouble ensuring a consistent vertical start position of columns using floats. two column layouts using floats seemed easy. but adding a third column to the mix created too many width variables for some browsers to dynamically calculate a total. resizing the browser window often resulted in one column getting pushed to the bottom of another. using absolute positioning for left and right columns allowed the markup for each column to fall in any order. there are some technicalities in the order of our markup and some ad units that would require too much to cover here. but positioning did allow the center column to fall first in the marku...

Space Manager Detailed Design - Archive of obsolete content
| +-----+ // +-----+ +-----+ // +-----+ // | r | // +-----+ // first, check for the easiest case, where there are no existing bandrects, or the band rect passed in is below the bottommost rect. in this case,just append the band rect and return. ...
...ing at the head of the list of bandrects, check for intersection with the rect passed in: case #1: the rect is totally above the current band rect, so insert a new band rect before the current bandrect cases #2 and #7: the rect is partially above the band rect, so it is divided into two bandrects, one entirely above the band, and one containing the remainder of the rect. insert the part that is totally above the bandrect before the current bandrect, as in case #1 above, and adjust the other band rect to exclude the part already added. case #5: the rect is totally below the current bandrect, so just skip to the next band case #3 and #4: rect is at least partially intersection with the bandrect, so divide the current band into two parts, where the top part is above the current rect. move to t...
...ent bandrect (similar to case #6) and then move on to the next band, removing that part from the rect passed in. if no more bands, append the rect passed in to the end of the bandrect list. this algorithm is pretty confusing - basically what needs to happen is that rects and bands need to be divided up so that complicated cases like#2, #4, and #7, are reduced to simpler cases where the rects is totally above,below, or between a band rect. from the current implementation, it might be worth verifying that the final result of the inserts is a correctly ordered list of bandrects (debug mode only). algorithm 3: removeregion when a float is removed, the space manager is notified by a call to removeregion,passing in the frame that is being removed. get the frameinfo for the frame passed in. if ...

Multiple Rules - Archive of obsolete content
people with only a single name, as 'cleopatra' in this example, won't match any rule so won't have any content at all generated for it. this is a...
... expression rather than generating the results then using a condition to filter them. rules and conditions are more useful when using multiple rules. we can add multiple where elements if we want to check additional conditions. when multiple conditions are present, they must all match for the rule to apply. adding to the previous example, here we check for people with a space in their name, and a total number of letters less than 15. note the assign element in the example above, used to calculate the '?letters' variable from the length of the name, minus one for the space character. naturally, this won't work for people with more than two names (joan of arc for instance), but rule conditions allow a number of useful ways to filter results. <rule> <where subject="?name" rel="contains" value="...
... from the length of the name, minus one for the space character. naturally, this won't work for people with more than two names (joan of arc for instance), but rule conditions allow a number of useful ways to filter results. <rule> <where subject="?name" rel="contains" value=" "/> <where subject="?letters" rel="less" value="15"/> <action> <label uri="?" value="?name has two names for a total length of ?letters"/> </action> </rule> negating a condition you can reverse a where clause by using the negate attribute. by setting the negate attribute to true, the condition matches only those that don't match the condition, reversing the results that match. for example, these two conditions have the opposite effect. the first matches only results with a ?title of 'canal', and the second...

Enumerator - Archive of obsolete content
methods enumerator.atend r...
... methods enumerator.atend returns a boole...
... methods enumerator.atend returns a boolean value indicating if the enumerator is at the end of the collection. enumerator.item returns the curren...

The box model - Learn web development
nd border as whitespace between this box and other elements. its size can be controlled using margin and related properties. the below diagram shows these layers: the standard css box model in the standard box model, if you give a box a width and a height attribute, this defines the width and height of the content box. any padding and border is then added to that width and height to get the total size taken up by the box. this is shown in the image below. if we assume that the box has the following css defining width, height, margin, border, and padding: .box { width: 350px; height: 150px; margin: 10px; padding: 25px; border: 5px solid black; } the space taken up by our box using the standard box model will actually be 410px (350 + 25 + 25 + 5 + 5), and the height 210px (150...
...ght: 150px; margin: 10px; padding: 25px; border: 5px solid black; } the space taken up by our box using the standard box model will actually be 410px (350 + 25 + 25 + 5 + 5), and the height 210px (150 + 25 + 25 + 5 + 5), as the padding and border are added to the width used for the content box. note: the margin is not counted towards the actual size of the box — sure, it affects the total space that the box will take up on the page, but only the space outside the box. the box's area stops at the border — it does not extend into the margin. the alternative css box model you might think it is rather inconvenient to have to add up the border and padding to get the real size of the box, and you would be right! for this reason, css had an alternative box model introduced some time...
...ment and the containing element. margin collapsing a key thing to understand about margins is the concept of margin collapsing. if you have two elements whose margins touch, and both margins are positive, those margins will combine to become one margin, which is the size of the largest individual margin. if one or both margins are negative, the amount of negative value will subtract from the total. in the example below, we have two paragraphs. the top paragraph has a margin-bottom of 50 pixels. the second paragraph has a margin-top of 30 pixels. the margins have collapsed together so the actual margin between the boxes is 50 pixels and not the total of the two margins. you can test this by setting the margin-top of paragraph two to 0. the visible margin between the two paragraphs will no...

Making asynchronous programming easier with async and await - Learn web development
esolve, reject) => { settimeout(function(){ resolve("done"); }, interval); }); }; then each one includes a timetest() async function that awaits three timeoutpromise() calls: async function timetest() { ... } each one ends by recording a start time, seeing how long the timetest() promise takes to fulfill, then recording an end time and reporting how long the operation took in total: let starttime = date.now(); timetest().then(() => { let finishtime = date.now(); let timetaken = finishtime - starttime; alert("time taken in milliseconds: " + timetaken); }) it is the timetest() function that differs in each case. in the slow-async-await.html example, timetest() looks like this: async function timetest() { await timeoutpromise(3000); await timeoutpromise(3000); ...
...ml example, timetest() looks like this: async function timetest() { await timeoutpromise(3000); await timeoutpromise(3000); await timeoutpromise(3000); } here we simply await all three timeoutpromise() calls directly, making each one alert for 3 seconds. each subsequent one is forced to wait until the last one finished — if you run the first example, you'll see the alert box reporting a total run time of around 9 seconds. in the fast-async-await.html example, timetest() looks like this: async function timetest() { const timeoutpromise1 = timeoutpromise(3000); const timeoutpromise2 = timeoutpromise(3000); const timeoutpromise3 = timeoutpromise(3000); await timeoutpromise1; await timeoutpromise2; await timeoutpromise3; } here we store the three promise objects in variabl...
... await timeoutpromise3; } here we store the three promise objects in variables, which has the effect of setting off their associated processes all running simultaneously. next, we await their results — because the promises all started processing at essentially the same time, the promises will all fulfill at the same time; when you run the second example, you'll see the alert box reporting a total run time of just over 3 seconds! you'll have to test your code carefully, and bear this in mind if performance starts to suffer. another minor inconvenience is that you have to wrap your awaited promises inside an async function. async/await class methods as a final note before we move on, you can even add async in front of class/object methods to make them return promises, and await promises...

Download
the mime type is not available. this property may be populated or changed while the download is in progress, using the mime type provided by the server. currentbytes read only number number of bytes currently transferred. this value starts at zero, and may be updated regardless of the value of hasprogress. note: you shouldn't rely on this property being equal to totalbytes to determine whether the download is completed. you should use the individual state properties instead, since this value may not be updated after the last piece of data is transferred. error read only downloaderror when the download fails, this is set to a downloaderror instance indicating the cause of the failure. if the download has been completed successfully or has b...
...leted successfully, this property is not relevant anymore. whether partial data can actually be retained depends on the saver and the download source, and may not be known before the download is started. hasprogress read only boolean indicates whether this download's progress property is able to report partial progress while the download proceeds, and whether the value in totalbytes is relevant. this depends on the saver and the download source. launchwhensucceeded boolean if this property is true when the download finishes successfully, the target file will be opened or executed automatically. launcherpath string local file path of the application to be used to launch the target file, or null if the file should be launched with the default...
...ever started, has been completed successfully, failed, or has been canceled. this property becomes false when a download is started for the first time, or when a failed or canceled download is restarted. succeeded read only boolean this propery is true if the download has been completed successfully. target read only downloadtarget target of this download. totalbytes read only number when hasprogress is true, this indicates the total number of bytes to be transferred before the download finishes; this value can be zero if the file is empty. note: this property's value may not match the actual final size of the downloaded file if the download is encoded during the network transfer. you can use the downloadtarget.size property to get the a...

tools/power/rapl
kernel version 3.14 or later for rapl to work. otherwise, it will fail with an error message explaining this requirement. windows unfortunately, rapl does not work on windows, and porting it would be difficult because windows does not have apis that allow easy access to the relevant model-specific registers. output the following is 10 seconds of output from a default invocation of rapl. ...
... w #08 5.17 w = 1.76 ( 0.07 + 0.08 + 1.60) + 3.41 w #09 5.17 w = 1.76 ( 0.09 + 0.08 + 1.58) + 3.42 w #10 8.13 w = 4.40 ( 1.55 + 0.11 + 2.74) + 3.73 w things to note include the following. all measurements are in watts. the first line indicates the meaning of each column. the underscores in _pkg_, _gpu_ and _ram_ are present so that each column's name has five characters. the total power is the sum of the package power and the ram power. the package estimate is divided into three parts: cores, gpu, and "other". "other" is computed as the package power minus the cores power and gpu power. if the processor does not support gpu or ram estimates then " n/a " will be printed in the relevant column instead of a number, and it will contribute zero to the total. once sampling i...
...ocessor does not support gpu or ram estimates then " n/a " will be printed in the relevant column instead of a number, and it will contribute zero to the total. once sampling is finished — either because the user interrupted it, or because the requested number of samples has been taken — the following summary data is shown: 10 samples taken over a period of 10.000 seconds distribution of 'total' values: mean = 8.85 w std dev = 3.50 w 0th percentile = 5.17 w (min) 5th percentile = 5.17 w 25th percentile = 5.17 w 50th percentile = 8.13 w 75th percentile = 11.16 w 95th percentile = 14.63 w 100th percentile = 14.63 w (max) the distribution data is omitted if there was zero or one samples taken. options -i --sample-interval. the length of each sample i...

Statistics API
ce://gre/modules/services.jsm'); function observer(subject, topic, json) { var data = json.parse(json); // process the data } prefs.set("javascript.options.mem.notify", true); services.obs.addobserver(observer, "garbage-collection-statistics", false); the toplevel json object contains these fields: timestamp: integer (microseconds) - time at which the gc ended, measured from epoch. total_time: number (milliseconds) - the amount of wall time that this gc consumed. note: this is the sum of all the slice durations, not end time - start time. compartments_collected: integer - the number of compartments that were collected by the gc. compartment_count: integer - the number of compartments that were present in the system at the end of the gc. max_pause: number (milliseconds) - long...
..._reason: string - a string representing the reason that an incremental gc was aborted or forced to finish in a single slice. if the incremental gc completed normally, this will be "none". allocated: integer (mb) - size of the javascript heap in mib at the start of the gc. slices: array of objects - a list of objects describing each slice in detail. times: object - a map from phase names to the total time taken by each phase: the sum of each field of the map from the slices. the last two fields require a bit of elaboration. gc work can be divided into phases, such as marking or sweeping. the division into phases is hierarchical, so a phase can be split into subphases. for example, the sweep phase includes the time for the sweep_atoms, sweep_tables, sweep_compartments phases and so on. the t...
...ative to the first slice's start time. reason: string - a string describing the api that initiated this gc slice. page_faults: integer - number of page faults incurred during the processing of this slice. start_timestamp: integer (microseconds) - time of slice start from epoch. end_timestamp: integer (microseconds) - time of slice end from epoch. times: object - a map from phase names to the total time taken by that phase during this slice. ...

JS_GetGCParameter
uest on this jscontext. key jsgcparamkey specifies which garbage collection parameter to get or set. value uint32_t (js_setgcparameter only) the value to assign to the parameter. ...
...eslice. jsgc_mode_incremental (2) the gc runs all objects are visited in multipleslices. jsgc_mode_zone_incremental (3) the gc runs only the objects that belong to somezones are visited in multipleslices. this does not affect generational gc, see jsgc_max_nursery_bytes jsgc_unused_chunks / "unusedchunks" number of cached empty gc chunks. jsgc_total_chunks / "totalchunks" total number of allocated gc chunks. jsgc_slice_time_budget / "slicetimebudget" max milliseconds to spend in an incremental gc slice. 0 for infinite. jsgc_mark_stack_limit / "markstacklimit" maximum size the gc mark stack can grow to (units: entries). jsgc_high_frequency_time_limit / "highfrequencytimelimit" gcs less than this far apar...
...f the garbage collection. ...

JSDBGAPI
see profiling javascript with shark. js_connectshark js_disconnectshark js_startchudremote js_stopchudremote the following jsnative functions can be used to expose the abo...
...see profiling javascript with shark. js_connectshark js_disconnectshark js_startchudremote js_stopchudremote the following jsnative functions can be used to expose the above four apis to scripts. ...
...see profiling javascript with shark. js_connectshark js_disconnectshark js_startchudremote js_stopchudremote the following jsnative functions can be used to expose the above four apis to scripts. js_connectshark js_...

Frecency algorithm
ces.frecency.thirdbucketcutoff) .... 30 (places.frecency.fourthbucketweight, 90 days bucket size, in places.frecency.fourthbucketcutoff) .... 10 (places.frecency.defaultbucketweight, bucket size in places.frecency.defaultbucketcutoff) .. ...
... developer notes there are various development notes you can read about places that may offer additional insights: initial algorithm ideas implementation notes history the initial algorithm design was by mike connor and seth spitzer. the initial implementation ...
... +84 70 * (120/100.0) - second bucket weight and followed-link bonus +14 10 * (140/100.0) - fifth bucket weight and bookmarked bonus +14 10 * (140/100.0) - fifth bucket weight and bookmarked bonus -- 252 (4 * 252 / 4) - final frecency score notes the number of sampled visits is min(10 most recent visits pref, total visit counts). the total visit count includes embedded, undefined, etc visits (does not exclude invalid or embedded visits). developer notes there are various development notes you can read about places that may offer additional insights: initial algorithm ideas implementation notes history the initial algorithm design was by mike connor and seth spitzer. the initial implementation was done by seth and dietr...

IAccessibleTable
st recent row and column values associated with the change and a scope of the entire application is adequate. [propget] hresult modelchange( [out] ia2tablemodelchange modelchange ); parameters modelchange a struct of (type(insert, delete, update), firstrow, lastrow, firstcolumn, lastcolumn). return value s_false if there is nothing to return, [out] value is null. s_ok. ncolumns() returns the total number of columns in table. [propget] hresult ncolumns( [out] long columncount ); parameters columncount number of columns in table (including columns outside the current viewport) return value s_ok. nrows() returns the total number of rows in table. [propget] hresult nrows( [out] long rowcount ); parameters rowcount number of rows in table (including rows outside the current viewport) ...
...umns( [out] long columncount ); parameters columncount number of columns in table (including columns outside the current viewport) return value s_ok. nrows() returns the total number of rows in table. [propget] hresult nrows( [out] long rowcount ); parameters rowcount number of rows in table (including rows outside the current viewport) return value s_ok. nselectedchildren() returns the total number of selected cells. [propget] hresult nselectedchildren( [out] long cellcount ); parameters cellcount number of cells currently selected. return value s_ok. nselectedcolumns() returns the total number of selected columns. [propget] hresult nselectedcolumns( [out] long columncount ); parameters columncount number of columns currently selected. return value s_ok. nselectedrows() ret...
...[propget] hresult nselectedrows( [out] long rowcount ); parameters rowcount number of rows currently selected. return value s_ok. ...

IAccessibleTable2
st recent row and column values associated with the change and a scope of the entire application is adequate. [propget] hresult modelchange( [out] ia2tablemodelchange modelchange ); parameters modelchange a struct of (type(insert, delete, update), firstrow, lastrow, firstcolumn, lastcolumn). return value s_false if there is nothing to return, [out] value is null. s_ok. ncolumns() returns the total number of columns in table. [propget] hresult ncolumns( [out] long columncount ); parameters columncount number of columns in table (including columns outside the current viewport) return value s_ok. nrows() returns the total number of rows in table. [propget] hresult nrows( [out] long rowcount ); parameters rowcount number of rows in table (including rows outside the current viewport) ...
...columns( [out] long columncount ); parameters columncount number of columns in table (including columns outside the current viewport) return value s_ok. nrows() returns the total number of rows in table. [propget] hresult nrows( [out] long rowcount ); parameters rowcount number of rows in table (including rows outside the current viewport) return value s_ok. nselectedcells() returns the total number of selected cells. [propget] hresult nselectedcells( [out] long cellcount ); parameters cellcount number of cells currently selected. return value s_ok. nselectedcolumns() returns the total number of selected columns. [propget] hresult nselectedcolumns( [out] long columncount ); parameters columncount number of columns currently selected. return value s_ok. nselectedrows() return...
...[propget] hresult nselectedrows( [out] long rowcount ); parameters rowcount number of rows currently selected. return value s_ok. ...

nsIAccessibleTable
ns in the table. read only. note: renamed from columns in gecko 1.9.2 columnheader nsiaccessibletable read only. obsolete since gecko 1.9.2 rowcount long the number of rows in the table. read only. note: renamed from rows in gecko 1.9.2 rowheader nsiaccessibletable read only. ...
...read only. ...
...read only. note: renamed from selectedrowscount in gecko 1.9.2 summary astring the summary description for the table. for example, @summary attribute on html:table element. read only. methods return the accessible object at the specified row and column in the table. ...

nsIDOMMozNetworkStatsManager
n the end date, an exception is thrown. exceptions thrown ns_error_invalid_arg the filtering start date is greater than the end date. ns_error_not_implmented both appmanifesturl and servicetype are specified at the same time in the networkstatsgetoptions dictionary. invalidnetwork the network must be in the return of getavailablenetworks. addalarm() install an alarm on a network. when total data usage reaches threshold bytes, a "networkstats-alarm" system message is sent to the application, where the optional parameter data must be a cloneable object. nsidomdomrequest addalarm(in nsisupports network, in long threshold, [optional] in jsval options /* networkstatsalarmoptions */); parameters network the origin of the data. it c...
...ng threshold, [optional] in jsval options /* networkstatsalarmoptions */); parameters network the origin of the data. it can specify wifi, mobile, or null. if null, data measurement from both origins are merged. to know in advance which kind of origin is available, the moznetworkstatsmanager.getavailablenetworks method returns an array of interfaces. threshold the total data usage threshold in bytes. options optional filtering options. networkstatsalarmoptions is a dictionary object providing filtering options. return value an nsidomdomrequest object. if successful, the result field of the domrequest keeps the alarm id. exceptions thrown invalidnetwork the network must be in the return of getavailablenetworks. getallalarms() obtain all alarms for t...
...g getsamples(). it contains the following fields: appmanifesturl a string used to filter network stats by app. servicetype a string used to filter network stats by system service. browsingtrafficonly a boolean set to filter network stats by browsing traffic. if true, return only browsing traffic, which is generated from the mozbrowser iframe element within an app. if false or not set, the total traffic, which is generated from both the mozapp and mozbrowser iframe elements, is returned. for example, this object might be { appmanifesturl : manifesturl }. ...

nsIDownloadProgressListener
void ondownloadstatechange(in short astate, in nsidownload adownload); void onlocationchange(in nsiwebprogress awebprogress, in nsirequest arequest, in nsiuri alocation, in nsidownload adownload); obsolete since gecko 1.9.1 void onprogresschange(in nsiwebprogress awebprogress, in nsirequest arequest, in long long acurselfprogress, in long long amaxselfprogress, in long long acurtotalprogress, in long long amaxtotalprogress, in nsidownload adownload); void onsecuritychange(in nsiwebprogress awebprogress, in nsirequest arequest, in unsigned long astate, in nsidownload adownload); void onstatechange(in nsiwebprogress awebprogress, in nsirequest arequest, in unsigned long astateflags, in nsresult astatus, in nsidownload adownload); void onstatuschange(i...
...r will not be null. alocation the uri of the file being downloaded. adownload the nsidownload object representing the file being downloaded. onprogresschange() called when the download progress level changes for a download. void onprogresschange( in nsiwebprogress awebprogress, in nsirequest arequest, in long long acurselfprogress, in long long amaxselfprogress, in long long acurtotalprogress, in long long amaxtotalprogress, in nsidownload adownload ); parameters awebprogress the nsiwebprogress instance used by the download manager to monitor downloads. arequest the nsichannel that changed state. this parameter will not be null. acurselfprogress the current amount of progress that's been made on the download specified by adownload. amaxselfprogress the value th...
...rs awebprogress the nsiwebprogress instance used by the download manager to monitor downloads. arequest the nsichannel that changed state. this parameter will not be null. acurselfprogress the current amount of progress that's been made on the download specified by adownload. amaxselfprogress the value that the self progress needs to reach to indicate that the download is complete. acurtotalprogress the current amount of progress that's been made on all downloads. amaxtotalprogress the value that the total progress needs to reach to indicate that all downloads are complete. adownload the nsidownload object whose progress is represented by the acurselfprogress and amaxselfprogress parameters. onsecuritychange() called when the level of security being used while downloading cha...

nsIMsgFolder
w,in nsisupportsarray aofflinefolderarray); void emptytrash(in nsimsgwindow amsgwindow, in nsiurllistener alistener); void rename(in astring name, in nsimsgwindow msgwindow); void renamesubfolders( in nsimsgwindow msgwindow, in nsimsgfolder oldfolder); astring generateuniquesubfoldername(in astring prefix,in nsimsgfolder otherfolder); void updatesummarytotals(in boolean force); void summarychanged(); long getnumunread(in boolean deep); long gettotalmessages(in boolean deep); void clearnewmessages(); void clearrequirescleanup(); void setflag(in unsigned long flag); void clearflag(in unsigned long flag); boolean getflag(in unsigned long flag); void toggleflag(in unsigned l...
... nsmsgbiffstate_unknown 2 we dunno whether there is new mail. nsmsgdispositionstate_none -1 nsmsgdispositionstate_replied 0 nsmsgdispositionstate_forwarded 1 allmessagecountnotifications 0 turn notifications on/off for various notification types. currently only supporting allmessagecountnotifications which refers to both total and unread message counts. methods startfolderloading() void startfolderloading(); endfolderloading() void endfolderloading(); updatefolder() get new headers for the database. void updatefolder(nsimsgwindow awindow); getfilterlist() get the filter list on folder's server (or in the case of news, the filter list for this newsgroup). nsimsgfilterlist getfilterlist(nsimsgwind...
...() change the name of the folder void rename(in astring name, in nsimsgwindow msgwindow); renamesubfolders() void renamesubfolders(in nsimsgwindow msgwindow, in nsimsgfolder oldfolder); generateuniquesubfoldername() astring generateuniquesubfoldername(in astring prefix, in nsimsgfolder otherfolder); updatesummarytotals() void updatesummarytotals(in boolean force); summarychanged() void summarychanged(); getnumunread() get the total number of unread messages in this folder, or in all subfolders. long getnumunread(in boolean deep); gettotalmessages() get the total number of messages in this folder, or in all subfolders. long gettotalmessages(in boolean deep); clearnewmessages() clear new statu...

Dominators view - Firefox Developer Tools
, and therefore more than one root. there may be many (often temporary) roots. for example: variables allocated on the stack need to be rooted, or internal caches may need to root their​ elements. any other node that's referenced from two different roots (since in this case, neither root dominates it). each entry displays: the retained size of the node, as bytes and as a percentage of the total the shallow size of the node, as bytes and as a percentage of the total the nodes's name and address in memory. entries are ordered by the amount of memory that they retain. for example: in this screenshot we can see five entries under "gc roots". the first two are call and window objects, and retain about 21% and 8% of the total size of the memory snapshot, respectively. you can also see ...
...shallow size", so almost all of the retained size is in the objects that they dominate. immediately under each gc root, you'll see all the nodes for which this root is the immediate dominator. these nodes are also ordered by their retained size. for example, if we click on the first window object: we can see that this window dominates a css2properties object, whose retained size is 2% of the total snapshot size. again the shallow size is very small: almost all of its retained size is in the nodes that it dominates. by clicking on the disclosure arrow next to the function, we can see those nodes. in this way you can quickly get a sense of which objects retain the most memory in the snapshot. you can use alt + click to expand the whole graph under a node. call stack in the toolbar at the...
...each monster has a relatively small shallow size of 160 bytes. this includes the integer eye- and tentacle-counts. each monster has a bigger retained size, which is accounted for by the string used for the monster's name: all this maps closely to the memory graph we were expecting to see. one thing you migh...

AddressErrors - Web APIs
first, we declare the variables supportedhandlers, which is compatible with paymentmethoddata, and defaultpaymentdetails, which is a paymentdetailsupdate object. ...
...'usd', value: '0.00'}, selected: true } ] }; supportedhandlers describes the supported payment handlers and the details for those. in this example, only the basic card handler is supported, and it's configured to permit both debit and credit cards from visa, master card, american express, and discover. defaultpaymentdetails describes the payment being requested. a description of the total amount being requested (including a label and the currency used), a list of the line items (in this case only one, "original donation amount"), and a list of shipping options available; in this case only one. process the payment the main payment processing code is found in the process() method, up next. let request; function process() { let options = {requestshipping: true}; try { re...
...e "donate now" button so that clicking it starts the payment process. window.addeventlistener("load", function(ev) { document.getelementbyid("pay").addeventlistener("click", process, false); }, false); see addeventlistener() for information about event handlers and how they work. html here's the simple html for this example. <p>donate us $65 to our worthwhile cause and we will send you a totally not-useless gift as a token of our thanks!</p> <button id="pay">donate now</button> result the final product is below. note: if you have content blocking features enabled in your browser, the example may not work inline below. in that case, you can view the example on its own page. specifications specification status comment payment request apithe definition of ...

HTMLVideoElement.getVideoPlaybackQuality() - Web APIs
ideoplaybackquality object containing metrics including how many frames have been lost. the data returned can be used to evaluate the quality of the video stream. syntax videopq = videoelement.getvideoplaybackquality(); return value a videoplaybackquality object providing information about the video element's current playback quality. ...
...tream. syntax videopq = videoelement.getvideoplaybackquality(); return value a videoplaybackquality object providing information about the video element's current playback quality. example this example updates an element to indicate the total number of video frames that have elapsed so far in the playback process. ...
...ment to indicate the total number of video frames that have elapsed so far in the playback process. this value includes any dropped or corrupted frames, so it's not the same as "total number of frames played." var videoelem = document.getelementbyid("my_vid"); var counterelem = document.getelementbyid("counter"); var quality = videoelem.getvideoplaybackquality(); counterelem.innertext = quality.totalvideoframes; specifications specification status comment media playback qualitythe definition of 'htmlvideoelement.getvideoplaybackquality()' in that specification. editor's draft initial definition. ...

Navigation Timing API - Web APIs
level 2, but it is not yet covered here. concepts and usage you can use the navigation timing api to gather performance data on the client side, which you can then transmit to a server using xmlhttprequest or other techniques. this api lets you measure data that was previously difficult to obtain, such as the amount of time needed to unload the previous page, how long domain lookups take, the total time spent executing the window's load handler, and so forth. interfaces performance the window.performance property returns a performance object. while this interface is defined by the high resolution time api, the navigation timing api adds two properties: timing and navigation, of the types below. performancenavigationtiming provides methods and properties to store and retrieve metrics ...
... value of navigation, which contains information explaining the context of the load operation described by this performance instance. ...
...mation explaining the context of the load operation described by this performance instance. the navigation timing api can be used to gather performance data on the client side to be sent to a server via xhr as well as measure data that was very difficult to measure by other means such as time to unload a previous page, domain look up time, window.onload total time, etc. examples calculate the total page load time to compute the total amount of time it took to load the page, you can use the following code: const perfdata = window.performance.timing; const pageloadtime = perfdata.loadeventend - perfdata.navigationstart; this subtracts the time at which navigation began (navigationstart) from the time at which the load event handler returns (loadeventend). this gives you the perceived page...

ProgressEvent.initProgressEvent() - Web APIs
essevent") method. progressevent created that way are untrusted. note: this method has been dropped during the standard process. it has been deprecated and removed from most implementation. do not use it anymore, use the standard constructor, progressevent(), to create a synthetic progressevent syntax progress.initprogressevent(typearg, canbubblearg, cancelablearg, lengthcomputable, loaded, total); parameters typearg is a domstring identifying the specific type of animation event that occurred. the following values are allowed: value meaning loadstart the operation has started. progress the operation still is in progress. error the operation failed and didn't complete. abort the operation was canc...
... was cancelled and didn't complete. load the operation completed. loadend the operation stopped. canbubblearg is a boolean flag indicating if the event can bubble (true) or not (false). cancelablearg is a boolean flag indicating if the event associated action can be avoided (true) or not (false). lengthcomputable is a boolean flag indicating if the total work to be done, and the amount of work already done, by the underlying process is calculable. in other words, it tells if the progress is measurable or not. loaded is an unsigned long long 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. when downloading a resource using http, this o...
...s is calculable. in other words, it tells if the progress is measurable or not. loaded is an unsigned long long 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. when downloading a resource using http, this only represent the part of the content itself, not headers and other overhead. total is an unsigned long long representing the total amount of work that the underlying process is in the progress of performing. when downloading a resource using http, this only represent the content itself, not headers and other overhead. specifications this feature does not exist in any specifications. ...

ProgressEvent - Web APIs
ce" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">progressevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor progressevent() creates a progressevent event with the given parameters. properties also inherits properties from its parent event. progressevent.lengthcomputable read only is a boolean flag indicating if the total work to be done, and the amount of work already done, by the underlying process is calculable. in other words, it tells if the progress is measurable or not. progressevent.loaded read only is an unsigned long long 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. when downloading a re...
...ls if the progress is measurable or not. progressevent.loaded read only is an unsigned long long 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. when downloading a resource using http, this only represent the part of the content itself, not headers and other overhead. progressevent.total read only is an unsigned long long representing the total amount of work that the underlying process is in the progress of performing. when downloading a resource using http, this only represent the content itself, not headers and other overhead. methods also inherits methods from its parent event. progressevent.initprogressevent() initializes a progressevent created using the depr...
...the deprecated document.createevent("progressevent") method. examples the following example adds a progressevent to a new xmlhttprequest and uses it to display the status of the request. var progressbar = document.getelementbyid("p"), client = new xmlhttprequest() client.open("get", "magical-unicorns") client.onprogress = function(pe) { if(pe.lengthcomputable) { progressbar.max = pe.total progressbar.value = pe.loaded } } client.onloadend = function(pe) { progressbar.value = pe.loaded } client.send() specifications specification status comment xmlhttprequestthe definition of 'progressevent' in that specification. living standard ...

SVGPathElement - Web APIs
properties this interface also inherits properties from its parent, svggeometryelement. svgpathelement.pathlength an svganimatednumber corresponding to the pathlength attribute of the given <path> element. note: in svg 2 this property was moved to the svggeometryelement interface, from which this interface inher...
... properties from its parent, svggeometryelement. svgpathelement.pathlength an svganimatednumber corresponding to the pathlength attribute of the given <path> element. note: in svg 2 this property was moved to the svggeometryelement interface, from which this interface inherits it. methods this interface also inherits methods from its parent, svggeometryelement. svgpathelement.gettotallength() returns a float representing the computed value for the total length of the path using the browser's distance-along-a-path algorithm, as a distance in the current user coordinate system. note: in svg 2 this method was moved to the svggeometryelement interface, from which this interface inherits it. svgpathelement.getpointatlength() returns an svgpoint representing the x and...
...adraticsmoothrel() returns a stand-alone, parentless svgpathsegcurvetoquadraticsmoothrel object. specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgpathelement' in that specification. candidate recommendation removed the getpathsegatlength() and createsvgpathseg* methods and moved the pathlength property and the gettotallength() and getpointatlength() methods to svggeometryelement. scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgpathelement' in that specification. recommendation initial definition ...

WebGLRenderingContext.vertexAttribPointer() - Web APIs
tion, normal vector, or texture coordinate, that are defined in an arraybuffer and will be supplied to the vertex buffer object (vbo). first, we need to bind the webglbuffer we want to use to gl.array_buffer, then, with this method, gl.vertexattribpointer(), we specify in what order the attributes are stored, and what data type they are in. in addition, we need to include the stride, which is the total byte length of all attributes for one vertex. also, we have to call gl.enablevertexattribarray() to tell webgl that this attribute should be filled with data from our array buffer. usually, your 3d geometry is already in a certain binary format, so you need to read the specification of that specific format to figure out the memory layout. however, if you are designing the format yourself, or you...
...reat for debugging a webgl context without touching the application code. examples this example shows how to send your vertex attributes to the shader program. we use an imaginary data structure where the attributes of each vertex are stored interleaved with a length of 20 bytes per vertex: position: we need to store the x, y and z coordinates. for highest precision, we use 32-bit floats; in total this uses 12 bytes. normal vector: we need to store the x, y and z components of the normal vector, but since precision is not that important, we use 8-bit signed integers. for better performance, we align the data to 32 bits by also storing a fourth zero-valued component, bringing the total size to 4 bytes. also, we tell webgl to normalize the values because our normals are always in range [-1,...
...we also tell webgl to normalize the values to [0, 1]. ...

WindowOrWorkerGlobalScope.setInterval() - Web APIs
ect containing all information needed by an animation (like the this object, the callback function, the length, the frame-rate). arguments thisobject the this object on which the callback function is called. it can be an object or null. callback the function that is repeatedly invoked . it is called with three arguments: index (the iterative index of each invocation), length (the number of total invocations assigned to the daemon - finite or infinity) and backwards (a boolean expressing whether the index is increasing or decreasing). it is something like callback.call(thisobject, index, length, backwards). if the callback function returns a false value the daemon is paused. rate (optional) the time lapse (in number of milliseconds) between each invocation. the default value is 100. le...
... to the daemon - finite or infinity) and backwards (a boolean expressing whether the index is increasing or decreasing). it is something like callback.call(thisobject, index, length, backwards). if the callback function returns a false value the daemon is paused. rate (optional) the time lapse (in number of milliseconds) between each invocation. the default value is 100. length (optional) the total number of invocations. it can be a positive integer or infinity. the default value is infinity. minidaemon instances properties mydaemon.owner the this object on which is executed the daemon (read/write). it can be an object or null. mydaemon.task the function that is repeatedly invoked (read/write). it is called with three arguments: index (the iterative index of each invocation), length...
...ations. it can be a positive integer or infinity. the default value is infinity. minidaemon instances properties mydaemon.owner the this object on which is executed the daemon (read/write). it can be an object or null. mydaemon.task the function that is repeatedly invoked (read/write). it is called with three arguments: index (the iterative index of each invocation), length (the number of total invocations assigned to the daemon - finite or infinity) and backwards (a boolean expressing whether the index is decreasing or not) – see above. if the mydaemon.task function returns a false value the daemon is paused. mydaemon.rate the time lapse (in number of milliseconds) between each invocation (read/write). mydaemon.length the total number of invocations. it can be a positive integer ...

ARIA: cell role - Accessibility
pan similar to the html <th> and <td> colspan attribute, it defines the number of columns spanned by the cell. aria-rowspan similar to the html <th> and <td> rowspan attribute, it defines the number of rows spanned by the cell. aria-colindex attribute the aria-colindex attribute is only needed if columns are hidden from the dom. ...
...ml <th> and <td> rowspan attribute, it defines the number of rows spanned by the cell. aria-colindex attribute the aria-colindex attribute is only needed if columns are hidden from the dom. the attribute takes as its value an integer between 1 and the total number of columns within the table, grid or treegrid. the aria-colindex defines an element's column index or position with respect to the total number of columns within a row. if all the columns are in the dom, this attribute is not necessary. ...
...d the total number of columns within the table, grid or treegrid. the aria-colindex defines an element's column index or position with respect to the total number of columns within a row. if all the columns are in the dom, this attribute is not necessary. aria-rowindex attribute the aria-rowindex attribute is only needed if rows are hidden from the dom, to indicate which row, in the list of total rows, the current cell is in. the attribute, takes as its value an integer between 1 and the total number of rows within the table, grid, or treegrid, indicating the position, or index, of the cell. for example, a cell in the first row of the first header would likely have aria-rowindex="1" set, and cells in row 47 would have aria-rowindex="47", if aria-rowindex were needed due to not all rows b...

ARIA: table role - Accessibility
mantic table elements, such as <tbody>, <thead>, <tr>, <th>, and <td> need to be added via associated roles, such as rowgroup, row, columnheader, and cell. if the table contains sortable columns or rows, the aria-sort attribute should be added on the header cell element (not the table itself). if any rows or columns are hidden, the aria-colcount or aria-rowcount should be included indicating the total number of columns or rows, respectively, along with the aria-colindex or aria-rowindex on each cell. the aria-colindex or aria-rowindex is set to the position of a cell within the row or column, respectively. if the table includes cells that span multiple rows or multiple columns, then aria-rowspan or aria-colspan should be included as well. realize, it is much simpler to simply use the <table> e...
...ibedby attribute takes as its value the id of the element that serves as a description for the table. aria-label attribute the aria-label provides an accessible name for the table. aria-colcount attribute this attribute is only required if the columns are not present in the dom all the time. it provides an explicit indication of the number of columns in the full table. ...
...if unknown, set aria-colcount="-1". keyboard interactions none required javascript features none. for sortable columns, see the columnheader aria role. ...

Basic concepts of flexbox - CSS: Cascading Style Sheets
you should consider each line as a new flex container. any space distribution will happen across that line, without reference to the lines either side. to cause wrapping behaviour add the property flex-wrap with a value of wrap. now, should your items be too large to all display in one line, they will wrap onto another line. the live sample below contains items that have been given a width, the total width of the items being too wide for the flex container. as flex-wrap is set to wrap, the items wrap. set it to nowrap, which is also the initial value, and they will instead shrink to fit the container because they are using initial flexbox values that allows items to shrink. using nowrap would cause an overflow if the items were not able to shrink, or could not shrink small enough to fit. f...
... equally shared between our items and they would stretch to fill the container on the main axis. the flex-grow property can be used to distribute space in proportion. if we give our first item a flex-grow value of 2 and the other items a value of 1, 2 parts will be given to the first item (100px out of 200px in the case of the example above), 1 part each the other two (50px each out of the 200px total). the flex-shrink property where the flex-grow property deals with adding space in the main axis, the flex-shrink property controls how it is taken away. if we do not have enough space in the container to lay out our items and flex-shrink is set to a positive integer the item can become smaller than the flex-basis. as with flex-grow different values can be assigned in order to cause one item to...
...shorthand. the flex shorthand allows you to set the three values in this order — flex-grow, flex-shrink, flex-basis. the live example below allows you to test out the different values of the flex shorthand; remember that the first value is flex-grow. giving this a positive value means the item can grow. the second is flex-shrink — with a positive value the items can shrink, but only if their total values overflow the main axis. the final value is flex-basis; this is the value the items are using as their base value to grow and shrink from. there are also some predefined shorthand values which cover most of the use cases. you will often see these used in tutorials, and in many cases these are all you will need to use. the predefined values are as follows: flex: initial flex: auto fl...

Image file type and format guide - Web media technologies
ails the following sections provide a brief overview of each of the image file types supported by web browsers. in the tables below, the term bits per component refers to the number of bits used to represent each color component. 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. bit depth, on the other hand, is the total number of bits used to represent each pixel in memory. apng (animated portable network graphics) apng is a file format first introduced by mozilla which extends the png standard to add support for animated images. conceptually similar to the animated gif format which has been in use for decades, apng is more capable in that it supports a variety of color depths, whereas animated gif supports on...
... color mode bits per component (d) description greyscale n/a gif does not include a dedicated greyscale format. true color n/a gif does not support true color pixels. indexed color 8 each color in a gif palette is defined as 8 bits each of red, green, and blue (24 total bits per pixel). greyscale with alpha n/a gif does not provide a dedicated greyscale format. true color with alpha n/a gif does not support true color pixels. compression lossless (lzw) licensing while the gif format itself is open, the lzw compression algorithm was covered by paten...
... 12.10 (presto) 15 (blink) no animation 32 18 65 no 19 (blink) no maximum dimensions 16,383×16,383 pixels supported color modes lossy webp stores the image in 8-bit y'cbcr 4:2:0 (yuv420) format. lossless webp uses 8-bit argb color, with each component taking 8 bits for a total of 32 bits per pixel. compression lossless (huffman, lz77, or color cache codes) or lossy (vp8). licensing no license required; source code is openly available. xbm (x window system bitmap file) xbm (x bitmap) files were the first to be supported on the web, but are no longer used and should be avoided, as their format has potential security concerns. modern browse...

progress - Archive of obsolete content
on target eventtarget (dom element) the event target (the topmost target in the dom tree). read only. type string the type of event. read only. canbubble boolean does the event normally bubble? read only. cancelable boolean is it possible to cancel the event? read only. ...
...cancelable boolean is it possible to cancel the event? read only. lengthcomputable boolean specifies whether or not the total size of the transfer is known. read only. loaded unsigned long (long) the number of bytes transferred since the beginning of the operation. this doesn't include headers and other overhead, but only the content itself. read only. total unsigned long (long) the total number of bytes of content that will be transferred during the operation. if the total size is unknown, this value is zero. read only. related events checking noupdate downloading progress cached updateready obsolete error ...

MMgc - Archive of obsolete content
es etc. if you're trying to see why memory is not getting reclaimed; gc::whospointingatme() can be called from the msvc debugger and will spit out objects that are pointing to the given memory location. memory profiler mmgc's memory profiler can display the state of your application's heap, showing the different classes of object in memory, along with object counts, byte counts, and percentage of total memory. it can also display stack traces for where every object was allocated. the report can be output to the console or to a file, and can be configured to be displayed pre/post sweep or via api call. the memory profiler use srtti and stack traces to get information by location and type: class avmplus::growablebuffer - 24.9% - 3015 kb 514 items, avg 6007b 98.9% - 2983 kb - 512 items - poolo...
...ut of the marking phase the better performance will be overall applications that have low or steady state memory requirements shouldn't suffer any marking penalty the first thing to determine is when we decide to start marking. currently we make the decision on when to do a collection based on how much memory has been allocated since the last collection, if its over a certain fraction of the the total heap size we do a collection and if its not we expand. similarly we can base the decision on when to start marking when we've consumed a certain portion of the heap since the last collection, call this the isd (incremental start divisor). so if we go with an isd of 4 we start marking when a quarter of the heap is left and an isd of 1 means we're always marking. now that we know when we start mark...

align - Archive of obsolete content
« xul reference home align type: one of the values below the align attribute specifies how child elements of the box are aligned, when the size of the box is larger than the total size of the children. for boxes that have horizontal orientation, it specifies how its children will be aligned vertically. for boxes that have vertical orientation, it specifies how its children will be aligned horizontally. start child elements are aligned starting from the left or top edge of the box. if the box is larger than the total size of the children, the extra space is placed on the right or bottom side. center extra space is split equally along each side of the child elements, resu...
... baseline this value applies to horizontally oriented boxes only. it causes the child elements to be aligned so that their text labels are lined up. stretch this is the default value. the child elements are stretched to fit the size of the box. ...

pack - Archive of obsolete content
ion of children horizontally. for boxes with vertical orientation, it is used to indicate the position of children vertically. the align attribute is used to specify the position in the opposite direction. you can also specify the value of pack using the style property -moz-box-pack. start child elements are placed starting from the left or top edge of the box. ...
...ing from the left or top edge of the box. if the box is larger than the total size of the children, the extra space is placed on the right or bottom side. center extra space is split equally along each side of the child elements, resulting the children being placed in the center of the box. end child elements are placed on the right or bottom edge of the box. if the box is larger than the total size of the children, the extra space is placed on the left or top side. see also more on box packing in the xul tutorial ...

Custom Tree Views - Archive of obsolete content
can just leave the treechildren element empty. ...
... getcelltext( row , column ) this method should return the text contents at the specified row and column. this will be called to display data for each cell. the rows are supplied as numeric values starting at 0. the columns are treecolumn objects. ...

Element Positioning - Archive of obsolete content
which will be used. a box will be large enough to hold the elements inside the box. a horizontal box with three buttons in it will be as wide as the three buttons, plus a small amount of padding. in the image, the first two buttons have been given a suitable size to hold their text. the third button is larger because it contains more content. the width of the box containing the buttons is the total width of the buttons plus the padding between them. the height of the buttons is a suitable size to hold the text. width and height attributes you may need to have more control over the size of an element in a window. there are a number of features that allow you to control the size of an element. the quick way is to simply add the width and height attributes on an element, much like you might ...
... label="i really don't know one way or the other"/> </hbox> </window> the window will initially appear like in the image earlier. the first two buttons will be sized at a suitable default width and the third button will be larger because it has a longer label. the first button is made flexible and all three elements have been placed inside a box. the width of the box will be set to the initial total width of all three buttons (around 430 pixels in the image). if you increase the width of the window, elements are checked to see whether they are flexible to fill the blank space that would appear. the first button is the only flexible element, but it will not grow wider. this is because the box that the button is inside is not flexible. an inflexible element never changes size even when space ...

Focus and Selection - Archive of obsolete content
s="displayfocus();"/> <description id="sbar" value=""/> the focus event, when it occurs, will call the displayfocus function. this function will change the value of the text label. we could extend this example to remove the text when the blur event occurs. typically, you will use focus and blur events to update parts of the interface as the user selects elements. for instance, you might update a total as the user enters values in other fields, or use focus events to validate certain values. don't display an alert during a focus or blur event as this will be distracting for the user and is poor user interface design. you can also add event handlers dynamically using the dom function addeventlistener. you can use it for any element and event type. it takes three parameters, the event type, a fun...
...he current selection respectively. if both are set to the same value no text is selected, and the cursor is moved to that position. once you have the start and end positions, you can pull out the substring from the whole text. you can retrieve and modify the contents of the textbox by using the value property. one additional useful property of textboxes is the textlength property, which holds the total number of characters in the field. next, we'll find out how to use commands. « previousnext » ...

attribute.align - Archive of obsolete content
summary the align attribute specifies how child elements of the box are aligned, when the size of the box is larger than the total size of the children. for boxes that have horizontal orientation, it specifies how its children will be aligned vertically. for boxes that have vertical orientation, it is used to specify how its children are algined horizontally. the pack attribute is related to the alignment but is used to specify the position in the opposite direction. you can also specify the value of align using the style property -moz-box-align. parameters start child elements are aligned starting from the left or top edge of the box. if the box is larger than the total size of the children, the extra space is placed on the right or bottom side. center extra space is split equally ...
... baseline this value applies to horizontally oriented boxes only. it causes the child elements to be aligned so that their text labels are lined up. stretch the child elements are stretched to fit the size of the box. ...

Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
kly, the class name stuck, kind of like a barnacle. giving the fish some style with the markup all set, it was time to style. the idea was to have the fish listed in a side-by-side arrangement, sort of like a two-column table, only without the table. this was most easily accomplished by floating the div elements themselves. since i wanted them to be side by side, it was important to be sure the total width of the element boxes (including margins) was less than 50%, so the first step was this: div.card {float: left; width: 45%; margin: 1em 2% 0 2%;} by making the content of each card 45% the width of the containing element, and adding 2% margin to both the left and right sides, each card's element box is 49% as wide as the parent. two of them side by side will take up 98% the width of the ...
... card 45% the width of the containing element, and adding 2% margin to both the left and right sides, each card's element box is 49% as wide as the parent. two of them side by side will take up 98% the width of the parent element. this leaves out 2% as "wasted space," so to speak. i did it that way because it's a lot less likely to trigger a situation where rounding errors force the two floats to total more than 100% the width of the parent, as could happen if the floats' element boxes were made to total 50%. unfortunately, a few browsers don't get this right, and end up flowing the cards as a single vertical column instead of putting the fish side by side. after a bit of fiddling to try to fix this, i decided that trying to overcome this error in document flow wasn't worth the effort. the lay...

Index - Game development
9 game monetization games, html5, javascript, monetization, advertisements, branding, iap, licensing there are many ways to earn money — everything that applies to the "normal" aaa gaming world can be, more or less, applied to casual html5 games. you might however also focus on selling licenses, doing branding, or earning on a revenue share basis from the advertisements. it's totally up to you which path you're going to follow. 10 game promotion community, games, javascript, promotion, blog, competitions, youtube any way of promoting your game is good. you have a whole lot of options to chose from with most of them being free, so it's only about your enthusiasm and available time. sometimes you have to spend more time promoting a game than actually deve...
..., but currently there's no interactivity. it's not a game if you cannot control it! so let's add some user interaction: a controllable paddle. 69 track the score and win beginner, canvas, games, javascript, tutorial, scoring, winning destroying the bricks is really cool, but to be even more awesome the game could award points for every brick a user hits, and keep count of the total score. 70 2d maze game with device orientation canvas, device orientation api, game development, html5, phaser, vibration api i hope this tutorial will help you dive into 2d game development and inspire you to create awesome games on your own. you can play the demo game cyber orb and check out its source code on github. 71 touch event horizon needscontent, need...

Game monetization - Game development
is disliked by many players and devs. if you want to implement iaps try to add value to the game with something players will enjoy instead of taking it out and then charging for it. add-ons and dlcs add-ons and downloadable content are a good way to provide extra value to an already released game, but remember that you'll have to offer decent, entertaining content to attract people to buy it. a totally new set of levels with new characters, weapons and story is a good material for dlc, but to have enough sales the game itself has to be popular, or else there won't be any players interested in spending their hard earned money on it. advertisements instead of actively selling the games you can also try to get yourself a passive income — showing adverts and relying on previous activities rel...
... ...

Implementing controls using the Gamepad API - Game development
this article looks at implementing an effective, cross-browser control system for web games using the gamepad api, allowing you to control your web games using console game controllers. it features a case study game — hungry fridge, created by enclave games. controls for web games historically playing games on a console connected to your tv was always a totally different experience to gaming on the pc, mostly because of the unique controls. eventually, extra drivers and plugins allowed us to use console gamepads with desktop games — either native games or those running in the browser. now in the era of html5, we finally have the gamepad api, which gives us the ability to play browser-based games using gamepad controllers without any plugins. the gamepad api achieves this by providing an ...
...shooting and eating machine. when you connect the controller, the game significantly changes (hungry fridge turns into the super turbo hungry fridge) and you're able to control the armored fridge using the gamepad api. you have to shoot down the food, but once again you also have to find the type of food the fridge wants to eat at each point, or else you'll lose energy. the game encapsulates two totally different types of "change" — good food vs. bad food, and mobile vs. desktop. demo the full version of the hungry fridge game was built first, and then to showcase the gamepad api in action and show the javascript source code, a simple demo was created. it's part of the gamepad api content kit available on github where you can dive deep into the code and study exactly how it works. the cod...

Positioning - Learn web development
ke any units you'd logically expect — pixels, mm, rems, %, etc. if you now save and refresh, you'll get a result something like this: <h1>relative positioning</h1> <p>i am a basic block level element. my adjacent block level elements sit on new lines below me.</p> <p class="positioned">by default we span 100% of the width of our parent element, and we are as tall as our child content. our total width and height is our content + padding + border width/height.</p> <p>we are separated by our margins. because of margin collapsing, we are separated by the width of one of our margins, not both.</p> <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. overflowing inline elemen...
...ng the position declaration in your code as follows: position: absolute; if you now save and refresh, you should see something like so: <h1>absolute positioning</h1> <p>i am a basic block level element. my adjacent block level elements sit on new lines below me.</p> <p class="positioned">by default we span 100% of the width of our parent element, and we are as tall as our child content. our total width and height is our content + padding + border width/height.</p> <p>we are separated by our margins. because of margin collapsing, we are separated by the width of one of our margins, not both.</p> <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. overflowing inline elemen...

Other form controls - Learn web development
rogress bars meters and progress bars are visual representations of numeric values. progress a progress bar represents a value that changes over time up to a maximum value specified by the max attribute. such a bar is created using a <progress> element. <progress max="100" value="75">75/100</progress> this is for implementing anything requiring progress reporting, such as the percentage of total files downloaded, or the number of questions filled in on a questionnaire. the content inside the <progress> element is a fallback for browsers that don't support the element and for screen readers to vocalize it. meter a meter bar represents a fixed value in a range delimited by max and min values. this value is visually rendered as a bar, and to know how this bar looks, we compare the value ...
...hose values to change the color of the meter bar: if the current value is in the prefered part of the range, the bar is green. if the current value is in the average part of the range, the bar is yellow. if the current value is in the worst part of the range, the bar is red. such a bar is created using a <meter> element. this is for implementing any kind of meter, for example a bar showing total space used on a disk, which turns red when it starts to get full. <meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter> the content inside the <meter> element is a fallback for browsers that don't support the element and for assistive technologies to vocalize it. support for <progress> and <meter> is fairly good — there is no support in internet explorer, but other...

Document and website structure - Learn web development
example, who might not find concepts like "pink" and "large font" very useful? note: colorblind people represent around 4% of the world population or, to put it another way, approximately 1 in every 12 men and 1 in every 200 women are colorblind. blind and visually impaired people represent roughly 4-5% of the world population (in 2012 there were 285 million such people in the world, while the total population was around 7 billion). in your html code, you can mark up sections of content based on their functionality — you can use elements that represent the sections of content described above unambiguously, and assistive technologies like screenreaders can recognise those elements and help with tasks like "find the main navigation", or "find the main content." as we mentioned earlier in t...
...ning. for example, imagine a shopping cart widget that you could choose to pull up at any point during your time on an e-commerce site: <div class="shopping-cart"> <h2>shopping cart</h2> <ul> <li> <p><a href=""><strong>silver earrings</strong></a>: $99.95.</p> <img src="../products/3333-0985/thumb.png" alt="silver earrings"> </li> <li> ... </li> </ul> <p>total cost: $237.89</p> </div> this isn't really an <aside>, as it doesn't necessarily relate to the main content of the page (you want it viewable from anywhere). it doesn't even particularly warrant using a <section>, as it isn't part of the main content of the page. so a <div> is fine in this case. we've included a heading as a signpost to aid screenreader users in finding it. warning: divs are ...

Test your skills: JSON - Learn web development
e json is loaded into the page as a text string and made available in the catstring parameter of the displaycatinfo() function, called when the provided promise chain (which starts by fetching the json data) is fulfilled. your task is to fill in the missing parts of the displaycatinfo() function to store: the names of the three mother cats, separated by commas, in the motherinfo variable. the total number of kittens, and how many are male and female, in the kitteninfo variable. the values of these variables are then printed to the screen inside paragraphs. some hints/questions: the json data is provided as text inside the displaycatinfo() function. you'll need to parse it into json before you can get any data out of it. you'll probably want to use an outer loop to loop through the ca...
...en printed to the screen inside paragraphs. some hints/questions: the json data is provided as text inside the displaycatinfo() function. you'll need to parse it into json before you can get any data out of it. you'll probably want to use an outer loop to loop through the cats and add their names to the motherinfo variable string, and an inner loop to loop through all the kittens, add up the total of all/male/female kittens, and add those details to the kitteninfo variable string. the last mother cat name should have an "and" before it, and a full stop after it. how do you make sure this can work, no matter how many cats are in the json? why are the para1.textcontent = motherinfo; and para2.textcontent = kitteninfo; lines inside the displaycatinfo() function, and not at the end of the sc...

Listening to events on all tabs
tional: this is a value which explains the situation or the reason why the location has changed. optional from gecko 10 onprogresschange called when updated progress information for the download of a document is available. void onprogresschange( nsidomxulelement abrowser, nsiwebprogress awebprogress, nsirequest arequest, print32 acurselfprogress, print32 amaxselfprogress, print32 acurtotalprogress, print32 amaxtotalprogress ); parameters abrowser the browser representing the tab for which updated progress information is being provided. awebprogress the progress instance responsible for handling the events. arequest the nsirequest object representing the associated request. acurselfprogress the current progress for the request indicated by the req...
...tion is being provided. awebprogress the progress instance responsible for handling the events. arequest the nsirequest object representing the associated request. acurselfprogress the current progress for the request indicated by the request parameter. amaxselfprogress the value representing 100% complete for the request indicated by the request parameter. acurtotalprogress the current progress for all requests associated with webprogress. amaxtotalprogress the total progress for all requests associated with webprogress. onsecuritychange notification called for security progress. this method will be called on security transitions (eg http -> https, https -> http, foo -> https) and after document load completion. it might also be called if an err...

Performance
er usage and alternative approaches to avoid them. key points to keep in mind scripts registered during addon startup get executed during session restore. the more expensive they are to execute the longer it will take for the browser to become responsive after startup. frame scripts also get executed on non-restored tabs. all their overhead is thus not just incurred by active tabs but by the total number of tabs in a session. the following examples omit some boilerplate code for the sake of brevity the "better" examples also omit some best practices and only demonstrate how to fix the problem described in their respective subtopics. performance best practices declaring stateless functions once per process bad: // addon.js services.mm.loadframescript("framescript.js", true) // fr...
...d notifications can be substituted with domwindowcreated events other observers and services should be registered in a process script or jsm instead load frame scripts on demand bad: // addon.js services.mm.loadframescript("framescript.js", /*delayed:*/ true) // stuff communicating with the framescript // framescript.js function onlyonceinabluemoon() { // we only need this during a total solar eclipse while goat blood rains from the sky sendasyncmessage('my-addon:paragraph-count', {num: content.document.queryselectorall('p').length}) } addmessagelistener("my-addon:request-from-parent", onlyonceinabluemoon) better: // addon.js function ontoolbarbutton(event) { let tabmm = gbrowser.mcurrentbrowser.frameloader.messagemanager; let button = event.target; let callback = (me...

Interfacing with the Add-on Repository
fication() method with some parameters that we'll look at shortly when we get to our shownotification() method below. the important thing to note is that this will handle the failure case. handling successful requests the callback object's searchsucceeded() method gets called when a search completes successfully. ...
... handling successful requests the callback object's searchsucceeded() method gets called when a search completes successfully. it receives a list of the matching addons, the number of add-ons returned, and the total number of add-ons that matched the query (in case the returned number is smaller than the requested number, for example). ...

Profiling with the Firefox Profiler
etween its children. tip: focus on one section of the tree by clicking on the "arrow-in-a-circle" icon that appears to the right of the tree element as you hover over it. a "tree breadcrumb" will appear similar to the range breadcrumbs noted above. clicking the "javascript only" option will only show javascript code in the call tree. you could compare the time with this option checked and the total time to get an idea of how much time was spent running js. note that long-running js function execution may not actually be taking as long as you think because further down the call stack there may be something like painting happening. clicking the "invert call stack" option will sort by the time spent in a function in descending order. note that the running time here is only the running time of...
...me was spent running js. note that long-running js function execution may not actually be taking as long as you think because further down the call stack there may be something like painting happening. clicking the "invert call stack" option will sort by the time spent in a function in descending order. note that the running time here is only the running time of that particular frame and not the total of all called instances of that function. you can see the samples in the timeline get darker as you select different functions in the call tree; these are samples that were taken when the selected function was running. "filter stacks" will allow you to search for functions by name. one of the easiest ways to find slowness caused by a page's js is to type its url into the "filter stacks" box. you...

TraceMalloc
aces for every allocation, will be written to pathname. ...
...or every allocation, will be written to pathname. ...

Leak And Bloat Tests
provide a consistent number from build to build where no source code has changed. provide reasonable coverage for the normal activities that a user performs. method current method: measure leaks and bloats, in a similar way to firefox (using xpcom_mem_leak_log and --trace-malloc). ...
...l be the same sequence of events, using the same set of test data. startup main mail window open address book and message composition windows close address book and message composition windows quit the application future improvements will be discussed on the discussion page of the mozilla wiki. results printed on tinderbox output, these consist of: mail rlk reference count leaks mail lk total bytes malloc'ed and not free'd mail mh maximum heap size mail a allocations - number of calls to malloc and friends. there are currently no graphs for these results. manually running tests setting up build set up build thunderbird or seamonkey with your standard mozconfig file, but with the following options set: ac_add_options --enable-debug ac_add_options --enable-trace-malloc r...

Enc Dec MAC Output Public Key as CSR
c_dersigndata(arena, &result, encoding->data, encoding->len, privk, signalgtag); if (rv) { pr_fprintf(pr_stderr, "signing of data failed\n"); rv = secfailure; goto cleanup; } /* encode request in specified format */ if (ascii) { char *obuf; char *name, *email, *org, *state, *country; secitem *it; int total; it = &result; obuf = btoa_convertitemtoascii(it); total = pl_strlen(obuf); name = cert_getcommonname(subject); if (!name) { name = strdup("(not specified)"); } email = cert_getcertemailaddress(subject); if (!email) email = strdup("(not specified)"); org = cert_getorgname(subject); if (!or...
...ed by netscape certutil\n"); pr_fprintf(outfile, "common name: %s\n", name); pr_fprintf(outfile, "email: %s\n", email); pr_fprintf(outfile, "organization: %s\n", org); pr_fprintf(outfile, "state: %s\n", state); pr_fprintf(outfile, "country: %s\n\n", country); pr_fprintf(outfile, "%s\n", ns_certreq_header); numbytes = pr_write(outfile, obuf, total); if (numbytes != total) { pr_fprintf(pr_stderr, "write error\n"); return secfailure; } pr_fprintf(outfile, "\n%s\n", ns_certreq_trailer); if (obuf) { port_free(obuf); } } else { numbytes = pr_write(outfile, result.data, result.len); if (numbytes != (int)result.len) { pr_fprintf(pr_stderr, ...

Enc Dec MAC Using Key Wrap CertReq PKCS10 CSR
ta(arena, &result, encoding->data, encoding->len, privk, signalgtag); if (rv) { pr_fprintf(pr_stderr, "signing of data failed\n"); rv = secfailure; goto cleanup; } /* encode request in specified format */ if (ascii) { char *obuf; char *name, *email, *org, *state, *country; secitem *it; int total; it = &result; obuf = btoa_convertitemtoascii(it); total = pl_strlen(obuf); name = cert_getcommonname(subject); if (!name) { name = strdup("(not specified)"); } email = cert_getcertemailaddress(subject); if (!email) email = strdup("(not specified)"); org = cert_getorgname(subject); ...
...netscape certutil\n"); pr_fprintf(outfile, "common name: %s\n", name); pr_fprintf(outfile, "email: %s\n", email); pr_fprintf(outfile, "organization: %s\n", org); pr_fprintf(outfile, "state: %s\n", state); pr_fprintf(outfile, "country: %s\n\n", country); pr_fprintf(outfile, "%s\n", ns_certreq_header); numbytes = pr_write(outfile, obuf, total); if (numbytes != total) { pr_fprintf(pr_stderr, "write error\n"); return secfailure; } pr_fprintf(outfile, "\n%s\n", ns_certreq_trailer); } else { numbytes = pr_write(outfile, result.data, result.len); if (numbytes != (int)result.len) { pr_fprintf(pr_stderr, "write error\n"); rv = secfailure; ...

NSS Sample Code Sample_1_Hashing
tf(out, "%02x", data[i]); column += 2; break; } if (column > 76 || (i % 16 == limit)) { newline(out); column = level; limit = i % 16; } } if (column != level) { newline(out); } } /* * prints a usage message and exits */ static void usage(const char *progname) { int htype; int hash_algtotal = sizeof(hash_names) / sizeof(hash_names[0]); fprintf(stderr, "usage: %s -t type [ < input ] [ > output ]\n", progname); fprintf(stderr, "%-20s specify the digest method (must be one of\n", "-t type"); fprintf(stderr, "%-20s ", ""); for (htype = 0; htype < hash_algtotal; htype++) { fprintf(stderr, hash_names[htype].hashname); if (htype == (hash_algtot...
...t type [ < input ] [ > output ]\n", progname); fprintf(stderr, "%-20s specify the digest method (must be one of\n", "-t type"); fprintf(stderr, "%-20s ", ""); for (htype = 0; htype < hash_algtotal; htype++) { fprintf(stderr, hash_names[htype].hashname); if (htype == (hash_algtotal - 2)) fprintf(stderr, " or "); else if (htype != (hash_algtotal - 1)) fprintf(stderr, ", "); } fprintf(stderr, " (case ignored))\n"); fprintf(stderr, "%-20s define an input file to use (default is stdin)\n", "< input"); fprintf(stderr, "%-20s define an output file to use (default is stdout)\n", "> output"); exit(-1); } /* * check for the missing arguments */ static void printmsgandexit(const char *pro...

Hashing - sample 1
f(out, "%02x", data[i]); column += 2; break; } if (column > 76 || (i % 16 == limit)) { newline(out); column = level; limit = i % 16; } } if (column != level) { newline(out); } } /* * prints a usage message and exits */ static void usage(const char *progname) { int htype; int hash_algtotal = sizeof(hash_names) / sizeof(hash_names[0]); fprintf(stderr, "usage: %s -t type [ < input ] [ > output ]\n", progname); fprintf(stderr, "%-20s specify the digest method (must be one of\n", "-t type"); fprintf(stderr, "%-20s ", ""); for (htype = 0; htype < hash_algtotal; htype++) { fprintf(stderr, hash_names[htype].hashname); if (htype == (hash_algtot...
...t type [ < input ] [ > output ]\n", progname); fprintf(stderr, "%-20s specify the digest method (must be one of\n", "-t type"); fprintf(stderr, "%-20s ", ""); for (htype = 0; htype < hash_algtotal; htype++) { fprintf(stderr, hash_names[htype].hashname); if (htype == (hash_algtotal - 2)) fprintf(stderr, " or "); else if (htype != (hash_algtotal - 1)) fprintf(stderr, ", "); } fprintf(stderr, " (case ignored))\n"); fprintf(stderr, "%-20s define an input file to use (default is stdin)\n", "< input"); fprintf(stderr, "%-20s define an output file to use (default is stdout)\n", "> output"); exit(-1); } /* * check for the missing arguments */ static void printmsgandexit(const char *pro...

sample1
ata[i]); column += 2; break; } if (column > 76 || (i % 16 == limit)) { newline(out); column = level; limit = i % 16; } } if (column != level) { newline(out); } } /* prints a usage message and exits */ static void usage(const char *progname) { int htype; int hash_algtotal = sizeof(hash_names) / sizeof(hash_names[0]); fprintf(stderr, "usage: %s -t type [ < input ] [ > output ]\n", progname); fprintf(stderr, "%-20s specify the digest method (must be one of\n", "-t type"); fprintf(stderr, "%-20s ", ""); for (htype = 0; htype < hash_algtotal; htype++) { fprintf(stderr, hash_names[htype].hashname); if (htype == (has...
...zeof(hash_names) / sizeof(hash_names[0]); fprintf(stderr, "usage: %s -t type [ < input ] [ > output ]\n", progname); fprintf(stderr, "%-20s specify the digest method (must be one of\n", "-t type"); fprintf(stderr, "%-20s ", ""); for (htype = 0; htype < hash_algtotal; htype++) { fprintf(stderr, hash_names[htype].hashname); if (htype == (hash_algtotal - 2)) fprintf(stderr, " or "); else if (htype != (hash_algtotal - 1)) fprintf(stderr, ", "); } fprintf(stderr, " (case ignored))\n"); fprintf(stderr, "%-20s define an input file to use (default is stdin)\n", "< input"); fprintf(stderr, "%-20s define an output file to use (default is stdout)\n", "> output"); exit...

sample2
n) { pr_fprintf(pr_stderr, "unknown key or hash type\n"); rv = secfailure; goto cleanup; } rv = sec_dersigndata(arena, &result, encoding->data, encoding->len, privk, signalgtag); if (rv) { pr_fprintf(pr_stderr, "signing of data failed\n"); rv = secfailure; goto cleanup; } /* encode request in specified format */ if (ascii) { char *obuf; char *name, *email, *org, *state, *country; secitem *it; int total; it = &result; obuf = btoa_convertitemtoascii(it); total = pl_strlen(obuf); name = cert_getcommonname(subject); if (!name) { name = strdup("(not specified)"); } email = cert_getcertemailaddress(subject); if (!email) email = strdup("(not specified)"); org = cert_getorgname(subject); if (!org) org = strdup("(not specified)"); state = cert_getstatename(subject); if (!state) state = strdup("(not spec...
...ed)"); pr_fprintf(outfile, "\ncertificate request generated by netscape certutil\n"); pr_fprintf(outfile, "common name: %s\n", name); pr_fprintf(outfile, "email: %s\n", email); pr_fprintf(outfile, "organization: %s\n", org); pr_fprintf(outfile, "state: %s\n", state); pr_fprintf(outfile, "country: %s\n\n", country); pr_fprintf(outfile, "%s\n", ns_certreq_header); numbytes = pr_write(outfile, obuf, total); if (numbytes != total) { pr_fprintf(pr_stderr, "write error\n"); return secfailure; } pr_fprintf(outfile, "\n%s\n", ns_certreq_trailer); } else { numbytes = pr_write(outfile, result.data, result.len); if (numbytes != (int)result.len) { pr_fprintf(pr_stderr, "write error\n"); rv = secfailure; goto cleanup; } } cleanup: if (outfile) { pr_close(outfile); } if (privk) { seckey_destroyprivatekey(pri...

nsICycleCollectorListener
iberefcountedobject() or to describegcedobject(); and then a call to end(). if begin() returns an error none of the other functions will be called. method overview void begin(); void begindescriptions(); void describegcedobject(in unsigned long long aaddress, in boolean amarked); void describerefcountedobject(in unsigned long long aaddress, in unsigned long aknownedges, in unsigned long atotaledges); void end(); void noteedge(in unsigned long long afromaddress, in unsigned long long atoaddress, in string aedgename); void noteobject(in unsigned long long aaddress, in string aobjectdescription); methods begin() void begin(); parameters none. begindescriptions() void begindescriptions(); parameters none. describegcedobject() void describegcedobject( in unsigned long long aadd...
...n); methods begin() void begin(); parameters none. begindescriptions() void begindescriptions(); parameters none. describegcedobject() void describegcedobject( in unsigned long long aaddress, in boolean amarked ); parameters aaddress amarked describerefcountedobject() void describerefcountedobject( in unsigned long long aaddress, in unsigned long aknownedges, in unsigned long atotaledges ); parameters aaddress aknownedges atotaledges end() void end(); parameters none. noteedge() void noteedge( in unsigned long long afromaddress, in unsigned long long atoaddress, in string aedgename ); parameters afromaddress atoaddress aedgename noteobject() void noteobject( in unsigned long long aaddress, in string aobjectdescription ); parameters aaddress aobjectd...

nsIUpdateCheckListener
void oncheckcomplete( in nsixmlhttprequest request, [array, size_is(updatecount)] in nsiupdate updates, in unsigned long updatecount ); parameters request the nsixmlhttprequest object handling the update check. updates an array of nsiupdate objects describing the available updates. updatecount the number of upda...
...st request, in nsiupdate update ); parameters request the nsixmlhttprequest object handling the update check. update an nsiupdate object containing details about the error in its statustext attribute. 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. position the number of bytes downloaded so far. totalsize the total number of bytes that need to be downloaded. see also nsiupdatepatch nsiupdate nsiupdatechecker nsiapplicationupdateservice nsiupdatemanager nsiupdateprompt nsiupdatetimermanager ...

Web Console remoting - Firefox Developer Tools
1024, "discardrequestbody": false }, { "from": "conn0.netevent14", "type": "networkeventupdate", "updatetype": "responsestart", "response": { "httpversion": "http/1.1", "status": "304", "statustext": "not modified", "headerssize": 194, "discardresponsebody": true } }, { "from": "conn0.netevent14", "type": "networkeventupdate", "updatetype": "eventtimings", "totaltime": 1 }, { "from": "conn0.netevent14", "type": "networkeventupdate", "updatetype": "responseheaders", "headers": 6, "headerssize": 194 }, { "from": "conn0.netevent14", "type": "networkeventupdate", "updatetype": "responsecookies", "cookies": 0 }, { "from": "conn0.netevent14", "type": "networkeventupdate", "updatetype": "responsecontent", "mimetype": "text/css", "cont...
...end the content in base64 encoding (again, most likely a longstringactor grip). to tell the difference just check if response.content.encoding == "base64". the geteventtimings packet: { "to": "conn0.netevent15", "type": "geteventtimings" } { "from": "conn0.netevent15", "timings": { "blocked": 0, "dns": 0, "connect": 0, "send": 0, "wait": 16, "receive": 0 }, "totaltime": 16 } the fileactivity packet when a file load is observed the following fileactivity packet is sent to the client: { "from": "conn0.console9", "type": "fileactivity", "uri": "file:///home/mihai/public_html/mozilla/test2.css" } history protocol changes by firefox version: firefox 18: initial version. firefox 19: bug 787981 - added longstringactor usage in several places. fi...

Using files from web applications - Web APIs
"" if the type couldn't be determined. ...
... an image element and a file from which to read the image data. ...

HTMLMediaElement - Web APIs
muted by default. htmlmediaelement.defaultplaybackrate a double indicating the default playback rate for the media. htmlmediaelement.disableremoteplayback a boolean that sets or returns the remote playback state, indicating whether the media element is allowed to have a remote playback ui. htmlmediaelement.duration read only a read-only double-precision floating-point value indicating the total duration of the media in seconds. if no media data is available, the returned value is nan. if the media is of indefinite length (such as streamed live media, a webrtc call's media, or similar), the value is +infinity. htmlmediaelement.ended read only returns a boolean that indicates whether the media element has finished playing. htmlmediaelement.error read only returns a mediaerror object...
...am capture. htmlmediaelement.mozfragmentend is a double that provides access to the fragment end time if the media element has a fragment uri for currentsrc, otherwise it is equal to the media duration. htmlmediaelement.mozframebufferlength is a unsigned long that indicates the number of samples that will be returned in the framebuffer of each mozaudioavailable event. this number is a total for all channels, and by default is set to be the number of channels * 1024 (e.g., 2 channels * 1024 samples = 2048 total). the mozframebufferlength property can be set to a new value for lower latency, larger amounts of data, etc. the size given must be a number between 512 and 16384. using any other size results in an exception being thrown. the best time to set a new length is after the load...

PaymentDetailsUpdate - Web APIs
ge to present to the user. when calling updatewith(), including error in the updated data causes the user agent to display the text as a general error message. for address field specific errors, use shippingaddresserrors. modifiers optional an array of paymentdetailsmodifier objects, each describing a modifier for particular payment method identifiers. ...
...djust the total payment amount based on the selected payment method ("5% cash discount!"). shippingaddresserrors optional an addresserrors object which includes an error message for each property of the shipping address that could not be validated. shippingoptions optional an array of paymentshippingoption objects, each describing one available shipping option from which the user may choose. total optional a paymentitem providing an updated total for the payment. make sure this equals the sum of all of the items in displayitems. this is not calculated automatically. you must update this value yourself anytime the total amount due changes. this lets you have flexibility for how to handle things like tax, discounts, and other adjustments to the total price charged. specifications ...

PaymentRequestEvent() - Web APIs
...
... ...

PaymentRequestUpdateEvent.updateWith() - Web APIs
ge to present to the user. when calling updatewith(), including error in the updated data causes the user agent to display the text as a general error message. for address field specific errors, use shippingaddresserrors. modifiers optional an array of paymentdetailsmodifier objects, each describing a modifier for particular payment method identifiers. ...
...djust the total payment amount based on the selected payment method ("5% cash discount!"). shippingaddresserrors optional an addresserrors object which includes an error message for each property of the shipping address that could not be validated. shippingoptions optional an array of paymentshippingoption objects, each describing one available shipping option from which the user may choose. total optional a paymentitem providing an updated total for the payment. make sure this equals the sum of all of the items in displayitems. this is not calculated automatically. you must update this value yourself anytime the total amount due changes. this lets you have flexibility for how to handle things like tax, discounts, and other adjustments to the total price charged. return value undefi...

PaymentResponse.shippingOption - Web APIs
the same of brevity. ...
...ppingoption; var othershippingoption; if (shippingoption === 'standard') { selectedshippingoption = details.shippingoptions[0]; othershippingoption = details.shippingoptions[1]; details.total.amount.value = '55.00'; } else if (shippingoption === 'express') { selectedshippingoption = details.shippingoptions[1]; othershippingoption = details.shippingoptions[0]; details.total.amount.value = '67.00'; } else { reject('unknown shipping option \'' + shippingoption + '\''); return; } selectedshippingoption.selected = true; othershippingoption.selected = false; details.displayitems.splice(2, 1, selectedshippingoption); resolve(details); } specifications specification status comment payment request api candidate recommendatio...

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. it is case-sensitive. lengthcomputable optional is a boolean flag indicating if the total work to be done, and the amount of work already done, by the underlying process is calculable. in other words, it tells if the progress is measurable or not. it defaults to false. loaded optional is an unsigned long long representing the amount of work already performed by the underlying process. the r...
...ndicating if the total work to be done, and the amount of work already done, by the underlying process is calculable. in other words, it tells if the progress is measurable or not. it defaults to false. loaded optional is an unsigned long long 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. when downloading a resource using http, this only represent the part of the content itself, not headers and other overhead. it defaults to 0. total optional is an unsigned long long representing the total amount of work that the underlying process is in the progress of performing. when downloading a resource using http, this only represent the content itself, not headers and other overhead. it...

RTCIceCandidatePairStats.bytesReceived - Web APIs
only data bytes are counted; overhead such as padding, headers, and the like are not included in this count. ...
...only data bytes are counted; overhead such as padding, headers, and the like are not included in this count. ...

RTCIceCandidatePairStats.bytesSent - Web APIs
only data bytes are counted; overhead such as padding, headers, and the like are not included in this count. ...
...only data bytes are counted; overhead such as padding, headers, and the like are not included in this count. ...

RTCInboundRtpStreamStats.bytesReceived - Web APIs
this value can be used to calculate an approximation of the average media data rate: avgdatarate = rtcinboundrtpstreamstats.bytesreceived / elapsedtime; this value gets reset to zero if the sender's ssrc identifier changes for any reason. ...
...this value can be used to calculate an approximation of the average media data rate: avgdatarate = rtcinboundrtpstreamstats.bytesreceived / elapsedtime; this value gets reset to zero if the sender's ssrc identifier changes for any reason. ...

RTCInboundRtpStreamStats.framesDecoded - Web APIs
this represents the number of frames that would have been displayed assuming no frames were skipped. ...
...this represents the number of frames that would have been displayed assuming no frames were skipped. ...

RTCOutboundRtpStreamStats.framesEncoded - Web APIs
note: this property is only valid for video streams. ...
... note: this property is only valid for video streams. ...

SVGGeometryElement - Web APIs
in svg 2 they were moved to this interface. properties this interface also inherits properties from its parent, svggraphicselement. svggeometryelement.pathlength read only this property reflects the pathlength attribute. methods this interface also inherits methods from its parent, svggraphicse...
...f the pointer-events property on the element determines whether a point is considered to be within the fill. svggeometryelement.ispointinstroke() determines whether a given point is within the stroke shape of an element. normal hit testing rules apply; the value of the pointer-events property on the element determines whether a point is considered to be within the stroke. svggeometryelement.gettotallength() returns the user agent's computed value for the total length of the path in user units. svggeometryelement.getpointatlength() returns the point at a given distance along the path. specifications specification status comment scalable vector graphics (svg) 2the definition of 'svggeometryelement' in that specification. candidate recommendation initial defi...

SubtleCrypto.deriveBits() - Web APIs
tekey, 128 ); const buffer = new uint8array(sharedsecret, 0, 5); const sharedsecretvalue = document.queryselector(".ecdh .derived-bits-value"); sharedsecretvalue.classlist.add("fade-in"); sharedsecretvalue.addeventlistener("animationend", () => { sharedsecretvalue.classlist.remove("fade-in"); }); sharedsecretvalue.textcontent = `${buffer}...[${sharedsecret.bytelength} bytes total]`; } // generate 2 ecdh key pairs: one for alice and one for bob // in more normal usage, they would generate their key pairs // separately and exchange public keys securely const generatealiceskeypair = window.crypto.subtle.generatekey( { name: "ecdh", namedcurve: "p-384" }, false, ["derivebits"] ); const generatebobskeypair = window.crypto.subtle.generatekey( { name: "ec...
... recommendation initial definition. ...

VideoPlaybackQuality - Web APIs
roperties the videoplaybackquality interface doesn't inherit properties from any other interfaces. creationtime read only a domhighrestimestamp containing the time in miliseconds between the start of the navigation and the creation of the object. droppedvideoframes read only an unsigned long giving the number of video frames dropped since the creation of the associated htmlvideoelement. ...
...the frame delay is the difference between a frame's theoretical presentation time and its effective display time. methods the videoplaybackquality interface has no methods, and does not inherit any. ...

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. event event.loaded the amount of data currently transfered. event.total the total amount of data to be transferred. ...
...nformation when an xmlhttprequest before success completely. syntax xmlhttprequest.onprogress = callback; values callback is the function to be called periodically before the request is completed. event event.loaded the amount of data currently transfered. event.total the total amount of data to be transferred. ...

XREnvironmentBlendMode - Web APIs
the webxr api's enumerated type xrenvironmentblendmode defines strings used to identify if and how to blend the rendered virtual content with the real world. its values are used by the xrsession interface's environmentblendmode property. values opaque the rendered image is drawn without allowing any pass-through imagery. this is primarily used by fully-immersive vr headsets, which totally obscure the surrounding environment, with none of the real world shown to the user at all. the alpha values specified in the xrsession's renderstate property's baselayer field are ignored since the alpha values for the rendered imagery are all treated as being 1.0 (fully opaque). additive primarily used by ar devices with transparent lenses which directly allow reality to pass through to the user's eye...
... controlled, whether it's reality or the rendered xr image, the user's environment can be blended with the virtual environment with each pixel having its color and brightness precisely controlled. in this mode, the xrsession's renderstate.baselayer property provides relative weights of the artificial layer during the compositing process. pixels whose alpha value is 1.0 are rendered fully opaque, totally obscuring the real world, while pixels with an alpha of 1.0 are totally transparent, leaving the surrounding environment to pass through. specifications specification status comment webxr augmented reality modulethe definition of 'xrenvironmentblendmode' in that specification. editor's draft initial definition. ...

XRSession.environmentBlendMode - Web APIs
n.environmentblendmode; value a domstring whose value is one of the strings found in the enumerated type xrenvironmentblendmode, defining if—and if so, how—virtual, rendered content is overlaid atop the image of the real world. permitted values are: opaque the rendered image is drawn without allowing any pass-through imagery. this is primarily used by fully-immersive vr headsets, which totally obscure the surrounding environment, with none of the real world shown to the user at all. the alpha values specified in the xrsession's renderstate property's baselayer field are ignored since the alpha values for the rendered imagery are all treated as being 1.0 (fully opaque). additive primarily used by ar devices with transparent lenses which directly allow reality to pass through to the ...
... controlled, whether it's reality or the rendered xr image, the user's environment can be blended with the virtual environment with each pixel having its color and brightness precisely controlled. in this mode, the xrsession's renderstate.baselayer property provides relative weights of the artificial layer during the compositing process. pixels whose alpha value is 1.0 are rendered fully opaque, totally obscuring the real world, while pixels with an alpha of 1.0 are totally transparent, leaving the surrounding environment to pass through. specifications specification status comment webxr augmented reality modulethe definition of 'xrsession.environmentblendmode' in that specification. working draft initial definition. ...

ARIA: feed role - Accessibility
good user experience, avoid inserting or removing articles in the middle of a feed, load new articles before the user has reached the end of the feed, and provide keyboard commands for moving focus among articles so that keyboard users can navigate through your feed. see keyboard interactions below. if the number of articles is known, set aria-setsize on the articles themselves. however, if the total number is extremely large, indefinite, or changes often, set aria-setsize="-1" to indicate that the size of the feed is not known. another feature of the feed pattern is skim reading: articles within a feed can contain both an accessible name with the aria-label and a description with an aria-describedby, suggesting to screen readers which elements to speak after the label when navigating by art...
...eferring to the article title or other child that can serve as a distinguishing label. each article should preferably have aria-describedby referring to one or more elements inside the article that serve as the primary content of the article. each article element has aria-posinset set to a value that represents its position in the feed and an aria-setsize set to a value that represents either the total number of articles that have been loaded or the total number in the feed, depending on which value is more helpful to users. if the total number in the feed is not known, set aria-setsize="-1". required javascript features none, except as required by any attributes. for example, setting aria-busy to true during the update operation if needed, and then to false upon completion. examples exa...

ARIA: row role - Accessibility
lected="undefined" or the attribute is missing: the row is not selectable. aria-colindex attribute the aria-colindex attribute is only needed if columns are hidden from the dom. it is generally placed on row children, rather than on the row itself. if the columns displayed are contiguous, then it can be placed on the row. the attribute takes as its value an integer between 1 and the total number of columns within the table, grid or treegrid. when placed on the row, the aria-colindex defines an element's column index or position with respect to the total number of columns within a row. for example, in a table with 15 columns, and columns 4, 5, and 6 are in the dom, aria-colindex="4" could be set on every row. if the set of columns which is present in the dom is not contiguous,...
... present in the dom is not contiguous, or if there are cells spanning more than one row or column, put the aria-colindex on all of the children of each row instead of on the row itself. if all the columns are in the dom, this attribute is not necessary. aria-rowindex attribute the aria-rowindex attribute is only needed if rows are hidden from the dom, to indicate which row, in the list of total rows, is being read. the attribute, placed with a unique value on each row, takes as its value an integer between 1 and the total number of rows within the table, grid or treegrid, indicating the position, or index, of each row. for example, if a table has 1,500 rows, but only the header and rows 47 and 52 are in the dom, aria-rowindex="1" would be set on the header row, and aria-rowindex="47" an...

offset-distance - CSS: Cascading Style Sheets
css property specifies a position along an offset-path for an element to be placed. syntax /* default value */ offset-distance: 0; /* the middle of the offset-path */ offset-distance: 50%; /* a fixed length positioned along the path */ offset-distance: 40px; <length-percentage> a length that specifies how far the element is along the path (defined with offset-path). ...
...50%; /* a fixed length positioned along the path */ offset-distance: 40px; <length-percentage> a length that specifies how far the element is along the path (defined with offset-path). 100% represents the total length of the path (when the offset-path is defined as a basic shape or path()). formal definition initial value0applies totransformable elementsinheritednopercentagesrefer to the total path lengthcomputed valuefor <length> the absolute value, otherwise a percentageanimation typea length, percentage or calc(); formal syntax <length-percentage>where <length-percentage> = <length> | <percentage> examples using offset-distance in an animation the motion aspect in css motion path typically comes from animating the offset-distance property. if you want to animate an element alon...

<colgroup> - HTML: Hypertext Markup Language
ssumed. the descendant <col> elements may override this value using their own align attribute. note: do not try to set the text-align property on a selector giving a <colgroup> element. because <td> elements are not descendant of the <colgroup> element, they won't inherit it. if the table doesn't use a colspan attribute, use one td:nth-child(an+b) css selector per column, where a is the total number of the columns in the table and b is the ordinal position of this column in the table. only after this selector the text-align property can be used. if the table does use a colspan attribute, the effect can be achieved by combining adequate css attribute selectors like [colspan=n], though this is not trivial. bgcolor the background color of the table. it is a 6-digit hexadeci...
...l; and top, which will put the text as close to the top of the cell as it is possible. note: do not try to set the vertical-align property on a selector giving a <colgroup> element. because <td> elements are not descendant of the <colgroup> element, they won't inherit it. if the table doesn't use a colspan attribute, use the td:nth-child(an+b) css selector per column, where a is the total number of the columns in the table and b is the ordinal position of the column in the table. only after this selector the vertical-align property can be used. if the table does use a colspan attribute, the effect can be achieved by combining adequate css attribute selectors like [colspan=n], though this is not trivial. examples please see the <table> page for examples on <colgroup>. s...

itemscope - HTML: Hypertext Markup Language
add a dash of nutmeg.</span> <br> <span itemprop="aggregaterating" itemscope itemtype="http://schema.org/aggregaterating"> <span itemprop="ratingvalue">4.0</span> stars based on <span itemprop="reviewcount">35</span> reviews </span> <br> prep time: <time datetime="pt30m" itemprop="preptime">30 min</time><br> cook time: <time datetime="pt1h" itemprop="cooktime">1 hou</time>r<br> total time: <time datetime="pt1h30m" itemprop="totaltime">1 hour 30 min</time><br> yield: <span itemprop="recipeyield">1 9" pie (8 servings)</span><br> <span itemprop="nutrition" itemscope itemtype="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 servi...
... itemprop name grandma's holiday apple pie itemprop image https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg itemprop datepublished 2009-11-05 itemprop description this is my grandmother's apple pie recipe. i like to add a dash of nutmeg. itemprop preptime pt30m itemprop cooktime pt1h itemprop totaltime pt1h30m itemprop recipeyield 1 9" pie (8 servings) itemprop recipeingredient thinly-sliced apples: 6 cups itemprop recipeingredient white sugar: 3/4 cup itemprop recipeinstructions 1. cut and peel apples 2. mix sugar and cinnamon. use additional sugar for tart apples . itemprop author [person] itemprop name...

SVG documentation index - SVG: Scalable Vector Graphics
attribute indicates the panose-1 number of a font face. 157 path svg, svg attribute the path attribute has two different meanings, either it defines a text path along which the characters of a text are rendered, or a motion path along which a referenced element is animated. 158 pathlength svg, svg attribute the pathlength attribute lets authors specify a total length for the path, in user units. this value is then used to calibrate the browser's distance calculations with those of the author, by scaling all distance computations using the ratio pathlength/(computed value of path length). 159 patterncontentunits svg, svg attribute the patterncontentunits attribute indicates which coordinate system to use for the contents of the <pat...
...-intent deprecated, svg, svg attribute the rendering-intent attribute permits the specification of a color profile rendering intent other than the default. 175 repeatcount svg, svg attribute the repeatcount attribute indicates the number of times an animation will take place. 176 repeatdur svg, svg attribute the repeatdur attribute specifies the total duration for repeating an animation. 177 requiredfeatures svg, svg attribute the requiredfeatures attribute takes a list of feature strings, with the individual strings separated by white space. it determines whether or not all of the named features are supported by the browser; if all of them are supported, the attribute evaluates to true end the element is rendered; otherwi...

Introduction to using XPath in JavaScript - XPath
athresult object, which can be a single node or a set of nodes. the existing documentation for this method is located at document.evaluate, but it is rather sparse for our needs at the moment; a more comprehensive examination will be given below. var xpathresult = document.evaluate( xpathexpression, contextnode, namespaceresolver, resulttype, result ); parameters the evaluate function takes a total of five parameters: xpathexpression: a string containing the xpath expression to be evaluated. contextnode: a node in the document against which the xpathexpression should be evaluated, including any and all of its child nodes. the document node is the most commonly used. namespaceresolver: a function that will be passed any namespace prefixes contained within xpathexpression which returns a...
...on ' + e ); } snapshots when the specified result type in the resulttype parameter is either: unordered_node_snapshot_type ordered_node_snapshot_type the xpathresult object returned is a static node-set of matched nodes, which allows us to access each node through the snapshotitem(itemnumber) method of the xpathresult object, where itemnumber is the index of the node to be retrieved. the total number of nodes contained can be accessed through the snapshotlength property. snapshots do not change with document mutations, so unlike the iterators, the snapshot does not become invalid, but it may not correspond to the current document, for example, the nodes may have been moved, it might contain nodes that no longer exist, or new nodes could have been added. snapshot example var nodessna...

Communicating using "port" - Archive of obsolete content
on(): listen to a message. removelistener(): stop listening to a message. once(): listen to only the first occurrence of a message. accessing port accessing port in the content script note that the global self object is completely different from the self module, which provides an api for an add-on to access its data files ...

context-menu - Archive of obsolete content
never the user visits a certain page, don't create the item when that page loads, and don't remove it when the page unloads. rather, create your item only once and supply a context that matches the target url. context menu items are displayed in the order created or in the case of sub menus the order added to the sub menu. menu items for each add-on will be grouped together automatically. if the total number of menu items in the main context menu from all add-ons exceeds a certain number (normally 10 but configurable with the extensions.addon-sdk.context-menu.overflowthreshold preference) all of the menu items will instead appear in an overflow menu to avoid making the context menu too large. specifying contexts as its name implies, the context menu should be reserved for the occurrence of s...

places/history - Archive of obsolete content
by', *in addition to* entries from this last week // that contain 'javascript' }); globals functions search(queries, options) queries can be performed on history entries by passing in one or more query options. each query option can take several properties, which are and'd together to make one complete query. for additional queries within the query, passing more query options in will or the total results. an options object may be specified to determine overall settings, like sorting and how many objects should be returned. parameters queries : object|array an object representing a query, or an array of objects representing queries. each query object can take several properties, which are queried against the history database. each property is and'd together, meaning that bookmarks must ...

Forms related code snippets - Archive of obsolete content
arget.offsetleft + "px"; otable.style.top = (otarget.offsettop + otarget.offsetheight) + "px"; otarget.parentnode.insertbefore(otable, otarget); }; ainstances.push(this); } datepicker.prototype.writedays = function () { const nendblanks = (this.current.getday() + bzeroismonday * 6) % 7, nend = amonthlengths[this.current.getmonth()] + nendblanks, ntotal = nend + ((7 - nend % 7) % 7); var otd, otr; if (this.otbody) { this.container.removechild(this.otbody); } this.otbody = document.createelement("tbody"); for (var nday, oday, niter = 0; niter < ntotal; niter++) { if (niter % 7 === 0) { otr = document.createelement("tr"); this.otbody.appendchild(otr); } nday = niter - nendblanks + 1; ...

Examples and demos from articles - Archive of obsolete content
] image preview before upload [html] the filereader.prototype.readasdataurl() method is useful, for example, to get a preview of an image before uploading it. [article] note: the filereader() constructor was not supported by internet explorer for versions before 10. for a full compatibility code, see also our crossbrowser possible solution for image preview. determine if an element has been totally scrolled [html] this example shows how to determine whether a user has completely scrolled an element or not. [article] css pure-css dropdown menu [html] with the :hover pseudo-class you can create complex cascade algorithms. this is a common technique used, for example, in order to create pure-css dropdown menus (that is only css, without using javascript). .[article] pure-css web gall...

Extension Versioning, Update and Compatibility - Archive of obsolete content
der to do this you must add an updateinfourl entry to the update manifest (see the example above). the page at this url will be retrieved and displayed to the user. since it is being displayed outside of a normal webpage context it is heavily sanitized, which means there are few formatting options available and scripting and images aren't allowed. the information page retrieved must currently be totally valid xhtml, including being delivered with the mime type application/xhtml+xml (important: see problems section) you may include %app_locale% in your updateinfourl if you want to have locale information included in the url -- this allows you to customize the text based on the user's locale. you may also use the other substitution strings supported by updateurl, although those may be less usef...

The Essentials of an Extension - Archive of obsolete content
that on the xul file you enclose the string key with & and ; while on the dtd file you only specify the key. you may get weird parsing errors or incorrect localization if you don't get this right. access keys are the shortcuts that allow you to quickly navigate a menu using only the keyboard. they are also the only way to navigate a menu for people with accessibility problems, such as partial or total blindness, or physical disabilities that make using a mouse very difficult or impossible. you can easily recognize the access keys on windows because the letter that corresponds to the access key is underlined, as in the following image: most user interface controls have the accesskey attribute, and you should use it. the value of the access key is localized because it should match a letter ...

MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
extensions drwxr-xr-x 2 root root 4096 juil. 2 10:27 greprefs drwxr-xr-x 2 root root 4096 juil. 1 10:18 icons drwxr-xr-x 3 root root 4096 juil. 2 10:45 isp drwxr-xr-x 4 root root 4096 juil. 2 10:45 modules drwxr-xr-x 2 root root 4096 juil. 2 10:45 outtestdata drwxr-xr-x 6 root root 4096 juil. 2 10:45 res [root@b008-02 commsrc]# ls -l /usr/local/thunderbirddebug/bin/ total 4 lrwxrwxrwx 1 root root 64 juil. 2 10:45 thunderbird -> /usr/local/thunderbirddebuglibs/thunderbird-3.0b3pre/thunderbird [root@b008-02 thunderbirddebuglibs]# find /usr/local/thunderbirddebuglibs/ -name prefcalls.js /usr/local/thunderbirddebuglibs/thunderbird-3.0b3pre/defaults/autoconfig/prefcalls.js old mozilla 1.x, possibly netscape 6/7 the following is for the record... it also contains ...

In-Depth - Archive of obsolete content
oolbar. values: normal, reverse -moz-image-region this is useful for dividing up an image into multiple smaller images. it uses a rect() object to determine the clipping region. check out the section on organizing images for more information. example: -moz-image-region: rect(168px 69px 189px 46px); -moz-opacity makes boxes semi-transparent. it takes a decimal value, 0.00 is invisible and 1.00 is totally visible. how do i know what to modify? now that you've got everything extracted and you know how to modify items, you might be wondering, how do i know where everything is? well there is an easy way to find out - using the dom inspector. if you didn't install it when you first installed mozilla you may have to run the installer again. load mozilla and one browser window. then open the dom inspe...

Creating a Skin for Mozilla - Archive of obsolete content
introduction in order to create a skin for mozilla, you will need to know three things. how to edit images, extract zip files, and how to modify css. mozilla uses standard gif, png, and jpeg images for the buttons and css to style everything else in the interface. what is a skin? a skin does not totally change the interface, it just defines how it looks. you cannot change what happens when the user right clicks on an image, but you can change the look of the right click menu (make it blue with pink polka dots, for example). if you want to change the functionality of mozilla, you'll have to look into modifying the chrome. that is beyond the scope of this document. contents getting started setup changing borders and colours changing images creating the install script ...

Block and Line Layout Cheat Sheet - Archive of obsolete content
this flag is set on a newly created frame, and later cleared by the frame's reflow() method when the frame has had its initial reflow. ns_frame_sync_frame_and_view ns_frame_outside_children this flag is set if the combined area of a frame's children extend past the frame's bounding box. (what is a frame's "bounding box"?) if this flag is set, then <code>moverflowarea</code> will contain the total area of the frame, including the overflow. ns_frame_external_reference ns_frame_replaced_element ns_frame_generated_content ns_frame_has_loaded_images ns_frame_out_of_flow ns_frame_selected_content ns_frame_is_dirty ns_frame_is_unflowable an unflowable frame is an error condition; for example, due to system limitations. currently, the only way to get an unflowable frame is to have...

Documentation for BiDi Mozilla - Archive of obsolete content
overview of bidi processing bidi text is reordered according to the unicode bidi algorithm (uba). ...

Layout System Overview - Archive of obsolete content
s to fit within a given screen area sounds simple, but the interaction of in-flow and out-of-flow elements, the considerations of incremental page rendering, and the performance concerns of dynamic content changes makes for a system that has a lot of work to do, and a lot of data to manage. here are the high-level classes that make up the layout system. of course this is a small percentage of the total classes in layout (see the detailed design documents for the details on all of the classes, in the context of their actual role). presentation shell / presentation context together the presentation shell and the presentation context provide the root of the current presentation. the original design provided for a single presentation shell to manage multiple presentation contexts, to allow a single...

Introducing the Audio API extension - Archive of obsolete content
t sample offset (the sample offset that is currently being played by the hardware can be obtained with mozcurrentsampleoffset()), where "a little" means something on the order of 500 ms of samples. for example, if working with two channels at 44100 samples per second, a writing interval of 100 ms, and a pre-buffer equal to 500 ms, one would write an array of (2 * 44100 / 10) = 8820 samples, and a total of (currentsampleoffset + 2 * 44100 / 2). it's also possible to auto-detect the minimal duration of the pre-buffer, such that the sound is played without interruptions, and lag between writing and playback is minimal. to do this start writing the data in small portions and wait for the value returned by mozcurrentsampleoffset() to be greater than 0. var prebuffersize = samplerate * 0.020; // in...

Extensions - Archive of obsolete content
most notably, the prism application id and the differences in the user interface (ui). extensions typically overlay the host application's ui to add toolbar buttons, menus and other features. one of prism's features is an extreme lack of ui elements, which means that trying to use the same overlays in firefox and prism is really not possible. ...

New Skin Notes - Archive of obsolete content
existing fixes should be on test/docs/ now. --dria stuff that's been fixed note that while i've made these fixes, they haven't necessarily been checked in yet. edit page textarea needs to 'scale' better with page width (so large whitespace area's are non-existant), suggest min-width:some-em-size; width: 88%; and max-width set to 95% or something like that. --callek i tried this, but it gets totally screwed up in ie for some reason. i'll try again, but can't guarantee this will be fixed for the initial upgrades. --dria took two days, but i finally got this sorted out. when the skin is updated on test/docs, editform textarea should be resizeable in all browsers. yay! --dria wordpress skins need footer information. -- dria when a page is redirected, need to say-so and what it was redi...

Rsyncing the CVS Repository - Archive of obsolete content
zilla.org cvs repository can be downloaded via rsync. this is useful for faster diffs or for attempting to import it into another version control system. here's how to do it: rsync -az --delete --stats cvs-mirror.mozilla.org::mozilla ~/cvs-mirror this will mirror the cvs repository into ~/cvs-mirror. optionally, the --progress option will show the progress for each file, and a percentage of the total files that are transferred. at the time of this writing, this will take 2.8 gb of disk space. note that for using this copy, the nolocks line in cvsroot/config will need to be commented out, as it requires a modified cvs binary. references thanks also to bz for telling me the exact commands that i need ...

The Download Manager schema - Archive of obsolete content
referrer text the referrer for the download. entityid text the entity id from the nsiresumablechannel used to implement the download channel. this information is used to resume the download after it's been paused. currbytes integer the current number of bytes that have been downloaded. defaults to 0, may not be null. maxbytes integer the total number of bytes that need to be downloaded. defaults to -1, may not be null. mimetype text the mime type of the file. preferredapplication text the preferred application to use to open the file after the download is complete. preferredaction integer the action constant from nsimimeinfo representing the action to take upon completing the download. defau...

Venkman Internals - Archive of obsolete content
text before the last instance of the word "function" on the line where this function starts. (not in 2006, seems to be computed on the fly in getsourcecontext()). the full text of the file can be found in an array located at scriptwrapper.scriptinstance.sourcetext.lines. this array is 0 based, of course. the starting line of the function is scriptwrapper.jsdscript.baselinenumber (one based). the total length of the function is scriptwrapper.jsdscript.lineextent. if you want to get at the pretty printed source text, instead of the actual source text, use scriptwrapper.jsdscript.functionsource. scriptinstance all scriptwrappers are parented by a single scriptinstance, which holds all of the scriptwrappers for a particular url. from here, you can set and clear breakpoints by line number (inste...

Reading from Files - Archive of obsolete content
ailable, not the number of characters available, because the file hasn't been read and parsed yet, so the actual number of characters isn't known yet. fortunately as a character is always at least one byte long in the default utf-8 encoding, the number of characters will always be equal to or smaller than the number of bytes available. for normal file streams, the available method will return the total number of bytes left in the file to read. in effect, the above code ends up reading the entire contents of the file into a single string. the available method returns 0 if there is no more data to read, so you could use a loop to read a number of strings. this example keeps reading 10 character strings from a file until there is no more data to read. note that the last string read may be less tha...

Index - Archive of obsolete content
xul reference clicktoscroll, if true, the arrows must be clicked to scroll the scrollbox content. 1091 assign xul elements, xul reference for xml templates, specifies an additional variable to assign a value to. 1092 attribute.align the align attribute specifies how child elements of the box are aligned, when the size of the box is larger than the total size of the children. for boxes that have horizontal orientation, it specifies how its children will be aligned vertically. for boxes that have vertical orientation, it is used to specify how its children are algined horizontally. the pack attribute is related to the alignment but is used to specify the position in the opposite direction. you can also specify the value of align using the style pr...

getRowCount - Archive of obsolete content
...

Simple Example - Archive of obsolete content
the action body might look like the following, which displays the image using its url and title in a label. you might note that the image's src attribute uses the member variable ?photo <action> <vbox uri="?photo" align="start"> <image src="?photo"/> <label value="?title"/> </vbox> </action> it shouldn't be too difficult to tell what would appear in the window in th...

Tree Box Objects - Archive of obsolete content
rows in a page. in the scrolling example above, getpagelength() would return four. note that in firefox 1.0 and mozilla 1.7 and earlier, the getpagelength() function is called getpagecount() instead. the name was changed to getpagelength() since it was confusing before since it doesn't return the number of pages, but the size of each page. you could determine the number of pages by dividing the total number of rows by the page length. the ensurerowisvisible() function will scroll to a row just as scrolltorow() does, but does not scroll if the row is already visible. cell coordinates some of the most interesting functions of the tree box object are several functions which may be used to get the parts of the tree at specific coordinates and vice versa. the getcellat() function may be use...

Tree Selection - Archive of obsolete content
the onselect() event handler is shown below. <tree id="treeset" onselect="alert('you selected something!');"> tree indices the tree has a property currentindex, which can be used to get the currently selected item, where the first row is 0. child items are included in the count just after their parents. this means that if there are 3 top-level items and each has two child items, there will be a total of 9 items. the first item (at index 0) will be the first top-level item. the next item at index 1 will be its first child. the second child will be at index 2 and the second parent item will be at position 3 and so on. in the image, there are eight rows displayed, of which two are selected. the first selected row has an index of 4 and the second has an index of 7. the rows that are not displ...

Tree View Details - Archive of obsolete content
this.visibledata[idx][2]; }, iscontainerempty: function(idx) { return false; }, isseparator: function(idx) { return false; }, issorted: function() { return false; }, iseditable: function(idx, column) { return false; }, } the rowcount function will return the length of the visibledata array. note that it should return the current number of visible rows, not the total. so, at first, only three items are visible and the rowcount should be three, even though six rows are hidden. also note the use of the javascript get operator to bind a property to a function, so to have the value of the rowcount property that can change dynamically over time, as rowcount has to be a read-only attribute as defined in nsitreeview. the settree function will be called to set the t...

Trees - Archive of obsolete content
commonly done, as it is often the case that the data in the tree is the most significant information displayed, so it makes sense to make the tree grow to fit. however, you may specify a specific number of rows to appear in a tree by setting the rows attribute on the tree element. this attribute specifies how many rows are displayed in the user interface, not how many rows of data there are. the total number of rows is supplied by the tree view. if there are more rows of data in the tree, a scrollbar will appear to allow the user to see the rest of them. if you don't specify the rows attribute, the default value is 0, which means that none of the rows will appear. in this case, you would make the tree flexible. if your tree is flexible, it doesn't need a rows attribute since it will grow to fi...

The Implementation of the Application Object Model - Archive of obsolete content
tree. "aha!" some of you might be saying. "couldn't you just perform a tree transformation on whatever representation you have in memory?" the answer is "yes, provided there is one single common intermediate representation of the collected and aggregated data to use as the basis for the translation." "why?" you ask. well, let's take this problem to the natural extreme, and assume that there are n total possible representations for the same group of data. then without some common internal representation of the data, it would be necessary to implement n*n total translators in order to guarantee that for whatever content model you happen to have built that the transformation could be applied. if there is a common intermediate representation of the data in question, then we need only implement n tr...

listbox - Archive of obsolete content
zero-based position of the specified item. items are numbered starting at the first item displayed in the list. getitematindex( index ) return type: element returns the element that is at the specified index. getnumberofvisiblerows() return type: integer returns the number of rows that are currently visible to the user. getrowcount() return type: integer returns the total number of rows in the element, regardless of how many rows are displayed. getselecteditem( index ) return type: element when multiple items are selected, you can retrieve each selected item using this method. the argument index specifies the index in the list of the selected items, not the row number of the item. the item index is zero-based, thus this example will return the first selected i...

richlistbox - Archive of obsolete content
ro-based position of the specified item. items are numbered starting at the first item displayed in the list. getitematindex( index ) return type: element returns the element that is at the specified index. getnumberofvisiblerows() return type: integer returns the number of rows that are currently visible to the user. getrowcount() return type: integer returns the total number of rows in the element, regardless of how many rows are displayed. getselecteditem( index ) return type: element when multiple items are selected, you can retrieve each selected item using this method. the argument index specifies the index in the list of the selected items, not the row number of the item. the item index is zero-based, thus this example will return the first selected ...

XULRunner tips - Archive of obsolete content
("browser.download.manager.showwhenstarting", true); pref("browser.download.manager.usewindow", true); pref("browser.download.manager.closewhendone", true); pref("browser.download.manager.opendelay", 0); pref("browser.download.manager.focuswhenstarting", false); pref("browser.download.manager.flashcount", 2); // pref("alerts.slideincrement", 1); pref("alerts.slideincrementtime", 10); pref("alerts.totalopentime", 4000); pref("alerts.height", 50); if you are missing preferences that a dialog requires, you will get the following errors: component returned failure code: 0x8000ffff (ns_error_unexpected) [nsiprefbranch.getboolpref] error: dialog has no properties source file: chrome://mozapps/content/downloads/u...ontenttype.xul line: 1 enabling password manager these preferences seem to be th...

Why RSS Slash is Popular - Counting Your Comments - Archive of obsolete content
3f12a0ff7d:2005/05/15/112</guid> <pubdate>sun, 15 may 2005 08:14:11 -0500</lastbuilddate></pubdate> <link>http://www.example.com/blog/2005/05/15/112</link> <slash:comments>118</slash:comments> </item> </channel> </rss> the <slash:comments> element is it reason that the rss slash module is popular. this element gives the (current) total number of comments made for the item -- for the blog post. although not necessary, people also often use other rss modules to get at (and read) the comments (since rss does not currently provide facilities for this either). some use the well-formed web rss module for this. and some are now using atomic rss for this. (using either of these 2 rss modules is out of the scope of this article.) in rea...

Creating a Skin for Firefox - Archive of obsolete content
introduction in order to create a skin for firefox, there are three things you need to know: how to edit images, how to extract zip files, and how to modify css. firefox uses standard gif, png, and jpeg images for the buttons and css to style everything else in the interface. what is a skin? a skin does not totally change the interface; instead, it just defines how the interface looks. you can't change what happens when the user right clicks on an image, but you can change the look of the right click menu (make it blue with pink polka dots, for example). if you want to change the functionality of firefox, you'll have to look into modifying the chrome, which is beyond the scope of this document. contents getting started original document information author(s): neil marshall and tucke...

Making sure your theme works with RTL locales - Archive of obsolete content
the important thing to understand about these locales, is that the entire interface is mirrored right-to-left. that means that text that had a left margin will have a right margin instead (or -moz-margin-start), arrows that pointed right will have to point left and vice versa, and so on. ...

Using the W3C DOM - Archive of obsolete content
therefore, if you wish to read and write these properties from javascript through the dom2, use one of these two approaches: place all of the element's static css declarations (if it has any) in the element's style attribute. use no static css declarations for the element and initialize its css properties from j...

Generator comprehensions - Archive of obsolete content
examples simple generator comprehensions (for (i of [1, 2, 3]) i * i ); // generator function which yields 1, 4, and 9 [...(for (i of [1, 2, 3]) i * i )]; // [1, 4, 9] var abc = ['a', 'b', 'c']; (for (letters of abc) letters.tolowercase()); // generator function which yields "a", "b", and "c" generator c...

Enumerator.atEnd - Archive of obsolete content
n showdrives() { var s = ""; var bytespergb = 1024 * 1024 * 1024; var fso = new activexobject("scripting.filesystemobject"); var e = new enumerator(fso.drives); e.movefirst(); while (e.atend() == false) { var drv = e.item(); s += drv.path + " - "; if (drv.isready) { var freegb = drv.freespace / bytespergb; var totalgb = drv.totalsize / bytespergb; s += freegb.tofixed(3) + " gb free of "; s += totalgb.tofixed(3) + " gb"; } else { s += "not ready"; } s += "<br />"; e.movenext(); } return(s); } requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standar...

Enumerator.item - Archive of obsolete content
n showdrives() { var s = ""; var bytespergb = 1024 * 1024 * 1024; var fso = new activexobject("scripting.filesystemobject"); var e = new enumerator(fso.drives); e.movefirst(); while (e.atend() == false) { var drv = e.item(); s += drv.path + " - "; if (drv.isready) { var freegb = drv.freespace / bytespergb; var totalgb = drv.totalsize / bytespergb; s += freegb.tofixed(3) + " gb free of "; s += totalgb.tofixed(3) + " gb"; } else { s += "not ready"; } s += "<br />"; e.movenext(); } return(s); } requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standar...

Enumerator.moveFirst - Archive of obsolete content
n showdrives() { var s = ""; var bytespergb = 1024 * 1024 * 1024; var fso = new activexobject("scripting.filesystemobject"); var e = new enumerator(fso.drives); e.movefirst(); while (e.atend() == false) { var drv = e.item(); s += drv.path + " - "; if (drv.isready) { var freegb = drv.freespace / bytespergb; var totalgb = drv.totalsize / bytespergb; s += freegb.tofixed(3) + " gb free of "; s += totalgb.tofixed(3) + " gb"; } else { s += "not ready"; } s += "<br />"; e.movenext(); } return(s); } requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standar...

Enumerator.moveNext - Archive of obsolete content
n showdrives() { var s = ""; var bytespergb = 1024 * 1024 * 1024; var fso = new activexobject("scripting.filesystemobject"); var e = new enumerator(fso.drives); e.movefirst(); while (e.atend() == false) { var drv = e.item(); s += drv.path + " - "; if (drv.isready) { var freegb = drv.freespace / bytespergb; var totalgb = drv.totalsize / bytespergb; s += freegb.tofixed(3) + " gb free of "; s += totalgb.tofixed(3) + " gb"; } else { s += "not ready"; } s += "<br />"; e.movenext(); } return(s); } requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standar...

Implementation Status - Archive of obsolete content
xpath expressions in xforms section title status notes bugs 7.1 xpath datatypes supported 7.2 evaluation context partial 7.3 references, dependencies, and dynamic dependencies partial we proba...

Building up a basic demo with PlayCanvas editor - Game development
— for now there's only boxanimation.js — clicking it will add the animation script to the box object. the cylinder now we'll do the same steps for cylinder. first: create a new script asset. name it cylinderanimation.js. double click the script icon to launch the code editor. this time instead of rotating the object we will try to scale it. for that we'll need a timer to store the total amount of time passed since the start of the animation. add this code to the initialize() function: this.timer = 0; and those two lines to the update() function: this.timer += dt; this.entity.setlocalscale(1, math.abs(math.sin(this.timer)), 1); the setlocalscale() method applies the given values to the x, y and z axes of the object. in our case we're modifying the scale of the cylinder on the...

Desktop mouse and keyboard controls - Game development
p it there, so you don't have to push the files to a mobile device every time you make a change in the source code. note: the captain rogers: battle at andromeda is built with phaser and managing the controls is phaser-based, but it could also be done in pure javascript. the good thing about using phaser is that it offers helper variables and functions for easier and faster development, but it's totally up to you which approach you chose. pure javascript approach let's think about implementing pure javascript keyboard/mouse controls in the game first to see how it would work. first, we'd need an event listener to listen for the pressed keys: document.addeventlistener('keydown', keydownhandler, false); document.addeventlistener('keyup', keyuphandler, false); whenever any key is pressed down...

Unconventional controls - Game development
n with vr headsets — demoing rainbow membrane on an oculus rift with leap motion attached to it was voted one of the best webvr experiences by javascript developers visiting demo booths at conferences around the world. as well as being great for virtual interfaces, it can also be used for a casual 2d gaming experiences. it would be very difficult to do everything with only your hands, but it's totally doable for the simple captain roger's gameplay — steering the ship and shooting the bullets. there's good hello world and getting started javascript tutorials available on the leap motion documentation pages, which will get you through the basics. you can also check out the tutorial about using leap motion plugin for kiwi.js, or the case study of building a web game with leap motion and pixi...

Track the score and win - Game development
« previousnext » this is the 8th step out of 10 of the gamedev canvas tutorial. you can find the source code as it should look after completing this lesson at gamedev-canvas-workshop/lesson8.html. destroying the bricks is really cool, but to be even more awesome the game could award points for every brick a user hits, and keep count of the total score. counting the score if you can see your score throughout the game, eventually you can impress your friends. you need a variable to record the score. add the following into your javascript, after the rest of your variables: var score = 0; you also need a drawscore() function, to create and update the score display. add the following after the collisiondetection() function: function drawscore() { ctx.font = "16px arial"; ...

Code splitting - MDN Web Docs Glossary: Definitions of Web-related terms
grow in byte size, especially as the number and size of included third-party libraries increases. to prevent the requirement of downloading ginormous files, scripts can be split into multiple smaller files. then features required at page load can be downloaded immediately with additional scripts being lazy loaded after the page or application is interactive, thus improving performance. while the total amount of code is the same (and perhaps even a few bytes larger), the amount of code needed during initial load can be reduced. code splitting is a feature supported by bundlers like webpack and browserify which can create multiple bundles that can be dynamically loaded at runtime. see also bundling lazy loading http/2 tree shaking ...

Dominator - MDN Web Docs Glossary: Definitions of Web-related terms
dominates node b if every path from the root node to b passes through a. this concept is important for garbage collection because it means that b is only reachable through a. so if the garbage collector found a to be unreachable and eligible for reclaiming, than b would also be unreachable and eligible for reclaiming. so objects that a dominates contribute to the retained size of a: that is, the total amount of memory that could be freed if a itself were freed. learn more general knowledge dominator on wikipedia technical reference dominators garbage collection ...

Quality values - MDN Web Docs Glossary: Definitions of Web-related terms
text/html and application/xhtml+xml 1.0 application/xml 0.9 */* 0.8 if there is no priority defined for the first two values, the order in the list is irrelevant. nevertheless, with the same quality, more specific values have priority over less specific ones: text/html;q=0.8,text/*;q=0.8,*/*;q=0.8 value priority text/html 0.8 (but totally specified) text/* 0.8 (partially specified) */* 0.8 (not specified) some syntax, like the one of accept, allow additional specifiers like text/html;level=1. these increase the specificity of the value. their use is extremely rare. browser-specific information firefox starting with firefox 18, the quality factor values are clamped to 2 decimal places. they used ...

Accessible multimedia - Learn web development
time >= player.duration || player.paused) { player.pause(); player.currenttime = 0; playpausebtn.textcontent = 'play'; } }; these are very simple, just adding or subtracting 3 seconds to the currenttime each time they are clicked. in a real video player, you'd probably want a more elaborate seeking bar, or similar. note that we also check to see if the currenttime is more than the total media duration, or if the media is not playing, when the fwd button is pressed. if either conditions are true, we simply stop the video, to avoid the user interface going wrong if they attempt to fast forward when the video is not playing, or fast forward past the end of the video. last of all, add the following to the end of the code, to control the time elapsed display: player.ontimeupdate = ...

Cascade and inheritance - Learn web development
have no effect on specificity. the following table shows a few isolated examples to get you in the mood. try going through these, and making sure you understand why they have the specificity that we have given them. we've not covered selectors in detail yet, but you can find details of each selector on the mdn selectors reference. ...

Fundamental CSS comprehension - Learn web development
t ensures that it will grow/shrink to stay the same height as its parent container, regardless of what height it becomes.) beware! there are two errors in the provided rulesets. using any technique that you know, track these down and fix them before moving on. new rulesets you need to write: write a ruleset that targets both the card header, and card footer, giving them both a computed total height of 50px (including a content height of 30px and padding of 10px on all sides.) but express it in ems. the default margin applied to the <h2> and <p> elements by the browser will interfere with our design, so write a rule that targets all these elements and sets their margin to 0. to stop the image from spilling out of the main business card content (the <article> element), we need to giv...

Test your skills: sizing - Learn web development
live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. task two this task has a box, which contains another box. your task is to make the inner box 60% of the width of the outer box. the value of the box-sizing property is set to border-box, which means that the total width includes any padding and border. you should also give the inner box padding of 10% using the width (or inline size) as the size from which that percentage is calculated. try updating the live code below to recreate the example as displayed in the image: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor...

Styling tables - Learn web development
someone you shouldn't've)</td> </tr> <tr> <th scope="row">the clash</th> <td>1976</td> <td>6</td> <td>london calling</td> </tr> ... some rows removed for brevity <tr> <th scope="row">the stranglers</th> <td>1974</td> <td>17</td> <td>no more heroes</td> </tr> </tbody> <tfoot> <tr> <th scope="row" colspan="2">total albums</th> <td colspan="2">77</td> </tr> </tfoot> </table> the table is nicely marked up, easily styleable, and accessible, thanks to features such as scope, <caption>, <thead>, <tbody>, etc. unfortunately, it doesn't look good when rendered on the screen (see it live at punk-bands-unstyled.html): with only the default browser styling it looks cramped, hard to read, and boring. w...

CSS values and units - Learn web development
m and rem are the two relative lengths you are likely to encounter most frequently when sizing anything from boxes to text. it's worth understanding how these work, and the differences between them, especially when you start getting on to more complex subjects like styling text or css layout. the below example provides a demonstration. the html is a set of nested lists — we have three lists in total and both examples have the same html. the only difference is that the first has a class of ems and the second a class of rems. to start with, we set 16px as the font size on the <html> element. to recap, the em unit means "my parent element's font-size" in the case of typography. the <li> elements inside the <ul> with a class of ems take their sizing from their parent. so each successive level ...

Flexbox - Learn web development
een set. it is relative to other flex items, meaning that giving each flex item a value of 400000 would have exactly the same effect. now add the following rule below the previous one: article:nth-of-type(3) { flex: 2; } now when you refresh, you'll see that the third <article> takes up twice as much of the available width as the other two — there are now four proportion units available in total (since 1 + 1 + 2 = 4). the first two flex items have one unit each so they take 1/4 of the available space each. the third one has two units, so it takes up 2/4 of the available space (or one-half). you can also specify a minimum size value inside the flex value. try updating your existing article rules like so: article { flex: 1 200px; } article:nth-of-type(3) { flex: 2 200px; } this bas...

Normal Flow - Learn web development
the smaller one disappears — this is called margin collapsing, and we have met this before too. let's look at a simple example that explains all of this: <h1>basic document flow</h1> <p>i am a basic block level element. my adjacent block level elements sit on new lines below me.</p> <p>by default we span 100% of the width of our parent element, and we are as tall as our child content. our total width and height is our content + padding + border width/height.</p> <p>we are separated by our margins. because of margin collapsing, we are separated by the width of one of our margins, not both.</p> <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. overflowing inline elemen...

Responsive design - Learn web development
tent starts to look bad. for example, if the line lengths become unreadably long as the screen size increases, or a box becomes squashed with two words on each line as it narrows. in the early days of responsive design, our only option for performing layout was to use floats. flexible floated layouts were achieved by giving each element a percentage width, and ensuring that across the layout the totals were not more than 100%. in his original piece on fluid grids, marcotte detailed a formula for taking a layout designed using pixels and converting it into percentages. target / context = result for example, if our target column size is 60 pixels, and the context (or container) it is in is 960 pixels, we divide 60 by 960 to get a value we can use in our css, after moving the decimal point tw...

JavaScript basics - Learn web development
strange results when performing calculations. be careful that you are referring to your variables correctly, and getting the results you expect. for example, enter '35' + '25' into your console. why don't you get the result you expected? because the quote marks turn the numbers into strings, so you've ended up concatenating strings rather than adding numbers. if you enter, 35 + 25 you'll get the total of the two numbers. conditionals conditionals are code structures used to test if an expression returns true or not. a very common form of conditionals is the if ... else statement. for example: let icecream = 'chocolate'; if(icecream === 'chocolate') { alert('yay, i love chocolate ice cream!'); } else { alert('awwww, but chocolate is my favorite...'); } the expression inside the if( ...

HTML Cheatsheet - Learn web development
apply them. mdn provides you with an extended html documentation as well as a deep instructional html how-to. however, in many cases we just need some quick hints as we go. that's the whole purpose of the cheatsheet, to give you some quick accurate ready to use code snippets for common usages. remember that html tags must be used for their semantic, not their appearance. it's always possible to totally change the look and feel of a given tag using css so, when using html, take the time to focus on the meaning rather than the appearance. inline elements an "element" is a single part of a webpage. some elements are large and hold smaller elements like containers. some elements are small and are "nested" inside larger ones. by default, "inline elements" appear next to one another in a webpage...

Test your skills: Conditionals - Learn web development
he first, you need to nest an if...else if...else that puts appropriate messages into the response variable depending on what the value of score is — if the machine is turned on. the different conditional tests (and resulting responses) are as follows: score of less than 0 or more than 100 — "this is not possible, an error has occurred." score of 0 to 19 — "that was a terrible score — total fail!" score of 20 to 39 — "you know some things, but it's a pretty bad score. needs improvement." score of 40 to 69 — "you did a passable job, not bad!" score of 70 to 89 — "that\'s a great score, you really know your stuff." score of 90 to 100 — "what an amazing score! did you cheat? are you for real?" try updating the live code below to recreate the finished example. after you've...

Video and Audio APIs - Learn web development
set as minutevalue plus a colon character plus secondvalue. the node.textcontent value of the timer is set to the time value, so it displays in the ui. the length we should set the inner <div> to is worked out by first working out the width of the outer <div> (any element's clientwidth property will contain its length), and then multiplying it by the htmlmediaelement.currenttime divided by the total htmlmediaelement.duration of the media. we set the width of the inner <div> to equal the calculated bar length, plus "px", so it will be set to that number of pixels. fixing play and pause there is one problem left to fix. if the play/pause or stop buttons are pressed while the rewind or fast forward functionality is active, they just don't work. how can we fix it so that they cancel the rwd/...

Basic math in JavaScript — numbers and operators - Learn web development
sing three numbers and the subtraction and division operators. change the line that calculates x so the box is 200px wide, but the 200 is calculated using the number 4 and an assignment operator. change the line that calculates y so the box is 200px high, but the 200 is calculated using the numbers 50 and 3, the multiplication operator, and the addition assignment operator. don't worry if you totally mess the code up. you can always press the reset button to get things working again. after you've answered all the above questions correctly, feel free to play with the code some more or create your own challenges. comparison operators sometimes we will want to run true/false tests, then act accordingly depending on the result of that test — to do this we use comparison operators. ...

Measuring performance - Learn web development
and tools that you can use to visualize that data. performance apis when writing code for the web, there are a large number of web apis available that allow you to create your own performance measuring tools. you can use the navigation timing api to measure client-side web performance; including the amount of time needed to unload the previous page, how long domain lookups take, the total time spent executing the window's load handler, and more. you can use the api for metrics related to all of the navigation events displayed in the didagram below. the performance api, which provides access to performance-related information for the current page, includes the performance timeline api, the navigation timing api, the user timing api, and the resource timing api. these interfaces ...

Multimedia: Images - Learn web development
ight attributes so that the browser can reserve space for them in the layout. for any background images, it's important you set a background-color value so any content overlaid is still readable before the image has downloaded. conclusion in this section we took a look at image optimization. you now have a general understanding of how to optimize half of the average web sites average bandwidth total. this is just one of the types of media consuming users bandwidth and slowing down page load. let's take a look at video optimization, tackling the next 20% of bandwidth consumption. previous overview: performance next in this module the "why" of web performance what is web performance? how do users perceive performance? measuring performance multimedia: images multimedia: video...

The business case for web performance - Learn web development
it highlights the importance of understanding how cumulative experiences impact conversion and retention rates. performance budgets setting a web performance budget can help you make sure the team stays on track in keeping the site and help prevent regressions. a performance budget is a set of limits that are set to specify limits, such as maximum number of http requests allowed, the maximum total size of all the assets combined, the minimum allowable fps on a specific device, etc, that must be maintained. the budget can be applied to a single file, a file type, all files loaded on a page, a specific metric, or a threshold over a period of time.the budget reflects reachable goals; whehter they are time, quantity, or rule based. definining and promoting a budget helps performance proponen...

The "why" of web performance - Learn web development
ors begin abandoning slow sites at 3 seconds. the speed at which a site loads is one factor. if the site is slow to react to user interaction, or appears janky, this causes site visitors to lose interest and trust. here's some real-world examples of performance improvements: tokopedia reduced render time from 14s to 2s for 3g connections and saw a 19% increase in visitors, 35% increase in total sessions, 7% increase in new users, 17% increase in active users and 16% increase in sessions per user. rebuilding pinterest pages for performance resulted in a 40% decrease in wait time, a 15% increase in seo traffic and a 15% increase in conversion rate to signup. to build websites and applications people want to use; to attract and retain site visitors, you need to create an accessib...

Getting started with Ember - Learn web development
wards fixing one of the major accessibility disadvantages of the default todomvc app. starting the development server you may start the app in development mode by typing the following command in your terminal, while inside the todomvc directory: ember server this should give you an output similar to the following: build successful (190ms) – serving on http://localhost:4200/ slowest nodes (totaltime >= 5%) | total (avg) -----------------------------------------+----------- broccolimergetrees (17) | 35ms (2 ms) package /assets/vendor.js (1) | 13ms concat: vendor styles/assets/vend... (1) | 12ms the development server launches at http://localhost:4200, which you can visit in your browser to check out what your work looks like so far. if everythin...

Starting our Svelte Todo list app - Learn web development
ass="btn btn__primary">remove completed</button> </div> </div> check the rendered out again, and you'll see something like this: it's current not very nicely styled, and also functionally useless. but let's have a look at the markup and see how it relates to our desired features: a label and a text box for entering new tasks. three buttons to filter by task status. a label showing the total number of tasks and the completed tasks. an unordered list, which holds a list item for each task. when the task is being edited, the list item has an input and two button to cancel or save modifications. if the task is not being edited, there's a checkbox to set the completed status, and two buttons to edit or delete the task. finally there are two buttons to check/uncheck all task and to re...

TypeScript support in Svelte - Learn web development
g: let headingel: htmlelement finally, you'll notice the following error reported, related to where we set the tabindex attribute. that's because typescript is type-checking the <h2> element and expects tabindex to be of type number. to fix it, replace tabindex="-1" with tabindex={-1}, like this: <h2 id="list-heading" bind:this={headingel} tabindex={-1}>{completedtodos} out of {totaltodos} items completed</h2> this way typescript can prevent us from incorrectly assigning it to a string variable. newtodo.svelte next we will take care of newtodo.svelte. as usual, add the lang='ts' attribute. the warning will indicate that we have to specify a type for the nameel variable. set its type to htmlelement like this: let nameel: htmlelement // reference to t...

Deployment and next steps - Learn web development
to commit and push our changes to gitlab. do this by running the following commands: > git add public/index.html > git add .gitlab-ci.yml > git commit -m "added .gitlab-ci.yml file and fixed index.html absolute paths" > git push counting objects: 5, done. delta compression using up to 8 threads. compressing objects: 100% (5/5), done. writing objects: 100% (5/5), 541 bytes | 541.00 kib/s, done. total 5 (delta 3), reused 0 (delta 0) to gitlab.com:opensas/mdn-svelte-todo.git 7dac9f3..5725f46 master -> master whenever there's a job running gitlab will display an icon showing the process of the job. clicking on it will let you inspect the output of the job. you can also check the progress of the current and previous jobs from the ci / cd > jobs menu option of your gitlab project. on...

Using Vue computed properties - Learn web development
<ul> element. add the described <h2> and update the <ul> inside your app's template as follows: <h2 id="list-summary">{{listsummary}}</h2> <ul aria-labelledby="list-summary" class="stack-large"> <li v-for="item in todoitems" :key="item.id"> <to-do-item :label="item.label" :done="item.done" :id="item.id"></to-do-item> </li> </ul> you should now see the list summary in your app, and the total number of items update as you add more todo items! however, if you try checking and unchecking some items, you'll reveal a bug. currently, we're not actually tracking the "done" data in any fashion, so the number of completed items does not change. tracking changes to "done" we can use events to capture the checkbox update and manage our list accordingly. since we're not relying on a button pr...

Introduction to automated testing - Learn web development
eir freemium plan is on the amount of consumption. for automation testing through their selenium grid, lambdatest offers 60 minutes per month of free testing. the basics: manual tests once you sign in to lambdatest, you will be routed to the lambdatest dashboard. the dashboard will provide you details related to how many minutes you have consumed, how many concurrent sessions are running, your total number of tests to date, and more. to start off with manual testing you need to select the "real time testing" tab from the left navigation menu. as you click on the real time testing you will be directed to a screen where you can choose the browser configuration, browser version, os, and screen resolution with which you want to test your website. as you click on the start button, a lo...

Accessibility API cross-reference
is being modified and that assistive technologies may want to wait until the modifications are complete before exposing them to the user. busy busy busy aria-busy indicates the current "checked" state of checkboxes, radio buttons, and other widgets. checked checked checked aria-checked checked (boolean attribute) defines the total number of columns in a table, grid, or treegrid. n/a n/a aria-colcount defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. n/a n/a aria-colindex defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. n/a ...

Mozilla accessibility architecture
lrefat(). the algorithm used to calculate the number of accessible children for an accessible node is expensive. 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. therefore we have to iterate through the tree as if we were creating all of the accessible children, adding to the total as we go. to make this less expensive, once the child count or any child of an accessible is asked for, both the child count and the children are calculated at the same time and then cached, so that we can avoid doing these expensive operations more than once. the nsiaccessible getaccblah() traversal methods mentioned above all have default implementations in nsaccessible. these default implement...

Gecko info for Windows accessibility vendors
lpha builds or later) mozilla seamonkey (please use 1.8 alpha builds or later) how to find the content window and load the document screen readers need to find the content window so that they know where to start grabbing the msaa tree, in order to load the current document into a buffer in their own process. the content window always has the class mozillacontentwindowclass. ...

Creating a Language Pack
rgedir=$(pwd)/mergedir $ make installers-x-testing locale_mergedir=$(pwd)/mergedir at the end of the process, you should see the following success message. ...

How Mozilla's build system works
ition are emitted. these data structures are then read by a build backend generator, which then converts them into files, function calls, and so on. in the case of a make backend, the generator writes out makefiles. when config.status runs, you'll see the following output: reticulating splines... finished reading 1096 moz.build files into 1276 descriptors in 2.40s backend executed in 2.39s 2188 total backend files. 0 created; 1 updated; 2187 unchanged total wall time: 5.03s; cpu time: 3.79s; efficiency: 75% what this is saying is that a total of 1,096 moz.build files were read. altogether, 1,276 data structures describing the build configuration were derived from them. it took 2.40s wall time just to read these files and produce the data structures. the 1,276 data structures were fed into th...

mozbrowserasyncscroll
es: top the scroll top position in css pixels of the document within the browser <iframe>. left the scroll left position in css pixels of the document within the browser <iframe>. width the width in css pixels of the visible part of the document within the browser <iframe>. height the height in css pixels of the visible part of the document within the browser <iframe>. scrollwidth the total content width in css pixels of the document within the browser <iframe>. scrollheight the total content height in css pixels of the document within the browser <iframe>. note: top + height may be larger than scrollheight. this indicates that the content is over-scrolled, which occurs when the page "rubber-bands" after being scrolled all the way to the bottom. similarly, left + width may be g...

Roll your own browser: An embedding how-to
here is that effort. i have created a directory under embedding called config. ...

How to get a stacktrace with WinDbg
load the symbols, enter the three commands below, pressing enter after each one. (more details are available at using the mozilla symbol server.) .sympath srv*c:\symbols*http://symbols.mozilla.org/firefox;srv*c:\symbols*http://msdl.microsoft.com/download/symbols .symfix+ c:\symbols .reload /f now wait for the symbols to download. this may take some time depending on your connection speed; the total size of the mozilla and microsoft symbols download is around 1.4gb. windbg will show "busy" at the bottom of the application window until the download is complete. once the download is complete, you need to configure windbg to examine child processes, ignore a specific event caused by flash player, and record a log of loaded modules. you will also want to open a log file to save data you collect...

Addon
void datadirectorycallback( in string path, in error error ) paramet...

InstallListener
nstall. only called for add-ons that need to be downloaded. a listener may return false to cancel the download. void ondownloadstarted( in addoninstall install ) parameters install the addoninstall representing the install ondownloadprogress() called as data is received during a download. check the progress property for the amount of data downloaded and the maxprogress property for the total data expected. a listener may return false to cancel the download. void ondownloadprogress( in addoninstall install ) parameters install the addoninstall representing the install ondownloadended() called when downloading completes successfully for an add-on install. only called for add-ons that need to be downloaded. void ondownloadended( in addoninstall install ) parameters ins...

DownloadSummary
() function. method overview promise bindtolist(downloadlist alist); promise addview(object aview); promise removeview(object aview); properties attribute type description allhavestopped read only boolean indicates whether all the downloads are currently stopped. progresstotalbytes read only number indicates the total number of bytes to be transferred before completing all the downloads that are currently in progress. for downloads that do not have a known final size, the number of bytes currently transferred is reported as part of this property. this is zero if no downloads are currently in progress. progres...

DownloadTarget
ot yet been completed. it is possible for this property to have a non-zero value even if the target file no longer exists, if the value is available in download metadata. if that metadata is no longer available and the file has been deleted, then this value is zero. for single-file downloads, this property's value will always match the actual size of the file on disk, while the download.totalbytes property, when available, may indicate the size of the data as encoded for transfer instead. for downloads of multiple files, such as downloading a web page and its required media to disk, the meaning of this property is undefined. it currently indicates the size of the main file (such as the html document) rather than the sum of all of the files' sizes, but you must not rely upon this ...

OS.File for the main thread
tmp" }) limitations in a few extreme cases (hardware failure during the write, user unplugging disk during the write, etc.), data may be corrupted. if your data is user-critical (e.g., preferences, application data), you may wish to consider adding options tmppath and/or flush to reduce the likelihood of corruption, as detailed above. note that no combination of options can be guaranteed to totally eliminate the risk of corruption. use with caution: modifying the contents of data before the operation is complete is a very bad idea. promise can be rejected with os.file.error in case of any error, in particular if the destination file cannot be overwritten, or if tmppath is not on the same device as path. instances of os.file to obtain an instance of os.file, use function os.

Sqlite.jsm
er, and instead, using the conn.execute result. this example also demonstrates retrieving the primary key row id of the last inserted row. async function () { try { conn = await sqlite.openconnection({ path: dbfile.path }); let statement = "insert into accounts (username, details) values (:username, :details)" let params = { username:"lordbusiness", details: "all i'm asking for is total perfection." }; await conn.execute(statement,params); // get accountid of the insert. statement = "select last_insert_rowid() as lastinsertrowid"; result = await conn.execute(statement); // only one row is returned. let row = result[0]; let accountid = row.getresultbyname("lastinsertrowid"); if (callback) { callback(null, accountid); } } cat...

L10n Checks
+importfromhtmlfile.accesskey +importfromhtmlfile.label you can assume changed strings when you see entities removed and added with a similar name. the file names will be shown in a hierarchical form, so in the example above, your files are browser.dtd in ab-cd/browser/chrome/browser and migration.dtd in another directory level deeper. the output closes with a summary, giving the total counts of missing and obsolete strings and some statistics on how many strings are changed or not, excluding access and command keys. that gives localizers an idea on how thorough the localization is. this number won't reach 100% in general; mid 80s should be the target, though. options reference locale in the source and xpi modes you can change the default reference locale (en-us) by setting the...

Mozilla Content Localized in Your Language
vention from w3c.org: new terminology what is your localization team's process for identifying and creating new terminology? currency currency and symbol. what are other widely used currency and symbols used in your country/language for paid apps. user interface elements titles should be brief and precise. localizers can assume that source content reaches 2/3 of the total available line space. this allows localization text to expand and not be truncated or resolved through ellipsis. title on the final page (meaning no more click through) should allow enough room to display full text. buttons capitalize the first letter of each word. limit to one or two words. use verbs that precisely describe the button's action. for example, "cancel",...

Localizing with Koala
nd shouldn't be deleted. to see the results of the comparison for locale's all files (including searchbar.dtd), switch to "locale files" view in the "koala file view" sidebar. you're now looking at your locale's file structure and can see that searchbar.dtd is "unmodified" with 2 translated entities (0 missing, 0 obsolete), whereas search.properties is "modified" with 1 translated entity (6 total minus 5 missing, 0 obsolete). click on any of the files to see more detail, including the exact list of missing (green "+" icon), obsolete and translated (white circle icon) entities. now that you've translated these 3 strings, let's commit your work to the local hg repository that you created in the "creating a new project" section. committing your work hopefully by now, you have translated 3...

about:memory
...

powermetrics
, but note that you'll need a very wide window to see all the data. also note that powermetrics -h is a better guide to the the command-line options than man powermetrics. mach power you can use the mach power command to run powermetrics in combination with rapl in a way that gives the most useful summary measurements for each of firefox, chrome and safari. the following is sample output. ...

MailNews automated testing
a fake server). message manipulation: mark messages as read, tag them, untag them, move them to other folders, trash them, etc. enhanced logging: supports generating rich json streams to disk or over the network for consumption by logsploder or other tools. performance testing mail leak and bloat tests these tests start up thunderbird or seamonkey and record any leaks found, as well as the total memory requirement. although currently based on simple tests, these are useful for determining if new leaks have been introduced. for more information, see leak and bloat tests. ...

PR_NewThreadPrivateIndex
newindex on output, an index that is valid for all threads in the process. you use this index with pr_setthreadprivate and pr_getthreadprivate. destructor specifies a destructor function prthreadprivatedtor for the private data associated with the index. this function can be specified as null. returns the function returns one of the following values: if successful, pr_success. if the total number of indices exceeds 128, pr_failure. description if pr_newthreadprivateindex is successful, every thread in the same process is capable of associating private data with the new index. until the data for an index is actually set, the value of the private data at that index is null. you pass this index to pr_setthreadprivate and pr_getthreadprivate to set and retrieve data associated with ...

FC_GetOperationState
ation state of a session. syntax ck_rv fc_getoperationstate( ck_session_handle hsession, ck_byte_ptr poperationstate, ck_ulong_ptr puloperationstatelen ); parameters hsession [in] handle of the open session. poperationstate [out] pointer to a byte array of a length sufficient for containing the operation state or null. puloperationstatelen [out] pointer to ck_ulong which receives the total length (in bytes) of the operation state. description fc_getoperationstate saves the state of the cryptographic operation in a session. this function only works for digest operations for now. therefore, a user may call fc_getoperationstate without logging into the token (to assume the nss user role). return value examples see also fc_setoperationstate, nsc_getoperationstate ...

FC_SetOperationState
n state of a session. syntax ck_rv fc_setoperationstate( ck_session_handle hsession, ck_byte_ptr poperationstate, ck_ulong uloperationstatelen, ck_object_handle hencryptionkey, ck_object_handle hauthenticationkey ); parameters hsession [in] handle of the open session. poperationstate [in] pointer to a byte array containing the operation state. uloperationstatelen [in] contains the total length (in bytes) of the operation state. hencryptionkey [in] handle of the encryption or decryption key to be used in in a stored session or zero if no key is needed. hauthenticationkey [in] handle of the authentication key to be used in the stored session or zero if none is needed. description fc_setoperationstate restores the cryptographic operations state of a session from an array of byte...

Functions
this is fast if the global either doesn't exist before the script runs (the script creates it) or it's a non-configurable data property (which amounts to the same thing). otherwise the gvar instructions are as slow as name instructions. there are also combo instructions jsop_{inc,dec}gvar and jsop_gvar{inc,dec}. name instructions. in the worst case we emit jsop_{,set,call}name. these are totally general. they can still be optimized via the property cache; in the worst case we walk the scope chain. in some cases, the jit can optimize a jsop_name instruction that refers to a variable in an enclosing scope to pull the value directly out of the call object's dslots. for the expression delete name we always emit jsop_delname. it's not worth optimizing. ...

JIT Optimization Outcomes
icgetelemstub_dense icgetelemstub_densehole icgetelemstub_typedarray icgetelemstub_argselement icgetelemstub_argselementstrict icsetelemstub_dense icsetelemstub_typedarray icnamestub_readslot icnamestub_callgetter call inlining outcomes optimization outcomes of attempts to inline function calls. cantinlinegeneric cantinlineclassconstructor cantinlineexceededdepth cantinlineexceededtotalbytecodelength cantinlinebigcaller cantinlinebigcallee cantinlinebigcalleeinlinedbytecodelength cantinlinenothot cantinlinenotindispatch cantinlinenativebadtype cantinlinenotarget unable to inline function call. the callee (target) function, f in f(x), is not known at jit time. cantinlinenotinterpreted unable to inline function call. the callee function is not an interpreted function. fo...

JS_CompareStrings
scription js_comparestrings compares two js strings, str1 and str2. if the strings are identical in content and length, js_comparestrings stores 0 in *result. if str1 is less than str2, *result is less than 0. if str1 is greater than str2, *result is greater than 0. on success the function returns js_true. on error, it returns js_false and the value in result is unchanged. this function imposes a total order on all javascript strings, the same order imposed by the javascript string comparison operators (<, <=, >, >=), as described in ecma 262-3 § 11.8.5. as the standard says: the comparison of strings uses a simple lexicographic ordering on sequences of code point value values. there is no attempt to use the more complex, semantically oriented definitions of character or string equality and ...

JS_THREADSAFE
r running multiple threads of javascript code concurrently as long as no objects or strings are shared between them. we have recently made major changes to this feature. until recently, sharing objects among threads would mostly work, although scripts could easily make it crash. we have now completely removed that feature. each thread that uses the javascript engine must essentially operate in a totally separate region of memory. requests in a js_threadsafe build, the application must separate code that uses the jsapi from code that performs blocking i/o or time-consuming calculations. a request is a region of code that uses the jsapi. requests must be bracketed with calls to js_beginrequest() and js_endrequest(). js_beginrequest(cx); /* ... do jsapi stuff ... */ js_endrequest(cx); a req...

Setting up CDT to work on SpiderMonkey
...

Shell global objects
sed as the optional second argument, perform a shrinking gc rather than a normal gc. minorgc([abouttooverflow]) run a minor collector on the nursery. when abouttooverflow is true, marks the store buffer as about-to-overflow before collecting. gcparam(name [, value]) wrapper for js_[gs]etgcparameter. ...

compare-locales
+importfromhtmlfile.accesskey +importfromhtmlfile.label you can assume changed strings when you see entities removed and added with a similar name. the file names will be shown in a hierarchical form, so in the example above, your files are browser.dtd in ab-cd/browser/chrome/browser and migration.dtd in another directory level deeper. the output closes with a summary, giving the total counts of missing and obsolete strings and words, and some statistics on how many strings are changed or not, excluding access- and commandkeys. that gives localizers an idea on how thorough the localization is. this number won't reach 100% in general, mid 80s should be the target, though. pass --json to get just the summary in json format. ...

Animated PNG graphics
ecification. it must appear before the first 'idat' chunk within a valid png stream. the 'actl' chunk contains: byte offset field name field type description 0 num_frames unsigned int the number of frames in the apng. 4 num_plays unsigned int the number of times to loop this apng. 0 indicates infinite looping. num_frames indicates the total number of frames in the animation. this must equal the number of 'fctl' chunks. 0 is not a valid value. 1 is a valid value for a single-frame apng. if this value does not equal the actual number of frames it should be treated as an error. num_plays indicates the number of times that this animation should play; if it is 0, the animation should play indefinitely. if nonzero, the animation should c...

Mork
it cannot refer to a mid. the values of cells and aliases, when not specified by a mid reference, are one of the cases where whitespace is significant. using the '\' character quotes the next character; at the end of the line, it represents a continuation such as that found in c\c++ code. the '$' character quotes the next two characters (which must be valid hexadecimal digits) and these three in total represent an octet with the value of the digits. mids are unique identifiers represented by the tuple (scope, id); if the ids are the same but the scopes are different, the two mids are different. in many places, the mid's scope has an assumed default value; if the scope component is not present, it assumes this default value. morkreader usage morkreader has both internal and external linkage sta...

How to build an XPCOM component in JavaScript
ly, you create an array of your components to be created: var components = [helloworld]; and replace nsgetfactory/nsgetmodule to use this array and xpcomutils: if ("generatensgetfactory" in xpcomutils) 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-...

Index
the thread manager, introduced in firefox 3, offers an easy to use mechanism for creating threads and dispatching events to them for processing. 78 troubleshooting xpcom components registration add-ons, extensions, xpcom often the first time you create an xpcom component, it may fail to register correctly. 79 using nscomptr xpcom this document is the sum total of everything written down about nscomptr. if you have a question about nscomptr, and this document doesn't answer it, there probably isn't a document that answers it. you'll have to turn to the xpcom newsgroup or another experienced nscomptr user, or find the answer by experimentation. 80 frequently asked questions xpcom this section will help you if you're fixing a broken b...

Profiling XPCShell
ofiled. then, the next lines shows the amount of time spend in the functions in that file. the line consists of: the compile count of the function; the call count of the function; the functions name; the starting line number; the ending line number; the function's size; the amount of time (in milliseconds) the fastest call took; the time of the slowest call; the average time spend; the total time; the time spend in the function itself is given (that is the total time excluding the time spend in functions called from this function). notes you need a trunk build from after 2007-05-28. using an earlier build will cause the profiler to hang the more adventurous can use the nsixpctoolsprofiler.idl interface directly, but be aware that you must start the profiler before loading the fi...

IAccessibleText
ndow. x x coordinate of the top left corner of the bounding box of the referenced character. y y coordinate of the top left corner of the bounding box of the referenced character. width width of the bounding box of the referenced character. height height of the bounding box of the referenced character. return value e_invalidarg if bad [in] passed, [out] values are 0s. s_ok. ncharacters() returns total number of characters. [propget] hresult ncharacters( [out] long ncharacters ); parameters ncharacters missing description return value s_ok. newtext() returns any inserted text(). provided for use by the ::ia2_event_text_inserted and ::ia2_event_text_updated event handlers. this data is only guaranteed to be valid while the thread notifying the event continues. once the handler has returned,...

imgIContainer
rame is opaque; that is, needs the background painted behind it. read only. height print32 the height of the container rectangle. in the case of any error, zero is returned, and an exception will be thrown. read only. loopcount long number of times to loop the image. note: -1 means forever. obsolete since gecko 2.0 numframes unsigned long the total number of frames in this image. read only. obsolete since gecko 2.0 preferredalphachannelformat gfx_format read only. obsolete since gecko 1.9.2 type unsigned short the type of this image (one of the type_* values above). read only. width print32 the width of the container rectangle. in the case of any error, zero is returned, and an exception will be...

imgIEncoder
alent. apng: ----- the following options can be used with startimageencode(): transparency=[yes|no|none] -- default: "yes" overrides default from input format. "no" and "none" are equivalent. skipfirstframe=[yes|no] -- default: "no" controls display of the first frame in animations. png-only clients always display the first frame (and only that frame). frames=# -- default: "1" total number of frames in the image. the first frame, even if skipped, is always included in the count. plays=# -- default: "0" number of times to play the animation sequence. "0" will repeat forever. the following options can be used for each frame, with addimageframe(): transparency=[yes|no|none] -- default: "yes" overrides default from input format. "no" and "none" are equivalent. dela...

nsICacheDeviceInfo
ormation about a cache device. inherits from: nsisupports last changed in gecko 1.7 attributes attribute type description description string get a human readable description of the cache device. read only. entrycount unsigned long get the number of stored cache entries. read only. maximumsize unsigned long get the upper limit of the size of the data the cache can store. read only. totalsize unsigned long get the total size of the stored cache entries. read only. usagereport string get a usage report, statistics, miscellaneous data about the cache device. read only. see also nsicache nsicachevisitor ...

nsIDBFolderInfo
nsmsgkey expungedbytes long flags long folderdate unsigned long foldername string foldersize unsigned long highwater nsmsgkey imaphierarchyseparator wchar imaptotalpendingmessages long imapuidvalidity long imapunreadpendingmessages long knownartsset string locale astring mailboxname astring nummessages long numunreadmessages long ...

nsIDOMSimpleGestureEvent
t buttonarg, in nsidomeventtarget relatedtargetarg, in unsigned long directionarg, in double deltaarg); attributes attribute type description delta double the delta value indicating how far the gesture moved. for update events, this indicates the movement since the previous update; for the mozrotategesture and mozmagnifygesture events, this indicates the total movement that occurred while the event was being processed. the value is specified in degrees for rotation events (where positive values indicate clockwise rotation and negative values indicate counter-clockwise rotation). for magnify gestures, the units are implementation-specific; however, positive values indicate zooming in, and negative values indicate zooming out. read only. note: ...

nsIDownload
ze is unknown. read only. referrer nsiuri the referrer uri of the download. this is only valid for http downloads, and can be null. read only. resumable boolean indicates if the download can be resumed after being paused or not. this is only the case if the download is over http/1.1 or ftp and if the server supports it. read only. size long long the total size of the file in bytes, or ll_maxuint if the file's size is unknown. read only. source nsiuri the source uri of the download. read only. speed double the downloads transfer speed in bytes per second. read only. starttime long long the time at which the transfer was started. read only. state short the downloads current state. see n...

nsIEffectiveTLDService
roperty of the dns, which is different for different people. is "mail.intranet" actually a domain name? depends who you ask - for some people it is, others not. is "pretty.flowers" a domain name, according to getpublicsuffix()? depends on the age of the copy of the psl you are working with. the tld space is currently expanding at a fairly great rate, and the copy of the psl firefox has may not be totally up to date (because it's not dynamically updated data). method overview acstring getbasedomain(in nsiuri auri, [optional] in pruint32 aadditionalparts); acstring getbasedomainfromhost(in autf8string ahost, [optional] in pruint32 aadditionalparts); acstring getpublicsuffix(in nsiuri auri); acstring getpublicsuffixfromhost(in autf8string ahost); method...

nsIHttpActivityObserver
d in that chunk. http transaction activity for activity notifications of type activity_type_http_transaction, there are three activities that include extra data: activity_subtype_request_header aextrastringdata contains the text of the header. activity_subtype_response_header aextrastringdata contains the text of the response header. activity_subtype_response_complete aextrasizedata contains the total number of bytes received. see also http monitoring http activity nsihttpactivitydistributor ...

nsIInputStream
throw an exception when this method is called. that enables the caller to know the condition of the stream before attempting to read from it. if a stream is at end-of-file, but not closed, then this method returns 0 bytes available. note: some nsiinputstream implementations automatically close() when end-of-file is reached; others do not. note: this method should not be used to determine the total size of a stream, even if the stream corresponds to a local file. moreover, since a stream may make available more than 2^32 bytes of data, this method is incapable of expressing the entire size of the underlying data source. unsigned long available(); parameters none. return value number of bytes currently available in the stream, or pr_uint32_max if the size of the stream exceeds pr_uint3...

nsIMemoryReporterManager
note: it covers all heap allocations, but will miss any operating system level ones not covered by memory reporters. this reporter is special-cased because it is interesting, and is moderately diffi...

nsIMsgDBHdr
rrent message flags. all other flags are cleared. setreferences() void setreferences(in string references); parameters references sets the list of references for a news message. 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. must be less than the total number of references. setrecipientsarray() uses the header parser to recreate the recipients header from an array of names and addresses. void setrecipientsarray(in string names, in string addresses, in unsigned long numaddresses); parameters names a null-delimited list of recipient names. addresses a null-delimited list of recipient ...

nsIMsgDatabase
void synccounts(); getthreadcontainingmsghdr() nsimsgthread getthreadcontainingmsghdr(in nsimsgdbhdr msghdr) ; markhdrread() helpers for user command functions like delete, mark read, etc. void markhdrread(in nsimsgdbhdr msghdr, in boolean bread, in nsidbchangelistener instigator); markhdrreplied() void...

nsINavHistoryResultNode
nents/places/public/nsinavhistoryservice.idlscriptable this is the base class for all places history result nodes, containing the uri, title, and other general information. 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) attributes attribute type description accesscount unsigned long total number of times the uri has been accessed. for hosts, this is the total number of the children under it, rather than the total number of times the host has been accessed (getting that information would require an additional query, so for performance reasons that information isn't given by default). read only. bookmarkindex long when this item is in a bookmark folder (its parent is of type folde...

nsIProgressEventSink
d (may qi to nsichannel). acontext if arequest is a channel, then this parameter is the listener context passed to nsichannel.asyncopen(). aprogress numeric value in the range 0 to aprogressmax indicating the number of bytes transfered thus far. aprogressmax numeric value indicating maximum number of bytes that will be transfered (or 0xffffffffffffffff if total is unknown). onstatus() called to notify the event sink with a status message for the given request. void onstatus( in nsirequest arequest, in nsisupports acontext, in nsresult astatus, in wstring astatusarg ); parameters arequest the request being observed (may qi to nsichannel). acontext if arequest is a channel, then this parameter is the listener context...

nsIPushSubscription
resembles pushsubscription from the push api. method overview void getkey(in domstring name, [optional] out uint32_t keylen, [array, size_is(keylen), retval] out uint8_t key); bool quotaapplies(); bool isexpired(); attributes attribute type description endpoint domstring the subscription url. pushcount long long the total number of messages sent to this subscription. lastpush long long the last time a message was sent to this subscription, in milliseconds since the epoch. quota long the number of remaining background messages for this subscription, or -1 if exempt. methods getkey() returns a byte array containing the key material for this subscription. the remote server can u...

nsIScriptableInputStream
erbird 3.3 / seamonkey 2.1) method overview unsigned long available(); void close(); void init(in nsiinputstream ainputstream); string read(in unsigned long acount); acstring readbytes(in unsigned long acount); methods available() return the number of bytes currently available in the stream. note: this method should not be used to determine the total size of a stream, even if the stream corresponds to a local file. moreover, since a stream may make available more than 2^32 bytes of data, this method is incapable of expressing the entire size of the underlying data source. unsigned long available(); parameters none. return value the number of bytes. exceptions thrown ns_base_stream_closed if called after the stream has been closed. ...

nsITreeView
read only. selection nsitreeselection the selection for this view. 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 ...

Using nsCOMPtr
if you have a question about nscomptr, and this document doesn't answer it, there probably isn't a document that answers it. you'll have to turn to the xpcom newsgroup or another experienced nscomptr user, or find the answer by experimentation. if you've never used nscomptr before, you're starting in the right place. just keep reading. you'll know when to stop. after you've been using nscomptrs for a while, and you reach unfamiliar territory, or run into compiler errors; you may want to return to this document to get help from the reference manual or the faq. ...

XPCOM
rusted callers, meaning extensions and firefox components only.the thread managerthe thread manager, introduced in firefox 3, offers an easy to use mechanism for creating threads and dispatching events to them for processing. troubleshooting xpcom components registrationoften the first time you create an xpcom component, it may fail to register correctly.using nscomptrthis document is the sum total of everything written down about nscomptr. if you have a question about nscomptr, and this document doesn't answer it, there probably isn't a document that answers it. you'll have to turn to the xpcom newsgroup or another experienced nscomptr user, or find the answer by experimentation.using nsiclassinfoif you use a c++ class which implements nsiclassinfo from javascript, then you don't have to e...

nsIMsgCloudFileProvider
hould not point to external web content. fileuploadsizelimit long readonly: the upper size limit in bytes for a file to be uploaded. if this value is not known, returns -1. remainingfilespace long long readonly: the remaining storage space available for this account in bytes. if this value is not known, returns -1. filespaceused long long readonly: the total amount of space used by this account. if this value is not known, returns -1. lasterror acstring readonly: the last error message received from the server. constants the following constants are used for the status codes passed to the onstoprequest functions of the nsirequestobserver's used by the asynchronous methods of nsimsgcloudfileprovider. constant value ...

MailNews fakeserver
he test. setmultiline the new value of multiline nothing the value is a boolean, with true invoking multiline mode. it is off by default. extending a handler to provide different mechanisms is a process not defined here; please check the documentation of the corresponding handler for instructions. using fakeserver in xpcshell tests since there are three different components of fakeserver, a total of four objects need to be set up in a fakeserver test on top of other testing. the outline of a test looks like this: var daemon = setupdaemon(); // check with your local fakeserver docs var handlers = [ /* some set of handlers */ ]; for (var handler in handlers) { // this sets up the fake server var server = new nsmailserver(new handler(daemon)); // port to use. i tend to like using 1024...

Working with data
cdata objects and copied into the new array, which is then returned. if none of these conditions are met, a typeerror is thrown. if type is ctypes.void_t, a typeerror is thrown. example: creating an array let arraytype = ctypes.arraytype(ctypes.int32_t); let myarray = new arraytype(5); at this point, myarray.length is 5; there are 5 entries in the array. myarray.constructor.size is 20; the total size of the array's data buffer is 20 bytes (5 entries, 4 bytes apiece). example: creating an array of strings var cstr1 = ctypes.jschar.array()('rawr'); var cstr2 = ctypes.jschar.array()('boo'); var mycarray_ofstrings = ctypes.jschar.ptr.array(2)([cstr1, cstr2]); // specifying length of 2 is optional, can omit it, so can just do `ctypes.jschar.ptr.array()([cstr1, cstr2])` mycarray_ofstrings.

DOM allocation example - Firefox Developer Tools
...

Dominators - Firefox Developer Tools
ect itself retained size: the size of the object itself, plus the size of other objects that are kept alive by this object often, objects will have a small shallow size but a much larger retained size, through the references they contain to other objects. retained size is an important concept in analyzing memory usage, because it answers the question "if this object ceases to exist, what's the total amount of memory freed?". dominators a related concept is that of the dominator. node b is said to dominate node a if every path from the root to a passes through b: if any of node a's dominators are freed, then node a itself becomes eligible for garbage collection. if node b dominates node a, but does not dominate any of a's other dominators, then b is the immediate dominator of a: one ...

Migrating from Firebug - Firefox Developer Tools
ion about javascript function calls during the profiling session, the performance tool in the devtools offers a broad spectrum of information regarding a website's performance but doesn't go into detail regarding javascript function calls. view javascript call performance what comes nearest to firebug's profiler output is the call tree view in the performance panel. like in firebug it lists the total execution time of each function call under total time as well as the number of calls under samples, the time spent within the function under self time and the related percentages in reference to the total execution time. note: the times and percentages listed in the devtools' call tree view is not equivalent to the ones shown in firebug, because it uses different apis sampling the execution of ...

Performance Analysis - Firefox Developer Tools
itor then loads the site twice: once with an empty browser cache, and once with a primed browser cache. this simulates the first time a user visits your site, and subsequent visits. it displays the results for each run side by side, or vertically if the browser window is narrow: the results for each run are summarised in a table and a pie chart. the tables group resources by type, and show the total size of each resource and the total time it took to load them. the accompanying pie chart shows the relative size of each resource type. to get back to the network monitor's list of network requests click the "back" button on the left. clicking on a slice of the pie takes you to the network monitor for that run, with a filter automatically applied to see only that resource type. network monito...

Network monitor toolbar - Firefox Developer Tools
ar opens a file dialog box so you can save the current contents of the network log as a har file with the extension .har. copy all as har copies the current contents of the network log to the clipboard in har format. a second toolbar area at the bottom of the network monitor provides: an icon to launch performance analysis. a summary of this page, including the number of requests, total size, and total time. network monitor features the following articles cover different aspects of using the network monitor: network request list network request details network traffic recording performance analysis throttling ...

Network request details - Firefox Developer Tools
information provided in the server-timing header — this is used to surface any backend server timing metrics you've recorded (e.g. database read/write, cpu time, file system access, etc.). the header takes a series of descriptions and durations, which can be anything you like. in the above screenshot for example, the highlighted request's server-timing header contains 4 items — data, markup, total, and miss. security tab if the site is being served over https, you get an extra tab labeled "security". this contains details about the secure connection used including the protocol, the cipher suite, and certificate details: the security tab shows a warning for security weaknesses. currently it warns you about two weaknesses: using sslv3 instead of tls using the rc4 cipher stack tr...

Network request list - Firefox Developer Tools
certificate was invalid) http localhost indicates that the url belongs to a known tracker that would be blocked with content blocking enabled. timeline the request list also displays a timeline for the different parts of each request. each timeline is given a horizontal position in its row relative to the other network requests, so you can see the total time taken to load the page. for more details on the color-coding used here, see the section on the timings page. starting in firefox 45, the timeline also contains two vertical lines: the blue line marks the point at which the page's domcontentloaded event is triggered. the red line marks the point at which the page's load event is triggered. blocking specific urls if you want to view yo...

Animating CSS properties - Firefox Developer Tools
gh this, you'll see a pattern like this: this is showing us the rendering waterfall. in each animation frame, we recalculate styles for every element, then perform a single layout, then a repaint. you can see that paint especially is hurting performance here. in the screenshot above we've highlighted a paint operation, and the box on the right tells us it took 13.11ms. with only 16.7ms in our total budget, it's not surprising we are missing a consistently high frame rate. you can experiment with this: try removing the box shadow using the page inspector, and see how that affects paint time. but next, we'll see how using transform instead of margin eliminates those expensive paints entirely. animating using transform now switch the radio button in the web page to "use transform", and make...

AudioParam.setValueCurveAtTime() - Web APIs
ified duration. every value in the array must be a finite number; if any value is nan, infinity, or -infinity, a typeerror exception is thrown. starttime a double representing the time (in seconds) after the audiocontext was first created that the change in value will happen. if this value is lower than audiocontext.currenttime, it is clamped to currenttime. duration a double representing the total time (in seconds) over which the parameter's value will change following the specified curve. the specified values are spaced equally along this duration. return value a reference to this audioparam object. some older browser implementations of this interface return undefined. exceptions invalidstateerror the specified array of values has fewer than 2 items in it. rangeerror the specifi...

BasicCardRequest - Web APIs
first of these three (supportedinstruments in the example below) contains a data property that has to conform to the structure defined by the basiccardrequest dictionary. ...

BasicCardResponse - Web APIs
ts in the example below) contains a data property that has to conform to the structure defined by the basiccardrequest dictionary. ...

ByteLengthQueuingStrategy.ByteLengthQueuingStrategy() - Web APIs
the bytelengthqueuingstrategy() constructor creates and returns a bytelengthqueuingstrategy object instance. syntax var bytelengthqueuingstrategy = new bytelengthqueuingstrategy({highwatermark}); parameters {highwatermark} an object containing a highwatermark property. this is a non-negative integer defining the total number of chunks that can be contained in the internal queue before backpressure is applied. return value an instance of the bytelengthqueuingstrategy object. exceptions none. examples const queuingstrategy = new bytelengthqueuingstrategy({ highwatermark: 1 }); const readablestream = new readablestream({ start(controller) { ... }, pull(controller) { ... }, cancel(err) { console.log("stream error:", err); } }, queuingstrategy); var size =...

Determining the dimensions of elements - Web APIs
ments, and it can be tricky to determine which is the right one for your needs. this article is designed to help you make that decision. note that all these properties are read-only. if you want to set the width and height of an element, use width and height or the overriding min-width and max-width, and min-height and max-height properties. how much room does it use up? if you need to know the total amount of space an element occupies, including the width of the visible content, scrollbars (if any), padding, and border, you want to use the htmlelement.offsetwidth and htmlelement.offsetheight properties. most of the time these are the same as width and height of element.getboundingclientrect(), when there aren't any transforms applied to the element. in case of transforms, the offsetwidth and...

CanvasRenderingContext2D.arcTo() - Web APIs
d's most common uses. html <canvas id="canvas"></canvas> javascript the arc begins at the point specified by moveto(): (230, 20). it is shaped to fit control points at (90, 130) and (20, 20), and has a radius of 50. the lineto() method connects the arc to (20, 20) with a straight line. note that the arc's second control point and the point specified by lineto() are the same, which produces a totally smooth corner. const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const p0 = { x: 230, y: 20 } const p1 = { x: 90, y: 130 } const p2 = { x: 20, y: 20 } const labelpoint = function (p) { const offset = 15; ctx.filltext('(' + p.x + ',' + p.y + ')', p.x + offset, p.y + offset); } ctx.beginpath(); ctx.moveto(p0.x, p0.y); ctx.arcto(p1.x, p1.y, p2.x, p2...

CanvasRenderingContext2D.getImageData() - Web APIs
uation, configure cors to allow the source image to be used in this way. see allowing cross-origin use of images and canvas. example getting image data from a canvas this example draws a rectangle, and then uses getimagedata() to grab a portion of the canvas. html <canvas id="canvas"></canvas> javascript the object retrieved by getimagedata() has a width of 200 and a height of 100, for a total of 20,000 pixels. of those pixels, most are either transparent or taken from off the canvas; only 5,000 of them are opaque black (the color of the drawn rectangle). const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.rect(10, 10, 100, 100); ctx.fill(); let imagedata = ctx.getimagedata(60, 60, 200, 100); ctx.putimagedata(imagedata, 150, 10); result spe...

Manipulating video using canvas - Web APIs
ass the video element into the context's drawimage() method to draw the current video frame into the context. the result is: line 3 fetches a copy of the raw graphics data for the current frame of video by calling the getimagedata() method on the first context. this provides raw 32-bit pixel image data we can then manipulate. line 4 computes the number of pixels in the image by dividing the total size of the frame's image data by four. 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. every pixel in the frame's image data that is found that...

Applying styles and colors - Web APIs
he miter limit is the maximum allowed ratio of the extension length (in the html canvas, it is measured between the outside corner of the joined edges of the line and the common endpoint of connecting segments specified in the path) to half the line width. it can equivalently be defined as the maximum allowed ratio of the distance between the inside and outside points of jonction of edges, to the total line width. 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. a miter limit equal to √2 ≈ 1.4142136 (rounded up) will strip ...

console - Web APIs
log the time needed by the user to dismiss the alert box, log the time to the console, wait for the user to dismiss the second alert, and then log the ending time to the console: notice that the timer's name is displayed both when the timer is started and when it's stopped. note: it's important to note that if you're using this to log the timing for network traffic, the timer will report the total time for the transaction, while the time listed in the network panel is just the amount of time required for the header. if you have response body logging enabled, the time listed for the response header and body combined should match what you see in the console output. stack traces the console object also supports outputting a stack trace; this will show you the call path taken to reach the po...

CountQueuingStrategy.CountQueuingStrategy() - Web APIs
return value an instance of the countqueuingstrategy object. exceptions none. ...

CountQueuingStrategy.size() - Web APIs
syntax var size = countqueuingstrategy.size(); parameters none. return value 1. examples const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); const writablestream = new writablestream({ // implement the sink write(chunk) { ... }, close() { ... ...

DOMMatrixReadOnly - Web APIs
mmatrixreadonly.tojson() returns a json representation of the dommatrixreadonly object. dommatrixreadonly.tostring() creates and returns a domstring object which contains a string representation of the matrix in css matrix syntax, using the appropriate css matrix notation. see the matrix() css function for details on this syntax. for a 2d matrix, the elements a through f are listed, for a total of six values and the form matrix(a, b, c, d, e, f). for a 3d matrix, the returned string contains all 16 elements and takes the form matrix3d(m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44). see the css matrix3d() function for details on the 3d notation's syntax. throws an invalidstateerror exception if any of the elements in the matrix are non-finite (even if...

Element.scrollHeight - Web APIs
ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. padding-bottom left top right bottom margin-top margin-bottom border-top border-bottom problems and solutions determine if an element has been totally scrolled the following equivalence returns true if an element is at the end of its scroll, false if it isn't. element.scrollheight - element.scrolltop === element.clientheight when the container does not scroll, but has overflowing children, these checks determine if the container can scroll: window.getcomputedstyle(element).overflowy === 'visible' window.getcomputedstyle(element).overflow...

FileRequest.onprogress - Web APIs
st object is in progress. syntax instanceoffilerequest.onprogress = function; where instanceoffilerequest is a filerequest object and function is the javascript function to execute. each time the function callback is called, it gets an object as its first parameter. those objects contain two properties: loaded a number representing the current amount of bytes processed by the operation. total a number representing the total amount of bytes that will be processed by the operation. 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. ...

FileHandle API - Web APIs
vide feedback to the user. 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. if you want a file to survive a page refresh/app relaunch, you need to store ...

HTMLElement.offsetHeight - Web APIs
ght read-only property returns the height of an element, including vertical padding and borders, as an integer. typically, offsetheight is a measurement in pixels of the element's css height, including any borders, padding, and horizontal scrollbars (if rendered). it does not include the height of pseudo-elements such as ::before or ::after. for the document body object, the measurement includes total linear content height instead of the element's css height. floated elements extending below other linear content are ignored. if the element is hidden (for example, by setting style.display on the element or one of its ancestors to "none"), then 0 is returned. this property will round the value to an integer. if you need a fractional value, use element.getboundingclientrect(). syntax var in...

HTMLTableRowElement.rowIndex - Web APIs
of the row, or -1 if the row is not part of a table. example this example uses javascript to label all the row numbers in a table. ...

HTMLVideoElement - Web APIs
m controls whether the video frame is trimmed to fit the video display. methods inherits methods from its parent, htmlmediaelement, and from its ancestor htmlelement. htmlvideoelement.getvideoplaybackquality() returns a videoplaybackquality object that contains the current playback metrics. this information includes things like the number of dropped or corrupted frames, as well as the total number of frames. events inherits methods from its parent, htmlmediaelement, and from its ancestor htmlelement. listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface. specifications specification status comment html living standardthe definition of 'htmlvideoelement' in that specification. li...

History.replaceState() - Web APIs
r to display https://www.mozilla.org/bar2.html, but won't cause the browser to load bar2.html or even check that bar2.html exists. suppose now that the user navigates to https://www.microsoft.com, then clicks the back button. at this point, the url bar will display https://www.mozilla.org/bar2.html. if the user now clicks back again, the url bar will display https://www.mozilla.org/foo.html, and totally bypass bar.html. specifications specification status comment html living standardthe definition of 'history.replacestate()' in that specification. living standard no change from html5. html5the definition of 'history.replacestate()' in that specification. recommendation initial definition. ...

Working with the History API - Web APIs
cause the url bar to display http://mozilla.org/bar2.html, but won't cause the browser to load bar2.html or even check that bar2.html exists. suppose now that the user navigates to http://www.microsoft.com, then clicks the back button. at this point, the url bar will display http://mozilla.org/bar2.html. if the user now clicks back again, the url bar will display http://mozilla.org/foo.html, and totally bypass bar.html. the popstate event a popstate event is dispatched to the window every time the active history entry changes. if the history entry being activated was created by a call to pushstate or affected by a call to replacestate, the popstate event's state property contains a copy of the history entry's state object. see window.onpopstate for sample usage. reading the current state ...

IDBCursorSync - Web APIs
time. operations are performed on the underlying index or object store. it enables an application to synchronously process all the records in the cursor's range. method overview bool continue (in optional any key); void remove () raises (idbdatabaseexception); attributes attribute type description count readonly unsigned long long the total number of objects that share the current key. direction readonly unsigned short the direction of traversal of the cursor. see constants for possible values. key readonly any the key for the record at the cursor's position. value any the value for the record at the cursor's position. setting this attribute can raise an idbdatabaseexception with the...

IDBObjectStore.count() - Web APIs
note: this feature is available in web workers. syntax var request = objectstore.count(); var request = objectstore.count(query); parameters query optional a key or idbkeyrange object that specifies a range of records you want to count. return value an idbrequest object on which subsequent events related to this operation are fired. ...

IDBObjectStore - Web APIs
the value, and stores the cloned value in the object store. this is for adding new records to an object store. idbobjectstore.clear() creates and immediately returns an idbrequest object, and clears this object store in a separate thread. this is for deleting all current records out of an object store. idbobjectstore.count() returns an idbrequest object, and, in a separate thread, returns the total number of records that match the provided key or idbkeyrange. if no arguments are provided, it returns the total number of records in the store. idbobjectstore.createindex() creates a new index during a version upgrade, returning a new idbindex object in the connected database. idbobjectstore.delete() returns an idbrequest object, and, in a separate thread, deletes the store object selected b...

ImageData() - Web APIs
iven: the height will be inferred from the array's size and the given width. return value a new imagedata object. errors thrown indexsizeerror thrown if array is specified, but its length is not a multiple of (4 * width) or (4 * width * height). examples creating a blank imagedata object this example creates an imagedata object that is 200 pixels wide and 100 pixels tall, containing a total of 20,000 pixels. let imagedata = new imagedata(200, 100); // imagedata { width: 200, height: 100, data: uint8clampedarray[80000] } initializing imagedata with an array this example instantiates an imagedata object with pixel colors defined by an array. html <canvas id="canvas"></canvas> javascript the array (arr) has a length of 40000: it consists of 10,000 pixels, each of which is defin...

Browser storage limits and eviction criteria - Web APIs
example, open() will fire an error event. storage limits the maximum browser storage space is dynamic — it is based on your hard drive size. the global limit is calculated as 50% of free disk space. in firefox, an internal browser tool called the quota manager keeps track of how much disk space each origin is using up, and deletes data if necessary. so if your hard drive is 500 gb, then the total storage for a browser is 250 gb. if this is exceeded, a process called origin eviction comes into play, deleting an entire origin's worth of data until the storage amount goes under the limit again. there is no trimming effect put in place to delete parts of origins — deleting one database of an origin could cause problems with inconsistency. there's also another limit called group limit — t...

IntersectionObserver.IntersectionObserver() - Web APIs
owing the root for calculation purposes. the syntax is approximately the same as that for the css margin property; see the root element and root margin in intersection observer api for more information on how the margin works and the syntax. the default is "0px 0px 0px 0px". threshold either a single number or an array of numbers between 0.0 and 1.0, specifying a ratio of intersection area to total bounding box area for the observed target. a value of 0.0 means that even a single visible pixel counts as the target being visible. 1.0 means that the entire target element is visible. see thresholds in intersection observer api for a more in-depth description of how thresholds are used. the default is a threshold of 0.0. return value a new intersectionobserver which can be used to watch ...

MediaPositionState.duration - Web APIs
this information can then, in turn, be used by the user agent to provide a user interface which displays media playback information to the viewer. ...

MediaPositionState - Web APIs
the media session api's mediapositionstate dictionary is used to represent the current playback position of a media session. its contents can be used by the user agent to provide a user interface displaying information about the playback position and duration of the media currently being performed. properties duration a floating-point value giving the total duration of the current media in seconds. this should always be a positive number, with positive infinity (infinity) indicating media without a defined end, such as a live stream. playbackrate a floating-point value indicating the rate at which the media is being played, as a ratio relative to its normal playback speed. thus, a value of 1 is playing at normal speed, 2 is playing at double speed, and so forth. negative values indicate...

OfflineAudioContext.suspend() - Web APIs
suspendtime).then(function() { ... }); parameters suspendtime a double specifying the suspend time, in seconds. returns a promise resolving to void. exceptions the promise is rejected when any exception is encountered. invalidstateerror if the quantized frame number is one of the following: a negative number is less than or equal to the current time is greater than or equal to the total render duration is scheduled by another suspend for the same time specifications specification status comment web audio apithe definition of 'suspend()' in that specification. working draft initial definition. ...

PaymentAddress - Web APIs
etails of the actual order (such as items bought and shipping options), and an optional object containing further options. the first of these three (supportedinstruments in the example below) contains a data property that has to conform to the structure defined by the basiccardrequest dictionary. ...

PaymentDetailsBase - Web APIs
be used as the basis for those documents. properties displayitemsoptional an array of paymentitem objects, each describing one line item for the payment request. these represent the line items on a receipt or invoice. modifiersoptional an array of paymentdetailsmodifier objects, each describing a modifier for particular payment method identifiers. for example, you can use one to adjust the total payment amount based on the selected payment method ("5% cash discount!"). shippingoptionsoptional an array of paymentshippingoption objects, each describing one available shipping option from which the user may choose. derived dictionaries the following dictionaries include paymentdetailsbase. paymentdetailsinit provides payment information when calling the paymentrequest() constructor.

PaymentRequest.canMakePayment() - Web APIs
promise with a domexception. parameters none examples in the following example, is excerpted from a demo that asynchronously builds a paymentrequest object for both apple pay and credit cards. it wraps the call to canmakepayment() in feature detection, and calls an appropriate callback depending on the resolution of the promise. async function initpaymentrquest() { const details = { total: { label: "total", amount: { currency: "usd", value: "0.00", }, }, }; const supportsapplepay = new paymentrequest( [{ supportedmethods: "https://apple.com/apple-pay" }], details ).canmakepayment(); // supports apple pay? if (await supportsapplepay) { // show apple pay logo, for instance return; } // otherwise... let's see if w...

PaymentRequest.prototype.id - Web APIs
ifier for a particular paymentrequest instance. when constructing an instance of the paymentrequest, you are able to supply an custom id via paymentdetailsinit dictionary's id member. if none is provided, the browser automatically sets the id value to a uuid. example this example shows how to give a paymentrequest instance a custom id. const details = { id: "super-store-order-123-12312", total: { label: "total due", amount: { currency: "usd", value: "65.00" }, }, }; const request = new paymentrequest(methoddata, details); console.log(request.id); // super-store-order-123-12312 the id is then also available in the paymentresponse returned from the show() method, but under the requestid attribute. const response = await request.show(); console.log(response.requestid === requ...

PaymentRequest.onshippingoptionchange - Web APIs
nge', e => { e.updatewith(((details, addr) => { var shippingoption = { id: '', label: '', amount: { currency: 'usd', value: '0.00' }, selected: true }; // shipping to us is supported if (addr.country === 'us') { shippingoption.id = 'us'; shippingoption.label = 'standard shipping in us'; shippingoption.amount.value = '0.00'; details.total.amount.value = '55.00'; // shipping to jp is supported } else if (addr.country === 'jp') { shippingoption.id = 'jp'; shippingoption.label = 'international shipping'; shippingoption.amount.value = '10.00'; details.total.amount.value = '65.00'; // shipping to elsewhere is unsupported } else { // empty array indicates rejection of the address detai...

PaymentRequest.shippingAddress - Web APIs
r.message); }); function updatedetails(details, shippingaddress, resolve) { if (shippingaddress.country === 'us') { var shippingoption = { id: '', label: '', amount: {currency: 'usd', value: '0.00'}, selected: true }; if (shippingaddress.region === 'mo') { shippingoption.id = 'mo'; shippingoption.label = 'free shipping in missouri'; details.total.amount.value = '55.00'; } else { shippingoption.id = 'us'; shippingoption.label = 'standard shipping in us'; shippingoption.amount.value = '5.00'; details.total.amount.value = '60.00'; } details.displayitems.splice(2, 1, shippingoption); details.shippingoptions = [shippingoption]; } else { delete details.shippingoptions; } resolve(details); } sp...

PaymentRequestEvent - Web APIs
payment method specific data. modifiersread only returns an array of objects containing changes to payment details. paymentrequestidread only returns the id of the paymentrequest object. paymentrequestoriginread only returns the origin where the paymentrequest object was initialized. toporiginread only returns the top-level origin where the paymentrequest object was initialized. totalread only returns the total amount being requested for payment. methods openwindow() opens the specified url in a new window, if and only if the given url is on the same origin as the calling page. it returns a promise that resolves with a reference to a windowclient. respondwith() prevents the default event handling and allows you to provide a promise for a paymentresponse object...

PaymentResponse.shippingAddress - Web APIs
r.message); }); function updatedetails(details, shippingaddress, resolve) { if (shippingaddress.country === 'us') { var shippingoption = { id: '', label: '', amount: {currency: 'usd', value: '0.00'}, selected: true }; if (shippingaddress.region === 'mo') { shippingoption.id = 'mo'; shippingoption.label = 'free shipping in missouri'; details.total.amount.value = '55.00'; } else { shippingoption.id = 'us'; shippingoption.label = 'standard shipping in us'; shippingoption.amount.value = '5.00'; details.total.amount.value = '60.00'; } details.displayitems.splice(2, 1, shippingoption); details.shippingoptions = [shippingoption]; } else { delete details.shippingoptions; } resolve(details); } sp...

Performance.memory - Web APIs
syntax timinginfo = performance.memory attributes jsheapsizelimit the maximum size of the heap, in bytes, that is available to the context. totaljsheapsize the total allocated heap size, in bytes. usedjsheapsize the currently active segment of js heap, in bytes. specifications none. ...

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. living standard ...

ProgressEvent.loaded - Web APIs
when downloading a resource using http, this only represent the part of the content itself, not headers and other overhead. ...

RTCIceCandidatePairStats.packetsReceived - Web APIs
the rtcicecandidatepairstats dictionary's packetsreceived property indicates the total number of packets of any kind that have been received on the connection described by the pair of candidates. the number of packets sent to date on the connection can be obtained using packetssent. syntax packetsreceived = rtcicecandidatepairstats.packetsreceived; value an integer value indicating the total number of packets, of any kind, which have been received on the connection described by the two candidates comprising this pair. specifications specification status comment identifiers for webrtc's statistics apithe definition of 'rtcicecandidatepairstats.packetsreceived' in that specification. candidate recommendation initial specification. ...

RTCIceCandidatePairStats.packetsSent - Web APIs
the rtcicecandidatepairstats dictionary's packetssent property indicates the total number of packets which have been sent on the connection described by the pair of candidates. the number of packets received to date on the connection can be obtained using packetsreceived. syntax packetssent = rtcicecandidatepairstats.packetssent; value an integer value indicating the total number of packets, of any kind, which have been sent on the connection described by the two candidates comprising this pair. specifications specification status comment identifiers for webrtc's statistics apithe definition of 'rtcicecandidatepairstats.packetssent' in that specification. candidate recommendation initial specification. ...

RTCIceCandidatePairStats.requestsReceived - Web APIs
syntax requestsreceived = rtcicecandidatepairstats.requestsreceived; value an integer value which specifies the number of stun connectivity and/or consent requests that have been received to date on the connection described by this pair of ice candidates. because there's no way to tell the difference between requests made to check connectivity and requests made to check consent, the returned figure includes both. note: the reported number of requests includes retransmissions. ...

RTCIceCandidatePairStats.requestsSent - Web APIs
syntax requestssent = rtcicecandidatepairstats.requestssent; value an integer value which specifies the number of stun connectivity requests that have been sent to date on the connection described by this pair of ice candidates. note: the reported number of requests does not include retransmissions. if a request had to be repeated due to network issues, it will be counted multiple times here. this differs from requestsreceived, which does include retransmisions. ...

RTCIceCandidatePairStats.responsesReceived - Web APIs
syntax responsesreceived = rtcicecandidatepairstats.responsesreceived; value an integer value which specifies the number of stun connectivity request responses that have been received on the connection described by this pair of candidates so far. ...

RTCIceCandidatePairStats.responsesSent - Web APIs
syntax responsessent = rtcicecandidatepairstats.responsessent; value an integer value indicating the number of times a repsonse has been sent to a stun connectivity check request. note: since it isn't possible to tell the difference between connectivity check requests and consent requests, this value includes both. ...

RTCIceCandidatePairStats.retransmissionsReceived - Web APIs
the rtcicecandidatepairstats dictionary's retransmissionsreceived property indicates the total number of stun connectivity check request retransmissions that have been received so far on the pair of candidates. the number of retransmissions that have been sent on the connection can be found in retransmissionssent. syntax retransmissionsreceived = rtcicecandidatepairstats.retransmissionsreceived; value an integer value indicating the total number of retransmitted stun connectivity check requests have been received on the connection referenced by this candidate pair so far. note: retransmissions are connectivity check requests with a transaction_transmit_counter attribute whose req field is greater than 1 (indicating that the request has been transmitted more than once). see rfc 7982 for ...

RTCIceCandidatePairStats.retransmissionsSent - Web APIs
the rtcicecandidatepairstats dictionary's retransmissionssent property indicates the total number of stun connectivity check request retransmissions that have been sent so far on the pair of candidates. the number of retransmissions that have been received on the connection can be found in retransmissionsreceived. syntax retransmissionssent = rtcicecandidatepairstats.retransmissionssent; value an integer value indicating the total number of retransmitted stun connectivity check requests have been sent on the connection referenced by this candidate pair so far. note: retransmissions are connectivity check requests with a transaction_transmit_counter attribute whose req field is greater than 1 (indicating that the request has been transmitted more than once). see rfc 7982 for further deta...

RTCInboundRtpStreamStats.fecPacketsReceived - Web APIs
onary indicates how many forward error correction (fec) packets have been received by this rtp receiver from the remote peer. an fec packet provides parity information which can be used to attempt to reconstruct rtp data packets which have been corrupted in transit. syntax var fecpacketsreceived = rtcinboundrtpstreamstats.fecpacketsreceived; value an unsigned integer value which indicates the total number of fec packets which have been recieved from the remote peer during this rtp session. forward error correction uses an exclusive-or method to perform parity checks on the received data. by using the fec parity information to attempt to reconstruct damaged packets, it is possible to avoid the need to retransmit damaged packets, which in turn helps to reduce lag, or the need to skip damaged...

RTCInboundRtpStreamStats.packetsDuplicated - Web APIs
these packets are not counted by the packetsdiscarded property. syntax var packetsduplicated = rtcinboundrtpstreamstats.packetsduplicated; value an integer value which specifies how many duplcate packets have been received by the local end of this rtp stream so far. these duplicate packets are not included in the packetsdiscarded property. usage notes duplicate packets are detected when a packet has the same rtp sequence number as another packet that has previously been processed. ...

RTCInboundRtpStreamStats.packetsFailedDecryption - Web APIs
syntax var packetsfaileddecryption = rtcinboundrtpstreamstats.packetsfaileddecryption; value an integer value which indicates how many packets the local end of the rtp connection could not be successfully decrypted. ...

RTCRemoteOutboundRtpStreamStats.reportsSent - Web APIs
the rtcremoteoutboundrtpstreamstats dictionary's reportssent property provides the number of sender reports (srs) the remote peer has transmitted to the local peer. syntax let reportcount = rtcremoteoutboundrtpstreamstats.reportssent; value an integer value which indicates the total number of rtcp sender reports so far sent by the remote peer to the local peer. usage notes sender reports, described in rfc 3550, section 6.4.1 with an overview in rfc 3550, section 6.4, are used by rtp to share data transmission quality feedback between the two peers. the data in these reports is used by webrtc to fill out various fields within the statistics objects, and this property's value indicates how many times that information was shared. examples <<<--- add an example --->>> ...

RTCRemoteOutboundRtpStreamStats - Web APIs
domhighrestimestamp specifying the timestamp (on the remote device) at which the statistics in the rtcremoteoutboundrtpstreamstats object were sent by the remote endpoint. this is different from the timestamp found in the base rtcstats dictionary; it represents the time at which the object's statistics were received or generated by the local endpoint. reportssent an integer value indicating the total number of rtcp sender report (sr) blocks that this ssrc has sent. usage notes the rtcremoteoutboundrtpstreamstats object's remotetimestamp proeprty provides statistics based on the received data's ntp timestamp taken from an rtcp sender report (sr) block. be aware that the remote clock may not be synchronized with the local clock (either in current time or speed at which time elapses). specif...

RTCRtpStreamStats - Web APIs
treamstats.kind to determine when browsers made the transition. local-only measurements these properties are computed locally, and are only available to the device receiving the media stream. their primary purpose is to examine the error resiliency of the connection, as they provide information about lost packets, lost frames, and how heavily compressed the data is. fircount a count of the total number of full intra request (fir) packets received by the sender. this statistic is only available to the device which is receiving the stream and is only available for video tracks. a fir packet is sent by the receiving end of the stream when it falls behind or has lost packets and is unable to continue decoding the stream; the sending end of the stream receives the fir packet and responds by s...

ReadableStream.ReadableStream() - Web APIs
he stream's auto-allocation feature. with this turned on, the stream implementation will automatically allocate an arraybuffer with a size of the given integer, and the consumer can also use a default reader. queuingstrategy optional an object that optionally defines a queuing strategy for the stream. this takes two parameters: highwatermark a non-negative integer — this defines the total number of chunks that can be contained in the internal queue before backpressure is applied. size(chunk) a method containing a parameter chunk — this indicates the size to use for each chunk, in bytes. note: you could define your own custom queuingstrategy, or use an instance of bytelengthqueuingstrategy or countqueuingstrategy for this object value. if no queuingstrategy is supplied,...

SVGGeometryElement.getPointAtLength() - Web APIs
d moved the property to it. syntax dompoint someelement.getpointatlength(float distance); parameters distance a float referring to the distance along the path. return value a dompoint indicating the point at a given distance along the path. specifications specification status comment scalable vector graphics (svg) 2the definition of 'svggeometryelement.gettotallength()' in that specification. candidate recommendation initial definition ...

SVGGeometryElement.pathLength - Web APIs
note: this property was originally part of the svgpathelement interface. svg 2 introduced the svggeometryelement interface and moved the property to it. ...

SVGPathElement.getPointAtLength() - Web APIs
nt inherits it. syntax svgpoint someelement.getpointatlength(float distance); parameters distance a float referring to the distance along the path. return value an svgpoint indicating the point at a given distance along the path. specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgpathelement.gettotallength()' in that specification. recommendation initial definition ...

SVGPathElement.pathLength - Web APIs
note: in svg 2 this property was moved to the svggeometryelement interface, from which the svgpathelement inherits it. ...

SVGTextContentElement - Web APIs
gth attribute of the given element. svgtextcontentelement.lengthadjust read only an svganimatedenumeration reflecting the lengthadjust attribute of the given element. the numeric type values represent one of the constant values above. methods this interface also inherits methods from its parent, svggraphicselement. svgtextcontentelement.getnumberofchars() returns a long representing the total number of addressable characters available for rendering within the current element, regardless of whether they will be rendered. svgtextcontentelement.getcomputedtextlength() returns a float representing the computed length for the text within the element. svgtextcontentelement.getsubstringlength() returns a float representing the computed length of the formatted text advance distance for a ...

Screen.availHeight - Web APIs
a numeric value indicating the number of css pixels tall the screen's available space is. this can be no larger than the value of window.screen.height, and will be less if the device or user agent reserves any vertical space for itself. for instance, on a mac whose dock is located at the bottom of screen (which is the default), the value of availheight is approximately the value of height (the total height of the screen in css pixels) minus the heights of the dock and menu bar, as seen in the diagram below. example if your web application needs to open a new window, such as a tool palette which can contain multiple panels, and wants to position it so that it occupies the entire vertical space available, you can do so using code similar to what's seen here. in the main window, when it's ...

Using the Screen Capture API - Web APIs
uire sharing of audio, be sure to check the browser compatibility in mediadevices.getdisplaymedia() to see if the browsers you wish compaibility with have support for audio in captured screen streams. to request that the screen be shared with included audio, the options passed into getdisplaymedia() might look like this: const gdmoptions = { video: true, audio: true } this allows the user total freedom to select whatever they want, within the limits of what the user agent supports. this could be refined further by specifying additional information for each of audio and video: const gdmoptions = { video: { cursor: "always" }, audio: { echocancellation: true, noisesuppression: true, samplerate: 44100 } } in this example the cursor will always be visible in the c...

StorageEstimate.quota - Web APIs
to the origin or web app that called storagemanager.estimate(); there may be more space available, but there will not be less. this value is an estimate to help prevent its use for fingerprinting—that is, identifying a device using an amalgamation of the values of seemingly innocuous properties. syntax quota = storageestimate.quota; value a numeric value specifying an approximation of the total amount of storage space available for use by the application. example in this example, we obtain the usage estimates and present the percentage of storage capacity currently used to the user. html content <label> you’re currently using about <output id="percent"> </output>% of your available storage. </label> javascript content navigator.storage.estimate().then(function(estimate) { ...

StorageEstimate.usage - Web APIs
storage is allotted to the origin or web app that called storagemanager.estimate(); there may be more space available, but there will not be less. the value is an estimate because the user agent may use compression, duplication prevention techniques, and other methods to improve storage efficiency. syntax usage = storageestimate.usage; value a numeric value specifying an approximation of the total amount of storage space available for use by the application. example in this example, we obtain the usage estimates and present the percentage of storage capacity currently used to the user. html content <label> you’re currently using about <output id="percent"> </output>% of your available storage. </label> javascript content navigator.storage.estimate().then(function(estimate) { ...

StorageEstimate - Web APIs
eturns an object that conforms to this dictionary when its promise resolves. these values are only estimates for several reasons, including both performance and preventing storage capacity data from being used for fingerprinting purposes. see the individual property pages for details. properties quota secure context a numeric value in bytes which provides a conservative approximation of the total storage the user's device or computer has available for the site origin or web app. it's possible that there's more than this amount of space available though you can't rely on that being the case. usage secure context a numeric value in bytes approximating the amount of storage space currently being used by the site or web app, out of the available space as indicated by quota. unit is byte. u...

Streams API concepts - Web APIs
enqueued but not yet read in the case of writable streams, these are chunks that have been written but not yet processed by the underlying sink. internal queues employ a queuing strategy, which dictates how to signal backpressure based on the internal queue state. in general, the strategy compares the size of the chunks in the queue to a value called the high water mark, which is the largest total chunk size that the queue can realistically manage. the calculation performed is high water mark - total size of chunks in queue = desired size the desired size is the size of chunks the stream can still accept to keep the stream flowing but below the high water mark in size. after the calculation is performed, chunk generation will be slowed down/sped up as appropriate to keep the stream flow...

SubmitEvent.submitter - Web APIs
n> whose type is submit, it could be some other element which has initiated a submission process. if the submission was not triggered by a button of some kind, the value of submitter is null. examples in this example, a shopping cart may have an assortment of different submit buttons depending on factors such as the user's settings, the shop's settings, and any minimum or maximum shopping card totals established by the payment processors. each of the submit elements' id is used to identify which payment processor the button corresponds to. let form = document.queryselector("form"); form.addeventlistener("submit", (event) => { let submitter = event.submitter; let handler = submitter.id; if (handler) { processorder(form, handler); } else { showalertmessage("an unknown or unac...

SubmitEvent - Web APIs
ton or other element which was invoked to trigger the form being submitted. methods while submitevent offers no methods of its own, it inherits any specified by its parent interface, event. examples in this example, a shopping cart may have an assortment of different submit buttons depending on factors such as the user's settings, the shop's settings, and any minimum or maximum shopping card totals established by the payment processors. each of the submit elements' id is used to identify which payment processor the button corresponds to. let form = document.queryselector("form"); form.addeventlistener("submit", (event) => { let submitter = event.submitter; let handler = submitter.id; if (handler) { processorder(form, handler); } else { showalertmessage("an unknown or unac...

TouchList - Web APIs
properties touchlist.length read only the number of touch objects in the touchlist. methods touchlist.identifiedtouch() returns the first touch item in the list whose identifier matches a specified value. ...

USB.getDevices() - Web APIs
ation on pairing devices, see usb.requestdevice(). syntax usb.getdevices() parameters none. return value a promise that resolves with an array of usbdevice objects. example the following example logs the product name and serial number of paired devices to the console. for information on pairing devices, see usb.requestdevice(). navigator.usb.getdevices() .then(devices => { console.log("total devices: " + devices.length); devices.foreach(device => { console.log("product name: " + device.productname + ", serial number " + device.serialnumber); }); }); specifications specification status comment webusbthe definition of 'getdevices' in that specification. draft initial definition. ...

VideoPlaybackQuality.corruptedVideoFrames - Web APIs
example this example determines the percentage of frames which have been corrupted, and if the value is greater than 5%, calls a funciton called downgradevideo() that would be implemented to switch to a different video that might tax the network less. var videoelem = document.getelementbyid("my_vid"); var quality = videoelem.getvideoplaybackquality(); if (quality.corruptedvideoframes/quality.totalvideoframes > 0.05) { downgradevideo(videoelem); } specifications specification status comment media playback qualitythe definition of 'videoplaybackquality: corruptedvideoframes' in that specification. editor's draft ...

VideoPlaybackQuality.creationTime - Web APIs
of frames have been lost by either corruption or being dropped. if that exceeds 10% (0.1), a function called lostframesthresholdexceeded() is called to, perhaps, update a quality indicator to show an increase in frame loss. var videoelem = document.getelementbyid("my_vid"); var quality = videoelem.getvideoplaybackquality(); if ((quality.corruptedvideoframes + quality.droppedvideoframes)/quality.totalvideoframes > 0.1) { lostframesthresholdexceeded(); } specifications specification status comment media playback qualitythe definition of 'videoplaybackquality.corruptedvideoframes' in that specification. editor's draft initial definition. ...

VideoPlaybackQuality.droppedVideoFrames - Web APIs
laybackquality() to obtain a videoplaybackquality object, then determines what percentage of frames have been dropped. that value is then presented in an element for the user's reference. var videoelem = document.getelementbyid("my_vid"); var percentelem = document.getelementbyid("percent"); var quality = videoelem.getvideoplaybackquality(); var droppercent = (quality.droppedvideoframes/quality.totalvideoframes)*100; percentelem.innertext = math.trunc(droppercent).tostring(10); specifications specification status comment media playback qualitythe definition of 'videoplaybackquality.droppedvideoframes' in that specification. editor's draft initial definition. ...

WebGL2RenderingContext.getActiveUniformBlockParameter() - Web APIs
rs program a webglprogram containing the active uniform block. uniformblockindex a gluint specifying the index of the active uniform block within the program. pname a glenum specifying which information to query. possible values: gl.uniform_block_binding: returns a gluint indicating the uniform buffer binding point. gl.uniform_block_data_size: returns a gluint indicating the minimum total buffer object size. gl.uniform_block_active_uniforms: returns a gluint indicating the number of active uniforms in the uniform block. gl.uniform_block_active_uniform_indices: returns a uint32array indicating the list of active uniforms in the uniform block. gl.uniform_block_referenced_by_vertex_shader: returns a glboolean indicating whether the uniform block is referenced by the vertex shad...

A basic 2D WebGL animation example - Web APIs
t by dividing its width by its height. then we set the current rotation vector for the animation to [0, 1], and the scaling vector to [1.0, aspectratio]. the scaling vector, as we saw in the vertex shader, is used to scale the coordinates to fit the -1.0 to 1.0 range. the array of vertices is created next, as a float32array with six coordinates (three 2d vertices) per triangle to be drawn, for a total of 12 values. as you can see, we're using a coordinate system of -1.0 to 1.0 for each axis. why, you may ask, do we need to do any adjustments at all? this is simply because our context is not square. we're using a context that's 600 pixels wide and 460 tall. each of those dimensions is mapped to the range -1.0 to 1.0. since the two axes aren't the same length, if we don't adjust the values of o...

Creating 3D objects using WebGL - Web APIs
awelements() calls: // tell webgl which indices to use to index the vertices gl.bindbuffer(gl.element_array_buffer, buffers.indices); ... { const vertexcount = 36; const type = gl.unsigned_short; const offset = 0; gl.drawelements(gl.triangles, vertexcount, type, offset); } since each face of our cube is comprised of two triangles, there are 6 vertices per side, or 36 total vertices in the cube, even though many of them are duplicates. finally, let's replace our variable squarerotation by cuberotation and add a second rotation around the x axis: mat4.rotate(modelviewmatrix, modelviewmatrix, cuberotation * .7, [0, 1, 0]); at this point, we now have an animated cube rotating, its six faces rather vividly colored. view the complete code | open this demo on a ...

The WebSocket API (WebSockets) - Web APIs
and powerful framework for building scalable websocket applications in node.js. cws: fast c++ websocket implementation for node.js (uwebsockets v0.14 fork) socket.io: a long polling/websocket based third party transfer protocol for node.js. socketcluster: a pub/sub websocket framework for node.js with a focus on scalability. websocket-node: a websocket server api implementation for node.js. total.js: web application framework for node.js (example: websocket chat) faye: a websocket (two-ways connections) and eventsource (one-way connections) for node.js server and client. signalr: signalr will use websockets under the covers when it's available, and gracefully fallback to other techniques and technologies when it isn't, while your application code stays the same. caddy: a web server cap...

Fundamentals of WebXR - Web APIs
field of view is, at its essence, the extent of the environment you are able to see at any one time. the width of the field of view is measured as the angle defining the arc from the far left edge of your field of view to the far right edge, and is specified in either degrees or radians. a human eye is typically able to take in a fov of around 135°. assuming a person has two healthy eyes, their total field of view is about 200° to 220° wide. why is the fov wider with two eyes, but not double the single-eye fov? it's because the two eyes fovs overlap a lot. that overlap is what gives us depth perception; within the overlap area — which is around 115° across — we have depth perception. outside that overlap area, our vision is monocular and lacks good depth perception. the drawing shown ...

Geometry and reference spaces in WebXR - Web APIs
fe location for the viewer to stand, where the value of the y axis is 0 at floor level. if that floor level isn't known, the user agent will estimate the floor level. if the estimated floor level is non-zero, the browser is expected to round it such a way as to avoid fingerprinting (likely to the nearest centimeter). xrreferencespace unbounded a tracking space which allows the user total freedom of movement, possibly over extremely long distances from their origin point. the viewer isn't tracked at all; tracking is optimized for stability around the user's current position, so the native origin may drift as needed to accommodate that need. xrreferencespace viewer a tracking space whose native origin tracks the viewer's position and orientation. this is used for env...

Lighting a WebXR setting - Web APIs
ue to the light's interaction with the surface, but the angle is always the same. components of a light source a light source has three major components; each component is in essence a type of light there are three kinds of light that can affect the color and brightness of objects and their pixels as displayed on the viewer's screen or headset. a sphere with only ambient lighting. note the total lack of any shading to indicate the depth of the sphere. ambient light ambient light is light that doesn't come from a defined source, but is just present throughout the scene. this light reaches every surface in the scene at the same intensity from every direction, and is then reflected equally in every direction. as a result, the effect applied by ambient light is universally equal all t...

Window.scrollMaxX - Web APIs
the window.scrollmaxx read-only property returns the maximum number of pixels that the document can be scrolled horizontally. syntax xmax = window.scrollmaxx xmax is the number of pixels. example // scroll to right edge of the page let maxx = window.scrollmaxx; window.scrollto(maxx, 0); notes do not use this property to get the total document width, which is not equivalent to window.innerwidth + window.scrollmaxx, because window.innerwidth includes the width of any visible vertical scrollbar, thus the result would exceed the total document width by the width of any visible vertical scrollbar. instead use document.body.scrollwidth. see also window.scrollmaxy. specification this is not part of any specification. ...

Window.scrollMaxY - Web APIs
the window.scrollmaxy read-only property returns the maximum number of pixels that the document can be scrolled vertically. syntax ymax = window.scrollmaxy ymax is the number of pixels. example // scroll to the bottom of the page let maxy = window.scrollmaxy; window.scrollto(0, maxy); notes do not use this property to get the total document height, which is not equivalent to window.innerheight + window.scrollmaxy, because window.innerheight includes the width of any visible horizontal scrollbar, thus the result would exceed the total document height by the width of any visible horizontal scrollbar. instead use document.body.scrollheight. see also window.scrollmaxx and window.scrollto. specification this is not part of any specification. ...

WritableStream.WritableStream() - Web APIs
up — those chunks will be thrown away. if this process is asynchronous, it can return a promise to signal success or failure. the reason parameter contains a domstring describing why the stream was aborted. queuingstrategy optional an object that optionally defines a queuing strategy for the stream. this takes two parameters: highwatermark a non-negative integer — this defines the total number of chunks that can be contained in the internal queue before backpressure is applied. size(chunk) a method containing a parameter chunk — this indicates the size to use for each chunk, in bytes. note: you could define your own custom queuingstrategy, or use an instance of bytelengthqueuingstrategy or countqueuingstrategy for this object value. if no queuingstrategy is supplied,...

XRPermissionDescriptor.optionalFeatures - Web APIs
fe location for the viewer to stand, where the value of the y axis is 0 at floor level. if that floor level isn't known, the user agent will estimate the floor level. if the estimated floor level is non-zero, the browser is expected to round it such a way as to avoid fingerprinting (likely to the nearest centimeter). xrreferencespace unbounded a tracking space which allows the user total freedom of movement, possibly over extremely long distances from their origin point. the viewer isn't tracked at all; tracking is optimized for stability around the user's current position, so the native origin may drift as needed to accommodate that need. xrreferencespace viewer a tracking space whose native origin tracks the viewer's position and orientation. this is used for env...

XRPermissionDescriptor.requiredFeatures - Web APIs
fe location for the viewer to stand, where the value of the y axis is 0 at floor level. if that floor level isn't known, the user agent will estimate the floor level. if the estimated floor level is non-zero, the browser is expected to round it such a way as to avoid fingerprinting (likely to the nearest centimeter). xrreferencespace unbounded a tracking space which allows the user total freedom of movement, possibly over extremely long distances from their origin point. the viewer isn't tracked at all; tracking is optimized for stability around the user's current position, so the native origin may drift as needed to accommodate that need. xrreferencespace viewer a tracking space whose native origin tracks the viewer's position and orientation. this is used for env...

XRPermissionStatus.granted - Web APIs
fe location for the viewer to stand, where the value of the y axis is 0 at floor level. if that floor level isn't known, the user agent will estimate the floor level. if the estimated floor level is non-zero, the browser is expected to round it such a way as to avoid fingerprinting (likely to the nearest centimeter). xrreferencespace unbounded a tracking space which allows the user total freedom of movement, possibly over extremely long distances from their origin point. the viewer isn't tracked at all; tracking is optimized for stability around the user's current position, so the native origin may drift as needed to accommodate that need. xrreferencespace viewer a tracking space whose native origin tracks the viewer's position and orientation. this is used for env...

XRReferenceSpace - Web APIs
fe location for the viewer to stand, where the value of the y axis is 0 at floor level. if that floor level isn't known, the user agent will estimate the floor level. if the estimated floor level is non-zero, the browser is expected to round it such a way as to avoid fingerprinting (likely to the nearest centimeter). xrreferencespace unbounded a tracking space which allows the user total freedom of movement, possibly over extremely long distances from their origin point. the viewer isn't tracked at all; tracking is optimized for stability around the user's current position, so the native origin may drift as needed to accommodate that need. xrreferencespace viewer a tracking space whose native origin tracks the viewer's position and orientation. this is used for env...

XRReferenceSpaceType - Web APIs
fe location for the viewer to stand, where the value of the y axis is 0 at floor level. if that floor level isn't known, the user agent will estimate the floor level. if the estimated floor level is non-zero, the browser is expected to round it such a way as to avoid fingerprinting (likely to the nearest centimeter). xrreferencespace unbounded a tracking space which allows the user total freedom of movement, possibly over extremely long distances from their origin point. the viewer isn't tracked at all; tracking is optimized for stability around the user's current position, so the native origin may drift as needed to accommodate that need. xrreferencespace viewer a tracking space whose native origin tracks the viewer's position and orientation. this is used for env...

XRSession.requestReferenceSpace() - Web APIs
fe location for the viewer to stand, where the value of the y axis is 0 at floor level. if that floor level isn't known, the user agent will estimate the floor level. if the estimated floor level is non-zero, the browser is expected to round it such a way as to avoid fingerprinting (likely to the nearest centimeter). xrreferencespace unbounded a tracking space which allows the user total freedom of movement, possibly over extremely long distances from their origin point. the viewer isn't tracked at all; tracking is optimized for stability around the user's current position, so the native origin may drift as needed to accommodate that need. xrreferencespace viewer a tracking space whose native origin tracks the viewer's position and orientation. this is used for env...

XRWebGLLayer.getNativeFramebufferScaleFactor() static method - Web APIs
o reduce image quality in order to improve performance to an acceptable level, it might choose to halve the resolution. in this case, the value returned by xrwebgllayer.getnativeframebufferscalefactor() will be 2.0. this method of dividing the frame buffer between views is shown in the following diagram. now the width and height of the frame buffer are 50% what they were before, resulting in a total frame buffer size of 1280 by 720 pixels, with each eye's half of the buffer being 640x720 pixels. now we can see the coordinates of each of the viewports representing these two views: since each eye gets half of the frame buffer, the result is that the left eye gets a 640x720 portion of the buffer with the viewport's x and y at 0, the width at 640, and the height set to 720. the right eye gets...

ARIA: gridcell role - Accessibility
order in the table-style grouping, provided the table, grid, or treegrid has the ability to have rows and/or columns dynamically added, hidden, or removed. use aria-colindex to describe a gridcell's order in the list of columns, and aria-rowindex to describe a gridcell's order in the list of rows. use aria-colcount and aria-rowcount on the parent element with role="grid" applied to it to set the total number of columns or rows. this sample code demonstrates a table-style grouping of information where the third and fourth columns have been removed. aria-colindex is being used to describe the rows' position and allows a person using assistive technology to infer that certain rows have been removed: <div role="grid" aria-colcount="6"> <div role="rowgroup"> <div role="row"> <div role...

Box alignment in grid layout - CSS: Cascading Style Sheets
he item has an intrinsic aspect ratio, for example an image. in this case the item will be aligned to start in both dimensions in order that the image is not distorted. content alignment justify-content align-content place-content these properties deal with aligning the tracks of the grid when there is extra space to distribute. this scenario will occur if the tracks that you have defined total less than the total width of the grid container. gap and legacy grid-gap properties row-gap column-gap gap grid-row-gap grid-column-gap grid-gap the grid specification originally contained the definition for the properties grid-row-gap, grid-column-gap and grid-gap. these have since been moved into the box alignment specification and renamed to row-gap, column-gap, and gap. this allows...

CSS Containment - CSS: Cascading Style Sheets
ontaining element's subtree, although if the <article> is styled such that its size depends on its contents (e.g. with height: auto), then the browser may need to account for its size changing). we have told it by way of the contain property that each article is independent. the content value is shorthand for contain: layout paint. it tells the browser that the internal layout of the element is totally separate from the rest of the page, and that everything about the element is painted inside its bounds. nothing can visibly overflow. this information is something that is usually known, and in fact quite obvious, to the web developer creating the page. however browsers cannot guess at your intent and cannot assume that an article will be entirely self-contained. therefore this property gives ...

Block and inline layout in normal flow - CSS: Cascading Style Sheets
- even if there would be space for them to be side by side. each will start against the start edge of the containing block, so the place at which sentences would begin in that writing mode. margin collapsing the spec explains that margins between block elements collapse. this means that if you have an element with a top margin immediately after an element with a bottom margin, rather than the total space being the sum of these two margins, the margin collapses, and so will essentially become as large as the larger of the two margins. in the example below, the paragraphs have a top margin of 20px and a bottom margin of 40px. the size of the margin between the paragraphs is 40px as the smaller top margin on the second paragraph has collapsed with the larger bottom margin of the first. you...

Basic Shapes - CSS: Cascading Style Sheets
n use any valid position here to indicate the position of the centre of the circle. our circle therefore accepts one radius value, which may be a length, a percentage or the closest-side or farthest side keyword then optionally the keyword at followed by a position value. in the below example i have created a circle on an item with a width of 100 pixels, plus a margin of 20 pixels. this gives a total width for the reference box of 140 pixels. i have given a value of 50% for the shape-radius value which means that our radius is 70px. i have then set the position value to 30%. in the live example you can play with increasing or decreasing the size of the circle by changing the size of the radius, moving the circle around with the position value, or setting a reference box as we did for inset...

Viewport concepts - CSS: Cascading Style Sheets
l scrollbar. the window.outerwidth is the width of the outside of the browser window including all the window chrome. in an experiment with these, the innerwidth and outerwidth was seen to be the same, but the outerheight was 100px taller than the innerheight. this is because the outerheight includes the browser chrome: measurements were taken on a browser with an address bar and bookmarks bar totalling 100px in height, but no chrome on the left or right of the window. the area within the innerheight and innerwidth is generally considered the layout viewport. the browser chrome is not considered part of the viewport. when zoomed in, both firefox and chrome report the new css pixel size for innerwidth and clientwidth. the values returned for the outerwidth and outerheight depend on the brow...

border-image-slice - CSS: Cascading Style Sheets
ivides the image specified by border-image-source into regions. these regions form the components of an element's border image. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the slicing process creates nine regions in total: four corners, four edges, and a middle region. four slice lines, set a given distance from their respective sides, control the size of the regions. the above diagram illustrates the location of each region. zones 1-4 are corner regions. each one is used a single time to form the corners of the final border image. zones 5-8 are edge regions. these are repeated, scaled, or otherwise modifie...

cross-fade() - CSS: Cascading Style Sheets
white */ in the implemented syntax, the two comma-separated images are declared first, followed by a comma and required percent value. omitting the comma or percent invalidates the value. the percent is the opacity of the first declared image. the included percentage is subtracted from 100%, with the difference being the opacity of the second image. the green/red example (with the percentages totalling 150%) and the yellow/red/blue example (with three images) from the specification syntax section, are not possible in this implementation. accessibility concerns browsers do not provide any special information on background images to assistive technology. this is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its user...

mask-border-slice - CSS: Cascading Style Sheets
ntages are generally preferable in these cases. <percentage> represents an edge offset as a percentage of the source image's size: the width of the image for horizontal offsets, the height for vertical offsets. fill preserves the middle image region. its width and height are sized to match the top and left image regions, respectively. description the slicing process creates nine regions in total: four corners, four edges, and a middle region. four slice lines, set a given distance from their respective sides, control the size of the regions. the above diagram illustrates the location of each region. zones 1-4 are corner regions. each one is used a single time to form the corners of the final border image. zones 5-8 are edge regions. these are repeated, scaled, or otherwise modifie...

offset - CSS: Cascading Style Sheets
cm / 0.5cm 3cm; offset: url(arc.svg) 30deg / 50px 100px; formal definition initial valueas each of the properties of the shorthand:offset-position: autooffset-path: noneoffset-distance: 0offset-anchor: autooffset-rotate: autoapplies totransformable elementsinheritednopercentagesas each of the properties of the shorthand:offset-position: refertosizeofcontainingblockoffset-distance: refer to the total path lengthoffset-anchor: relativetowidthandheightcomputed valueas each of the properties of the shorthand:offset-position: for <length> the absolute value, otherwise a percentageoffset-path: as specifiedoffset-distance: for <length> the absolute value, otherwise a percentageoffset-anchor: for <length> the absolute value, otherwise a percentageoffset-rotate: as specifiedanimation typeas each of t...

position - CSS: Cascading Style Sheets
to the icb (initial containing block — see also the w3c definition), which is the containing block of the document's root element. html <h1>absolute positioning</h1> <p>i am a basic block level element. my adjacent block level elements sit on new lines below me.</p> <p class="positioned">by default we span 100% of the width of our parent element, and we are as tall as our child content. our total width and height is our content + padding + border width/height.</p> <p>we are separated by our margins. because of margin collapsing, we are separated by the width of one of our margins, not both.</p> <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. overflowing inline elemen...

Writing Web Audio API code that works in every browser - Developer guides
unfortunately, chrome, safari and opera still use the webkitaudiocontext prefixed name. furthermore, as a result of the spec being still in flux, some browsers use deprecated properties and method names that are not present in standards-compliant browsers: safari uses the old method names, firefox uses the new ones, and chrome and opera use both. in addition, not all features of web audio are already implemented in firefox yet. ...

Creating a cross-browser video player - Developer guides
progressbar.style.width = math.floor((video.currenttime / video.duration) * 100) + '%'; }); as the timeupdate event is raised, the progress element's value attribute is set to the video's currenttime. the <span> element mentioned earlier, for browsers that do not support the <progress> element (e.g. internet explorer 9), is also updated at this time, setting its width to be a percentage of the total time played. this span has a solid css background colour, which helps it provide the same visual feedback as a <progress> element. coming back to the video.duration problem mentioned above, when the timeupdate event is raised, in most mobile browsers the video's duration attribute should now have the correct value. this can be taken advantage of to set the progress element's max attribute if it ...

Index - Developer guides
16 audio and video manipulation audio, canvas, examples, guide, html5, media, video, web audio api, webgl, developer recommendation the ability to read the pixel values from each frame of a video can be very useful. 17 event developer guide...

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
a public relations problem. so it's important to consider your use of color carefully. you should do at least basic research into color blindness. there are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. there are others, too, ranging from inabilities to tell the difference between certain colors to total inability to see color at all. the most important rule: never use color as the only way to know something. if, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won't be able to use your site properly. instead, perhaps use both text and color together, so that ev...

<audio>: The Embed Audio element - HTML: Hypertext Markup Language
attribute used to disable the capability of remote playback in devices that are attached using wired (hdmi, dvi, etc.) and wireless technologies (miracast, chromecast, dlna, airplay, etc). see this proposed specification for more information. in safari, you can use x-webkit-airplay="deny" as a fallback. duration read only a double-precision floating-point value which indicates the duration (total length) of the audio in seconds, on the media's timeline. if no media is present on the element, or the media is not valid, the returned value is nan. if the media has no known end (such as for live streams of unknown duration, web radio, media incoming from webrtc, and so forth), this value is +infinity. loop a boolean attribute: if specified, the audio player will automatically seek back to t...

<col> - HTML: Hypertext Markup Language
ter the text in the cell; and top, which will put the text as close to the top of the cell as it is possible. note: do not try to set the vertical-align property on a selector giving a <col> element. because <td> elements are not descendant of the <col> element, they won't inherit it. if the table doesn't use a colspan attribute, use the td:nth-child(an+b) css selector where a is the total number of the columns in the table and b is the ordinal position of the column in the table. only after this selector the vertical-align property can be used. if the table does use a colspan attribute, the effect can be achieved by combining adequate css attribute selectors like [colspan=n], though this is not trivial. width this attribute specifies a default width for each column in ...

<input type="checkbox"> - HTML: Hypertext Markup Language
heckbox is unchecked. if any one or more of the sub-options have a different state than the others, the owning checkbox is in the indeterminate state. this can be seen in the below example (thanks to css tricks for the inspiration). 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. if one or two are checked, the recipe name's checkbox is set to indeterminate. if all three are checked, the recipe name's checkbox is set to checked. so in this case the indeterminate state is used to state that collecting the ingredients has started, but the recipe is not yet complete. ...

<input type="date"> - HTML: Hypertext Markup Language
february), // this part of the code ensures that the highest day available // is selected, rather than showing a blank dayselect if(dayselect.value === "") { dayselect.value = previousday - 1; } if(dayselect.value === "") { dayselect.value = previousday - 2; } if(dayselect.value === "") { dayselect.value = previousday - 3; } }...

<input type="datetime-local"> - HTML: Hypertext Markup Language
february), // this part of the code ensures that the highest day available // is selected, rather than showing a blank dayselect if(dayselect.value === "") { dayselect.value = previousday - 1; } if(dayselect.value === "") { dayselect.value = previousday - 2; } if(dayselect.value === "") { dayselect.value = previousday - 3; } }...

<table>: The Table element - HTML: Hypertext Markup Language
achieve a similar effect, use the css border shorthand property. cellpadding this attribute defines the space between the content of a cell and its border, displayed or not. if the cellpadding's length is defined in pixels, this pixel-sized space will be applied to all four sides of the cell's content. if the length is defined using a percentage value, the content will be centered and the total vertical space (top and bottom) will represent this value. the same is true for the total horizontal space (left and right). to achieve a similar effect, apply the border-collapse property to the <table> element, with its value set to collapse, and the padding property to the <td> elements. cellspacing this attribute defines the size of the space between two cells in a percentage value ...

<video>: The Video Embed element - HTML: Hypertext Markup Language
ly in some cases. disableremoteplayback a boolean attribute used to disable the capability of remote playback in devices that are attached using wired (hdmi, dvi, etc.) and wireless technologies (miracast, chromecast, dlna, airplay, etc). in safari, you can use x-webkit-airplay="deny" as a fallback. duration read only a double-precision floating-point value which indicates the duration (total length) of the media in seconds, on the media's timeline. if no media is present on the element, or the media is not valid, the returned value is nan. if the media has no known end (such as for live streams of unknown duration, web radio, media incoming from webrtc, and so forth), this value is +infinity. height the height of the video's display area, in css pixels (absolute values only; no per...

Inline elements - HTML: Hypertext Markup Language
changing element levels you can change the visual presentation of an element using the css display property. for example, by changing the value of display from "inline" to "block", you can tell the browser to render the inline element in a blo...

Evolution of HTTP - HTTP
ris with basic http/1.1 methods. this allowed any web application to provide an api to allow retrieval and modification of its data without having to update the browsers or the servers: all what is needed was embedded in the files served by the web sites through standard http/1.1. the drawback of the rest model resides in the fact that each website defines its own non-standard restful api and has total control on it; unlike the *dav extensions were clients and servers are interoperable. restful apis became very common in the 2010s. 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 t...

Content negotiation - HTTP
n experimental proposal to add more headers to the list of available headers, called client hints. client hints advertise what kind of device the user agent runs on (for example, if it is a desktop computer or a mobile device). even if server-driven content negotiation is the most common way to agree on a specific representation of a resource, it has several drawbacks: the server doesn't have total knowledge of the browser. even with the client hints extension, it has not a complete knowledge of the capabilities of the browser. unlike reactive content negotiation where the client makes the choice, the server choice is always somewhat arbitrary. the information by the client is quite verbose (http/2 header compression mitigates this problem) and a privacy risk (http fingerprinting) as seve...

Content-Range - HTTP
unit> <range-start>-<range-end>/<size> content-range: <unit> <range-start>-<range-end>/* content-range: <unit> */<size> directives <unit> the unit in which ranges are specified. this is usually bytes. <range-start> an integer in the given unit indicating the beginning of the request range. <range-end> an integer in the given unit indicating the end of the requested range. <size> the total size of the document (or '*' if unknown). examples content-range: bytes 200-1000/67589 specifications specification title rfc 7233, section 4.2: content-range hypertext transfer protocol (http/1.1): range requests ...

Server-Timing - HTTP
ible) to minimize the http overhead. // single metric without value server-timing: missedcache // single metric with value server-timing: cpu;dur=2.4 // single metric with description and value server-timing: cache;desc="cache read";dur=23.2 // two metrics with value server-timing: db;dur=53, app;dur=47.2 // server-timing as trailer trailer: server-timing --- response body --- server-timing: total;dur=123.4 privacy and security the server-timing header may expose potentially sensitive application and infrastructure information. consider to control which metrics are returned when and to whom on the server side. for example, you could only show metrics to authenticated users and nothing to the public. performanceservertiming interface in addition to having server-timing header metrics a...

Transfer-Encoding - HTTP
recommends that the servers supporting this content-encoding should recognize x-gzip as an alias, for compatibility purposes. identity indicates the identity function (i.e. no compression, nor modification). this token, except if explicitly specified, is always deemed acceptable. examples chunked encoding chunked encoding is useful when larger amounts of data are sent to the client and the total size of the response may not be known until the request has been fully processed. for example, when generating a large html table resulting from a database query or when transmitting large images. a chunked response looks like this: http/1.1 200 ok content-type: text/plain transfer-encoding: chunked 7\r\n mozilla\r\n 9\r\n developer\r\n 7\r\n network\r\n 0\r\n \r\n specifications spe...

An overview of HTTP - HTTP
nse. the web server on the opposite side of the communication channel, is the server, which serves the document as requested by the client. a server appears as only a single machine virtually: this is because it may actually be a collection of servers, sharing the load (load balancing) or a complex piece of software interrogating other computers (like cache, a db server, or e-commerce servers), totally or partially generating the document on demand. a server is not necessarily a single machine, but several server software instances can be hosted on the same machine. with http/1.1 and the host header, they may even share the same ip address. proxies between the web browser and the server, numerous computers and machines relay the http messages. due to the layered structure of the web stack,...

HTTP range requests - HTTP
e first-byte-pos of all ranges is greater than the resource length), the server responds with a 416 requested range not satisfiable status. in case of no support of range requests, the 200 ok status is sent back from a server. comparison to chunked transfer-encoding the transfer-encoding header allows chunked encoding, which is useful when larger amounts of data are sent to the client and the total size of the response is not known until the request has been fully processed. the server sends data to the client straight away without buffering the response or determining the exact length, which leads to improved latency. range requests and chunking are compatible and can be used with or without each other. ...

431 Request Header Fields Too Large - HTTP
to help those running into this error, indicate which of the two is the problem in the response body — ideally, also include which headers are too large. ...

A re-introduction to JavaScript (JS tutorial) - JavaScript
an optional comparison function. a.splice(start, delcount[, item1[, ...[, itemn]]]) lets you modify an array by deleting a section and replacing it with more items. a.reverse() reverses the array. functions along with objects, functions are the core component in understanding javascript. the most basic function couldn't be much simpler: function add(x, y) { var total = x + y; return total; } this demonstrates a basic function. a javascript function can take 0 or more named parameters. the function body can contain as many statements as you like and can declare its own variables which are local to that function. the return statement can be used to return a value at any time, terminating the function. if no return statement is used (or an empty return with ...

Enumerability and ownership of properties - JavaScript
d via simple assignment or via a property initializer (properties defined via object.defineproperty and such default enumerable to false). enumerable properties show up in for...in loops unless the property's key is a symbol. ownership of properties is determined by whether the property belongs to the object directly and not to its prototype chain. properties of an object can also be retrieved in total. there are a number of built-in means of detecting, iterating/enumerating, and retrieving object properties, with the chart showing below which are available. some sample code follows which demonstrates how to obtain the missing categories. property enumerability and ownership - built-in methods of detection, retrieval, and iteration functionality own object own object and its p...

Functions - JavaScript
// how do we access the "name" defined by the outer function? } } } using the arguments object the arguments of a function are maintained in an array-like object. within a function, you can address the arguments passed to it as follows: arguments[i] where i is the ordinal number of the argument, starting at 0. so, the first argument passed to a function would be arguments[0]. the total number of arguments is indicated by arguments.length. using the arguments object, you can call a function with more arguments than it is formally declared to accept. this is often useful if you don't know in advance how many arguments will be passed to the function. you can use arguments.length to determine the number of arguments actually passed to the function, and then access each argument us...

Indexed collections - JavaScript
ll be the first and second elements of the array. on every subsequent call, the first parameter's value will be whatever callback returned on the previous call, and the second parameter's value will be the next value in the array. if callback needs access to the index of the item being processed, on access to the entire array, they are available as optional parameters. let a = [10, 20, 30] let total = a.reduce(function(accumulator, currentvalue) { return accumulator + currentvalue }, 0) console.log(total) // prints 60 reduceright(callback[, initialvalue]) works like reduce(), but starts with the last element. reduce and reduceright are the least obvious of the iterative array methods. they should be used for algorithms that combine two values recursively in order to reduce a sequence down...

SyntaxError: missing variable name - JavaScript
me" occurs way too often as naming things is so hard. or maybe a comma is wrong. check for typos! message syntaxerror: missing variable name (firefox) syntaxerror: unexpected token = (chrome) error type syntaxerror what went wrong? a variable is missing a name. this is likely due to a syntax error in your code. probably a comma is wrong somewhere or you struggled with coming up with a name. totally understandable! naming things is so hard. check to ensure the previous lines / declaration does not end with a comma instead of a semi-colon. examples missing a variable name var = "foo"; it's tough coming up with good variable names. we all have been there. var ohgodwhy = "foo"; reserved keywords can't be variable names there are a few variable names that are reserved keywords. you...

Functions - JavaScript
ly is to assign a function expression to a variable: var zero; if (shoulddefinezero) { zero = function() { console.log("this is zero."); }; } examples returning a formatted number the following function returns a string containing the formatted representation of a number padded with leading zeros. // this function returns a string padded with leading zeros function padzeros(num, totallen) { var numstr = num.tostring(); // initialize return value as string var numzeros = totallen - numstr.length; // calculate no. of zeros for (var i = 1; i <= numzeros; i++) { numstr = "0" + numstr; } return numstr; } the following statements call the padzeros function. var result; result = padzeros(42,4); // returns "0042" result = padzeros(42,2); // returns ...

Array.prototype.reduce() - JavaScript
truly obsolete javascript engines that do not support object.defineproperty(), it is best not to polyfill array.prototype methods at all, as you cannot make them non-enumerable. examples sum all the values of an array let sum = [0, 1, 2, 3].reduce(function (accumulator, currentvalue) { return accumulator + currentvalue }, 0) // sum is 6 alternatively written with an arrow function: let total = [ 0, 1, 2, 3 ].reduce( ( accumulator, currentvalue ) => accumulator + currentvalue, 0 ) sum of values in an object array to sum up, the values contained in an array of objects, you must supply an initialvalue, so that each item passes through your function. let initialvalue = 0 let sum = [{x: 1}, {x: 2}, {x: 3}].reduce(function (accumulator, currentvalue) { return accumulator + curre...

Array.prototype.push() - JavaScript
ength being nonexistent, in which case length will also be created. although strings are native, array-like objects, they are not suitable in applications of this method, as strings are immutable. similarly for the native, array-like object arguments. examples adding elements to an array the following code creates the sports array containing two elements, then appends two elements to it. the total variable contains the new length of the array. let sports = ['soccer', 'baseball'] let total = sports.push('football', 'swimming') console.log(sports) // ['soccer', 'baseball', 'football', 'swimming'] console.log(total) // 4 merging two arrays this example uses apply() to push all elements from a second array. do not use this method if the second array (morevegs in the example) is very l...

DataView() constructor - JavaScript
conversion, endianness, and other details of representing numbers in binary form. exceptions rangeerror thrown if the byteoffset or bytelength parameter values result in the view extending past the end of the buffer. for example, if the buffer is 16 bytes long, the byteoffset is 8, and the bytelength is 10, this error is thrown because the resulting view tries to extend 2 bytes past the total length of the buffer. examples using dataview var buffer = new arraybuffer(16); var view = new dataview(buffer, 0); view.setint16(1, 42); view.getint16(1); // 42 specifications specification ecmascript (ecma-262)the definition of 'dataview constructor' in that specification. ...

Date.prototype.getUTCMilliseconds() - JavaScript
liseconds portion of the time object's value. syntax dateobj.getutcmilliseconds() return value an integer number, between 0 and 999, representing the milliseconds portion of the given date object. this method is a companion to the other utc based methods that give hour portion, minute portion, etc.; this method gives milliseconds portion. not to be confused with unix epoch time. to get total milliseconds since 1970/01/01, use the method ".gettime()". examples using getutcmilliseconds() the following example assigns the milliseconds portion of the current time to the variable milliseconds. var today = new date(); var milliseconds = today.getutcmilliseconds(); specifications specification ecmascript (ecma-262)the definition of 'date.prototype.getutcmilliseconds...

String.fromCharCode() - JavaScript
bject. because fromcharcode() is a static method of string, you always use it as string.fromcharcode(), rather than as a method of a string object you created. returning supplementary characters in utf-16, the most common characters can be represented by a single 16-bit value (i.e. a code unit). however, this set of characters, known as the base multilingual plane (bmp), is only 1/17th of the total addressable unicode code points. the remaining code points, in the range of 65536 (0x010000) to 1114111 (0x10ffff) are known as supplementary characters. in utf-16, supplementary characters are represented by two 16-bit code units, known as surrogates, that were reserved for this purpose. a valid combination of two surrogates used to represent a supplementary character is known as a surrogate pai...

TypedArray.prototype.reduce() - JavaScript
osition) and no initialvalue was provided, or if initialvalue is provided but the typed array is empty, the solo value would be returned without calling callback. polyfill this method uses the same algorithm as array.prototype.reduce(), so the same polyfill can be used here: simply replace array.prototype.reduce with typedarray.prototype.reduce. examples sum up all values within an array var total = new uint8array([0, 1, 2, 3]).reduce(function(a, b) { return a + b; }); // total == 6 specifications specification ecmascript (ecma-262)the definition of '%typedarray%.prototype.reduce' in that specification. ...

TypedArray.prototype.reduceRight() - JavaScript
ll be equal to the second-to-last value. if the typed array is empty and no initialvalue was provided, typeerror would be thrown. if the typed array has only one element (regardless of position) and no initialvalue was provided, or if initialvalue is provided but the typed array is empty, the solo value would be returned without calling callback. examples sum up all values within an array var total = new uint8array([0, 1, 2, 3]).reduceright(function(a, b) { return a + b; }); // total == 6 specifications specification ecmascript (ecma-262)the definition of '%typedarray%.prototype.reduceright' in that specification. ...

for await...of - JavaScript
// fetches data from url and calculates response size using the async generator. async function getresponsesize(url) { const response = await fetch(url); // will hold the size of the response, in bytes. let responsesize = 0; // the for-await-of loop. async iterates over each portion of the response. for await (const chunk of streamasynciterable(response.body)) { // incrementing the total response length. responsesize += chunk.length; } console.log(`response size: ${responsesize} bytes`); // expected output: "response size: 1071472" return responsesize; } getresponsesize('https://jsonplaceholder.typicode.com/photos'); iterating over sync iterables and generators for await...of loop also consumes sync iterables and generators. in that case it internally awaits emitte...

function declaration - JavaScript
ing function or global scope. you can use the function before you declared it: hoisted(); // logs "foo" function hoisted() { console.log('foo'); } note that function expressions are not hoisted: nothoisted(); // typeerror: nothoisted is not a function var nothoisted = function() { console.log('bar'); }; examples using function the following code declares a function that returns the total amount of sales, when given the number of units sold of products a, b, and c. function calc_sales(units_a, units_b, units_c) { return units_a * 79 + units_b * 129 + units_c * 699; } specifications specification ecmascript (ecma-262)the definition of 'function definitions' in that specification. ...

JavaScript typed arrays - JavaScript
ith this buffer, we need to create a view. let's create a view that treats the data in the buffer as an array of 32-bit signed integers: let int32view = new int32array(buffer); now we can access the fields in the array just like a normal array: for (let i = 0; i < int32view.length; i++) { int32view[i] = i * 2; } this fills out the 4 entries in the array (4 entries at 4 bytes each makes 16 total bytes) with the values 0, 2, 4, and 6. multiple views on the same data things start to get really interesting when you consider that you can create multiple views onto the same data. for example, given the code above, we can continue like this: let int16view = new int16array(buffer); for (let i = 0; i < int16view.length; i++) { console.log('entry ' + i + ': ' + int16view[i]); } here we cr...

iarc_rating_id - Web app manifests
no the iarc_rating_id member is a string that represents the international age rating coalition (iarc) certification code of the web application. it is intended to be used to determine which ages the web application is appropriate for. note: the same code can be shared across multiple participating storefronts, as long as the distributed product remains the same (i.e., doesn’t serve totally different code paths on different storefronts). examples "iarc_rating_id": "e84b072d-71b3-4d3e-86ae-31a8ce4e53b7" specification specification status comment feedback web app manifestthe definition of 'iarc_rating_id' in that specification. working draft initial definition. web app manifest working group drafts ...

MathML attribute reference - MathML
d inline are allowed. displaystyle <mstyle>, <mtable> a boolean value specifying whether more vertical space is used for displayed equations or, if set to false, a more compact layout is used to display formulas. unimplemented edge <malignmark> unimplemented equalcolumns <mtable> a boolean value indicating whether to force all columns to have the same total height. unimplemented equalrows <mtable> a boolean value indicating whether to force all rows to have the same total height. fence <mo> a boolean value specifying whether the operator is a fence (such as parentheses). there is no visual effect for this attribute. unimplemented form <mo> specifies the role of the operator in an enclosed expression. ...

<mtable> - MathML
dth of table columns. displaystyle a boolean value specifying whether more vertical space is used for displayed equations or, if set to false, a more compact layout is used to display formulas. the main effect is that larger versions of operators are displayed, when displaystyle is set to true. unimplemented equalcolumns a boolean value indicating whether to force all columns to have the same total height. false is default. unimplemented equalrows a boolean value indicating whether to force all rows to have the same total height. false is default. frame specifies borders of the entire table. possible values are: none (default), solid and dashed. framespacing specifies additional space added between the table and frame. groupalign unimplemented href used to set a hyperlink to a spe...

Web audio codec guide - Web media technologies
deo> elements, and not to webrtc. container support ogg, webm rtp / webrtc compatible yes licensing fully open and free of any licensing requirements choosing an audio codec typically, regardless of what codec you use, it will generally get the job done, even if it's not the ideal choice, as long as you choose a codec not specifically designed for a totally different kind of source audio. choosing a voice-only codec and trying to use it for music will not give you usable results, for instance. some codecs may limit compatibility, however, and others may be more optimal for your needs than others. here we'll provide guidance to help you select an appropriate codec for your use case. when choosing a codec to use for your audio, you should first co...

Digital audio concepts - Web media technologies
ding a sample: mid=l+r2mid = \frac { l + r }{ 2 } side=l-r2side = \frac { l - r }{ 2 } then you store the values of mid and side. while mid is still the same size as your sample size (such as 16 bits), the value of side can probably be stored in a smaller number of bits, since the amplitude of the two channels is probably relatively similar. the encoder can then take this smaller number of total bits per frame and perform additional computations to further reduce the size. while decoding the audio, the absolute left and right channel values are calculated like this: l=mid + sidel\quad =\quad mid\quad +\quad side r=mid - sidel\quad =\quad mid\quad -\quad side on its own, mid-side stereo coding is lossless, and is commonly used by both lossless and lossy audio codecs. any loss of det...

Digital video concepts - Web media technologies
resent rgb samples: using integer components and using floating-point components. 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). yuv unlike rgb, the yuv (or y'uv) color encoding system is based around how humans perceive a color image. doing so allows color data to be represented using fewer total bits of space in a video stream. the name "yuv" is generally used today to describe this color system, even though the term was originally used specifically for analog coding of color, while ycbcr was used for digital color. however, today both terms are used for digital color. the prime symbol, ', indicates that gamma compression is being used. contemplating human vision we're able to represe...

Animation performance and frame rate - Web Performance
gh this, you'll see a pattern like this: this is showing us the rendering waterfall. in each animation frame, we recalculate styles for every element, then perform a single layout, then a repaint. you can see that paint especially is hurting performance here. in the screenshot above we've highlighted a paint operation, and the box on the right tells us it took 13.11ms. with only 16.7ms in our total budget, it's not surprising we are missing a consistently high frame rate. you can experiment with this: try removing the box shadow using the page inspector, and see how that affects paint time. but next, we'll see how using transform instead of margin eliminates those expensive paints entirely. animating using transform now switch the radio button in the web page to "use transform", and make...

CSS and JavaScript animation performance - Web Performance
’ll be careful, i promise! button to enter the config screen. in the search bar, search for the layers.acceleration.draw-fps preference. double-click the entry to set the value to true. now you will be able to see three little purple boxes at the upper left corner of the firefox window. the first box represents fps. running the performance test initially in the test seen below, a total of 1000 <div> elements are transformed by css animation. the animation can be switched to requestanimationframe() by clicking the toggle button. try running them both now, comparing the fps for each (the first purple box.) you should see that the performance of css animations and requestanimationframe() are very close. off main thread animation even given the test results above, we'd argue...

Populating the page: how browsers work - Web Performance
styles from the user agent style sheet. the browser begins with the most general rule applicable to a node and recursively refines the computed styles by applying more specific rules. in other words, it cascades the property values. building the cssom is very, very fast and is not displayed in a unique color in current developer tools. rather, the "recalculate style" in developer tools shows the total time it takes to parse css, construct the cssom tree, and recursively calculate computed styles. in terms of web performance optimization, there are lower hanging fruit, as the total time to create the cssom is generally less than the time it takes for one dns lookup. other processes javascript compilation while the css is being parsed and the cssom created, other assets, including javascript ...

Performance budgets - Web Performance
m metric (e.g. time to hero element), or a threshold over a period of time. why do i need a performance budget? a budget exists to reflect your reachable goals. it's a tradeoff between user experience, against other performance indicators (e.g. conversion rate). these goals can be: timing based (e.g. time to interactive, first contentful paint). quantity-based (e.g. amount of js files/total image size). rule-based (e.g. pagespeed index, lighthouse score). their primary goal is to prevent regressions, but they can provide insights to forecast trends (i.e. on september, 50% of the budget was spent in a week). additionally, it can uncover development needs (i.e. a large library with smaller alternatives is often picked to solve a common problem). how do i define a performance budg...

Web technology reference
the open web is based on a number of technologies which, together, can be used to create everything from simple sites to powerful web applications. below you'll find links to a selection of key documentation for each. if you're new to web development, consider starting with our learning area, which is filled with step-by-step tutorials that will guide you from total webdev newbie to at least semi-pro! html — structuring the web hypertext markup language is used to define and describe semantically the content (markup) of a web page in a well-structured format. html provides a means to create structured documents made up of blocks called html elements that are delineated by tags, written using angle brackets. some introduce content into the page directly, others provide informatio...

d - SVG: Scalable Vector Graphics
string containing a series of path commands that define the outline shape of the glyph. value <string> default value none animatable yes path commands path commands are instructions that define a path to be drawn. each command is composed of a command letter and numbers that represent the command parameters. svg defines 6 types of path commands, for a total of 20 commands: moveto: m, m lineto: l, l, h, h, v, v cubic bézier curve: c, c, s, s quadratic bézier curve: q, q, t, t elliptical arc curve: a, a closepath: z, z note: commands are case-sensitive. an upper-case command specifies absolute coordinates, while a lower-case command specifies coordinates relative to the current position. it is always possible to specify a negative value a...

g1 - SVG: Scalable Vector Graphics
the g1 attribute specifies a list of glyph names which identify a set of possible first glyphs in the kerning pair. all glyphs with the given glyph name are included in the set. the total set of possible first glyphs in the kerning pair is the union of glyphs specified by the u1 and g1 attributes. two elements are using this attribute: <hkern> and <vkern> context notes value <name># default value none animatable no <name># this value indicates a comma-separated sequence of glyph names (i.e., values that match glyph-name attributes on <glyph> elements) which identify a set of possible first glyphs in the kerning pair. specifications specification status comment scalable vector graphics (svg) 1.1 (second editio...

g2 - SVG: Scalable Vector Graphics
the g2 attribute specifies a list of glyph names which identify a set of possible second glyphs in the kerning pair. all glyphs with the given glyph name are included in the set. the total set of possible second glyphs in the kerning pair is the union of glyphs specified by the u2 and g2 attributes. two elements are using this attribute: <hkern> and <vkern> context notes value <name># default value none animatable no <name># this value indicates a comma-separated sequence of glyph names (i.e., values that match glyph-name attributes on <glyph> elements) which identify a set of possible second glyphs in the kerning pair. specifications specification status comment scalable vector graphics (svg) 1.1 (second ed...

repeatDur - SVG: Scalable Vector Graphics
the repeatdur attribute specifies the total duration for repeating an animation. five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 220 150" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatdur="5s"/> </rect> <rect x="120" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatdur="indefinite"/> </rect> </svg> usage notes value <clock-value> | indefinite default values none animatable no <clock-value> this value specifies the ...

u1 - SVG: Scalable Vector Graphics
nicode character within the set has multiple corresponding <glyph> elements (i.e., there are multiple <glyph> elements with the same unicode attribute value but different glyph-name values), then all such glyphs are included in the set. comma is the separator character; thus, to kern a comma, specify the comma as part of a range of unicode characters or as a glyph name using the g1 attribute. the total set of possible first glyphs in the kerning pair is the union of glyphs specified by the u1 and g1 attributes. two elements are using this attribute: <hkern> and <vkern> context notes value [ <character> | <urange> ]# default value none animatable no [ <character> | <urange> ]# this value indicates a comma-separated sequence of unicode characters...

u2 - SVG: Scalable Vector Graphics
nicode character within the set has multiple corresponding <glyph> elements (i.e., there are multiple <glyph> elements with the same unicode attribute value but different glyph-name values), then all such glyphs are included in the set. comma is the separator character; thus, to kern a comma, specify the comma as part of a range of unicode characters or as a glyph name using the g2 attribute. the total set of possible second glyphs in the kerning pair is the union of glyphs specified by the u2 and g2 attributes. two elements are using this attribute: <hkern> and <vkern> context notes value [ <character> | <urange> ]# default value none animatable no [ <character> | <urange> ]# this value indicates a comma-separated sequence of unicode character...

<circle> - SVG: Scalable Vector Graphics
te of the center of the circle. value type: <length>|<percentage> ; default value: 0; animatable: yes cy the y-axis coordinate of the center of the circle. value type: <length>|<percentage> ; default value: 0; animatable: yes r the radius of the circle. a value lower or equal to zero disables rendering of the circle. value type: <length> ; default value: 0; animatable: yes pathlength the total length for the circle's circumference, in user units. value type: <number> ; default value: none; animatable: yes note: starting with svg2, cx, cy, and r are geometry properties, meaning those attributes can also be used as css properties for that element. global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes m...

<ellipse> - SVG: Scalable Vector Graphics
y the y position of the ellipse. value type: <length>|<percentage> ; default value: 0; animatable: yes rx the radius of the ellipse on the x axis. value type: auto|<length>|<percentage> ; default value: auto; animatable: yes ry the radius of the ellipse on the y axis. value type: auto|<length>|<percentage> ; default value: auto; animatable: yes pathlength this attribute lets specify the total length for the path, in user units. value type: <number> ; default value: none; animatable: yes note: starting with svg2 cx, cy, rx and ry are geometry properties, meaning those attributes can also be used as css properties for that element. global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: re...

<line> - SVG: Scalable Vector Graphics
ing point. value type: <length>|<percentage>|<number> ; default value: 0; animatable: yes y1 defines the y-axis coordinate of the line starting point. value type: <length>|<percentage>|<number> ; default value: 0; animatable: yes y2 defines the y-axis coordinate of the line ending point. value type: <length>|<percentage>|<number> ; default value: 0; animatable: yes pathlength defines the total path length in user units. value type: <number> ; default value: none; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, cli...

<path> - SVG: Scalable Vector Graphics
eight:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path 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"/> </svg> attributes d this attribute defines the shape of the path. value type: <string> ; default value: ''; animatable: yes pathlength this attribute lets authors specify the total length for the path, in user units. value type: <number> ; default value: none; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-...

<polygon> - SVG: Scalable Vector Graphics
- example of the same polygon shape with stroke and no fill --> <polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" /> </svg> attributes points this attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polygon. value type: <number>+ ; default value: ""; animatable: yes pathlength this attribute lets specify the total length for the path, in user units. value type: <number> ; default value: none; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-...

<polyline> - SVG: Scalable Vector Graphics
value type: <number> ; default value: none; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-...

<rect> - SVG: Scalable Vector Graphics
o|<length>|<percentage> ; default value: auto; animatable: yes rx the horizontal corner radius of the rect. defaults to ry if it is specified. value type: auto|<length>|<percentage> ; default value: auto; animatable: yes ry the vertical corner radius of the rect. defaults to rx if it is specified. value type: auto|<length>|<percentage> ; default value: auto; animatable: yes pathlength the total length of the rectangle's perimeter, in user units. value type: <number> ; default value: none; animatable: yes note: starting with svg2, x, y, width, height, rx and ry are geometry properties, meaning those attributes can also be used as css properties for that element. global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processin...

SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
implementation status unknown svggraphicselement.gettransformtoelement() removed not removed yet svggraphicselement.getctm() on the outermost element implementation status unknown animval attribute alias of baseval implementation status unknown dataset attribute for svgelement implementation status unknown moved pathlength attribute and gettotallength() and getpointatlength() methods from svgpathelement to svggeometryelement implemented (bug 1239100) document structure change notes svgsvgelement.suspendredraw(), svgsvgelement.unsuspendredraw(), and svgsvgelement.unsuspendredrawall() deprecated turned into no-ops (bug 734079) externalresourcesrequired attribute removed implementation stat...

Patterns - SVG: Scalable Vector Graphics
ternunits, which specifies the units that these attributes will take. it defaults to "objectboundingbox" as it did above, so a value of 1 is scaled to the width/height of the object you're applying the pattern to. since, in this case, we wanted the pattern to repeat 4 times horizontally and vertically, the height and width are set to 0.25. this means the pattern's width/height is only 0.25 of the total box size. unlike gradients, patterns have a second attribute, patterncontentunits, which describes the units system used inside the pattern element, on the basic shapes themselves. this attribute defaults to "userspaceonuse", the opposite of the patternunits attribute. what this means is that unless you specify one or both of these attributes (patterncontentunits and patternunits), the shapes yo...

Understanding WebAssembly text format - WebAssembly
either attributes or child nodes. so that means the webassembly s-expression: (module (memory 1) (func)) represents a tree with the root node “module” and two child nodes, a "memory" node with the attribute "1" and a "func" node. we’ll see shortly what these nodes actually mean. the simplest module let's start with the simplest, shortest possible wasm module. (module) this module is totally empty, but is still a valid module. if we convert our module to binary now (see converting webassembly text format to wasm), we’ll see just the 8 byte module header described in the binary format: 0000000: 0061 736d ; wasm_binary_magic 0000004: 0100 0000 ; wasm_binary_version adding functionality to your module ok, that’s not very interesting, let’s add some ...