Strategies for carrying out testing - Learn web development
reporting tab, like so: there is a huge amount of data you could look at using google analytics — customized reports in different categories, etc. — and we haven't got time to discuss it all. getting started with analytics provides some useful guidance on reporting (and more) for beginners. you should also be encouraged to look at the different options on the left hand side, and see what kinds of data you can find out. for example, you can find out what browsers and operating systems your users are using by selecting audience > technology > browser & os from the left hand menu. note: when using google analytics, you need to beware of misleading bias, e.g. "we have no firefox mobile users" might lead you to not bother supporting firefox mobile. but you are not going to have any fire...
...if the site was broken on firefox mobile in the first place. other considerations there are other considerations that you should probably include as well. you should definitely include accessibility as a grade a testing requirement (we'll cover exactly what you should test in our handling common accessibility problems article) plus you might have other considerations. if you are creating some kind of company intranet for delivering sales figures to managers, and all the managers have been provided with windows phones for example, you will probably want to make mobile ie support a priority. final support chart so, our final support chart will end up looking like so: a grade: chrome and firefox for windows/mac, safari for mac, edge and ie for windows (last two versions of each), ios saf...
...ce labs. note: we also need to consider accessibility — there are a number of useful tools you can install on your machine to facilitate accessibility testing, but we'll cover those in the handling common accessibility problems article, later in the course. emulators emulators are basically programs that run inside your computer and emulate a device or particular device conditions of some kind, allowing you to do some of your testing more conveniently than having to find a particular combination of hardware/software to test. an emulator might be as simple as testing a device condition. for example, if you want to do some quick and dirty testing of your width/height media queries for responsive design, you could use firefox's responsive design mode. safari has a similar mode too, which...
...And 4 more matches

Overview of events and handlers - Developer guides
rieving all resources; this approach also allows for event driven actions, which javascript leverages. (the talk is available from several sources, including this one.) currently, all execution environments for javascript code use events and event handling. the event design pattern the event system, at its core, is simply a programming design pattern. the pattern starts with an agreement over a kind of event and: the name string used for the event, the type of the data structure used to represent the key properties of that event, and the javascript object which will 'emit' that event. the pattern is implemented by defining a javascript function which takes as an argument the data structure which was agreed upon, and registering the function using the name string with the object wh...
...re intended to emit events named 'click' in response to a mouse click or, when displayed in touch sensitive surfaces, to a finger tap. ...
...button as: <button id="buttonone">click here to emit a 'click' event</button> and, in our javascript code, we could first define a function to listen to that 'click' event: var example_click_handler = function (ev){ var objkind = (ev instanceof event) ? ...
...And 4 more matches

Codecs used by WebRTC - Web media technologies
of starting up, you can use the icegatheringstatechange event to watch for the completion of ice candidate gathering, then fetch the list. let codeclist = null; peerconnection.addeventlistener("icegatheringstatechange", (event) => { if (peerconnection.icegatheringstate === "complete") { const senders = peerconnection.getsenders(); senders.foreach((sender) => { if (sender.track.kind === "video") { codeclist = sender.getparameters().codecs; return; } }); } codeclist = null; }); the event handler for icegatheringstatechange is established; in it, we look to see if the ice gathering state is complete, indicating that no further candidates will be collected. the method rtcpeerconnection.getsenders() is called to get a list of all the rtcrtpsender ...
...techange is established; in it, we look to see if the ice gathering state is complete, indicating that no further candidates will be collected. the method rtcpeerconnection.getsenders() is called to get a list of all the rtcrtpsender objects used by the connection. with that in hand, we walk through the list of senders, looking for the first one whose mediastreamtrack indicates that it's track's kind is video, indicating that the track's data is video media. we then call that sender's getparameters() method and, from the returned rtcrtpsendparameters object, we set codeclist to the codecs property and return to the caller. if no video track is found, we set codeclist to null. on return, then, codeclist is either null to indicate that no video tracks were found or it's an array of rtcrtpcode...
...ble codecs, you can alter it and then send the revised list to rtcrtptransceiver.setcodecpreferences() to rearrange the codec list. this changes the order of preference of the codecs, letting you tell webrtc to prefer a different codec over all others. ...
...And 4 more matches

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
dom, xlink, or xslt, you can use it for a number of different applications. <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet href="chrome://global/skin/"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <!-- contents go here. --> </window> listing 2: general structure of a xul document even with the internationalization of firefox and extensions, this kind of xml function is being used. reading in style sheets xul uses css to specify the appearance of its elements. again, since xul is a type of xml, stylesheets are read in using the xml-stylesheet processing instruction. on line 2 of listing 2, we’re reading in the theme’s standard style sheet. by referring to a special style sheet within chrome://global/skin/, we can make label and button s...
...isting 2, we’re reading in the theme’s standard style sheet. by referring to a special style sheet within chrome://global/skin/, we can make label and button sizes, window background color, etc, match the currently selected theme in firefox. we can also read in a stylesheet that we had set up ourselves. the xul box model in principle, xul lays out all ui components using combinations of two kinds of boxes: horizontal and vertical. as shown in listing 3, elements can be laid out horizontally using the hbox (horizontal box) element or vertically using the vbox (vertical box) element. when this file is opened in firefox, it is displayed as shown in figure 1. <label value="horizontal layout"/> <hbox> <button label="horizontal1"/> <button label="horizontal2"/> </hbox> <label value="verti...
...bjects, let's look at some of their common attributes, especially the frequently used ones. id and class the attributes id and class fill the same role that the xhtml attributes of the same names fill. id is used to define a unique name for an element, and class is used to classify elements; both of these provide convenient ways to refer to elements in css and javascript. there are also special kinds of element that only come into play after being referenced by another element. orient whether a box's contents will be vertically or horizontally arrayed depends on the elements in their initial state. you can explicitly set or change this layout using the orient attribute, with options for horizontal and vertical. align and pack the align and pack attributes both specify the layout of eleme...
...And 3 more matches

Video and audio content - Learn web development
l fundamentals (as covered in getting started with html) and images in html. objective: to learn how to embed video and audio content into a webpage, and add captions/subtitles to video. ...
... a native solution would solve much of this if implemented correctly. ...
...ion, and vimeo, and online audio providers like soundcloud. such companies offer a convenient, easy way to host and consume videos, so you don't have to worry about the enormous bandwidth consumption. ovps even usually offer ready-made code for embedding video/audio in your webpages; if you use that route, you can avoid some of the difficulties we discuss in this article. we'll be discussing this kind of service a bit more in the next article. the <video> element the <video> element allows you to embed a video very easily. a really simple example looks like this: <video src="rabbit320.webm" controls> <p>your browser doesn't support html5 video. here is a <a href="rabbit320.webm">link to the video</a> instead.</p> </video> the features of note are: src in the same way as for the <img...
...And 3 more matches

Accessibility API cross-reference
div> and <nonstruct> a region that contains mostly site-oriented content, rather than page-specific content. ...
...content which is 'too long' to appear 'inline' n/a blockquote <blockquote> entire window border as 1 object border n/a n/a n/a specific kind of button that drops down a list of items, msaa only buttondropdown n/a n/a expressed with aria-haspopup on an element with a button role specific kind of button that drops down a grid, msaa only buttondropdowngrid n/a n/a specific kind of button that drops down a menu, msaa only buttonmenu n/a n/a expressed with aria-haspopup on an element with a button role represents the system's caret caret n/a n/a n/a a brief portion of text descr...
... checkbutton check_box check_box checkbox or switch <input type=checkbox> pretty obvious what this is for clock n/a n/a timer <time> ...
...And 3 more matches

nss tech note1
emplate* templateentry is a pointer to one or more decoder templates. the number of required templates is determined by the type of the first template.when multiple templates are required, the pointer must point to a null-terminated array of templates. the syntax of these templates is identical for both decoders, except where noted. a "null template" is a template that is all zeros, having a zero kind.† the term "null-terminated array", as used throughout this document, means an array of templates, the last of which is a null template. void* dest is a pointer to the target area. this is where the decoder stores its output. the type is undefined as it is completely dependent on the content of the decoder templates.† this typically points to a struct that is described (or partially descri...
... decoder templates.† this typically points to a struct that is described (or partially described) by the templates. prarenapool* arena is a pointer to an nspr arena pool. this is the arena pool from which the decoder will allocate memory as needed. decoder templates : the sec_asn1template structure tells the decoder what to do with the input data. ...
... kind . this 32-bit field tells the decoder what to do with a particular component within the input data. it is made of two parts : the lower byte, which can contain asn.1 tags, and the upper 3 bytes, which can contain decoder modifiers. if only an asn.1 tag is specified without a modifier, then the decoder will enforce the presence of a component of that type, and fail if it does not match. if kind is an asn.1 sequence tag (sec_asn1_sequence), then you must specify additional templates in a null-terminated array to define the content of the of the asn.1 sequence. if kind is the sec_asn1_choice modifier, you must also specify additional templates in a null terminated array to list the various possible types that this component can have. in all other cases, only the first template structure p...
...And 3 more matches

XUL Structure - Archive of obsolete content
as an 'http://' url always refers to remote web sites accessed using http, and the 'file://' url always refers to local files, the 'chrome://' url always refers to installed packages and extensions. we'll look more at the syntax of a chrome url in the next section. it is important to note that when accessing content through a chrome url, it gains the enhanced privileges described above that other kinds of urls do not. for instance, an http url does not have any special privileges, and an error will occur if a web page tries, for example, to read a local file. however, a file loaded via a chrome url will be able to read files with the same access privileges as the installed extension. this distinction is important. this means that there are certain things that content of web pages cannot do, s...
...rivileges, and an error will occur if a web page tries, for example, to read a local file. however, a file loaded via a chrome url will be able to read files with the same access privileges as the installed extension. this distinction is important. this means that there are certain things that content of web pages cannot do, such as read the user's bookmarks. this distinction is not based on the kind of content being displayed; only on the type of url used. both html and xul placed on a web site have no extra permissions; however both html and xul loaded through a chrome url have enhanced permissions. remote xul was disabled in firefox 8, so the following is of historic interest only. if you are going to use xul on a web site, you can just put the xul file on the web site as you would an ht...
...file system, but you should use the .xul extension for all xul files. you can load xul files from your own machine by opening them in the browser, or by double-clicking the file in your file manager. remember that remote xul will have significant restrictions on what it can do, and does not work with current firefox versions! document types: html xml xul css mozilla uses a distinctly different kind of document object (dom) for html and xul, although they share much of the same functionality. there are three main types of document in mozilla: html, xml, and xul. naturally, the html document is used for html documents, the xul document is used for xul documents, and the xml document is used for other types of xml documents. since xul is also xml, the xul document is a subtype of the more gene...
...And 2 more matches

Responsive images - Learn web development
ntext. you might think that vector images would solve these problems, and they do to a certain degree — they are small in file size and scale well, and you should use them wherever possible. however, they aren't suitable for all image types. ...
... they are small in file size and scale well, and you should use them wherever possible. however, they aren't suitable for all image types. vector images are great for simple graphics, patterns, interface elements, etc., but it starts to get very complex to create a vector-based image with the kind of detail that you'd find in say, a photo. raster image formats such as jpegs are more suited to the kind of images we see in the above example. this kind of problem didn't exist when the web first existed, in the early to mid 90s — back then the only devices in existence to browse the web were desktops and laptops, so browser engineers and spec writers didn't even think to implement solutions. responsive image technologies were implemented recently to solve the problems indicated above by letting...
...for example, a web page includes a large landscape shot with a person in the middle when viewed on a desktop browser. when viewed on a mobile browser, that same image is shrunk down, making the person in the image very small and hard to see. it would probably be better to show a smaller, portrait image on mobile, which zooms in on the person. the <picture> element allows us to implement just this kind of solution. returning to our original not-responsive.html example, we have an image that badly needs art direction: <img src="elva-800w.jpg" alt="chris standing up holding his daughter elva"> let's fix this, with <picture>! like <video> and <audio>, the <picture> element is a wrapper containing several <source> elements that provide different sources for the browser to choose from, followed b...
...And 2 more matches

Index - Learn web development
are practical for beginners. then it steps through one method that can work right away for many readers. 44 the web and web standards beginner, front-end, learn, web, web standards this article provides some useful background on the web — how it came about, what web standard technologies are, how they work together, why "web developer" is a great career to choose, and what kinds of best practices you'll learn about through the course. 45 what will your website look like? assets, beginner, composing, content, deprecated, design, fonts, learn, simple, l10n:priority, step by step before doing anything, you need some ideas. what should your website actually do? a website can do basically anything, but, for your first try, you should keep things simple. ...
...tituting one character in a string for another, and more. 87 what is javascript? 3rd party, api, article, beginner, browser, codingscripting, core, javascript, learn, script, comments, external, inline, l10n:priority, what so there you go, your first step into the world of javascript. we've begun with just theory, to start getting you used to why you'd use javascript and what kind of things you can do with it. along the way, you saw a few code examples and learned how javascript fits in with the rest of the code on your website, amongst other things. 88 what went wrong? troubleshooting javascript article, beginner, codingscripting, debugging, developer tools, error, javascript, learn, tutorial, console.log, l10n:priority so there we have it, the basics...
...s in this assessment, you'll get some more practice in creating cool-looking boxes by trying to create an eye-catching box. 105 advanced styling effects article, beginner, blend modes, boxes, css, codingscripting, filters, styling, box shadows, effects, shapes we hope this article was fun — playing with shiny toys generally is, and it is always interesting to see what kinds of advanced styling tools are becoming available in modern browsers. 106 backgrounds and borders background, beginner, css, image, learn, position, borders, color we have covered quite a lot here, and you can see that there is quite a lot to adding a background or a border to a box. do explore the different property pages if you want to find out more about any of the feature...
...And 2 more matches

JS_DumpHeap
obsolete since jsapi 38this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. this article covers features introduced in spidermonkey 1.8 debug only. dump the object graph of heap-allocated things. syntax bool js_dumpheap(jsruntime *rt, file *fp, void* startthing, jsgctracekind kind, void *thingtofind, size_t maxdepth, void *thingtoignore); name type description cx jscontext * pointer to a js context. every jscontext is permanently associated with a jsruntime; each jsruntime contains a gc heap. fp file * file for the dump output. startthing void * null or a pointer to a gc thing (use js::value::togcthing() ...
... permanently associated with a jsruntime; each jsruntime contains a gc heap. fp file * file for the dump output. startthing void * null or a pointer to a gc thing (use js::value::togcthing() to obtain a pointer to pass here). when null, dump all things reachable from the runtime roots. when non-null, dump only things reachable from the object indicated. startkind jsgctracekind trace kind of startthing, if startthing is not null. must be jstrace_object when startthing is null. thingtofind void * null or a pointer to a gc thing. if this is non-null, js_dumpheap only dumps paths in the object graph leading to the specified thing. maxdepth size_t the upper bound on the number of edges to descend from the graph roots. ...
... thingtofind void * null or a pointer to a gc thing. if this is non-null, js_dumpheap only dumps paths in the object graph leading to the specified thing. maxdepth size_t the upper bound on the number of edges to descend from the graph roots. thingtoignore void * null or a pointer to a gc thing that will be ignored during graph traversal. enum jsgctracekind { // these trace kinds have a publicly exposed, although opaque, c++ type. // note: the order here is determined by our value packing. other users // should sort alphabetically, for consistency. jstrace_object = 0x00, jstrace_string = 0x01, jstrace_symbol = 0x02, jstrace_script = 0x03, // shape details are exposed through js_traceshapecyclecollectorchildren.
...And 2 more matches

nsIAccessibleHyperText
table this interface is the main interface to expose hyperlinks in a document, typically a text document, that are used to reference other documents. a typical implementation is to implement this interface on the small text object such as a paragraph of text. inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview nsiaccessiblehyperlink getlink(in long linkindex); long getlinkindex(in long charindex); long getselectedlinkindex(); obsolete since gecko 1.9 attributes attribute type description linkcount long the number of links contained within this hypertext object. read only. note: renamed from links in gecko 1.9 methods getlink() retrieves the nsiaccessiblehyperlink object at the given l...
... long getselectedlinkindex(); obsolete since gecko 1.9 attributes attribute type description linkcount long the number of links contained within this hypertext object. read only. note: renamed from links in gecko 1.9 methods getlink() retrieves the nsiaccessiblehyperlink object at the given link index. nsiaccessiblehyperlink getlink( in long linkindex ); parameters linkindex 0-based index of the link that is to be retrieved. this can be retrieved via getlinkindex(). return value an nsiaccessiblehyperlink object. exceptions thrown ns_error_failure indicates that the accessible is unattached from the accessible tree. ns_error_invalid_arg the link index is invalid. ...
.... nsiaccessiblehyperlink getlink( in long linkindex ); parameters linkindex 0-based index of the link that is to be retrieved. this can be retrieved via getlinkindex(). return value an nsiaccessiblehyperlink object. exceptions thrown ns_error_failure indicates that the accessible is unattached from the accessible tree. ns_error_invalid_arg the link index is invalid. getlinkindex() the link index at the given offset (character index). long getlinkindex( in long charindex ); parameters charindex the 0-based character index. return value the index of the link if it's presented on the given character index, otherwise -1. ...
...And 2 more matches

nsIMemoryReporter
64 the numeric value reported by the memory reporter, specified in the units indicated by the units attribute. read only. note: this attribute was called memoryused prior to gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4), and its type was long long. description autf8string a human-readable description of this memory usage report. read only. kind print32 the memory kind, one of the memory reporter kind constants below. read only. path autf8string the path that this memory usage should be reported under. paths are delimited with '/' characters to allow a hierarchy of memory to be displayed in about:memory. as of gecko 6.0, the path should start with "explicit/" if the memory report accounts for all memory reported und...
...is value, indicating that it applies to the current process; this is true even for reporters in a child process. when a reporter from a child process is copied into the main process, the copy's process field is set appropriately. read only. units print32 the units used by the amount attribute; this will be one of the unit type constants. read only. ...
...lies to the current process; this is true even for reporters in a child process. when a reporter from a child process is copied into the main process, the copy's process field is set appropriately. read only. units print32 the units used by the amount attribute; this will be one of the unit type constants. read only. constants memory reporter kind constants these allocation kind constants describe the types of memory allocation described by memory use reporters. constant value description kind_mapped 0 this is deprecated synonym for kind_nonheap. deprecated since gecko 8.0 kind_nonheap 0 allocated directly by os calls e.g. mmap, virtualalloc, vm_allocate etc. kind_heap 1 allocated by the heap allocator, e.g. m...
...And 2 more matches

WebIDL bindings
callback interfaces are used to represent script objects that browser code can call into. external interfaces are used to represent objects that have not been converted to the webidl bindings yet. webidl interfaces are used to represent webidl binding objects. "spidermonkey" interfaces are used to represent objects that are implemented natively by the j...
... param appended to the argument list, where t is the return type for the elements of the webidl sequence. this comes after all idl arguments, but before the errorresult&, if any, for the method. arrays idl array objects are not supported yet. the spec on these is likely to change drastically anyway. union types union types are reflected as a struct in the mozilla::dom namespace. there are two kinds of union structs: one kind does not keep its members alive (is "non-owning"), and the other does (is "owning"). const references to non-owning unions are used for plain arguments. owning unions are used in dictionaries, sequences, and for variadic arguments. union return values become a non-const owning union out param. the name of the struct is the concatenation of the names of the types in the...
... single or pair value iterators. example interface for a single value iterator: interface longiterable { iterable<long>; getter long(unsigned long index); readonly attribute unsigned long length; }; for single value iterator interfaces, we treat the interface as an indexed getter, as required by the spec. see the indexed getter implementation section for more information on building this kind of structure. example interface for a pair value iterator: interface stringandlongiterable { iterable<domstring, long>; }; the bindings for this pair value iterator interface require the following methods be implemented in the c++ object: class stringandlongiterable { public: // returns the number of items in the iterable storage size_t getiterablelength(); // returns key of pair at a...
...And 2 more matches

AudioTrack.enabled - Web APIs
false effectively mutes the audio track, preventing it from contributing to the media's audio performance. example this example switches between the main and commentary audio tracks of a media element. ...
...ng to the media's audio performance. example this example switches between the main and commentary audio tracks of a media element. ...
... the element's audio tracks are then scanned through using the javascript foreach() method (although the audiotracks property of a media element isn't actually a javascri...
...And 2 more matches

AudioTrack - Web APIs
setting this value to false mutes the track's audio. id read only a domstring which uniquely identifies the track within the media. this id can be used to locate a specific track within an audio track list by calling audiotracklist.gettrackbyid(). the id can also be used as the fragment part of the url if the media supports seeking by media fragment per the media fragments uri specification. kind read only a domstring specifying the category into which the track falls. for example, the main audio track would have a kind of "main". label read only a domstring providing a human-readable label for the track. for example, an audio commentary track for a movie might have a label of "commentary with director john q. public and actors john doe and jane eod." this string is empty if no label...
...at are in the user's preferred language (taken from a variable userlanguage) and disabling any others. tracks.foreach(function(track) { if (track.language === userlanguage) { track.enabled = true; } else { track.enabled = false; } }); the language is in standard (rfc 5646) format. for us english, this would be "en-us", for example. ...
...=== userlanguage) { track.enabled = true; } else { track.enabled = false; } }); the language is in standard (rfc 5646) format. for us english, this would be "en-us", for example. example this example returns an array of track kinds and labels for potential use in a user interface to select audio tracks for a specified media element. the list is filtered to only allow certain track kinds through. ...
...And 2 more matches

HTMLMedia​Element​.textTracks - Web APIs
f tracks can be accessed using array notation, or using the object's gettrackbyid() method. each track is represented by a texttrack object which provides information about the track. ...
...ct's gettrackbyid() method. each track is represented by a texttrack object which provides information about the track. ...
...ject which provides information about the track. ...
...And 2 more matches

MediaDevices.ondevicechange - Web APIs
e we want to fetch the current list of media devices and then update the displayed lists of audo and video devices using that information. ...
...ist of media devices and then update the displayed lists of audo and video devices using that information. ...
...ned by enumeratedevices() is fulfilled. the fulfillment handler is called when the device list is ready. the list is passed into the fulfillment handler as an array of mediadeviceinfo objects, each describing one media input or output device. a foreach() loop is used to scan through all the devices. for each device, we create a new <li> object to be used to display it to the user. ...
...And 2 more matches

RTCRtpSender.replaceTrack() - Web APIs
the rtcrtpsender method replacetrack() replaces the track currently being used as the sender's source with a new mediastreamtrack. the new track must be of the same media kind (audio, video, etc) and switching the track should not require negotiation. among the use cases for replacetrack() is the common need to switch between the rear- and front-facing cameras on a phone. with replacetrack(), you can simply have a track object for each camera and switch between the two as needed. see the example switching cameras below. ...
...front-facing cameras on a phone. with replacetrack(), you can simply have a track object for each camera and switch between the two as needed. see the example switching cameras below. syntax trackreplacedpromise = sender.replacetrack(newtrack); parameters newtrack optional a mediastreamtrack specifying the track with which to replace the rtcrtpsender's current source track. the new track's kind must be the same as the current track's, or the replace track request will fail. return value a promise which is fulfilled once the track has been successfully replaced. the promise is rejected if the track cannot be replaced for any reason; this is commonly because the change would require renegotiation of the codec, which is not allowed (see things that require negotiation). if newtrack was...
...nt handler receives a value of undefined. exceptions if the returned promise is rejected, one of the following exceptions is provided to the rejection handler: invalidmodificationerror replacing the rtcrtpsender's current track with the new one would require negotiation. invalidstateerror the track on which this method was called is stopped rather than running. typeerror the new track's kind doesn't match the original track. usage notes things that trigger negotiation not all track replacements require renegotiation. in fact, even changes that seem huge can be done without requiring negotation. here are the changes that can trigger negotiaton: the new track has a resolution which is outside the bounds of the bounds of the current track; that is, the new track is either wider o...
...And 2 more matches

Using Service Workers - Web APIs
rder to facilitate local development, localhost is considered a secure origin by browsers as well. basic architecture with service workers, the following steps are generally observed for basic set up: the service worker url is fetched and registered via serviceworkercontainer.register(). if successful, the service worker is executed in a serviceworkerglobalscope; this is basically a special kind of worker context, running off the main script execution thread, with no dom access. the service worker is now ready to process events. installation of the worker is attempted when service worker-controlled pages are accessed subsequently. an install event is always the first one sent to a service worker (this can be used to start the process of populating an indexeddb, and caching site assets)...
...g off the main script execution thread, with no dom access. the service worker is now ready to process events. installation of the worker is attempted when service worker-controlled pages are accessed subsequently. an install event is always the first one sent to a service worker (this can be used to start the process of populating an indexeddb, and caching site assets). this is really the same kind of procedure as installing a native or firefox os app — making everything available for use offline. when the oninstall handler completes, the service worker is considered installed. next is activation. when the service worker is installed, it then receives an activate event. the primary use of onactivate is for cleanup of resources used in previous versions of a service worker script. the s...
...be a bit of a pain. we can use .onload to only display the image after it’s loaded, but what about events that start happening before we start listening to them? we could try to work around this using .complete, but it’s still not foolproof, and what about multiple images? and, ummm, it’s still synchronous, so blocks the main thread. instead, we could build our own promise to handle this kind of case. (see our promises test example for the source code, or look at it running live.) note: a real service worker implementation would use caching and onfetch rather than the xmlhttprequest api. those features are not used here so that you can focus on understanding promises. const imgload = (url) => { return new promise((resolve, reject) => { var request = new xmlhttprequest(); r...
...And 2 more matches

VideoTrack.label - Web APIs
the read-only videotrack property label returns a string specifying the video track's human-readable label, if one is available; otherwise, it returns an empty string. syntax var videotracklabel = videotrack.label; value a domstring specifying the track's human-readable label, if one is available in the track metadata. otherwise, an empty string ("") is returned. ...
...ble; otherwise, it returns an empty string. syntax var videotracklabel = videotrack.label; value a domstring specifying the track's human-readable label, if one is available in the track metadata. otherwise, an empty string ("") is returned. for example, a track whose kind is "sign" might have a label such as "a sign-language interpretation.". example this example returns an array of track kinds and labels for potential use in a user interface to select video tracks for a specified media element. ...
...if one is available in the track metadata. otherwise, an empty string ("") is returned. for example, a track whose kind is "sign" might have a label such as "a sign-language interpretation.". example this example returns an array of track kinds and labels for potential use in a user interface to select video tracks for a specified media element. the list is filtered to only allow certain track kinds through. ...
...And 2 more matches

WebRTC Statistics API - Web APIs
new rtcpeerconnection(pcoptions); statsinterval = window.setinterval(getconnectionstats, 1000); /* add event handlers, etc */ } catch(err) { console.error("error creating rtcpeerconnection: " + err); } function getconnectionstats() { mypeerconnection.getstats(null).then(stats => { var statsoutput = ""; stats.foreach(report => { if (report.type === "inbound-rtp" && report.kind === "video") { object.keys(report).foreach(statname => { statsoutput += `<strong>${statname}:</strong> ${report[statname]}<br>\n`; }); } }); document.queryselector(".stats-box").innerhtml = statsoutput; }); } when the promise returned by getstats() is fulfilled, the resolution handler receives as input an rtcstatsreport object containing the statistics ...
...t.queryselector(".stats-box").innerhtml = statsoutput; }); } when the promise returned by getstats() is fulfilled, the resolution handler receives as input an rtcstatsreport object containing the statistics information. this object contains a map of named dictionaries based on rtcstats and its affiliated types. this example specifically looks for the report whose type is inbound-rtp and whose kind is video. this way, we look only at the video-related statistics for the local rtcrtpreceiver responsible for receiving the streamed media. commonly used statistics reference the rtcstatsreport object contains a map of named objects based one of the rtcstats dictionary's subclasses. upon looking up a statistic category by name, you get an object containing the corresponding data. the table bel...
... local-candidate statistics about a local ice candidate associated with the connection's rtcicetransports. rtcicecandidatestats rtcstats media-source statistics about the media produced by the mediastreamtrack attached to an rtp sender. the dictionary this key maps to depends on the track's kind. rtcaudiosourcestats or rtcvideosourcestats rtcmediasourcestats rtcstats rtcaudiosourcestats or rtcvideosourcestats outbound-rtp statistics describing the state of one of the outbound data streams on this connection. rtcoutboundrtpstreamstats rtcsentrtpstreamstats ...
...And 2 more matches

<details>: The Details disclosure element - HTML: Hypertext Markup Language
state: details.addeventlistener("toggle", event => { if (details.open) { /* the element was toggled open */ } else { /* the element was toggled closed */ } }); examples a simple disclosure example this example shows a <details> element with no provided summary. <details> <p>requires a computer running an operating system. the computer must have some memory and ideally some kind of long-term storage. an input device as well as some form of output device is recommended.</p> </details> in this situation, the browser will use a default summary string (usually "details"). here's what your browser does with it: providing a summary this example adds a summary to the above example by using the <summary> element inside <details>, like this: <details> <summary>system ...
... the browser will use a default summary string (usually "details"). here's what your browser does with it: providing a summary this example adds a summary to the above example by using the <summary> element inside <details>, like this: <details> <summary>system requirements</summary> <p>requires a computer running an operating system. the computer must have some memory and ideally some kind of long-term storage. an input device as well as some form of output device is recommended.</p> </details> the result from this html is this: creating an open disclosure box to start the <details> box in its open state, add the boolean open attribute: <details open> <summary>system requirements</summary> <p>requires a computer running an operating system. the computer must have so...
... input device as well as some form of output device is recommended.</p> </details> the result from this html is this: creating an open disclosure box to start the <details> box in its open state, add the boolean open attribute: <details open> <summary>system requirements</summary> <p>requires a computer running an operating system. the computer must have some memory and ideally some kind of long-term storage. an input device as well as some form of output device is recommended.</p> </details> this results in: customizing the appearance now let's apply some css to customize the appearance of the disclosure box. css details { font: 16px "open sans", calibri, sans-serif; width: 620px; } details > summary { padding: 2px 6px; width: 15em; background-color: #ddd; ...
...And 2 more matches

<input type="email"> - HTML: Hypertext Markup Language
ute is ignored completely. tip: use the title attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. you should also include other explanatory text nearby. see the section pattern validation for details and an example. placeholder the placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. it should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. the text must not include carriage returns or line feeds. if the control's content has one directionality (ltr or rtl) but needs to present the placeholder in the opposite directionality, you can use unicode bidirectional algorithm formatti...
... it simply ensures that the value of the field is properly formatted to be an e-mail address. note: it's also crucial to remember that a user can tinker with your html behind the scenes, so your site must not use this validation for any security purposes. you must verify the e-mail address on the server side of any transaction in which the provided text may have any security implications of any kind. a simple email input currently, all browsers which implement this element implement it as a standard text input field with basic validation features. the specification does, however, allow browsers latitude on this. for example, the element could be integrated with the user's device's built-in address book to allow picking e-mail addresses from that list. in its most basic form, an email inpu...
... id of a <datalist>, which in turn contains one <option> element per suggested value; each option's value is the corresponding suggested value for the email entry box. <input type="email" size="40" list="defaultemails"> <datalist id="defaultemails"> <option value="jbond007@mi6.defence.gov.uk"> <option value="jbourne@unknown.net"> <option value="nfury@shield.org"> <option value="tony@starkindustries.com"> <option value="hulk@grrrrrrrr.arg"> </datalist> with the <datalist> element and its <option>s in place, the browser will offer the specified values as potential values for the e-mail address; this is typically presented as a popup or drop-down menu containing the suggestions. while the specific user experience may vary from one browser to another, typically clicking in the edit ...
...And 2 more matches

<track>: The Embed Text Track element - HTML: Hypertext Markup Language
role no corresponding role permitted aria roles no role permitted dom interface htmltrackelement attributes this element includes the global attributes. default this attribute indicates that the track should be enabled unless the user's preferences indicate that another track is more appropriate. this may only be used on one track element per media element. kind how the text track is meant to be used. if omitted the default kind is subtitles. if the attribute contains an invalid value, it will use metadata (versions of chrome earlier than 52 treated an invalid value as subtitles). the following keywords are allowed: subtitles subtitles provide translation of content that cannot be understood by the viewer. for example dialogue or text that i...
... used by the browser when listing available text tracks. src address of the track (.vtt file). must be a valid url. this attribute must be specified and its url value must have the same origin as the document — unless the <audio> or <video> parent element of the track element has a crossorigin attribute. srclang language of the track text data. it must be a valid bcp 47 language tag. if the kind attribute is set to subtitles, then srclang must be defined. usage notes track data types the type of data that track adds to the media is set in the kind attribute, which can take values of subtitles, captions, descriptions, chapters or metadata. the element points to a source file containing timed text that the browser exposes when the user requests additional data. a media element cannot ...
... detecting cue changes the underlying texttrack, indicated by the track property, receives a cuechange event every time the currently-presented cue is changed. this happens even if the track isn't associated with a media element. ...
...And 2 more matches

Digital audio concepts - Web media technologies
econd } = 192000\frac { bytes }{ second } = 192 kbps at 192 kbps, lower-end networks are already going to be strained just by a single audio stream playing. if the network is also doing other things, the problem strikes even on higher bandwidth networks. ...
... network capacity, especially on slower networks, this amount of data may be too much to viably transmit during any kind of real-time applications. to solve this problem, the audio must be made smaller using compression. note: network bandwidth is obviously not the same thing as audio bandwidth, which is discussed in sampling audio, above. audio compression basics unlike text and many other kinds of data, audio data tends to be noisy, meaning the data rarely consists of a series of exactly repeated bytes or byte sequences. as a result, audio data is difficult to compress using traditional algorithms such as those used by generral-purpose tools like zip, which usually work by replacing repeating sequences of data with a shorthand representation. there are several techniques which can be ...
...duce stretches of silence as well as other repeating or nearly repeating signals that can be shortened. you can apply a filter that narrows the audio bandwidth, removing any audio frequencies that you don't care about. this is especially useful for voice-only audio signals. doing this removes data, making the resulting signal more likely to be easy to compress. psychoacoustics if you know what kind of audio you're most likely to handle, you can potentially find special filtering techniques applicable specifically to that kind of sound, that will optimize the encoding. the most commonly-used compression methods for audio apply the science of psychoacoustics. this is the science that studies how humans percieve sound, and what parts of the audio frequencies we hear are most important to how ...
...And 2 more matches

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
something you’ll need to know about in order to develop extensions. chrome what is chrome? “chrome”is the word used to describe all the gui structural elements that go into an xul application. for example, in the firefox browser window, everything other than the web page being displayed in the content area is chrome. extensions also can be considered xul applications with chrome. three kinds of packages make up chrome the content package this package is used to contain the main xul and javascript source files. most extensions consist of a single content package2 the locale package this package is used to contain language data that can be translated. to make an extension’s gui support multiple languages, you can include multiple locale packages, one for each language. the skin...
...oking a cross-package overlay (fixme: not really explicit and not a figure) conclusion this has been a brief introduction to chrome that probably leaves a lot of unanswered questions. if you keep in mind the following three points at the very least, the next section, developing a simple extension, should help flesh out your understanding. an extension’s gui, or chrome, can consist of three kinds of package: content, locale, and skin. use a cross-package overlay on top of browser.xul to add a button or menu item to the firefox browser window. the chrome manifest plays two important roles: it registers the contents of the chrome packages, and invokes the cross-package overlay. developing a simple extension: hello world in this section, we will write an extremely simple “hello world...
...t changes you make to your source files during development will not be reflected. you may want to write a batch file to automate this task. there’s a simpler way to package an extensions as an xpi. create a zip archive containing install.rdf, chrome.manifest, content, locale, and skin. name this helloworld.xpi. this omits creating the archive of the chrome packages called helloworld.jar. this kind of xpi file will run fine, but will slow down firefox’s launch time. xpi operations check after you create the xpi file, make sure it works. since you’ve already got the development version of the hello world extension running as a test install on your current profile, restart firefox under a different profile (see footnote 1). drag and drop the xpi file onto your browser window to start th...
...tions get mixed up with those defined by firefox itself and any other extensions that are running. wrapping everything in one object is a good way to isolate extensions from each other and keep them from trampling each others’ toes. defining a class would be another good way. initializing when opening browser window with extensions, there are a lot of situations where you want to perform some kind of initialization when the browser window opens. to do that, add an event listener for the load event that targets the window object. in listing 15, an init method runs when the window opens, and an uninit method runs when the window closes. adding event handlers add the four event handlers you defined in overlay.js to overlay.xul (listing 16). this takes advantage of event bubbling2, appending...

Local Storage - Archive of obsolete content
we recommend that you at least keep an error log, so that you can request error data from your users when you encounter problems that are hard to debug. we'll discuss logging in this section, but first let's look at the right (or at least, common and scalable) way of managing local files. ...
...ion remains intact and it will be there waiting for you if firefox is installed again. others feel concerned about privacy and storing private information locally without deleting it. a good argument can be done for both, so it is up to you to choose what to do in this case. the fuel library has an uninstall event you can use to perform these operations. logging good logging is essential in all kinds of software projects. any extension that is more complex than a hello world needs some way to log errors and trace execution without having to fire up a debugger. it used to be the case that custom logging solutions were necessary, but mozilla labs have come up with a javascript implementation of a logger similar to the log4j logger used in java projects. the logger is called log4moz and it is ...
...hat, you can create a logger object for any object in your project like this: this._logger = log4moz.repository.getlogger("xulschool.someobject"); this._logger.level = log4moz.level["all"]; note: we recommend that you create a logger instance in the constructor of every object and store it in a private variable. ...
...t's better that you read it from the experts. there's a very detailed xul template guide here. as mentioned before, it revolves around rdf, so you may need to take some time to understand how rdf works. there's a section about sqlite templates in the guide, but there are some concepts in it that will require you to read at least some of the rest of it. « previousnext » this tutorial was kindly donated to mozilla by appcoast. ...

Index - MDN Web Docs Glossary: Definitions of Web-related terms
46 cia glossary, security cia (confidentiality, integrity, availability) (also called the cia triad or aic triad) is a model that guides an organization's policies for information security. 47 cms cms, composing, content management system, glossary a cms (content management system) is software that allows users to publish, organize, change, or remove various kinds of content, not only text but also embedded images, video, audio, and interactive code. 48 cors glossary, infrastructure, security cors (cross-origin resource sharing) is a system, consisting of transmitting http headers, that determines whether browsers block frontend javascript code from accessing responses for cross-origin requests. 49 cors-safelisted request h...
... of its place in a script that calls multiple functions — what function is currently being run and what functions are called from within that function, etc. 63 callback function callback, callback function, codingscripting, glossary a callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action. 64 canonical order canonical order, codingscripting, glossary in css, canonical order is used to refer to the order in which separate values need to be specified (or parsed) or are to be serialized as part of a css property value. it is defined by the formal syntax of the property and normally refers to the order in which longhand values should be specif...
...ata metadata is — in its very simplest definition — data that describes data. for example, an html document is data, but html can also contain metadata in its <head> element that describes the document — for example who wrote it, and its summary. 267 method codingscripting, glossary, javascript a method is a function which is a property of an object. there are two kind of methods: instance methods which are built-in tasks performed by an object instance, or static methods which are tasks that are called directly on an object constructor. 268 microsoft edge browser, glossary, infrastructure microsoft edge is a free-of-cost graphical web browser bundled with microsoft windows and developed by microsoft since 2014. initially known as spartan, ...
...truthy codingscripting, glossary, javascript in javascript, a truthy value is a value that is considered true when encountered in a boolean context. all values are truthy unless they are defined as falsy (i.e., except for false, 0, -0, 0n, "", null, undefined, and nan). 465 type codingscripting, glossary, javascript type is a characteristic of a value affecting what kind of data it can store, and the structure that the data will adhere to. for example, a boolean data type can hold only a true or false value at any given time, whereas a string has the ability to hold a string or a sequence of characters, a number can hold numerical values of any kind, and so on. 466 type coercion coercion, javascript, type coercion type coercion is the automat...

HTML: A good basis for accessibility - Learn web development
ot handled properly. out there on the web, the truth is that people do some very strange things with html markup. some abuses of html are due to legacy practices that have not been completely forgotten, and some are just plain ignorance. whatever the case, you should replace such bad code. sometimes you are not in the position to get rid of lousy markup — your pages might be generated by some kind of server-side framework over which you don't have full control, or you might have third party content on your page (such as ad banners) over which you have no control. the goal isn't "all or nothing." however, — every improvement you can make will help the cause of accessibility. text content one of the best accessibility aids a screen reader user can have is an excellent content structure ...
...us rex: a two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</p> the first image, when viewed by a screen reader, doesn't really offer the user much help — voiceover for example reads out "/dinosaur.png, image". it reads out the filename to try to provide some help. in this example the user will at least know it is a dinosaur of some kind, but often files may be uploaded with machine-generated file names (e.g. from a digital camera) and these file names would likely provide no context to the image's content. note: this is why you should never include text content inside an image — screen readers simply can't access it. there are other disadvantages too — you can't select it and copy/paste it. just don't do it! when a scree...
...ssible data tables). however, longdesc is not supported consistently by screen readers, and the content is completely inaccessible to non-screen reader users. it is arguably much better to include the long description on the same page as the image, or link to it with a regular link. ...
...s opened unexpectedly. older versions of screen reading software may not even announce the behavior. link that opens a new tab or window <a target="_blank" href="https://www.wikipedia.org/">wikipedia (opens in a new window)</a> link to a non-html resource <a target="_blank" href="2017-annual-report.ppt">2017 annual report (powerpoint)</a> if an icon is used in place of text to signify this kind of links behavior, make sure it includes an alternate description. webaim: links and hypertext - hypertext links mdn understanding wcag, guideline 3.2 explanations g200: opening new windows and tabs from a link only when necessary | w3c techniques for wcag 2.0 g201: giving users advanced warning when opening a new window | w3c techniques for wcag 2.0 skip links a skip link, also known as...

HTML: A good basis for accessibility - Learn web development
ot handled properly. out there on the web, the truth is that people do some very strange things with html markup. some abuses of html are due to legacy practices that have not been completely forgotten, and some are just plain ignorance. whatever the case, you should replace such bad code. sometimes you are not in the position to get rid of lousy markup — your pages might be generated by some kind of server-side framework over which you don't have full control, or you might have third party content on your page (such as ad banners) over which you have no control. the goal isn't "all or nothing." however, — every improvement you can make will help the cause of accessibility. text content one of the best accessibility aids a screen reader user can have is an excellent content structure ...
...us rex: a two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</p> the first image, when viewed by a screen reader, doesn't really offer the user much help — voiceover for example reads out "/dinosaur.png, image". it reads out the filename to try to provide some help. in this example the user will at least know it is a dinosaur of some kind, but often files may be uploaded with machine-generated file names (e.g. from a digital camera) and these file names would likely provide no context to the image's content. note: this is why you should never include text content inside an image — screen readers simply can't access it. there are other disadvantages too — you can't select it and copy/paste it. just don't do it! when a scree...
...ssible data tables). however, longdesc is not supported consistently by screen readers, and the content is completely inaccessible to non-screen reader users. it is arguably much better to include the long description on the same page as the image, or link to it with a regular link. ...
...s opened unexpectedly. older versions of screen reading software may not even announce the behavior. link that opens a new tab or window <a target="_blank" href="https://www.wikipedia.org/">wikipedia (opens in a new window)</a> link to a non-html resource <a target="_blank" href="2017-annual-report.ppt">2017 annual report (powerpoint)</a> if an icon is used in place of text to signify this kind of links behavior, make sure it includes an alternate description. webaim: links and hypertext - hypertext links mdn understanding wcag, guideline 3.2 explanations g200: opening new windows and tabs from a link only when necessary | w3c techniques for wcag 2.0 g201: giving users advanced warning when opening a new window | w3c techniques for wcag 2.0 skip links a skip link, also known as...

What text editors are available? - Learn web development
eer number of choices is a bit overwhelming, since a text editor is so basic to computer science (yes, web development is computer science). ideally, you'd try as many editors as you can and get a feel for what suits your workflow. but we'll give you some pointers for getting started. here are the primary questions you should consider: which os (operating system) do i want to work with? what kind of technologies do i want to manipulate? what kind of basic features do i expect from my text editor? do i want to add extra features to my text editor? do i need support/help while using my text editor? does my text editor's look-and-feel matter to me? notice we didn't mention price. obviously, that matters too, but a product's cost has little connection with its quality or capability. the...
...r and not vista). if you're running ubuntu, your best bet is to search within the ubuntu software center. in general, of course, the linux/unix world is a pretty diverse place where different distros work with different, incompatible packaging systems. that means, if you've set your heart on an obscure text editor, you may have to compile it from source yourself (not for the faint-hearted). what kind of technologies do i want to manipulate? generally speaking, any text editor can open any text file. that works great for writing notes to yourself, but when you're doing web development and writing in html, css, and javascript, you can produce some pretty large, complex files. make it easier on yourself by choosing a text editor that understands the technologies you're working with. many text e...
... when starting a new html document, many technologies use the same document structure over and over. save yourself the hassle of retyping all this by using a code snippet to pre-fill your document. most text editors now support syntax highlighting, but not necessarily the other two features. make sure in particular that your text editor supports highlighting for html, css, and javascript. what kind of basic features do i expect from my text editor? it depends on your needs and plans. these functionalities are often helpful: search-and-replace, in one or multiple documents, based on regular expressions or other patterns as needed quickly jump to a given line view two parts of a large document separately view html as it will look in the browser select text in multiple places at once ...
...any tools in one interface and it's a bit daunting for beginners, but always an option if your text editor feels too limited. here are some popular ides: aptana studio eclipse komodo ide netbeans ide visual studio webstorm do i need support/help while using my text editor? it's always good to know if you can get help or not when using software. for text editors, check for two different kinds of support: user-oriented content (faq, manual, online help) discussion with developers and other users (forum, email, irc) use the written documentation when you're learning how to use the editor. get in touch with other users if you're troubleshooting while installing or using the editor. does my text editor's look-and-feel matter to me? well, that's a matter of taste, but some people ...

Introducing asynchronous JavaScript - Learn web development
ourself: <button>click me</button> note: it is important to remember that alert(), while being very useful for demonstrating a synchronous blocking operation, is terrible for use in real world applications. asynchronous javascript for reasons illustrated earlier (e.g. related to blocking), many web api features now use asynchronous code to run, especially those that access or fetch some kind of resource from an external device, such as fetching a file from the network, accessing a database and returning data from it, accessing a video stream from a web cam, or broadcasting the display to a vr headset. why is this difficult to get to work using synchronous code? let's look at a quick example. when you fetch an image from a server, you can't return the result immediately. that means t...
...hen() block returns another promise, meaning that you can chain multiple .then() blocks onto each other, so multiple asynchronous operations can be made to run in order, one after another. the catch() block at the end runs if any of the .then() blocks fail — in a similar way to synchronous try...catch blocks, an error object is made available inside the catch(), which can be used to report the kind of error that has occurred. note however that synchronous try...catch won't work with promises, although it will work with async/await, as you'll learn later on. note: you'll learn a lot more about promises later on in the module, so don't worry if you don't understand them fully yet. the event queue async operations like promises are put into an event queue, which runs after the main threa...
...ar in behavior — the first and third console.log() messages will be shown immediately, but the second one is blocked from running until someone clicks the mouse button. the previous example works in the same way, except that in that case the second message is blocked on the promise chain fetching a resource then displaying it on screen, rather than a click. in a less trivial code example, this kind of setup could cause a problem — you can't include an async code block that returns a result, which you then rely on later in a sync code block. you just can't guarantee that the async function will return before the browser has processed the sync block. to see this in action, try taking a local copy of our example, and changing the fourth console.log() call to the following: console.log ('al...
...nous programming with promises guide, later on in the module. conclusion in its most basic form, javascript is a synchronous, blocking, single-threaded language, in which only one operation can be in progress at a time. but web browsers define functions and apis that allow us to register functions that should not be executed synchronously, and should instead be invoked asynchronously when some kind of event occurs (the passage of time, the user's interaction with the mouse, or the arrival of data over the network, for example). this means that you can let your code do several things at the same time without stopping or blocking your main thread. whether we want to run code synchronously or asynchronously will depend on what we're trying to do. there are times when we want things to load a...

Graceful asynchronous programming with Promises - Learn web development
reasonable understanding of javascript fundamentals. objective: to understand promises and how to use them. what are promises? we looked at promises briefly in the first article of the course, but here we'll look at them in a lot more depth. essentially, a promise is an object that represents an intermediate state of an operation — in effect, a promise that a result of some kind will be returned at some point in the future. there is no guarantee of exactly when the operation will complete and the result will be returned, but there is a guarantee that when the result is available, or the promise fails, the code you provide will be executed in order to do something else with a successful result, or to gracefully handle a failure case. generally, you are less interested in...
...block with an empty executor inside the .then() call, like so: promise.all([coffee, tea, description]).then(values => { }); you can see that it takes an array containing the promises as a parameter. the executor will only run when all three promises resolve; when that happens, it will be passed an array containing the results from the individual promises (i.e. the decoded response bodies), kind of like [coffee-results, tea-results, description-results]. finally, add the following inside the executor. here we use some fairly simple sync code to store the results in separate variables (creating object urls from the blobs), then display the images and text on the page. console.log(values); // store each value returned from the promises in separate variables; create object urls fro...
... end of it and it will be passed a string of "success!". in the below code we simply alert that message: timeoutpromise .then((message) => { alert(message); }) or even just timeoutpromise.then(alert); try running this live to see the result (also see the source code). the above example is not very flexible — the promise can only ever fulfil with a single string, and it doesn't have any kind of reject() condition specified (admittedly, settimeout() doesn't really have a fail condition, so it doesn't matter for this simple example). note: why resolve(), and not fulfill()? the answer we'll give you, for now, is it's complicated. rejecting a custom promise we can create a promise that rejects using the reject() method — just like resolve(), this takes a single value, but in this ...
...sible flow of operations, good error handling, etc. one example we'd like to invite you to study, which does show a useful async application of the promise() constructor, is jake archibald's idb library. this takes the indexeddb api, which is an old-style callback-based api for storing and retrieving data on the client-side, and allows you to use it with promises. in the code you'll see the same kind of techniques we discussed above being used there. the following block converts the basic request model used by many indexeddb methods to use promises (see this code, for example). conclusion promises are a good way to build asynchronous applications when we don’t know the return value of a function or how long it will take to return. they make it easier to express and reason about sequences ...

Introduction to client-side frameworks - Learn web development
e will be working with that colloquial understanding. react extends javascript with html-like syntax, known as jsx. start learning react why do frameworks exist? we've discussed the environment that inspired the creation of frameworks, but not really why developers felt the need to make them. exploring the why requires first examining the challenges of software development. consider a common kind of application: a to-do list creator, which we'll look at implementing using a variety of frameworks in future chapters. this application should allow users to do things like render a list of tasks, add a new task, and delete a task; and it must do this while reliably tracking and updating the data underlying the application. in software development, this underlying data is known as state. each ...
...ngs about how the dom works: how to make elements; how to change their properties; how to put elements inside of each other; how to get them on the page. none of this code actually handles user interactions, or addresses adding or deleting a task. if we add those features, we have to remember to update our ui in the right time and in the right way. javascript frameworks were created to make this kind of work a little easier — they exist to provide a better developer experience. they don't bring brand-new powers to javascript; they give you easier access to javascript's powers so you can build for today's web. if you want to see code samples from this section in action, you can check out a working version of the app on codepen, which also allows users to add and delete new tasks. read more...
...take our word on this matter — there are discussions all over the web. the wikimedia foundation recently chose to use vue for its front-end, and posted a request for comments (rfc) on framework adoption. eric gardner, the author of the rfc, took time to outline the needs of the wikimedia project and why certain frameworks were good choices for the team. this rfc serves as a great example of the kind of research you should do for yourself when planning to use a front-end framework. the state of javascript survey is a helpful collection of feedback from javascript developers. it covers many topics related to javascript, including data about both the use of frameworks and developer sentiment toward them. currently, there are several years of data available, allowing you to get a sense of a fra...
...ans of publishing web content. summary and that brings us to the end of our introduction to frameworks — we’ve not taught you any code yet, but hopefully we've given you a useful background on why you'd use frameworks in the first place and how to go about choosing one, and made you excited to learn more and get stuck in! our next article goes down to a lower level, looking at the specific kinds of features frameworks tend to offer, and why they work like they do. overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering...

TypeScript support in Svelte - Learn web development
nal instead, slightly later on. there is work in progress to support typescript in svelte projects in several code editors; the most complete support so far is available in the svelte for vs code extension, which is developed and maintained by the svelte team. this extension offers type checking, inspecting, refactoring, intellisense, hover-information, auto-completion, and other features. this kind of developer assistance is another good reason to start using typescript in your projects. note: make sure you are using svelte for vs code and not the old "svelte" by james birtles, which has been discontinued. in case you have it installed, you should uninstall it and install the official svelte extension instead. anyway, assuming you are inside the vs code application, from the root of you...
...fore the call to the moreactions component, like this: <hr /> <todo todo={ { name: 'a new task with no id!', completed: false } } /> <!-- moreactions --> <moreactions {todos} add the lang='ts' to the <script> tag of the todos.svelte component, so that it knows to use the type checking we have specified. we will get the following error: by now you should get an idea about the kind of assistance we can get from typescript when building svelte projects. now we will undo these changes in order to start porting our application to typescript, so we won't be bothered with all the validate warnings. remove the flawed todo and the lang='ts' attribute from the todos.svelte file. also remove the import of todotype and the lang='ts' from todo.svelte. we'll take care of them pr...
... todotype } from '../types/todo.type' export let todo: todotype the first warning we get is typescript telling us to define the type of the update() function's updatedtodo variable. this can be a little tricky because updatedtodo contains only the attributes of the todo that have been updated. that means it's not a complete todo — it only has a subset of a todo's properties. for these kinds of cases, typescript provides several utility types to make it easier to apply these common transformations. what we need right now is the partial<t> utility, which allows us to represent all subsets of a given type. the partial utility returns a new type based on the type t, where every property of t is optional. we'll use it in the update() function — update yours like so: function upd...
...d'. (ts) $todos = { handler: () => {} } this is another example of how specifying types can make our code more robust, and help us catch more bugs before they get into production. and that's it. we've converted our whole application to use typescript. bulletproofing our stores with generics our stores have already been ported to typescript but we can do better. we shouldn't need to store any kind of value — we know that the alert store should contain string messages, and the todos store should contain an array of todotype, etc. we can let typescript enforce this using typescript generics; let's find out more. understanding typescript generics generics allow us to create reusable code components that work with a variety of types instead of a single type. they can be applied to interfac...

Handling common JavaScript problems - Learn web development
he current value of para and i each time (or something similar). see good-for-loop.html (see the source code also) for a version that works. making sure asynchronous operations have returned before trying to use the values they return. for example, this ajax example checks to make sure the request is complete and the response has been returned before trying to use the response for anything. this kind of operation has been made easier to handle by the introduction of promises to the javascript language. note: buggy javascript code: the 10 most common mistakes javascript developers make has some nice discussions of these common mistakes and more. linters as with html and css, you can ensure better quality, less error-prone javascript code using a linter, which points out errors and can al...
...ys load the polyfill code, even if we don't need it?" this is a good point — as your sites get more complex and you start to use more libraries, polyfills, etc., you can start to load a lot of extra code, which can start to affect performance, especially on less-powerful devices. it makes sense to only load files as needed. doing this requires some extra setup in your javascript. you need some kind of a feature detection test that detects whether the browser supports the feature we are trying to use: if (browsersupportsallfeatures()) { main(); } else { loadscript('polyfills.js', main); } function main(err) { // actual app code goes in here } so first we run a conditional that checks whether the function browsersupportsallfeatures() returns true. if it does, we run the main() functi...
...won't come up very often. feature detection is almost always a better option — if you detect whether a feature is supported, you won't need to change your code when new browser versions come out, and the tests are much more reliable. if you come across browser sniffing when joining an existing project, look at whether it can be replaced with something more sensible. browser sniffing causes all kind of interesting bugs, like bug 1308462. handling javascript prefixes in the previous article, we included quite a lot of discussion about handing css prefixes. well, new javascript implementations sometimes use prefixes too, although javascript uses camel case rather than hyphenation like css. for example, if a prefix was being used on a new shint api object called object: mozilla would use m...
...e browser currently viewing the site will be used. then we use that object to manipulate the api, rather than the original one. in this case we are creating a modified audiocontext constructor, then creating a new audio context instance to use for our web audio coding. this pattern can be applied to just about any prefixed javascript feature. javascript libraries/polyfills also make use of this kind of code, to abstract browser differences away from the developer as much as possible. again, prefixed features were never supposed to be used in production websites — they are subject to change or removal without warning, and cause cross browser issues. if you insist on using prefixed features, make sure you use the right ones. you can look up what browsers require prefixes for different javas...

Client-side tooling overview - Learn web development
prerequisites: familiarity with the core html, css, and javascript languages. objective: to understand what types of client-side tooling there are, and how to find tools and get help with them. overview of modern tooling writing software for the web has become more sophisticated through the ages. ...
...rowser can understand. post-development — tools that are useful after you have written your code, such as testing and deployment tools. let's look at each one of these in more detail. safety net these are tools that make the code you write a little better. this part of the tooling should be specific to your own development environment, though it’s not uncommon for companies to have some kind of policy or pre-baked configuration available to install so that all their developers are all using the same processes. this includes anything that makes your development process easier with respect to generating stable and reliable code. safety net tooling should also help you either prevent mistakes or correct mistakes automatically without having to build your code from scratch each time. a...
...al production code work on older browsers that don’t support those features. good examples here include: babel: a javascript compiler that allows developers to write their code using cutting-edge javascript, which babel then takes and converts into old-fashioned javascript that more browsers can understand. developers can also write and publish plugins for babel. postcss: does the same kind of thing as babel, but for cutting-edge css features. if there isn’t an equivalent way to do something using older css features, postcss will install a javascript polyfill to emulate the css effect you want. the option to write your code in an entirely different language and have it transformed into a web-compatible language. for example: sass/scss: this css extension allows you to ...
...you'll see this tool in action and learn more about package managers in general in chapter 3 of this module. if you are looking for a plugin to integrate tool functionality into your code editor, look at the code editor’s plugins/extensions page — see atom packages and vscode extensions, for example. have a look at the featured extensions on the front page, and again, try searching for the kind of extension you want (or the tool name, for example search for "eslint" on the vscode extensions page). when you get results, have a look at information such as how many stars or downloads the extension has, as an indicator of its quality. development-related forums to ask questions on about what tools to use, for example mdn learn discourse, or stack overflow. when you’ve chosen a too...

PKCS11 Implement
t version of nss. this document supplements the information in pkcs #11: cryptographic token interface standard, version 2.0 with guidelines for implementors of cryptographic modules who want their products to work with mozilla client software: how nss calls pkcs #11 functions. function-specific information organized in the same categories as the pkcs #11 specification. functions for different kinds of tokens. summarizes the support nss expects from different kinds of tokens. installation. installing modules and informing the user of changes in the cryptographic modules settings. semantics unique to nss. miscellaneous nss semantics that affect module implementation. future versions of netscape server products will also support of pkcs #11 version 2.0. how nss calls pkcs #11 functions thi...
...has been removed and then the same or another token is inserted, c_getsessioninfo should return ckr_session_handle_invalid. c_login the nss calls c_login on a token's initial session whenever ckf_login_required is true and the user state indicates that the user isn't logged in. c_logout the nss calls c_logout on a token's initial session when the password is timed out when performing any kind of private key operation if "ask always" is turned on when changing a password when the user logs out object management c_createobject the nss calls c_createobject when loading new private keys and new certificates into a token. typically, nss uses c_createobject for creating a new private key if pkcs #12 is operating or if your writable token doesn't support c_generatekeypair. currently p...
...tsinit, c_findobjects, c_findfinal the nss calls these functions frequently to look up objects by cka_id or cka_label. these values must match the equivalent values for related keys and certificates and must be unique among key pairs on a given token. the nss also looks up certificates by ck_issuer and ck_serial. if those fields aren't set on the token, s/mime won't work. functions for different kinds of tokens the nss expects different kinds of pkcs #11 support from four different kinds of tokens: external key distribution tokens are used with corresponding plug-ins to distribute private keys. signing tokens include a signing certificate and are used to sign objects or messages or to perform ssl authentication. they cannot be used for encrypted s/mime, because they can't decrypt messages.
...ovide the full range of cryptographic services. they can be thought of as cryptographic accelerator cards. future releases of nss will also support multipurpose tokens that are fips-140 compliant. table 1.2 summarizes the pkcs #11 functions (in addition to the other functions described in this document) that nss expects each type of token to support. ...

Parser API
iondeclaration"; id: identifier; params: [ pattern ]; defaults: [ expression ]; rest: identifier | null; body: blockstatement | expression; generator: boolean; expression: boolean; } a function declaration. note: the id field cannot be null. interface variabledeclaration <: declaration { type: "variabledeclaration"; declarations: [ variabledeclarator ]; kind: "var" | "let" | "const"; } a variable declaration, via one of var, let, or const. interface variabledeclarator <: node { type: "variabledeclarator"; id: pattern; init: expression | null; } a variable declarator. note: the id field cannot be null. note: let and const are spidermonkey-specific. expressions interface expression <: node, pattern { } any expression node. since t...
...on"; } a this expression. interface arrayexpression <: expression { type: "arrayexpression"; elements: [ expression | null ]; } an array expression. interface objectexpression <: expression { type: "objectexpression"; properties: [ property ]; } an object expression. interface property <: node { type: "property"; key: literal | identifier; value: expression; kind: "init" | "get" | "set"; } a literal property in an object expression can have either a string or number as its value. ordinary property initializers have a kind value "init"; getters and setters have the kind values "get" and "set", respectively. interface functionexpression <: function, expression { type: "functionexpression"; id: identifier | null; params: [ pattern ]; defaul...
...stomstatement callback to produce a custom let statement node. declarations functiondeclaration(name, args, body, isgenerator, isexpression[, loc]) name: string args: [ custompattern ] body: customstatement | customexpression isgenerator: boolean isexpression: boolean loc: sourcelocation returns: customdeclaration callback to produce a custom function declaration node. variabledeclaration(kind, dtors[, loc]) kind: "const" | "let" | "var" dtors: [ customdeclarator ] loc: sourcelocation returns: customdeclaration callback to produce a custom variable declaration node. variabledeclarator(patt, init[, loc]) patt: custompattern init: customexpression | null loc: sourcelocation returns: customdeclarator callback to produce a custom variable declarator node. expressions sequenceexp...
... a custom comprehension if node. miscellaneous identifier(name[, loc]) name: string loc: sourcelocation returns: customidentifier/custompattern/customexpression callback to produce a custom identifier node. literal(val[, loc]) val: string | boolean | null | number | regexp loc: sourcelocation returns: customliteral / customexpression callback to produce a custom literal node. property(kind, key, val[, loc]) kind: "init" | "get" | "set" key: customliteral | customidentifier val: customexpression loc: sourcelocation returns: customobjectproperty callback to produce a custom object property initializer node. e4x declarations xmldefaultdeclaration(ns[, loc]) loc: sourcelocation returns: customdeclaration callback to produce a custom xml default namespace declaration node. e...

nsIDOMMozNetworkStatsManager
date. nsidomdomrequest getsamples(in nsisupports network, in jsval start, in jsval end, [optional] in jsval options /* networkstatsgetoptions */); 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. start a date object representing the beginning of data measurement. end a date object representing the end of data measurement. options optional filtering options. networkstatsgetoptions is a dictionary object providing filtering options. return value an nsidomdomrequest object...
...tional 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 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. exce...
...getallalarms() obtain all alarms for those networks returned by getavailablenetworks. if a network is provided, only retrieves the alarms for that network. nsidomdomrequest getallalarms([optional] in nsisupports network); parameters network optional 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. return value an alarm object with the same fields as that in the system message; alarmid, network, threshold, and data. exceptions thrown invalidnetwork the network must be in the return of getavailablenetworks. removealarms() remove all network alarms. if an alarmid is provid...
...larmid id of an alarm, like the one returned by addalarm. return value an nsidomdomrequest object. clearstats() remove all stats related with the provided network from db. nsidomdomrequest clearstats(in nsisupports network); 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. return value an nsidomdomrequest object. clearallstats() clears all statistics from the statistics database. void clearallstats(); parameters none. return value an nsidomdomrequest object. getavailablenetworks() returns available networks that used to be saved in the databas...

DataTransferItem.getAsString() - Web APIs
syntax datatransferitem.getasstring(callback); parameters callback a callback function that has access to the data transfer item's string data. see callback below for details. return value undefined callback the callback parameter is a callback function which accepts one parameter: domstring the drag data item's string data. the callback return value is undefined. ...
... which accepts one parameter: domstring the drag data item's string data. the callback return value is undefined. example this example shows the use of the getasstring() method as an inline function in a drop event handler. ...
...function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html console.log("... ...
...[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html console.log("... drop: html"); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/uri-list'))) { // drag data item is uri console.log("... drop: uri"); } else if ((data[i].kind == 'file') && (data[i].type.match('^image/'))) { // drag data item is an image file var f = data[i].getasfile(); console.log("... drop: file "); } } } specifications specification status...

TextTrack.mode - Web APIs
vents are being fired at the corresponding times, even though the text isn't being displayed. showing the text track is currently enabled and is visible. if the track's cues list hasn't been obtained yet, it will be soon. the activecues list is being maintained and events are firing at the appropriate times; the track's text is also being drawn appropriately based on the styling and the track's kind. this is the default value if the text track's default boolean attribute is specified. usage notes the default mode is disabled, unless the default boolean attribute is specified, in which case the default mode is showing. when a text track is loaded in the disabled state, the corresponding webvtt file is not loaded until the state changes to either showing or hidden. this way, the resource fe...
... cues while handling, for example, the load event—in order to process some aspect of the cues upon page load—and the track mode was initially disabled, you'll have to change the mode to either hidden or showing in order to trigger loading of the cues. when the mode is showing, text tracks are performed. the exact appearance and manner of that performance varies depending on each text track's kind. ...
... the load event—in order to process some aspect of the cues upon page load—and the track mode was initially disabled, you'll have to change the mode to either hidden or showing in order to trigger loading of the cues. when the mode is showing, text tracks are performed. the exact appearance and manner of that performance varies depending on each text track's kind. ...
... disabled, you'll have to change the mode to either hidden or showing in order to trigger loading of the cues. when the mode is showing, text tracks are performed. the exact appearance and manner of that performance varies depending on each text track's kind. in general: tracks whose kind is "subtitles" or "captions" are rendered with the cues overlaid over the top of the video. tracks whose kind is "descriptions" are presented in a non-visual form (for example, the text might be spoken to describe the action in the video). tracks whose kind is "chapters" are used by the user agent or the web site or web app to construct and present an interface for navigating the named chapters, where each cue in the list represents a chapter in the media. the user can then navigate to the desired chapt...

Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
gramming to refer to an object describing the position and viewing direction of a hypothetical viewer of the scene, whether there's an actual object present in 3d space or not. points of view since the camera is a virtual object which, rather than necessarily representing a physical object in the virtual world, represents a viewer's position and viewing direction, it's useful to think about the kinds of situation that call for the use of a camera. gaming-related situations are listed separately since they are often a special case specific to gaming, but any of these perspectives might apply to any 3d graphics scene. generalized cameras in general, virtual cameras may or may not be incorporated into physical objects within the scene. indeed, outside the scope of 3d gaming, the odds are far ...
...the scene with the distance and field of view set to allow the entire scene to be presented. when accelerating bitmapped graphics, the renderer would draw the 2d image into a webgl texture's buffer, then redraw the texture to refresh the screen. this essentially uses the texture as a backbuffer for performing multiple buffering in your 2d graphics application. cameras in gaming there are many kinds of games, and as such, there are several ways in which cameras might be used in games. some common situations include: in a first-person game, the camera is located within the player's avatar's head, facing in the same direction as the avatar's eyes. this way, the view presented on the player's screen or headset is what their avatar would be seeing. in some third-person games, the camera is ...
...dicate its position relative to the origin, whose position is defined to be (0, 0, 0). there's another aspect of the spatial relationship of an object to the origin in space left to be considered: perspective. perspective, properly applied to the objects in a scene, can take a scene that would otherwise look as flat as a typical 2d screen and make it pop as if it were truly 3d. there are several kinds of perspective; those are defined and their mathematics explained in the article webgl model view projection. importantly, the effect of perspective on a vector can be represented by adding a fourth component to the vector: the perspective component, called w. the value of w is applied by dividing each of the other three components by it to get the final position or vector; that is, for a coord...
...dollydistance meters relative to the camera. if dollydistance is positive, the world moves toward the user by that amount, resulting in the camera being closer to the scene. contrariwise, negative values of dollydistance move the world away from the user, causing the camera to appear to move backward from the target. trucking (moving left or right) trucking using a physical camera uses the same kind of rigging as dollying, but instead of moving the camera forward and backward, it moves from left to right or vice-versa. the camera doesn't rotate at all, so the focus of the shot slowly glides off the screen. this can suggest concentration, time passing, or contemplation when attempting to establish emotion in a scene. it's also used frequently in "walk-and-talk" scenes, wherein the camera glid...

Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
refreshable braille display. screen magnifiers will zoom to the focus, keeping it on the screen at all times, or even allow the user to enter a special low vision document reading mode, with a variety of features such as ticker mode where text is streamed on a single line. finally, voice dictation software needs to know what's in the current document or ui in order to implement "say what you see" kinds of features. on microsoft windows, these kinds of assistive technology acquire this necessary information via a combination of hacks, msaa and proprietary doms. msaa is supposed to be the "right way" for accessibility aids to get information, but sometimes the hacks are more effective. for example, screen readers look for screen draws of a vertical blinking line, to determine the location of th...
... ended (try not to fire too many of these, wait until scrolling has truly stopped). there is no need to support event_system_scrollingstart, it is not used by assistive technology. no support for document formatting or "dom" as requested by some vendors: support a custom interface that gives them the formatting information they are requesting. dueling text equivalents problem: there are three kinds of text equivalents, and it is difficult to know when to use each. different applications behave differently in this regard. for example, acrobat uses accessible value for text labels where as most programs use accessible name. solution: be as consistent with internet explorer as possible. use accessible name for most text equivalents, and accessible value for url's. don't use accessible descri...
...ility service is created, however, gecko loads code to create an object on demand for every ui or document object that should support iaccessible. the created objects are cached in a hash table, and shutdown when they're no longer needed. they may still exist in memory in a nonfunctional state until the assistive technology completely releases them. see the section on accessible roles to see what kinds of objects gecko support iaccessible for. the accessible tree vs. the dom tree after the root or doc accessible for a window has been created and handed back to the msaa client, it is used to traverse the rest of the iaccessible tree using accnavigation, get_accchild and get_accparent. any iaccessible will support those methods. we also support ienumvariant::next() which allows for fast marsha...
... the msaa tree and the dom tree are parallel structures, although the msaa tree is a subset of the dom tree. queryinterface() can be used to switch between the interfaces used in the two trees (iaccessible and isimpledomnode). if there is no msaa node for a dom node, paccessible->queryinterface(iid_iaccessible) will return null. a variety of implementations for iaccessible there are two main kinds of classes in mozilla's accessibility class hierarchy, platform-specifc and cross-platform. all of the platform-specific classes have the word "wrap" appended to them. the wrap classes contain implementations and interfaces specific to msaa or atk. these platform-specific classes inherit from cross-platform classes, where the most of the implementation is done. for example, nsaccessiblewrap inhe...

Content negotiation - HTTP
entation is chosen when the resource is called is determined by content negotiation and there are several ways of negotiating between the client and the server. the determination of the best suited representation is made through one of two mechanisms: specific http headers by the client (server-driven negotiation or proactive negotiation), which is the standard way of negotiating a specific kind of resource. the 300 (multiple choices) or 406 (not acceptable) http response codes by the server (agent-driven negotiation or reactive negotiation), that are used as fallback mechanisms. over the years, other content negotiation proposals, like transparent content negotiation and the alternates header, have been proposed. they failed to get traction and got abandoned. server-driven content n...
...ven negotiation or reactive negotiation), that are used as fallback mechanisms. over the years, other content negotiation proposals, like transparent content negotiation and the alternates header, have been proposed. they failed to get traction and got abandoned. server-driven content negotiation in server-driven content negotiation, or proactive content negotiation, the browser (or any other kind of user-agent) sends several http headers along with the url. these headers describe the preferred choice of the user. the server uses them as hints and an internal algorithm chooses the best content to serve to the client. the algorithm is server-specific and not defined in the standard. see, for example, the apache negotiation algorithm. the http/1.1 standard defines list of the standard hea...
...e, though this is not considered as a good practice. the server uses the vary header to indicate which headers it actually used for content negotiation (or more precisely the associated response headers), so that caches can work optimally. in addition to these, there is an 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 br...
... 1024. for example, 512 megabytes will be reported as 0.5. dpr indicates the client's device pixel ratio. viewport-width indicates the layout viewport width in css pixels. width indicates the resource width in physical pixels (in other words the intrinsic size of an image). the accept-charset header the accept-charset header indicates to the server what kinds of character encodings are understood by the user-agent. traditionally, it was set to a different value for each locale for the browser, like iso-8859-1,utf-8;q=0.7,*;q=0.7 for a western european locale. with utf-8 now being well-supported, being the preferred way of encoding characters, and to guarantee better privacy through less configuration-based entropy, browsers omit the accept-charset h...

Web audio codec guide - Web media technologies
e an internal sample format that may or may not be the same as the original sample size. but more source detail may make the encoded file larger; it will never make it smaller. of course, these effects can be altered by decisions made while encoding the audio. for example, if the encoder is configured to reduce the sample rate, the sample rate's effect on the output file will be reduced in kind. for more information about these and other features of audio data, see audio data format and structure in digital audio concepts. the effect of codec configuration on encoded audio output audio codecs typically employ cleverly-designed and highly-complex mathematical algorithms to take source audio data and compress it to take substantially less space in memory or network bandwidth. in additi...
...used during encoding, the resulting bit rate can vary from around 45 kbps to 500 kbps. vorbis inherently uses variable bit rate encoding; the bit rate can vary from one sample to the next as needed during the compression process. generally, vorbis is more efficient in terms of size and bit rate than mp3 at similar quality levels. this and its free and open license, make it a good choice for many kinds of audio data as long as its high latency isn't a problem. supported bit rates 45 kbps - 500 kbps variable bit rate (vbr) support yes supported sample formats 16-bit integer supported sample rates 8 khz - 192 khz recommended minimum bit rate for stereo sound 192 kbps at 48 khz; this is typically accomplished by setting the quality leve...
... 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 consider the follow...
...irst consider the following questions: will the encoded audio be getting remixed or recompressed? if so, avoid lossy compression, which would be compounded by recompressing the audio; or at least use as little compression as possible. if the audio needs to go into a specific file type, keep that in mind, since media containers typically support a specific subset of the available codecs. what kind of audio content will the codec be handling? certain codecs are specifically designed for voice-only content (they take advantage of the reduced frequency range needed for human speech). others may have an algorithmic tendency to perform worse when encoding specific genres of music. what bit rates and other configurable properties does each codec have that may make it a good (or poor) choice? t...

widget - Archive of obsolete content
been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the widget has been loaded, at the time the window.onload event fires this property is optional and defaults to "end". contentscriptoptions object read-only value exposed to content scripts under self.options property. any kind of jsonable value (object, array, string, etc.) can be used here. optional. widget represents a widget object. methods destroy() removes the widget from the add-on bar. postmessage(data) sends a message to the widget's content scripts. parameters data : value the message to send. the message can be any json-serializable value. on(type, listener) registers an event listener w...
...ore the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the widget has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under self.options property. any kind of jsonable value (object, array, string, etc.) can be used here. optional. port object that allows you to: send events to the content script using the port.emit function receive events from the content script using the port.on function see the guide to communicating using port for details. events attach this event is emitted when a browser window is opened and a new widgetview object...
...he dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the widget view has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under self.options property. any kind of jsonable value (object, array, string, etc.) can be used here. optional. port object that allows you to: send events to the content script using the port.emit function receive events from the content script using the port.on see the guide to communicating using port for details. events detach the detach event is fired when the widget view is removed from its related window. this ca...

Adding sidebars - Archive of obsolete content
ab.label;" /> </tabs> <tabpanels> <tabpanel> <!-- content for the main panel. --> </tabpanel> <tabpanel> <!-- content for the advanced panel. --> </tabpanel> </tabpanels> </tabbox> the first tab is selected by default, but you can change the default selection by setting the selected attribute to true in the « xul reference « element. a tabpanel can hold any kind of content. you should take into account that the whole tab box is going to be as large as the tab strip on the top and the content of the largest panel. you should try to balance the content in the tab panels so that you don't end up with uneven and mostly empty panels. decks and stacks sometimes you'll need finer grained control than the one provided by a tabbox. in these cases the « xul ref...
...<image src="chrome://xulschoolhello/skin/stack-bg.png" flex="1" /> </hbox> <hbox> <!-- some content here. --> </hbox> </stack> this workaround is necessary because you can't have an background image stretch using css. a less common use for the stack element is to use the left and top attributes on its children in order to have absolute positioning for the content on the layers. this kind of positioning can be useful for various artistic effects, as well as some type of desktop-like or dashboard-like interface, where items are located in positions determined by the user, and they can overlap with each other. this can become complicated very easily, though. remember that you can't have flexibility and absolute positioning at the same time. trees the bookmarks and history sidebar...
...e quite some time and yields a great deal of xml code that is hard to follow. this is why most of the uses of the tree element are for displaying data from an external datasource. even handling the construction of a tree using javascript and dom functions can become very convoluted, which is why trees are better used along with templates. this topic will be covered later when we look at different kinds of datasources and templates. adding style to a tree can also be challenging, which is why there's a guide specifically covering how to style a tree. looking at the bookmarks and history sidebars should make it clear that trees are quite customizable with css. « previousnext » this tutorial was kindly donated to mozilla by appcoast. ...

Adding windows and dialogs - Archive of obsolete content
omptservice); if (prompts.confirm(window, "confirm title", "would you like to continue?")) { // do something. } else { // do something else } the method returns a boolean value indicating the user's response. others unprivileged javascript can also use the window.prompt function to receive text input from the user. the prompt service has a very rich set of functions that allow different kinds of inputs, such as text, passwords, usernames and passwords, and checkboxes that can be used for "never ask this again"-type dialogs. the confirmex and prompt methods are the most customizable, allowing a great deal of options that cover most common dialog cases. using the prompt service will save you a lot of xul coding, and you'll be at ease knowing that you're using mozilla's tried and teste...
...e of potential localization problems. dialogs are sized to their contents and will generally work fine. however, there are cases where the dialog contents are generated or expanded dynamically by your code, and you'll need to resize them appropriately. the window.sizetocontent function is what you need in this case. input controls most additional xul windows and dialogs in extensions are some kind of input form. let's look into the most commonly used form elements and how to use them in your xul windows. there isn't much we need to add from what the xul tutorial explains, so go ahead and read the following sections: input controls numeric controls list controls there are some other aspects to take into account when handling input controls, which we cover in the following sections. ...
...ex attribute in the controls. you can also use the focus function to focus an element depending on events such as window load. you should do this carefully, to avoid having inaccessible controls. you can also use the -moz-user-focus css property to enable focusing of elements that typically wouldn't receive focus. again, this should be used sparingly. « previousnext » this tutorial was kindly donated to mozilla by appcoast. ...

Connecting to Remote Content - Archive of obsolete content
ned and processed. therefore, it is very important that xmlhttprequest calls are always done asynchronously. now let's look at the most common types of content you can use to communicate with remote servers. json content json is a very lightweight and simple data representation format, similar to the object representation used in javascript. unlike javascript, the json format doesn't allow any kind of code that can be run, only data. json used to be risky in terms of security because the favored way of parsing it was to use the javascript eval function. since eval executes 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 j...
...ssor.transformtodocument(responsexml); // append the xul node to a xul element xulnode = document.adoptnode(xuldocument.firstchild); document.getelementbyid("foo").appendchild(xulnode); }; we effectively transformed the xml file into xul and integrated it into the ui. note: security should be your number one priority when handling remote content. do not allow event handlers or any other kinds of code to be passed through your parsers. if you need your generated xul to have js code in it, all of it should be added locally, never from the remote source. here are a couple of practical situations were you may want to use xslt: convert a large xml document directly into xul. filter a complex xml file and generate a simpler xml document with only the data you need, so then you can use...
... tamper data can be found here. note: you should always test your connection code to cover edge cases, like when there is no internet connection, or the computer is connected to a local network with no internet access (like at an airport or hotel room). make sure you're not telling users everything is ok, or worse, bombarding them with error messages. « previousnext » this tutorial was kindly donated to mozilla by appcoast. ...

Setting Up a Development Environment - Archive of obsolete content
in regards to code editing, there's no official mozilla ide. on the other hand, extensions use the same (or similar) languages that are used for web development, so most text editors and ides are up to the task. most xul tools and plugins you'll find online are merely templates that generate the folder structure for the project, and that's not much help. we recommend komodo edit. it's free, open source, and cross-platform. ...
...usly mentioned add-ons. on the other hand, firebug has a very friendly, integrated user interface, and sees much more development that its counterparts. it's definitely worth a try. leak monitor memory leaks have always been a big criticism drawn against firefox. mozilla has proven with time that they take memory usage seriously, improving performance on several critical areas and removing all kinds of memory leaks. however, extensions are also capable of causing memory leaks. if you want your extension to be included in the mozilla add-ons site, you better not have any memory leaks. using xpcom in javascript has some guidelines you should follow to avoid them. one of the most common errors developers make is to register a js event listener or observer, and never removing it. the simple pr...
...ebug extension. open the firebug window and go to an ajax-heavy page such as gmail or facebook. open and enable the net tab. try to identify what is going on with some of the requests being sent. now that you know how to quickly monitor your project and test changes, we'll learn how to add new ui elements to firefox, through overlays and new windows. « previousnext » this tutorial was kindly donated to mozilla by appcoast. ...

User Notifications and Alerts - Archive of obsolete content
on lists a few alternatives that give you the possibility of notifying the user and requesting action without being too annoying. the notificationbox element you have probably seen these before. the "remember password" prompt is the one that shows up the most often. they are thin boxes that appear from beneath the tab list and above the page content, with some text and maybe a few buttons. this kind of notification is implemented with a notificationbox. this kind on notification is very easy to implement, it doesn't interrupt the user and is easy to read and dismiss, so it is our recommended way of displaying alerts and notifications. there's a catch, though: these notifications are inside the current tab, so switching tabs will make a notification disappear. the notification shows up again...
...be buggy and have accessibility issues. you should use the 2 alternatives mentioned above whenever possible. if none of those fit your needs then this is an acceptable solution. an easy way to display alerts is to include a hidden box in your overlay, which you can fill with any content you need before removing the hidden attribute so that it is displayed to the user. the best locations for this kind of box are above and below the tab browser. below is preferrable because it only cuts the bottom part of the current page, as opposed to pushing down all tabs and content. notification boxes are a good guideline to what you should aim for: thin, informative and easy to dismiss. another option is to also add a hidden box to the overlay, but use css positioning to locate it where you want. this us...
... ...

Performance best practices in extensions - Archive of obsolete content
be done even a fraction of a second later, you can use an nsitimer or the window.settimeout() method to schedule that work for later. even a short delay can have a big impact. general performance tips avoid creating memory leaks memory leaks require the garbage collector and the cycle collector to work harder, which can significantly degrade performance. ...
...require the garbage collector and the cycle collector to work harder, which can significantly degrade performance. zombie compartments are a particular kind of memory leak that you can detect with minimal effort. see the zombie compartments page, especially the proactive checking of add-ons section. see common causes of memory leaks in extensions for ways to avoid zombie compartments and other kinds of leaks. as well as looking for these specific kinds of leaks, it's worth exercising your extension's functionality and checking the contents of about:memory for any excessive memory usage. for example, bug 719601 featured a "system principal" javascript compartment containing 100s of mbs of memory, which is much larger than usual. avoid writing slow css read the "writing efficient css" g...
...it's used. see examples. definelazyservicegetter() defines a function on a specified object which acts as a getter for a service. the service isn't obtained until the first time it's used. look through the source for examples. many common services are already cached for you in services.jsm. use asynchronous i/o this cannot be stressed enough: never do synchronous i/o on the main thread. any kind of i/o on the main thread, be it disk or network i/o, can cause serious ui responsiveness issues. never use synchronous xmlhttprequests. netutils.jsm provides helpers for asynchronous reading and copying of files. never access a sqlite database synchronously. use the asynchronous api instead. performing sequential, asynchronous operations can often be greatly simplified using promises. av...

Document Object Model - Archive of obsolete content
pers to refer to the dom-like functions before they were added to specifications. the actual document displayed in a window can be retrieved using the window's document property. since it is one of the most commonly referenced properties of the window, the document property is usually referenced without the 'window.' qualifier. mozilla provides several different document objects depending on the kind of document. the three main documents are htmldocument, xmldocument, and xuldocument, for html, xml and xul documents respectively. obviously, it is this latter type of document used for xul. the three document types are very similar, in fact they all share the same base implementation. however, there are a few functions that are specific to one document type or the other. retrieving elements t...
... broken) interface. a xul element is any element declared with the xul namespace. so, xul elements will have that interface even if added to other xml documents, and non-xul elements will not have that interface. the xulelement interface has a number of properties and methods specific to xul elements, many inherited from the generic dom element interface. a namespace is a uri which specifies the kind of element. here are some examples: <button xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"/> <button xmlns="http://www.w3.org/1999/xhtml"/> <html:button xmlns:html="http://www.w3.org/1999/xhtml"/> <html:button xmlns:html="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"/> namespaces are specified using the xmlns attribute. the first button is a xul eleme...
...mespace is meant. this causes an xhtml button to be created for this case. the fourth button is a little confusing, but might clarify that it is the uri that is important and not the prefix. the fourth example is a xul button, not an html button, despite what the prefix might say. this is an important distinction. in fact, the actual text used for the prefix is irrelevant when determining what kind of element is used. the dom provides a number of namespace related functions similar to the non-namespace ones. for example, the getattributens() function is similar to the the getattribute() function except an additional argument may be supplied to specify an attribute in a specific namespace. many xul elements have their own properties that are unique to that element. refer to the element ref...

Using the Right Markup to Invoke Plugins - Archive of obsolete content
4.01 specification, and is the recommended mechanism to invoke plugins. its use is subject to a few caveats that this section outlines. traditionally, the object element has been used differently by microsoft internet explorer and by mozilla-based browsers such as netscape 7. in ie, the object element is used to invoke a plugin that is built on the activex architecture. ...
...trol is not installed, ie will then go to the url referenced by the codebase attribute and retrieve the activex control. additional param elements (which are "children" of the above object element) specify configuration parameters for the flash plugin. for instance, the param name="movie" tells the flash plugin the location of the swf file to start playing. ...
...lugin the location of the swf file to start playing. with the release of netscape 7.1, this kind of activex use of the object element is supported for use with the microsoft® windows media player. only the windows media player is supported as an activex control in netscape 7.1. the details are covered in another article. browsers such as netscape 7 will not render the flash plugin if the above kind of markup is used, because netscape 7 does not support activex or activex-based component invocations, with the exception of windows media player in netscape 7.1. mozilla-based browsers support the netscape plugin architecture, which is not com based like activex (and thus, not invoked via a unique identifier) but rather, mime type based. mozilla-based browsers support the use of the object eleme...

Common causes of memory leaks in extensions - Extensions
all zombie compartments in extensions are caused by a failure to release resources appropriately in certain circumstances, such as when a window is closed, a page unloads, or an extension is disabled or removed. ...
...me. function leakref() {} function main(window) { // this is a potential leak, as the window (e.g. browser.xul) will hold on to // the leakref function and the enclosing compartment via the listener. window.addeventlistener("leaky", leakref, true); // the following line still fails to avoid the leak, as usecapture differs // and removeeventlistener will not remove anything. // this kind of subtle bug is very common. // unload(function() window.removeeventlistener("leaky", leakref, false), window); // this is the right way to do it remove the listener. unload(function() window.removeeventlistener("leaky", leakref, true), window); } note: the unload() function is an external function which can be added in your add-on to easily provide a way to undo changes upon unloading ...
...ow); // this is the right way to do it remove the listener. unload(function() window.removeeventlistener("leaky", leakref, true), window); } note: the unload() function is an external function which can be added in your add-on to easily provide a way to undo changes upon unloading of your add-on or a specific part/object. it is part of edward lee's restartless boilerplate. causes of other kinds of leaks other than javascript compartments, add-ons may also leak entities that do not get a dedicated compartment, most commonly chrome dom windows and javascript code modules. forgetting to unregister observers holding onto event observers for too long is another problem. observers that use strong references are a common cause of leaking whole chrome windows or javascript code modules; it...

Accessible multimedia - Learn web development
e panel. if you are creating your own user interface to present your audio and associated transcript, you can do it however you like, but it might make sense to include it in a showable/hideable panel; see our audio-transcript-ui example (also see the source code). audio descriptions on occasions where there are visuals accompanying your audio, you'll need to provide audio descriptions of some kind to describe that extra content. in many cases this will simply take the form of video, in which case you can implement captions using the techniques described in the next section of the article. however, there are some edge cases. you might for example have an audio recording of a meeting that refers to an accompanying resource such as a spreadsheet or chart. in such cases, you should make sure...
...ike this: webvtt 1 00:00:22.230 --> 00:00:24.606 this is the first subtitle. 2 00:00:30.739 --> 00:00:34.074 this is the second. ... to get this displayed along with the html media playback, you need to: save it as a .vtt file in a sensible place. link to the .vtt file with the <track> element. <track> should be placed within <audio> or <video>, but after all <source> elements. ...
... be placed within <audio> or <video>, but after all <source> elements. use the kind attribute to specify whether the cues are subtitles, captions, or descriptions. furthermore, use srclang to tell the browser what language you have written the subtitles in. here's an example: <video controls> <source src="example.mp4" type="video/mp4"> <source src="example.webm" type="video/webm"> <track kind="subtitles" src="subtitles_en.vtt" srclang="en"> </video> this will result in a video that has subtitles displayed, kind of like this: for more details, please read adding captions and subtitles to html5 video. you can find the example that goes along with this article on github, written by ian devlin (see the source code too.) this example uses some javascript to allow users to choose betwee...

What is accessibility? - Learn web development
ng your site more findable. caring about accessibility demonstrates good ethics and morals, which improves your public image. other good practices that improve accessibility also make your site more usable by other groups, such as mobile phone users or those on low network speed. in fact, everyone can benefit from many such improvements. did we mention it is also the law in some places? what kinds of disability are we looking at? people with disabilities are just as diverse as people without disabilities, and so are their disabilities. the key lesson here is to think beyond your own computer and how you use the web, and start learning about how others use it — you are not your users. the main types of disability to consider are explained below, along with any special tools they use to ...
...y physical issues (such as loss of limb or paralysis), or neurological/genetic disorders that lead to weakness or loss of control in limbs. some people might have difficulty making the exact hand movements required to use a mouse, while others might be more severely affected, perhaps being significantly paralyzed to the point where they need to use a head pointer to interact with computers. this kind of disability can also be a result of old age, rather than any specific trauma or condition, and it could also result from hardware limitations — some users might not have a mouse. the way this usually affects web development work is the requirement that controls be accessible by the keyboard — we'll discuss keyboard accessibility in later articles in the module, but it is a good idea to try...
... easy, but what about your multimedia content, and your whizzy 3d graphics? you should look at your project budget and think about what solutions you have available to make such content accessible. having all your multimedia content transcribed is one option which, while expensive, is possible. also, be realistic. "100% accessibility" is an unobtainable ideal — you will always come across some kind of edge case that results in a certain user finding certain content difficult to use — but you should do as much as you can. if you are planning to include a whizzy 3d pie chart graphic made using webgl, you might want to include a data table as an accessible alternative representation of the data. or, you might want to just include the table and get rid of the 3d pie chart — the table is acc...

Beginner's guide to media queries - Learn web development
(study css first steps and css building blocks.) objective: to understand how to use media queries, and the most common approach for using them to create responsive designs. media query basics the simplest media query syntax looks like this: @media media-type and (media-feature-rule) { /* css rules go here */ } it consists of: a media type, which tells the browser what kind of media this code is for (e.g. print, or screen). a media expression, which is a rule, or test that must be passed for the contained css to be applied. a set of css rules that will be applied if the test passes and the media type is correct. media types the possible types of media you can specify are: all print screen speech the following media query will only set the body to 12pt i...
...k as well when viewed on a phone or tablet in portrait mode. testing for orientation can help you to create a layout which is optimised for devices in portrait mode. use of pointing devices as part of the level 4 specification, the hover media feature was introduced. this feature means you can test if the user has the ability to hover over an element, which essentially means they are using some kind of pointing device; touchscreen and keyboard navigation does not hover. @media (hover: hover) { body { color: rebeccapurple; } } open this example in the browser, or view the source. if we know the user cannot hover, we could display some interactive features by default. for users who can hover, we might choose to make them available when a link is hovered over. also in level ...
... view the source. lets continue to expand the width until we feel there is enough room for the sidebar to also form a new column. inside a media query we'll make the main element into a two column grid. we then need to remove the margin-bottom on the article in order that the two sidebars align with each other, and we'll add a border to the top of the footer. typically these small tweaks are the kind of thing you will do to make the design look good at each breakpoint. again, add the below code into the bottom of your step1.html css. @media screen and (min-width: 70em) { main { display: grid; grid-template-columns: 3fr 1fr; column-gap: 20px; } article { margin-bottom: 0; } footer { border-top: 1px solid #ccc; margin-top: ...

Advanced form styling - Learn web development
that you don't have control over the box that appears containing the options when you click on the <select> box to open it. you'll notice that the options don't inherit the font set on the parent. you also can't consistently set things like spacing and colors. for example, firefox will apply color and background-color when set on the <option> elements, chrome won't. ...
...u also can't consistently set things like spacing and colors. for example, firefox will apply color and background-color when set on the <option> elements, chrome won't. neither of them will apply any kind of spacing (e.g. padding). the same is also true of the autocomplete list that appears for the datalist. if you really need full control over the option styling, you'll have to either use some kind of library to generate a custom control, or build your own custom control, or in the case of select use the multiple attribute, which makes all the options appear on the page, sidestepping this particular problem: <select id="select" name="select" multiple> ... </select> of course, this might also not fit in with the design you are going for, but it's worth noting! date input types the date...
... is as easy to style as any text input, and what we've got in this demo looks fine. however, the internal parts of the control (e.g. the popup calendar that you use pick a date, the spinner that you can use to increment/decrement values) are not stylable at all, and you can't get rid of them using appearence: none;. if you really need full control over the styling, you'll have to either use some kind of library to generate a custom control, or build your own. note: it is worth mentioning <input type="number"> here too — this also has a spinner that you can use to increment/decrement values, so potentially suffers from the same problem. however, in the case of the number type the data being collected is simpler, and it is easy to just use a text input type instead if desired (or tel if you...

Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
freshed, or whatever). then, you call it to start the process off. at the end of the function block you call requestanimationframe() with the function reference passed as the parameter, and this instructs the browser to call the function again on the next display repaint. this is then run continuously, as the code is calling requestanimationframe() recursively. note: if you want to perform some kind of simple constant dom animation, css animations are probably faster. they are calculated directly by the browser's internal code, rather than javascript. if, however, you are doing something more complex and involving objects that are not directly accessible inside the dom (such as 2d canvas api or webgl objects), requestanimationframe() is the better option in most cases. how fast does your ...
...n more recent browsers than setinterval()/settimeout(). interestingly, it is available in internet explorer 10 and above. so, unless you need to support older versions of ie, there is little reason to not use requestanimationframe(). a simple example enough with the theory! let's build your own personal requestanimationframe() example. ...
...of ie, there is little reason to not use requestanimationframe(). a simple example enough with the theory! let's build your own personal requestanimationframe() example. you're going to create a simple "spinner animation"—the kind you might see displayed in an app when it is busy connecting to the server, etc. note: in a real world example, you should probably use css animations to run this kind of simple animation. however, this kind of example is very useful to demonstrate requestanimationframe() usage, and you'd be more likely to use this kind of technique when doing something more complex such as updating the display of a game on each frame. grab a basic html template (such as this one). put an empty <div> element inside the <body>, then add a ↻ character inside it. th...

Introduction to events - Learn web development
ding of html and css, javascript first steps. objective: to understand the fundamental theory of events, how they work in browsers, and how events may differ in different programming environments. a series of fortunate events as mentioned above, events are actions or occurrences that happen in the system you are programming — the system produces (or "fires") a signal of some kind when an event occurs, and provides a mechanism by which an action can be automatically taken (that is, some code running) when the event occurs. for example, in an airport, when the runway is clear for take off, a signal is communicated to the pilot. as a result, the plane can safely takeoff. in the case of the web, events are fired inside the browser window, and tend to be attached to a speci...
...aining code that generates a random rgb color and sets the <body> background-color equal to it. this code is run whenever the click event fires on the <button> element, that is, whenever a user selects it. the example output is as follows: it's not just web pages another thing worth mentioning at this point is that events are not unique to javascript — most programming languages have some kind of event model, and the way the model works often differs from javascript's way. in fact, the event model in javascript for web pages differs from the event model for javascript as it is used in other environments. for example, node.js is a very popular javascript runtime that enables developers to use javascript to build network and server-side applications. the node.js event model relies on li...
...situation where you want to prevent an event from doing what it does by default. the most common example is that of a web form, for example, a custom registration form. when you fill in the details and select the submit button, the natural behavior is for the data to be submitted to a specified page on the server for processing, and the browser to be redirected to a "success message" page of some kind (or the same page, if another is not specified.) the trouble comes when the user has not submitted the data correctly — as a developer, you want to prevent the submission to the server and give an error message saying what's wrong and what needs to be done to put things right. some browsers support automatic form data validation features, but since many don't, you are advised to not rely on th...

Working with Svelte stores - Learn web development
ponents that are not hierarchically related, or by a regular javascript module. moreover, when your app becomes complicated and your component hierarchy gets complex, it might become too difficult for components to relay data between each other. in that case, moving to a global data store might be a good option. if you’ve already worked with redux or vuex, then you'll be familiar with how this kind of store works. svelte stores offer similar features for state management. a store is simply an object with a subscribe() method that allows interested parties to be notified whenever the store value changes, and an optional set() method that allows you to set new values for the store. this minimal api is known as the store contract. svelte provides functions for creating readable, writable, an...
...ble, writable, and derived stores in the svelte/store module. svelte also provides a very intuitive way to integrate stores into its reactivity system using the reactive $store syntax. if you create your own stores honoring the store contract, you get this reactivity syntactic sugar for free. creating the alert component to show how to work with stores, we will create an alert component. these kind of widgets might also be known as popup notifications, toast, or notification bubbles. our alert component will displayed by the app component, but any component can send notifications to it; whenever a notification arrives the alert component will be in charge of displaying it on screen. creating a store let's start by creating a writable store. any component will be able to write to this sto...
...t deleting the $todos array and the console.log() statements: <script> import todos from './components/todos.svelte' import alert from './components/alert.svelte' import { todos } from './stores.js' </script> <alert /> <todos bind:todos={$todos} /> note: this is the only change we have to make in order to use our custom store. app.svelte is completely transparent in terms of what kind of store we are using. go ahead and try your app again. create a few todos and then close the browser. you may even stop the svelte server and restart it. upon revisiting the url, your todos will still be there. you can also inspect it in the devtools console. in the web console, enter the command localstorage.getitem('mdn-svelte-todo'). make some changes to your app, like pressing...

Handling common accessibility problems - Learn web development
to navigate within pages". next, you have to open your mac's system preferences app, then go to keyboard > shortcuts, then select the all controls radio button. safari doesn't allow you to tab through links by default; to enable this, you need to open safari's preferences, go to advanced, and check the press tab to highlight each item on a webpage checkbox. important: you should perform this kind of test on any new page you write — make sure the functionality can be accessed by the keyboard. this example highlights the importance of using the correct semantic element for the correct job. it is possible to style any element to look like a link or button with css, and to behave like a link or button with javascript, but they won't actually be links or buttons, and you'll lose a lot of t...
...een readers from getting to it. on the other hand, you shouldn't use visibility:hidden or display:none, because they do hide content from screenreaders. unless of course, there is a good reason why you want this content to be hidden from screenreaders. note: invisible content just for screen reader users has a lot more useful detail surrounding this topic. javascript javascript has the same kind of problems as css with respect to accessibility — it can be disastrous for accessibility if used badly, or overused. we've already hinted at some accessibility problems related to javascript, mainly in the area of semantic html — you should always use appropriate semantic html to implement functionality wherever it is available, for example use links and buttons as appropriate. don't use <di...
...olve complicated form controls (such as date pickers) and dynamic content that is updated often and incrementally. non-native complicated form controls are problematic because they tend to involve a lot of nested <div>s, and the browser does not know what to do with them by default. if you are inventing them yourself, you need to make sure that they are keyboard accessible; if you are using some kind of third-party framework, carefully review the options available to see how accessible they are before diving in. bootstrap looks to be fairly good for accessibility, for example, although making bootstrap a little more accessible by rhiana heath explores some of its issues (mainly related to color contrast), and looks at some solutions. regularly updated dynamic content can be a problem because...

Displaying Places information using views
ryresult instance and examining the view's selection. second, know this: when it comes to trees, "view" is an overloaded word. this document describes places views. places views are just xul elements; the built-in places tree view is just a tree element whose type attribute is equal to "places", as described above. but recall that all trees—places view or not—display their data using another kind of view, nsitreeview. the built-in places tree view therefore has a view of its own, the built-in places tree view's view. this view is an object that implements three interfaces: from most specific to most general, nsinavhistoryresulttreeviewer, nsinavhistoryresultobserver , and nsitreeview. nsinavhistoryresulttreeviewer maps between row indices and the nsinavhistoryresultnode objects contained ...
...t to hide. managing how the view responds to clicks, commands, and other user interaction. don't break the separation of concerns here. views are for displaying data, controllers for logic. you can hook up a built-in view to the standard places commands and context menu, or you can create a custom controller to handle custom commands. see view controller for more information. regardless of the kind of view you are writing, it should implement interface nsiplacesview. (nsiplacesview is currently not a true interface; the built-in views simply implement its methods and attributes directly.) as described above in using a view, this interface provides controllers and other callers a consistent, general way to interact with views. your view should also either implement or own an instance of nsi...
...h placestreeview, we'll recognize // them by their id's or anonid's. switch (acol.id || acol.element.getattribute("anonid")) { // uri for all nodes (like folders), not just uri nodes (like bookmarks) case "fulluri": return this.nodefortreeindex(arowindex).uri; break; // index of node in parent container case "indexinparent": return this.nodefortreeindex(arowindex).bookmarkindex; break; // is the row even or odd? case "parity": return (arowindex % 2 === 0 ? "even" : "odd"); break; } // otherwise, pass off to the original getcelltext method. return this._getcelltext(arowindex, acol); }; view._cycleheader = view.cycleheader; view.cycleheader = function (acol) { switch (acol.id || acol.element.getattribute("anonid")) { case "fulluri": case "...

Power profiling overview
system agent. it includes various components including the l3 cache, memory controller, and, for processors that have one, the integrated gpu. ram is separate from the processor. c-states intel processors have aggressive power-saving features. the first is the ability to switch frequently (thousands of times per second) between active and idle states, and there are actually several different kinds of idle states. these different states are called c-states. c0 is the active/busy state, where instructions are being executed. the other states have higher numbers and reflect increasing deeper idle states. the deeper an idle state is, the less power it uses, but the longer it takes to wake up from. note: the acpi standard specifies four states, c0, c1, c2 and c3. intel maps these to processo...
...netheless common. intel processors have model-specific registers (msrs) containing measurements of how much time is spent in different c-states, and tools such as powermetrics (mac), powertop and turbostat (linux) can expose this information. a wakeup occurs when a core or package transitions from an idle state to the active state. this happens when the os schedules a process to run due to some kind of event. common causes of wakeups include scheduled timers going off and blocked i/o system calls receiving data. maintaining c-state residency is crucial to keep power consumption low, and so reducing wakeup frequency is one of the best ways to reduce power consumption. one consequence of the existence of c-states is that observations made during power profiling — even more than with other k...
... where the processor is operating at maximum frequency and voltage, and higher-numbered p-states operate at a lower frequency and voltage to reduce power consumption. processors can have dozens of p-states, but the transitions are controlled by the hardware and os and so p-states are of less interest to application developers than c-states. power and power-related measurements there are several kinds of power and power-related measurements. some are global (whole-system) and some are per-process. the following sections list them from best to worst. power measurements the best measurements are measured in joules and/or watts, and are taken by measuring the actual hardware in some fashion. these are global (whole-system) measurements that are affected by running programs but also by other th...

Index
email and some instant messaging implementations, a dbm library that implements the classic database storage, and finally a core nss library for the big set of “everything else”. newer generations of the database use the sqlite database to allow concurrent access by multiple applications. all of the above are provided as shared libraries. the crmf library, which is used to produce certain kinds of certificate requests, is available as a library for static linking only. when dealing with certificates (x.509), file formats such as pkcs#12 (certificates and keys), pkcs#7 (signed data), and message formats as cms, we should mention asn.1, which is a syntax for storing structured data in a very efficient (small sized) presentation. it was originally developed for telecommunication system...
...important operations: * confirm the identity of the individual, company, or other entity whose digital signature is associated with the files * check whether the files have been tampered with since being signed if you have a signing certificate, you can use netscape signing tool to digitally sign files and package them as a jar file. an object-signing certificate is a special kind of certificate that allows you to associate your digital signature with one or more files. an individual file can potentially be signed with multiple digital signatures. for example, a commercial software developer might sign the files that constitute a software product to prove that the files are indeed from a particular company. a network administrator manager might sign the ...
...u must have an object-signing certificate, which is a special certificate whose associated private key is used to create digital signatures. for testing purposes only, you can create an object-signing certificate with netscape signing tool 1.3. when testing is finished and you are ready to disitribute your software, you should obtain an object-signing certificate from one of two kinds of sources: * an independent certificate authority (ca) that authenticates your identity and charges you a fee. you typically get a certificate from an independent ca if you want to sign software that will be distributed over the internet. * ca server software running on your corporate intranet or extranet. netscape certificate management system provides a complete management...

Hacking Tips
n %s", iter->opname()); […] masm.store16(imm32(iter->id()), address(stackpointer, -8)); // added if (!iter->accept(this)) return false; […] } this modification will add an instruction which abuse the stack pointer to store an immediate value (the lir id) to a location which would never be generated by any sane compiler. thus when dumping the assembly under gdb, this kind of instructions would be easily noticeable. viewing the mirgraph of ion/odin compilations (from gdb) with gdb instrumentation, we can call iongraph program within gdb when the execution is stopped. this instrumentation adds an iongraph command when provided with an instance of a mirgenerator*, will call iongraph, graphviz and your prefered png viewer to display the mir graph at the precise tim...
...ction to dump out all gc things (reachable and unreachable) that are present in the heap. by default the function writes to stdout, but a filename can be specified as an argument. example output might look as follows: 0x1234abcd b global object ========== # zone 0x56789123 # compartment http://gmail.com [in zone 0x56789123] # compartment http://gmail.com/iframe [in zone 0x56789123] # arena allockind=3 size=64 0x1234abcd b object > 0x1234abcd b prop1 > 0xabcd1234 w prop2 0xabcd1234 w object > 0xdeadbeef b prop3 # arena allockind=5 size=72 0xdeadbeef w object > 0xabcd1234 w prop4 the output is textual. the first section of the file contains a list of roots, one per line. each root has the form "0xabcd1234 <color> <description>", where <color> is the color of the given gc thing (b for black, ...
...zones. a zone starts with several "comment lines" that start with hashes. the first comment declares the zone. it is followed by lines listing each compartment within the zone. after all the compartments come arenas, which is where the gc things are actually stored. each arena is followed by all the gc things in the arena. a gc thing starts with a line giving its address, its color, and the thing kind (object, function, whatever). after this come a list of addresses that the gc thing points to, each one starting with ">". it's also possible to dump the javascript heap from c++ code (or from gdb) using the js::dumpheap function. it is part of jsfriendapi.h and it is available in release builds. inspecting mir objects within a debugger for mirgraph, mbasicblock, and mdefinition and its subcla...

JSAPI User Guide
other components, not the spidermonkey engine itself. spidermonkey provides a few core javascript data types—numbers, strings, arrays, objects, and so on—and a few methods, such as array.push. it also makes it easy for each application to expose some of its own objects and functions to javascript code. browsers expose dom objects. your application will expose objects that are relevant for the kind of scripts you want to write. it is up to the application developer to decide what objects and methods are exposed to scripts. hello world using the spidermonkey library to build spidermonkey from source, see spidermonkey build documentation. some systems (such as debian) provide spidermonkey as a prebuilt package. build it from source instead. your program will be easier to debug. c++ code ...
...result; if (!js_executescript(cx, js_getglobalobject(cx), script, &result)) break; js_maybegc(cx); } js_removeobjectroot(cx, &scriptobj); /* scriptobj becomes unreachable and will eventually be collected. */ return false; } security many applications use spidermonkey to run untrusted code. in designing this kind of application, it's important to think through the security concerns ahead of time. your application will need to do several things. deploy security updates - firefox automatically installs updates, so security fixes are deployed as soon as they are available. unless you also regularly deploy spidermonkey security updates, a determined hacker could use publicly known bugs in the engine to att...
...hink through the security concerns ahead of time. your application will need to do several things. deploy security updates - firefox automatically installs updates, so security fixes are deployed as soon as they are available. unless you also regularly deploy spidermonkey security updates, a determined hacker could use publicly known bugs in the engine to attack your application. note that the kind of attack we're talking about here is where a hacker uses javascript to attack the c++ code of the engine itself (or your embedding). the rest of the items in this list talk about security issues that arise within javascript itself, even if the engine is working properly. block simple denial-of-service attacks - a program like while(true){} should not hang your application. to stop execution of ...

An Overview of XPCOM
properly, the client programmer must pay close attention to whatever rules the component programmer has established. this is the contractual agreement of this unencapsulated class: a set of rules that define when each method can be called and what it is expected to do. one rule might specify that dosomethinguseful may only be called after a call to init(). the dosomethinguseful method may do some kind of checking to ensure that the condition - that init has been called - has been satisfied. in addition to writing well-commented code that tells the client developer the rules about init(), the developer can take a couple steps to make this contract even clearer. first, the construction of an object can be encapsulated, and a virtual class provided that defines the dosomethinguseful method. in t...
...ts of factories together and determine if they can be unloaded. another benefit of using the nsisupports interface is that you can support other interfaces as they are introduced. as we'll show when we discuss nsiclassinfo, some factories support querying information about the underlying implementation, such as what language the object is written in, interfaces that the object supports, etc. this kind of "future-proofing" is a key advantage that comes along with deriving from nsisupports. xpidl and type libraries an easy and powerful way to define an interface - indeed, a requirement for defining interfaces in a cross-platform, language neutral development environment - is to use an interface definition language (idl). xpcom uses its own variant of the corba omg interface definition language...
...rface in xpidl describes the xpidl syntax in detail. xpcom services when clients use components, they typically instantiate a new object each time they need the functionality the component provides. this is the case when, for example, clients deal with files: each separate file is represented by a different object, and several file objects may be being used at any one time. but there is also a kind of object known as a service, of which there is always only one copy (though there may be many services running at any one time). each time a client wants to access the functionality provided by a service, they talk to the same instance of that service. when a user looks up a phone number in a company database, for example, probably that database is being represented by an "object" that is the sa...

Using XPCOM Utilities to Make Things Easier
ories. generic xpcom module macros the work in the previous chapter was useful in setting up the generic component code. but there are only a few places in that code that are unique to the weblock component, and it was a lot of typing. to write a different component library, you could copy the listing at the end of the chapter, change very little, and paste it into a new project. to avoid these kinds of redundancies, to regulate the way generic code is written, and to save typing, xpcom providesgeneric module macros that expand into the module code you've already seen. since these macros expand into "generic" implementations, they may not offer as much flexibility as you have when you are writing your own implementation. but they have the advantage of allowing much more rapid development. t...
...ng mrefcnt ns_init_isupports initializes mrefcnt to zero. must be called in class's constructor ns_get_iid returns the iid given the name of an interface. interface must be generated by xpidl using the macros described here, the code for the weblock component has gone from around 340 lines of code to just under 40. clearly from a code maintenance point of view, this kind of reduction is outstanding. the entire source file with these macros included appears in weblock2.cpp. weblock2.cpp the listing below shows the generic module code from weblock1.cpp using the macros described in this chapter: weblock2.cpp #include "nsigenericfactory.h" #include "nsisupportsutils.h" #define sample_cid \ { 0x777f7150, 0x4a2b, 0x4301, \ { 0xad, 0x10, 0x5e, 0xab, 0x25, 0xb3, 0x...
...{ "pretty class name", sample_cid, "@company.com/sample", sampleconstructor } }; ns_impl_nsgetmodule(nssamplemodule, components) string classes in xpcom strings are usually thought of as linear sequences of characters. in c++, the string literal "xpcom", for example, consists of 6 consecutive bytes, where `x' is at byte offset zero and a null character is at byte offset 5. other kinds of strings like "wide" strings use two bytes to represent each character, and are often used to deal with unicode strings. the string classes in xpcom are not just limited to representing a null terminated sequence of characters, however. they are fairly complex because they support the gecko layout engine and other subsystems that manage large chunks of data. additionally, in some versions of ...

Index
that implements iaccessibletext. startindex() and endindex() are indices with respect to the text exposed by iaccessibletext. this interface provides access to a single object which can have multiple actions. an example is an image map which is an image with multiple links each of which is associated with a separate non-overlapping area of the image. this interface could also be applied to other kinds of objects with multiple actions such as "smart tags" which are objects, typically strings, which have multiple actions such as "activate uri", "bookmark uri", end so on. an interesting use case is an image map where each area is associated with multiple actions, for example an image map of smart tags. in this case you would have to implement two levels of accessible hyperlinks. the first level ...
...the relation type. 170 iaccessibletable interfaces, xpcom, xpcom interface reference typically all accessible objects that represent cells or cell-clusters of a table will be at the same time children of the table. in this case iaccessible2.indexinparent() will return the child index which then can be used when calling rowindex() and columnindex(). however, in some cases that kind of implementation will not be possible. when the table cells are not direct children of a table, the object representing the cell can define a "table-cell-index" object attribute identifying the 0 based table cell index. this object attribute is obtained by parsing the attribute string returned by iaccessible2.attributes(). the "table-cell-index" attribute can be used just like a child index of t...
...com, xpcom api reference, xpcom interface reference returns a reference to the object at the given index. 296 nsiaccessiblehypertext accessibility, interfaces, interfaces:scriptable, xpcom, xpcom api reference, xpcom interface reference retrieves the nsiaccessiblehyperlink object at the given link index. 297 getlink no summary! 298 getlinkindex no summary! 299 linkcount no summary! 300 nsiaccessibleimage interfaces, interfaces:scriptable, xpcom, xpcom interface reference returns the coordinates of the image accessible. 301 getimageposition this content is now available at nsiaccessibleimage.getimageposition(). 302 getimagesize this conten...

IAccessibleHypertext
ssiblehypertext interface is the main interface to expose hyperlinks in a document, typically a text document, that are used to reference other documents. a typical implementation is to implement this interface on the smallest text object such as a paragraph of text. method overview [propget] hresult hyperlink([in] long index, [out] iaccessiblehyperlink hyperlink ); [propget] hresult hyperlinkindex([in] long charindex, [out] long hyperlinkindex ); [propget] hresult nhyperlinks([out] long hyperlinkcount ); methods hyperlink() returns the specified link. the returned iaccessiblehyperlink object encapsulates the hyperlink and provides several kinds of information describing it. [propget] hresult hyperlink( [in] long index, [out] iaccessiblehyperlink hyperlink ); parameters index t...
...ink hyperlink ); parameters index this 0 based index specifies the hyperlink to return. hyperlink if the given index is valid, that is it lies in the interval from 0 to the number of links minus one, a reference to the specified hyperlink object is returned. if the index is invalid then a null pointer is returned. return value e_invalidarg if bad [in] passed, [out] value is null. s_ok. hyperlinkindex() returns the index of the hyperlink that is associated with this character index. this is the case when a link spans the given character index. [propget] hresult hyperlinkindex( [in] long charindex, [out] long hyperlinkindex ); parameters charindex a 0 based index of the character for which to return the link index. if iaccessibletext is used to represent the text containing the link, th...
... return value e_invalidarg if bad [in] passed, [out] value is null. s_false if there is nothing to return, [out] value is -1. s_ok. nhyperlinks() returns the number of links and link groups contained within this hypertext paragraph. ...

XUL Overlays
xul files and xul overlays overlays are xul files used to describe extra content in the ui. though overlays often define ui elements that have been added as a result of an update or enhancement of some kind, they can be used in many different ways. overlays provide a general mechanism for: adding ui for additional components, as described in the example above overriding small pieces of a xul file without having to resupply the whole ui reusing particular pieces of the ui xul files and overlays work together to describe a single master document. ...
...when plug-ins, browser extensions, or other applications provide new ui elements to the browser, these elements should be defined in overlay files. ...
...ide a general mechanism for: adding ui for additional components, as described in the example above overriding small pieces of a xul file without having to resupply the whole ui reusing particular pieces of the ui xul files and overlays work together to describe a single master document. though there is no formal restriction on what kind of xul content is located in "base" xul files and what kind should be put in overlays, xul overlays generally define items that are not present in the basic versions of the ui, such as additional components. when plug-ins, browser extensions, or other applications provide new ui elements to the browser, these elements should be defined in overlay files. the installation of a media plug-in, for example, may add new icons and menu items to the interface: i...

AudioTrack.label - Web APIs
the read-only audiotrack property label returns a string specifying the audio track's human-readable label, if one is available; otherwise, it returns an empty string. syntax var audiotracklabel = audiotrack.label; value a domstring specifying the track's human-readable label, if one is available in the track metadata. otherwise, an empty string ("") is returned. for example, a track whose kind is "commentary" might have a label such as "commentary with director mark markmarkimark and star donna donnalidon". example this example returns an array of track kinds and labels for potential use in a user interface to select audio tracks for a specified media element. the list is filtered to only allow certain track kinds through. function gettracklist(el) { var tracklist = []; const wan...
..."commentary" might have a label such as "commentary with director mark markmarkimark and star donna donnalidon". example this example returns an array of track kinds and labels for potential use in a user interface to select audio tracks for a specified media element. the list is filtered to only allow certain track kinds through. ...
...ns an array of track kinds and labels for potential use in a user interface to select audio tracks for a specified media element. the list is filtered to only allow certain track kinds through. function gettracklist(el) { var tracklist = []; const wantedkinds = [ "main", "alternative", "main-desc", "translation", "commentary" ]; el.audiotracks.foreach(function(track) { if (wantedkinds.includes(track.kind)) { tracklist.push({ id: track.id, kind: track.kind, label: track.label }); } }); return tracklist; } the resulting tracklist contains an array of audio tracks whose kind is one of those in the array wantedkinds, with each entry providing the track's id, kind, and label. specifications specification status comment ...

AudioTrack.language - Web APIs
is not specified or known, or if the track doesn't contain speech. for example, if the primary language used in the track is united states english, this value would be "en-us". for brazilian portuguese, the value would be "pt-br". ...
...his example locates all of a media element's primary language and translated audio tracks and returns a list of objects containing each of those tracks' id, kind, and language. this could then be used to build a user interface for selecting the language the user would like to listen to while watching a movie, for example. ...
...ns a list of objects containing each of those tracks' id, kind, and language. this could then be used to build a user interface for selecting the language the user would like to listen to while watching a movie, for example. function getavailablelanguages(el) { var tracklist = []; const wantedkinds = [ "main", "translation" ]; el.audiotracks.foreach(function(track) { if (wantedkinds.includes(track.kind)) { tracklist.push({ id: track.id, kind: track.kind, language: track.language }); } }); return tracklist; } specifications specification status comment html living standardthe definition of 'audiotrack.language' in that specification. living standard html5the definition of 'audiotrack.l...

DataTransfer.items - Web APIs
// get the id of the target and add the moved element to the target's dom var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); // print each format type if (ev.datatransfer.types != null) { for (var i=0; i < ev.datatransfer.types.length; i++) { console.log("... ...
...etelementbyid(data)); // print each format type if (ev.datatransfer.types != null) { for (var i=0; i < ev.datatransfer.types.length; i++) { console.log("... types[" + i + "] = " + ev.datatransfer.types[i]); } } // print each item's "kind" and "type" if (ev.datatransfer.items != null) { for (var i=0; i < ev.datatransfer.items.length; i++) { console.log("... ...
... format type if (ev.datatransfer.types != null) { for (var i=0; i < ev.datatransfer.types.length; i++) { console.log("... types[" + i + "] = " + ev.datatransfer.types[i]); } } // print each item's "kind" and "type" if (ev.datatransfer.items != null) { for (var i=0; i < ev.datatransfer.items.length; i++) { console.log("... ...

DataTransfer.types - Web APIs
// get the id of the target and add the moved element to the target's dom var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); // print each format type if (ev.datatransfer.types != null) { for (var i=0; i < ev.datatransfer.types.length; i++) { console.log("... ...
...etelementbyid(data)); // print each format type if (ev.datatransfer.types != null) { for (var i=0; i < ev.datatransfer.types.length; i++) { console.log("... types[" + i + "] = " + ev.datatransfer.types[i]); } } // print each item's "kind" and "type" if (ev.datatransfer.items != null) { for (var i=0; i < ev.datatransfer.items.length; i++) { console.log("... ...
... format type if (ev.datatransfer.types != null) { for (var i=0; i < ev.datatransfer.types.length; i++) { console.log("... types[" + i + "] = " + ev.datatransfer.types[i]); } } // print each item's "kind" and "type" if (ev.datatransfer.items != null) { for (var i=0; i < ev.datatransfer.items.length; i++) { console.log("... ...

DataTransferItem.getAsFile() - Web APIs
sfile(); parameters none. return value file if the drag data item is a file, a file object is returned; otherwise null is returned. example this example shows the use of the getasfile() method in a drop event handler. ...
...ction drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = event.datatransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html console.log("... ...
...[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html console.log("... drop: html"); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/uri-list'))) { // drag data item is uri console.log("... drop: uri"); } else if ((data[i].kind == 'file') && (data[i].type.match('^image/'))) { // drag data item is an image file var f = data[i].getasfile(); console.log("... drop: file "); } } } specifications specification status...

DataTransferItem.type - Web APIs
a mime type is not required. some example types are: text/plain and text/html. syntax dataitem.type; return value a domstring representing the drag data item's type. example this example shows the use of the type property. ...
...function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html console.log("... ...
...[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html console.log("... drop: html"); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/uri-list'))) { // drag data item is uri console.log("... drop: uri"); } else if ((data[i].kind == 'file') && (data[i].type.match('^image/'))) { // drag data item is an image file var f = data[i].getasfile(); console.log("... drop: file "); } } } specifications specification status...

DataTransferItemList.add() - Web APIs
text/html and text/plain. file a file object. no type needs to be given in this case. return value a datatransferitem containing the specified data. if the drag item couldn't be created (for example, if the associated datatransfer object has no data store), null is returned. exceptions notsupportederror a string data parameter was provided, and the list already contains an item whose kind is "plain unicode string" and whose type is equal to the specified type parameter. example this example shows the use of the add() method. html <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop=...
...plain"); // add some other items to the drag payload datalist.add("<p>... paragraph ...</p>", "text/html"); datalist.add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = event.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html data[i].getasstring(function (s){ console.log("... drop: html = " + ...
...^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html data[i].getasstring(function (s){ console.log("... drop: html = " + s); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/uri-list'))) { // drag data item is uri data[i].getasstring(function (s){ console.log("... drop: uri = " + s); }); } } } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } function dragend_handler(ev) { console.log("d...

Introduction to the DOM - Web APIs
data type (interface) description document when a member returns an object of type document (e.g., the ownerdocument property of an element returns the document to which it belongs), this object is the root document object itself. the dom document reference chapter describes the document object. node every object located within a document is a node of some kind. in an html document, an object can be an element node but also a text node or attribute node. element the element type is based on node. it refers to an element or a node of type element returned by a member of the dom api. rather than saying, for example, that the document.createelement() method returns an object reference to a node, we just say that this method returns the element ...
...node, we just say that this method returns the element that has just been created in the dom. element objects implement the dom element interface and also the more basic node interface, both of which are included together in this reference. in an html document, elements are further enhanced by the html dom api's htmlelement interface as well as other interfaces describing capabilities of specific kinds of elements (for instance, htmltableelement for <table> elements). nodelist a nodelist is an array of elements, like the kind that is returned by the method document.getelementsbytagname(). items in a nodelist are accessed by index in either of two ways: list.item(1) list[1] these two are equivalent. in the first, item() is the single method on the nodelist ob...
...y use most often in dom programming. in simple terms, the window object represents something like the browser, and the document object is the root of the document itself. element inherits from the generic node interface, and together these two interfaces provide many of the methods and properties you use on individual elements. these elements may also have specific interfaces for dealing with the kind of data those elements hold, as in the table object example in the previous section. the following is a brief list of common apis in web and xml page scripting using the dom. document.getelementbyid(id) document.getelementsbytagname(name) document.createelement(name) parentnode.appendchild(node) element.innerhtml element.style.left element.setattribute() element.getattribute() element...

MediaStream.onaddtrack - Web APIs
this event is fired when the browser adds a track to the stream (such as when a rtcpeerconnection is renegotiated or a stream being captured using htmlmediaelement.capturestream() gets a new set of tracks because the media element being captured loaded a new source. the addtrack event does not get fired when javascript code explicitly adds tracks to the stream (by calling addtrack()). ...
... to a function which you provide that accepts as input a mediastreamtrackevent object representing the addtrack event which has occurred. the mediastreamtrack representing the track which was added is specified in the event's track property. ...
...fied in the event's track property. example this example adds a listener which, when a new track is added to the stream, appends a new item to a list of tracks; the new item shows the track's kind ("audio" or "video") and label. stream.onaddtrack = function(event) { let tracklist = document.getelementbyid("tracks"); let label = document.createelement("li"); label.innerhtml = event.track.kind + ": " + event.track.label; tracklist.appendchild(label); }; specifications specification status comment media capture and streamsthe definition of 'mediastream.onaddtrack' in that specification. candidate recommendation initial specification. ...

RTCRtpReceiver.getCapabilities() static function - Web APIs
the static function rtcrtpreceiver.getcapabilities() returns an rtcrtpcapabilities object describing the codecs and capabilities supported by rtcrtpreceivers on the current device. you can, similarly, obtain the capabilities of rtcrtpsenders by calling the static function rtcrtpsender.getcapabilities(). ...
... the static function rtcrtpreceiver.getcapabilities() returns an rtcrtpcapabilities object describing the codecs and capabilities supported by rtcrtpreceivers on the current device. you can, similarly, obtain the capabilities of rtcrtpsenders by calling the static function rtcrtpsender.getcapabilities(). ...
... by rtcrtpreceivers on the current device. you can, similarly, obtain the capabilities of rtcrtpsenders by calling the static function rtcrtpsender.getcapabilities(). syntax let rtpcapabilities = rtcrtpreceiver.getcapabilities(kind); parameters kind a domstring indicating the type of media for which you wish to get the device's capability to receive. all browsers support the primary media kinds: audio and video. return value an rtcrtpcapabilities object stating what capabilities the browser has for receiving the specified media kind over an rtcpeerconnection. if the browser doesn't have any support for the given media kind, the returned value is null. description as a static function, this is always called using the form: capabilities = rtcrtpreceiver.getcapabilities("audio"); t...

ServiceWorker.state - Web APIs
ant. syntax someurl = serviceworker.state value a serviceworkerstate definition (see the spec.) examples this code snippet is from the service worker registration-events sample (live demo). the code listens for any change in the serviceworker.state and returns its value. ...
... the service worker registration-events sample (live demo). the code listens for any change in the serviceworker.state and returns its value. ...
...ts value. var serviceworker; if (registration.installing) { serviceworker = registration.installing; document.queryselector('#kind').textcontent = 'installing'; } else if (registration.waiting) { serviceworker = registration.waiting; document.queryselector('#kind').textcontent = 'waiting'; } else if (registration.active) { serviceworker = registration.active; document.queryselector('#kind').textcontent = 'active'; } if (serviceworker) { logstate(serviceworker.state); serviceworker.addeventlistener('statechange', function(e) { logstate(e.target.state); }); } specifications specification status comment service workersthe definition of 'state' in that specification. working draft initial definition ...

TrackDefault.TrackDefault() - Web APIs
the trackdefault() constructor of the trackdefault interface constructs and returns a new trackdefault object. syntax var trackdefault = new trackdefault(type, language, label, kinds, bytestreamtrackid); parameters type a domstring specifying a media segment data type for the sourcebuffer to contain. can be audio, video, or text. language a domstring specifying a default language for the sourcebuffer to use when an initialization segment does not contain language information for a new track. ...
... data type for the sourcebuffer to contain. can be audio, video, or text. language a domstring specifying a default language for the sourcebuffer to use when an initialization segment does not contain language information for a new track. label a domstring specifying a default label for the sourcebuffer to use when an initialization segment does not contain label information for a new track. kinds an array (sequence) of domstrings specifying default kinds for the sourcebuffer to use when an initialization segment does not contain kind information for a new track. bytestreamtrackid optional a domstring specifying the id of the specific track that the sourcebuffer should apply to. if not specified, this value will be an empty string and the sourcebuffer can contain any tracks of the spec...
... should apply to. if not specified, this value will be an empty string and the sourcebuffer can contain any tracks of the specified type. errors when this constructor is invoked, the following errors can occur: error explanation invalidaccesserror the supplied language is not a valid language code, e.g. en-us. typeerror there are values specified in the kinds array that do not apply to the specified type. example tbd ...

WebGL2RenderingContext.getActiveUniformBlockParameter() - Web APIs
pname a glenum specifying which information to query. ...
... pname a glenum specifying which information to query. ...
...eferenced by the vertex shader. gl.uniform_block_referenced_by_fragment_shader: returns a glboolean indicating whether the uniform block is referenced by the fragment shader. return value depends on which information is requested using the pname parameter. if an error occurs, null is returned. examples var blocksize = gl.getactiveuniformblockparameter(program, blockindex, gl.uniform_block_data_size); specifications specification status comment webgl 2.0the definition of 'getactiveuniformblockparameter' in that specification. editor's draft initial definition for webgl. opengl es 3.0the definition of 'glgetactiveuniformblockiv' in that specification. standard man page of the (similar) opengl api. ...

Fundamentals of WebXR - Web APIs
f freedom are: pitch: looking up and down yaw: looking left and right roll: tilting left and right in all of these cases, the viewer remains in the same location in space while pivoting on one or more of the three axes to alter the direction in which they're looking. a system with two degrees of freedom can sense when the user looks left and right or up and down, but can't report any other kind of movement. a typical baseline headset offers three degrees of freedom, recognizing rotation around all three axes. this is often referred to by the shorthand 3dof. freedom of translational movement the other three degrees of freedom are translational, providing the ability to sense movement through space: forward and backward, left and right, up and down. support for all six degrees of freed...
...t through the space, external sensors are usually required, such as cameras (either using visible light or infrared). webxr session modes webxr offers support for both augmented reality (ar) and virtual reality (vr) sessions, using the same api. which type of session you want to create is specified when creating the session. this is done by specifying the appropriate session mode string for the kind of session you want to create. virtual reality in a vr environment, the entire image is digitally created by your app or site, from foreground objects all the way to the background or skybox. your frame drawing code will have to redraw every pixel of each view during each frame in order to avoid the potential of artifacts being left behind. some platforms may provide previously-cleared frames t...
..., render images, and display them to the user. higher-powered solutions typically offload application execution and graphics processing to an external device such as a desktop computer, and are either tethered to the computer using a cable or use a wireless network to receive the imagery to display to the user. headsets most immersive vr experiences take place using goggles or a headset of some kind. a vr headset is worn on the head, with a strap that goes behind the head to fasten it in place, and one or two displays whose screens are focused into the eyes using lenses. by presenting a slightly different image to each eye, the illusion of depth is created, giving the user a simulated 3d experience. the vast majority of headsets use a single display whose frame is divided in half, with one ...

ARIA annotations - Accessibility
two above — aria-describedby is for textual descriptions, whereas aria-details is for more complex sets of details. but what does this actually mean? aria-describedby is appropriate for associating an element with a simple text description, where you don’t have much in the way of meaningful semantics contained within. ...
...eas aria-details is for more complex sets of details. but what does this actually mean? aria-describedby is appropriate for associating an element with a simple text description, where you don’t have much in the way of meaningful semantics contained within. ...
...<div aria-describedby="description-id"> <!-- some kind of ui feature that needs an accessible description --> </div> aria-details is appropriate when linking to descriptions or annotations that are a bit more complex — rather than a simple text string, it might contain multiple bits of semantic information: <div id="detail-id"> <h2>a heading</h2> <p>an extended text description of some kind…</p> <p><time datetime="...">a timestamp</time></p> </div> <div aria-details="detail-id"> <!-- some kind of ui feature that needs an accessible description --> </div> this difference really becomes apparent when you get to how the content is actually interpreted in the accessibility layer, and read out by screenreaders. content marked up with aria-describedby is flattened into a simple s...

<image> - CSS: Cascading Style Sheets
denoted by the <url> data type a <gradient> data type a part of the webpage, defined by the element() function an image, image fragment or solid patch of color, defined by the image() function a blending of two or more images defined by the cross-fade() function. a selection of images chosed based on resolution defined by the image-set() function. description css can handle the following kinds of images: images with intrinsic dimensions (a natural size), like a jpeg, png, or other raster format. images with multiple intrinsic dimensions, existing in multiple versions inside a single file, like some .ico formats. (in this case, the intrinsic dimensions will be those of the image largest in area and the aspect ratio most similar to the containing box.) images with no intrinsic dime...
...an intrinsic aspect ratio between its width and height, like an svg or other vector format. images with neither intrinsic dimensions, nor an intrinsic aspect ratio, like a css gradient. ...
...ght, like an svg or other vector format. images with neither intrinsic dimensions, nor an intrinsic aspect ratio, like a css gradient. ...

<input type="tel"> - HTML: Hypertext Markup Language
attribute is ignored completely. tip: use the title attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. you should also include other explanatory text nearby. see pattern validation below for details and an example. placeholder the placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. it should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. the text must not include carriage returns or line feeds. if the control's content has one directionality (ltr or rtl) but needs to present the placeholder in the opposite directionality, you can use unicode bidirectional algorithm formatti...
...tomatic correction of typos, as well as processing of text substitutions if any are configured. off disable automatic correction and text substitutions. mozactionhint a mozilla extension, supported by firefox for android, which provides a hint as to what sort of action will be taken if the user presses the enter or return key while editing the field. this information is used to decide what kind of label to use on the enter key on the virtual keyboard. note: this has been standardized as the global attribute enterkeyhint, but is not yet widely implemented. to see the status of the change being implemented in firefox, see bug 1490661. permitted values are: go, done, next, search, and send. the browser decides, using this hint, what label to put on the enter key. using tel inputs tel...
...dized as the global attribute enterkeyhint, but is not yet widely implemented. to see the status of the change being implemented in firefox, see bug 1490661. permitted values are: go, done, next, search, and send. the browser decides, using this hint, what label to put on the enter key. using tel inputs telephone numbers are a very commonly collected type of data on the web. when creating any kind of registration or e-commerce site, for example, you will likely need to ask the user for a telephone number, whether for business purposes or for emergency contact purposes. given how commonly-entered phone numbers are, it's unfortunate that a "one size fits all" solution for validating phone numbers is not practical. fortunately, you can consider the requirements of your own site and implement...

<input type="url"> - HTML: Hypertext Markup Language
ute is ignored completely. tip: use the title attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. you should also include other explanatory text nearby. see the section pattern validation for details and an example. placeholder the placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. it should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. the text must not include carriage returns or line feeds. if the control's content has one directionality (ltr or rtl) but needs to present the placeholder in the opposite directionality, you can use unicode bidirectional algorithm formatti...
...matic correction of typos, as well as processing of text substitutions if any are configured. off disable automatic correction and text substitutions. mozactionhint a mozilla extension, supported by firefox for android, which provides a hint as to what sort of action will be taken if the user presses the enter or return key while editing the field. this information is used to decide what kind of label to use on the enter key on the virtual keyboard. note: this has been standardized as the global attribute enterkeyhint, but is not yet widely implemented. to see the status of the change being implemented in firefox, see bug 1490661. permitted values are: go, done, next, search, and send. the browser decides, using this hint, what label to put on the enter key. using url inputs wh...
...table in any other way. it simply ensures that the value of the field is properly formatted to be a url. note: it's also crucial to remember that a user can tinker with your html behind the scenes, so your site must not use this validation for any security purposes. you must verify the url on the server-side of any transaction in which the provided text may have any security implications of any kind. a simple url input currently, all browsers which implement this element implement it as a standard text input field with basic validation features. in its most basic form, a url input can be implemented like this: <input id="myurl" name="myurl" type="url"> notice that it's considered valid when empty and when a single validly-formatted url address is entered, but is otherwise not consider...

Common MIME types - HTTP
eam is the default value for all other cases. an unknown file type should use this type. browsers pay a particular care when manipulating these files, attempting to safeguard the user to prevent dangerous behaviors. iana is the official registry of mime media types and maintains a list of all the official mime types. ...
...al mime types. ...
... extension kind of document mime type .aac aac audio audio/aac .abw abiword document application/x-abiword .arc archive document (multiple files embedded) application/x-freearc .avi avi: audio video interleave video/x-msvideo .azw amazon kindle ebook format application/vnd.amazon.ebook .bin any kind of binary data application/octet-stream .bmp windows os/2 bitmap graphics image/bmp .bz bzip archive application/x-bzip .bz2 bzip2 archive application/x-bzip2 .csh c-shell script application/x-csh .css cascading style sheets (css) text/css .csv comma-separated values (csv) text/csv .doc micros...

MIME types (IANA media types) - HTTP
ded files may be mishandled. structure of a mime type the simplest mime type consists of a type and a subtype; these are each strings which, when concatenated with a slash (/) between them, comprise a mime type. no whitespace is allowed in a mime type: type/subtype the type represents the general category into which the data type falls, such as video or text. the subtype identifies the exact kind of data of the specified type the mime type represents. for example, for the mime type text, the subtype might be plain (plain text), html (html source code), or calendar (for icalendar/.ics) files. each type has its own set of possible subtypes, and a mime type always has both a type and a subtype, never just one or the other. an optional parameter can be added to provide additional details: ...
...nts a document that's comprised of multiple component parts, each of which may have its own individual mime type; or, a multipart type may encapsulate multiple files being sent together in one transaction. for example, multipart mime types are used when attaching multiple files to an email. discrete types the discrete types currently registered with the iana are: applicationlist at iana any kind of binary data that doesn't fall explicitly into one of the other types; either data that will be executed or interpreted in some way or binary data that requires a specific application or category of application to use. generic binary data (or binary data whose true type is unknown) is application/octet-stream. other common examples include application/pdf, application/pkcs8, and application/zip...
...y files. as it means unknown binary file, browsers usually don't execute it, or even ask if it should be executed. they treat it as if the content-disposition header was set to attachment, and propose a "save as" dialog. text/plain this is the default for textual files. even if it really means "unknown textual file," browsers assume they can display it. note that text/plain does not mean "any kind of textual data." if they expect a specific kind of textual data, they will likely not consider it a match. specifically if they download a text/plain file from a <link> element declaring a css file, they will not recognize it as a valid css file if presented with text/plain. the css mime type text/css must be used. text/css css files used to style a web page must be sent with text/css. if a s...

Mobile first - Progressive web apps (PWAs)
this article offers some related ideas, looking at the concept of mobile first — the practice of designing a website so that the default layout/configuration is for mobile devices, and layouts and features for desktop browsers are then layered on top of that default. this guide looks at a few useful techniques inside the mobile first umbrella. ...
...form on a mobile device, or even just navigated around a complex site, knows this well. therefore we should try to simplify things on mobile, keeping each view cut down to a single, simple purpose where possible, and reducing the amount of typing users are expected to do. the latter will please desktop users as well as mobile users! usage context on top of everything else, you must consider the kinds of situations mobile devices will be used in, and the kinds of tasks users most commonly want to perform on mobiles. a phrase you'll read in a few places is "one eyeball, one thumb", referring to how much of the user's attention you are likely to have. of course, your users will be concentrating on what they're doing, but they are likely to be in a car with bad lighting, or in a noisy bar with t...
...n now use the following js block to test whether media queries are supported, and if not, to load in respond.js, scott jehl's matchmedia and media query polyfill. if(!modernizr.mq('only all')) { require('respond'); } editorial note: this currently doesn't work, and i'm not sure why. ongoing work required. matchmedia is also very useful in many other ways. imagine you wanted to include some kind of webgl chart in the desktop version of the site requiring a webgl library like three but didn't want it included in the mobile version? you could create a block to only load the library in the case of narrow screen devices: if(window.matchmedia("(min-width: 481px)").matches) { require('three'); } we can, therefore, save the bandwidth for browsers that don't need it. modernizr css and js b...

Communicating using "postMessage" - Archive of obsolete content
eceiving messages gets more complex. suppose the content script wants to send mouseout events as well as mouseover. ...
...'mouseover', function(event) {" + " self.postmessage({" + " kind: 'mouseover'," + " element: event.target.tostring()" + " });" + "}, false);" + "window.addeventlistener('mouseout', function(event) {" + " self.postmessage({" + " kind: 'mouseout'," + " element: event.target.tostring()" + " });" + " }, false);" var pagemod = require('sdk/page-mod').pagemod({ include: ['*'], contentscript: pagemodscript, onattach: function(worker) { worker.on('message', function(message) { switch(message.kind) { case 'mouseover': console.log('mouseover: ...

page-worker - Archive of obsolete content
s been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires this property is optional and defaults to "end". contentscriptoptions object read-only value exposed to content scripts under self.options property. any kind of jsonable value (object, array, string, etc.) can be used here. optional. onmessage function use this to add a listener to the page worker's message event. page a page object loads the page specified by its contenturl option and executes any content scripts that have been supplied to it in the contentscript and contentscriptfile options. the page is not disp...
...efore the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under self.options property. any kind of jsonable value (object, array, string, etc.) can be used here. optional. events message if you listen to this event you can receive message events from content scripts associated with this page worker. when a content script posts a message using self.postmessage(), the message is delivered to the add-on code in the page worker's message event. arguments value : listeners are passed a sing...

panel - Archive of obsolete content
been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the panel has been loaded, at the time the window.onload event fires this property is optional and defaults to "end". contentscriptoptions object read-only value exposed to content scripts under addon.options property. any kind of jsonable value (object, array, string, etc.) can be used here. optional. contextmenu boolean new in firefox 33 whether to show a context menu when the user context-clicks in the panel. the context menu will be the same one that's displayed in web pages. optional, defaults to false. onmessage function include this to listen to the p...
...ore the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the panel has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under addon.options property. any kind of jsonable value (object, array, string, etc.) can be used here. optional. events show this event is emitted when the panel is shown. hide this event is emitted when the panel is hidden. message if you listen to this event you can receive message events from content scripts associated with this panel. when a content script posts a message using self.postmessage(), the message is delivered...

content/symbiont - Archive of obsolete content
s been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires this property is optional and defaults to "end". contentscriptoptions object read-only value exposed to content scripts under self.options property. any kind of jsonable value (object, array, string, etc.) can be used here. optional. allow object permissions for the content, with the following keys: script boolean whether or not to execute script in the content. defaults to true. optional. optional. symbiont symbiont is composed from the worker trait, therefore instances of symbiont and their...
...optional. contenturl the url of the content loaded. allow permissions for the content, with a single boolean key called script which defaults to true and indicates whether or not to execute scripts in the content. ...

core/promise - Archive of obsolete content
so defer returns an object that contains a promise and two resolve, reject functions that can be used to resolve / reject that promise. note: a promise can be rejected or resolved only once. all subsequent attempts to either reject it or resolve it will be ignored. ...
...eturn !!avalue || second; }, function() { return second; }) } note: we could not use promised function here, as they reject returned promise if any of the given arguments is rejected. if you need to customize your promises even further you may pass resolve a second optional prototype argument that will have same effect as with defer. treat errors as promises now that we can create all kinds of eventual values, it's useful to have a way to create eventual errors. module exports reject to do exactly that. it takes anything as an argument and returns a promise that is rejected with it. const { reject } = require('sdk/core/promise'); var boom = reject(error('boom!')); future(function() { return math.random() < 0.5 ? boom : value }) as with the rest of the apis a reject may be giv...

StringView - Archive of obsolete content
ing). constructor syntax new stringview(input[, encoding[, startoffset[, length]]]) description create a new string-like object based upon an arraybuffer. arguments input (required) the argument the stringview is constructed from. it can be: another stringview a string a number an arraybuffer a typed array of uint8array, uint16array, or uint32array subclass any other kind of ordered object (like arrays, collections, etc.) if it is a number it will become the length of the new stringview; otherwise it will become its content. the following table shows the behavior of the stringview constructor. input class stringview.buffer stringview.rawdata stringview.bufferview stringview a new arraybuffer will be created. o...
...ordered object the start offset of the new stringview in codepoints if the input argument is a stringview or a string if not specified (or specified as null) it will default to 0. length optional a number expressing in codepoints the length of the new stringview if the input argument is a string or a stringview, or in raw elements if the input is a typed array, an arraybuffer or any other kind of ordered object (like array, collections, etc.). if not specified it will take the length of the input. it never can be more than the length of the input. if you want to see how to create a stringview bigger than its content, please, see this note. examples var mystringview1 = new stringview("hello world!"); // utf-8 alert(mystringview1) // "hello world!" var mystringview2 = new stringview(...

Adding Events and Commands - Archive of obsolete content
n capture the events in the xul overlay, since they'll bubble all the way up: // in the overlay code. document.addeventlistener( "xshellogreetingevent", function(aevent) { /* do stuff*/ }, false); be careful when doing this! you should at least validate the url of the page that is generating the custom event, so that you know that it's coming from the right place. you should also avoid this kind of events to trigger actions that could be destructive to the user's data, because a malicious site could try to trigger these events and cause damage. there's a reason for the division between remote content and local chrome, so make sure you respect it. there's a section further ahead on intercepting page loads which complements this section very well. this should give you a solid foundation t...
... ...

The Box Model - Archive of obsolete content
hese attributes won't have any effect on flexible elements. margins, paddings and spacers margins and paddings are frequently used in both html and xul to define spacing between elements and inside of elements. the margin determines the space between an element and the elements surrounding it, while the padding determines the space between the borders of a container element and its child nodes, kind of like an inner margin. sometimes you also need to define flexible spaces between elements. in this case you should use a spacer element with a flex value. a spacer element is completely invisible and doesn't do more than take space. you should only use it when you need flexible space. if you need fix-sized space it's best to use margins and paddings and avoid adding unnecessary nodes to your x...
... etc. note that this is not really what you would expect from an extension, it's more like a theme. however, it's very interesting and useful to see how you can manipulate the appearance of firefox so easily. if you're not familiar with css, you should read this css getting started guide and other online resources before continuing with this tutorial. « previousnext » this tutorial was kindly donated to mozilla by appcoast. ...

Add-ons - Archive of obsolete content
here is a wealth of material on creating extensions for firefox. all of these documents currently assume, however, that you are developing your extension using xul and javascript only. for complex extensions, it may be necessary to create components in c++ that provide additional functionality. extension etiquette this article describes best practices when making extensions, including how to be kind to your users. it assumes that you are already familiar with building an extension. extension packaging extensions are packaged in a form of installable bundle which can be downloaded and installed by a user, or provided pre-packaged with an application or by an external program. extensions use a directory structure which can provide chrome, components, and other files to extend the functionali...
...website. so there may be still some reference to the xuldev website (we want to host source code on mdc, not on xuldev), and to japanese things (like some specific locales, which have been translated to french since non-latin characters are not well supported). hotfix extension this document has been moved to the add-ons wiki. how to convert an overlay extension to restartless first off, what kind of add-on are we talking about here? well, xul overlays and windows, jsm files, chrome & resource mappings with localization, default preferences, but no xpcom components of your own. some of that will have to be replaced and the rest will need to be loaded differently. inline options firefox 7 supports a new syntax for defining extensions' preferences for both bootstrapped and traditional exte...

Index - Archive of obsolete content
a sequence of characters) that matches patterns of characters in other strings. microsummary generators use them to identify the pages that the generators know how to summarize by matching patterns in those pages' urls. 414 dtrace archive, dtrace, performance, profiling, qa, testing dtrace is sun microsystem's dynamic tracing framework that allows developers ...
... 716 file.macalias in this example, a mac alias is created for software (applecd audio player) that is installed locally. 717 file.windowsshortcut in this example, the windowsshortcut method is used to add a shortcut in the program directory ("program" is a keyword for the directory in which the program itself is i...

JXON - Archive of obsolete content
ormation (like processing instructions, schemas, comments, etc.) will be lost. this type of algorithm is still considered lossless, since what is lost is meta-information and not information. in order to avoid conflicts, the representation of nodes and attributes names is case insensitive (always rendered in lower case), so objects' local property names set using javascript must always have some kind of capitalization (that is, at least one capital letter somewhere in their names), as you can see below. the following algorithms are somewhat based on the parker convention, version 0.4, which prescribes the transformation of tags names into object properties names and the recognition of the typeof of all the collected text content of each tag (plain text parsing); but with some differences (so...
... note: despite the term jxon suggesting "lossless" conversions, these techniques are not actually lossless if one needs to preserve ordering of elements, as is common with many xml dialects (including of course xhtml). the ecmascript standard (javascript) indicates that object iteration order is implementation dependent. appendix: a complete, bidirectional, jxon library now we ...

MMgc - Archive of obsolete content
eving high performance and getting the other benefits of garbage collection. classic reference counting previous versions of the flash player, up to flash player 7, used reference counting to track object lifetimes. class object { public: object() { refcount = 0; } void addref() { refcount++; } void release() { if (!--refcount) delete this; } int refcount; } reference counting is a kind of automatic memory management. reference counting can track relationships between objects, and as long as addref and release are called at the proper times, can reclaim memory from objects that are no longer referenced. problem: circular references reference counting falls down when circular references occur in objects. if object a and object b are reference counted and refer to each other, thei...
...ing to pure mark/sweep garbage collection is that a lot of time may be spent in the garbage collector. this time will pause the entire application, and give the impression of poor performance. even with an incremental collector that doesn't have big pauses, a gc sweep only kicks in every so often, so memory usage can grow very quickly to a high peak before the gc collects unused objects. so, some kind of reference counting is still attractive to lower the amount of work the gc has to do, and to get more immediacy on memory reclamation. however, reference counting is also slow because the reference counts need to be constantly maintained. so, it's attractive to find some form of reference counting that doesn't require maintaining reference counts for every single reference. enter deferred refer...

Layout System Overview - Archive of obsolete content
play type by using the style system. a content element is passed to the style system and a request is made to resolve the style for that element. this causes the style system to apply all style rules that correspond to the element and results in a resolved style context - the style data specific to that element. the layout module looks at the 'display' field of the style context to determine what kind of frame to create (block, inline, table, etc.). the style context is associated with the frame via a reference because it is needed for many other computations during the formatting of the frames. once a frame is created for a content element, it must be formatted. we refer to this as 'laying out' the frame, or as 'reflowing' the frame. each frame implements a reflow method to compute its positi...
...tyle set to do style resolution and style sheet management. one of the critical aspects of the presentation shell is the handling of frame formatting, or reflow. the presentation shell owns and maintains a reflow queue where requests for reflow are held until it is time to perform a reflow, and then pulled out and executed. it is also important to see the presentation shell as an observer of many kinds of events in the system. for example, the presentation shell receives notifications of document load events, which are used to trigger updates to the formatting of the frames in some cases. the presentation shell also receives notifications about changes in cursor and focus states, whereby the selection and caret updates can be made visible. there are dozens of other data objects managed by the ...

When To Use ifdefs - Archive of obsolete content
any others. sometimes the same basic code is used for multiple projects, but there are small differences needed. "ifdefs", or conditional instructions, are used to build different code what are ifdefs ifdefs are conditional directives to a text preprocessor which mark that certain blocks of code are used only in certain conditions. in this document, the term is used more loosely to discuss any kind of conditional that differentiates between different build configurations. when are ifdefs used? there are three major kinds of ifdefs in use in the mozilla tree: platform/widget ifdefs, feature ifdefs, and application-specific ifdefs: platform/widget ifdefs the mozilla code will frequently need to differentiate between code for different platforms or widget sets. these ifdefs are generally...
...ny application that is using the "toolkit". moz_xul_app ifdefs are not acceptable in tier 9, but are acceptable (even necessary) in later tiers. for an example of feature ifdefs, see layout/makefile.in. application-specific ifdefs finally, each application/project needs to build different pieces of code. application ifdefs should only be made in application-specific code. this is the trickiest kind of ifdef, because it is frequently hard to determine what code is "shared" and what code is "application-specific". as a general rule, any code in tier 2, tier 9, or tier 50 is shared code, and should not have application-specific ifdefs. any code in later tiers is application-specific. this rule has many exceptions, some of which are listed here: the code in editor/ui/ is built by the suite, s...

Content Panels - Archive of obsolete content
interfaces. this will be described in a later section. another approach is to use the iframe element, which works much like the html element of the same name. it creates a separate document within the window. it has the advantage that it can be placed anywhere and the contents can be loaded from a different file. set the url to appear in the frame with the src attribute. this url may point to any kind of file, although it will usually point to an html file or another xul file. you can use a script to change the contents of the iframe without affecting the main window. in the mozilla browser window, the area where the web page is displayed is created by using an iframe. when the user enters a url or clicks on a link in a document, the source of the frame is changed. iframe example example ...
...played. browser example example 2 : source view <browser src="http://www.mozilla.org" flex="1" /> as with the iframe, you can specify the url in a browser using the src attribute. for a tabbrowser, you cannot set the url directly like this, as it doesn't display just one url. instead, you must use a script and call the loaduri function. there are three classes of browser, depending on the kind of content that you want to display inside. the type may be specified using the type attribute. the first type is the default and is used if you don't specify a type. in this case, the content loaded inside the browser is treated as if it was part of the same application and has access to the outer window. that means that when a script loaded inside the browser tries to get the topmost window, it...

Manifest Files - Archive of obsolete content
« previousnext » in this section, we'll see how to put chrome and xul files into a package and create the manifest files for them. packages a package is a set of xul files and scripts that define the functionality of a user interface. packages may be installed into mozilla and referenced with chrome urls. a package can contain any kinds of files and may be split into subdirectories for different parts of the package. a package can be stored either as a directory or as a jar archive. manifest files a manifest file describes a package and maps its location on disk to a chrome url. the manifest files in the chrome directory will be examined when a mozilla application starts up to see what packages are installed. that means that all you need to do to install a new package is add...
...and locale modify the findfile package, which was specified on the first line.the three paths above specify subdirectories for each part. you will want to create these subdirectories to keep each part's files separate. installing a package for an application to be installed, you will need to create an installer for it, or include it as part of another application. the method used depends on what kind of application you are creating. for extensions, you will need to create an install file install.rdf which describes what will be installed, the author of the extension and which versions of the browser or other applications it is compatible with. a specific directory structure is needed as well since extensions are limited in where the files may be installed to. an extension is packaged up into ...

Manipulating Lists - Archive of obsolete content
ee methods are also available for several other xul elements and work in the same manner. in fact, these methods are part of the nsidomxulselectcontrolelement interface so any xul elements which implement this interface have these methods. this includes the menulist, radiogroup and tabs elements. for example, to add a new item to a menulist, you can use the same syntax as for a listbox. the right kind of element will be appended in each situation. list selection the nsidomxulselectcontrolelement interface provides two additonal properties, selectedindex and selecteditem. the former returns the index of the selected item while the latter returns the selected element. for instance the selecteditem of a menulist will be the menuitem that is selected. if no item is selected, selectedindex will r...
... the selection all of the selection related properties described above may also be assigned a new value to change the selection. in the next example, the selectedindex property of a radiogroup element is changed based on the value entered in a textbox. this code isn't foolproof though; for example it doesn't check if the value entered is out of range. you will want to make sure that you add this kind of error checking. example 3 : source view <script> function doselect(){ var val = document.getelementbyid('number').value; val = number(val); if (val != null) document.getelementbyid('level').selectedindex = val - 1; } </script> <hbox align="center"> <label value="enter a number from 1 to 3:"/> <textbox id="number"/> <button label="select" oncommand="doselect();"/> </hbox> <r...

Table Reflow Internals - Archive of obsolete content
e sets various sizes in the reflow metrics after (possibly) reflowing some or all of its children which reflows it children, etc. the reflowee returns a reflow status which indicates if it is complete, and thus not have to continue (split) breaking status (in the case of some inline frames) if there is truncation (it can't fit in the space and can't split). this is just a convience mechanism. kinds of reflows initial - reflowee's first reflow must be of this type (reflower's responsibility). resize - reflowee gets a change in available space only. similar to initial, except it can reoccur. incremental - has a reflow path (tree) where each node has a command with a target frame, reflow command types are: dirty - something changed inside a target (e.g. it gains, loses children) style chang...
...incremental - has a reflow path (tree) where each node has a command with a target frame, reflow command types are: dirty - something changed inside a target (e.g. it gains, loses children) style changed - a target changed stylisticly (recall, size is a style property) content changed - a target's content changed (e.g. ...

Old Proxy API - Archive of obsolete content
the object whose properties are being intercepted. proxy factory the object or method that creates intercessive proxies. traps the methods that provide property access. this is analogous to the concept of traps in operating systems. proxies can be either be trapping or fixed. proxy api catch-alls can be defined only on distinct proxy objects, controlled by a handler object. there are two kinds of proxies: object proxies var proxy = proxy.create(handler, proto); and function proxies : var proxy = proxy.createfunction(handler, calltrap, constructtrap); where: proto is an optional object representing the proxy’s prototype (defaults to null if none is provided). calltrap is a variable-argument function(args) { return any; } that reifies “proxy(args)”. note: the this-binding...
... that reifies “new proxy(args)”. the this-binding of the constructtrap is either undefined (in strict mode) or the global object (in non-strict mode). if no constructtrap is provided, performing new proxy(...args) calls the proxy’s calltrap with this bound to a new object delegating to the proxy's prototype. handler is an object that implements the handler api. handler api there are two kinds of traps: fundamental and derived traps. if one of the fundamental traps isn't implemented and the proxy is used in a way that expects the fundamental trap to be defined, then an error is thrown. if a derived trap is implemented, then that trap's code is called whenever the corresponding behavior happens on the proxy. if the derived trap is undefined, a default implementation using the fundament...

XForms Custom Controls - Archive of obsolete content
eturn this.ownerdocument.getanonymouselementbyattribute(this, 'anonid', 'ref1');"/> <property name="ref2" readonly="true" onget="return this.ownerdocument.getanonymouselementbyattribute(this, 'anonid', 'ref2');"/> </implementation> new host language the mozilla xforms implementation currently only supports xforms hosted in xhtml or xul documents. if you need to have xforms in other kinds of documents like svg, mathml or some other tag language that mozilla supports, then you'll need to implement xforms controls for your desired document format. the xforms implementation has base xbl bindings for every xforms control. you can write implementation bindings that will inherit from these base bindings. for example, every output control implementation extends the base binding xforms.x...
...ementation has base xbl bindings for every xforms control. you can write implementation bindings that will inherit from these base bindings. for example, every output control implementation extends the base binding xforms.xml#xformswidget-output-base. the xhtml-specific pieces of our implementation of output is kept in the xforms-xhtml.xml#xformswidget-output binding. if you would like to do this kind of heroic work then please contact the mozilla xforms developers before you start. hopefully we can help you avoid a lot of frustration and despair :). overview the mozilla xforms controls are largely implemented using xbl and the bindings are applied to the individual xforms control tags via css. so you can always refer to our source code to get some great examples of how xforms controls can be ...

Mozilla XForms User Interface - Archive of obsolete content
ction this article is a quick reference of the xforms user interface elements. mainly this is aimed to document how xforms elements will be presented in mozilla since the xforms specifications give only a hint of how controls might be rendered. currently xforms can be hosted by xhtml and xul in seamonkey and firefox. later we have plans to support xforms hosted by svg. the xforms specs define two kinds of xforms ui elements, called 'form controls' and 'xforms user interface'. elements from the "form controls" group allows users to interact with instance data. the set of "xforms user interface" elements exist to aid form authors in combining host language markup and xforms markup together in order to build user interfaces. some of the 'form controls' can have multiple appearances and thus may b...
...e keyboard navigation sequence between controls. accesskey - keyboard shortcut for moving focus to an xforms element. binding attributes single-node (see the spec) and node-set (see the spec) attributes are used to bind xforms elements to instance nodes. these attributes are: ref, nodeset, model and bind. xforms elements almost every xforms element can be presented as one of serveral different kinds of widgets. this section contains a short description of each xforms element and its representation. the xforms specification offers suggestions for some of the representations, but some of the widgets we use are only available in the mozilla xforms processor. the choice of widget that we use is often determined by the data type of the instance node that the xforms element is bound to. the form ...

XUL Parser in Python - Archive of obsolete content
w.write('<tr><td class="at">' + a + '</td>') with these modifications, the script creates an output more like a periodic table of xul elements. until i spruce it up a little, this is just a very basic demonstration of using python's xml parser with xul. ...
... please feel free to suggest changes, change the format of the results output, or adapt this script in any way you want. ...

asm.js - Game development
mall, strict subset of javascript that only allows things like `while`, `if`, numbers, top-level named functions, and other simple constructs. it does not allow objects, strings, closures, and basically anything that requires heap allocation. asm.js code resembles c in many ways, but it's still completely valid javascript that will run in all current engines. it pushes js engines to optimize this kind of code, and gives compilers like emscripten a clear definition of what kind of code to generate. we will show what asm.js code looks like and explain how it helps and how you can use it. this subset of javascript is already highly optimized in many javascript engines using fancy just-in-time (jit) compiling techniques. however, by defining an explicit standard we can work on optimizing this kin...
...f javascript is already highly optimized in many javascript engines using fancy just-in-time (jit) compiling techniques. however, by defining an explicit standard we can work on optimizing this kind of code even more and getting as much performance as we can out of it. it makes it easier to collaborate across multiple js engines because it's easy to talk about and benchmark. the idea is that this kind of code should run very fast in each engine, and if it doesn't, it's a bug and there's a clear spec that engines should optimize for. it also makes it easy for people writing compilers that want to generate high-performant code on the web. they can consult the asm.js spec and know that it will run fast if they adhere to asm.js patterns. emscripten, a c/c++ to javascript compiler, emits asm.js co...

Type - MDN Web Docs Glossary: Definitions of Web-related terms
a value's data type also affects the operations that are valid on that value. for example, a value of type number can be multiplied by another number, but not by a string - even if that string contains only a number, such as the string "2". types also provides us with useful knowledge about the comparison between different values. ...
... a value's data type also affects the operations that are valid on that value. for example, a value of type number can be multiplied by another number, but not by a string - even if that string contains only a number, such as the string "2". types also provides us with useful knowledge about the comparison between different values. ...

Assessment: Accessibility troubleshooting - Learn web development
u'll need to update the css rule selectors that style the tags to their proper equivalents for the semantic headings. once you add paragraph elements, you'll notice the styling looking better. the images the images are currently inaccessible to screenreader users. can you fix this? the audio player the <audio> player isn't accessible to hearing impaired (deaf) people — can you add some kind of accessible alternative for these users? the <audio> player isn't accessible to those using older browsers that don't support html5 audio. how can you allow them to still access the audio? the forms the <input> element in the search form at the top could do with a label, but we don't want to add a visible text label that would potentially spoil the design and isn't really needed by sighte...
... the show/hide comment control the show/hide comment control button is not current keyboard-accessible. can you make it keyboard accessible, both in terms of focusing it using the tab key, and activating it using the return key? the table the data table is not currently very accessible — it is hard for screenreader users to associate data rows and columns together, and the table also has no kind of summary to make it clear what it shows. can you add some features to your html to fix this problem? other considerations? can you list two more ideas for improvements that would make the website more accessible? assessment or further help if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, ...

CSS and JavaScript accessibility best practices - Learn web development
y non-mouse users, and make the color scheme contrasting enough to be usable by those with color deficiencies. the problem with too much javascript the problem often comes when people rely on javascript too much. sometimes you'll see a website where everything has been done with javascript — the html has been generated by javascript, the css has been generated by javascript, etc. this has all kinds of accessibility and other issues associated with it, so it is not advised. as well as using the right element for the right job, you should also make sure you are using the right technology for the right job! think carefully about whether you need that shiny javascript-powered 3d information box, or whether plain old text would do. think carefully about whether you need a complex non-standard ...
...fault <video> browser controls aren't keyboard accessible in most browsers). as an example, we've written a quick and dirty client-side form validation example — see form-validation.html (also see the demo live). here you'll see a simple form; when you try to submit the form with one or both fields left empty, the submit fails, and an error message box appears to tell you what is wrong. this kind of form validation is unobtrusive — you can still use the form absolutely fine without the javascript being available, and any sensible form implementation will have server-side validation active as well, because it is too easy for malicious users to bypass client-side validation (for example, by turning javascript off in the browser). the client-side validation is still really useful for repor...

WAI-ARIA basics - Learn web development
ssibility — the content update is not detected by screenreaders, so their users would not know what is going on. this is a fairly trivial example, but just imagine if you were creating a complex ui with lots of constantly updating content, like a chat room, or a strategy game ui, or a live updating shopping cart display — it would be impossible to use the app in any effective way without some kind of way of alerting the user to the updates. wai-aria fortunately provides a useful mechanism to provide these alerts — the aria-live property. applying this to an element causes screenreaders to read out the content that is updated. how urgently the content is read out depends on the attribute value: off: the default. updates should not be announced. polite: updates should be announced onl...
...asionally other controls as needed (for example the up and down cursor to move between options in a <select> box). however, sometimes you will end up having to write code that either uses non-semantic elements as buttons (or other types of control), or uses focusable controls for not quite the right purpose. you might be trying to fix some bad code you've inherited, or you might be building some kind of complex widget that requires it. in terms of making non-focusable code focusable, wai-aria extends the tabindex attribute with some new values: tabindex="0" — as indicated above, this value allows elements that are not normally tabbable to become tabbable. this is the most useful value of tabindex. tabindex="-1" — this allows not normally tabbable elements to receive focus programmati...

Pseudo-classes and pseudo-elements - Learn web development
the top of the document? we'd need to move the class over to the new paragraph. instead of adding the class, we could use the :first-child pseudo-class selector — this will always target the first child element in the article, and we will no longer need to edit the html (this may not always be possible anyway, maybe due to it being generated by a cms.) all pseudo-classes behave in this same kind of way. they target some bit of your document that is in a certain state, behaving as if you had added a class into your html. take a look at some other examples on mdn: :last-child :only-child :invalid note: it is valid to write pseudo-classes and elements without any element selector preceding them. in the example above, you could write :first-child and the rule would apply to any eleme...
... see the ::before and ::after pseudo-elements in use. whenever you see these selectors, look at the content property to see what is being added to the document. reference section there are a large number of pseudo-classes and pseudo-elements, and it is useful to have a list to refer to. below are tables listing them, with links to their reference pages on mdn. use this as a reference to see the kind of things that are available for you to target. pseudo-classes selector description :active matches when the user activates (for example clicks on) an element. :any-link matches both the :link and :visited states of a link. :blank matches an <input> element whose input value is empty. :checked matches a radio button or checkbox in ...

How CSS is structured - Learn web development
come more familiar with css. the cascade and inheritance section in the next module explains this in detail, including how to calculate specificity. for now, remember that specificity exists. sometimes, css might not apply as you expected because something else in the stylesheet has more specificity. recognizing that more than one rule could apply to an element, is the first step in fixing these kinds of issues. properties and values at its most basic level, css consists of two components: properties: these are human-readable identifiers that indicate which stylistic features you want to modify. for example, font-size, width, background-color. values: each property is assigned a value. this value indicates how to style the property. the example below highlights a single property and v...
... with any coding work, it is best practice to write comments along with css. this helps you to remember how the code works as you come back later for fixes or enhancement. it also helps others understand the code. css comments begin with /* and end with */. in the example below, comments mark the start of distinct sections of code. this helps to navigate the codebase as it gets larger. with this kind of commenting in place, searching for comments in your code editor becomes a way to efficiently find a section of code. /* handle basic element styling */ /* -------------------------------------------------------------------------------------------- */ body { font: 1em/150% helvetica, arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em; } @media (min-width: 70em) { /* le...

CSS FAQ - Learn web development
property is declared in both rules, the conflict is resolved first through specificity, then according to the order of the css declarations. the order of classes in the class attribute is not relevant. why don't my style rules work properly? style rules that are syntactically correct may not apply in certain situations. you can use dom inspector's css style rules view to debug problems of this kind, but the most frequent instances of ignored style rules are listed below. html elements hierarchy the way css styles are applied to html elements depends also on the elements hierarchy. it is important to remember that a rule applied to a descendent overrides the style of the parent, in spite of any specificity or priority of css rules. .news { color: black; } .corpname { font-weight: bold; co...
...le, the last definition is used. #stockticker { font-weight: bold; } .stocksymbol { color: red; } /* other rules */ /* other rules */ /* other rules */ .stocksymbol { font-weight: normal; } <!-- most text is in bold, except "ge", which is red and not bold --> <div id="stockticker"> nys: <span class="stocksymbol">ge</span> +1.0 ... </div> to avoid this kind of error, try to define rules only once for a certain selector, and group all rules belonging to that selector. use of a shorthand property using shorthand properties for defining style rules is good because it uses a very compact syntax. using shorthand with only some attributes is possible and correct, but it must be remembered that undeclared attributes are automatically reset to their defau...

Basic native form controls - Learn web development
ers, which is not the case for all form controls. we cover newer form controls added in html5 in the next two articles. if you want a more advanced reference, you should consult our html forms element reference, and in particular our extensive <input> types reference. text input fields text <input> fields are the most basic form widgets. they are a very convenient way to let the user enter any kind of data, and we've already seen a few simple examples. note: html form text fields are simple plain text input controls. this means that you cannot use them to perform rich editing (bold, italic, etc.). all rich text editors you'll encounter are custom widgets created with html, css, and javascript. all basic text controls share some common behaviors: they can be marked as readonly (the us...
...n be dynamically set via javascript. the hidden input type should not have an associated label. other text input types, like search, url, and tel, were added with html5. those will be covered in the next tutorial, html5 input types. checkable items: checkboxes and radio buttons checkable items are controls whose state you can change by clicking on them or their associated labels. there are two kinds of checkable item: the check box and the radio button. both use the checked attribute to indicate whether the widget is checked by default or not. it's worth noting that these widgets do not behave exactly like other form widgets. for most form widgets, once the form is submitted all widgets that have a name attribute are sent, even if no value has been filled out. in the case of checkable item...

The HTML5 input types - Learn web development
abel> <input type="range" name="price" id="price" min="50000" max="500000" step="100" value="250000"> <output class="price-output" for="price"></output> this example creates a slider whose value may range between 50000 and 500000, which increments/decrements by 100 at a time. we've given it default value of 250000, using the value attribute. one problem with sliders is that they don't offer any kind of visual feedback as to what the current value is. this is why we've included an <output> element — to contain the current value (we'll also look at this element in the next article). you could display an input value or the output of a calculation inside any element, but <output> is special — like <label>, it can take a for attribute that allows you to associate it with the element or elemen...
...alendar selection ui, enabling users to select dates without necessating context switching to a native calendar application or potentially entering them in differing formats that are hard to parse. the last minute of the previous millenium can be expressed in the following different ways, for example: 1999/12/31, 23:59 or 12/31/99t11:59pm. html date controls are available to handle this specific kind of data, providing calendar widgets and making the data uniform. a date and time control is created using the <input> element and an appropriate value for the type attribute, depending on whether you wish to collect dates, times, or both. here's a live example that falls back to <select> elements in non-supporting browsers: let's look at the different available types in brief. note that the u...

Other form controls - Learn web development
n't support the <datalist> element will display the label and the select box. the following screenshot shows the datalist fallback as rendered in safari 6: if you use this fallback, ensure the data for both the <input> and the <select> are collected server-side. less obvious datalist uses according to the html specification, the list attribute and the <datalist> element can be used with any kind of widget requiring a user input. this leads to some uses of it that might seem a little non-obvious. for example, in browsers that support <datalist> on range input types, a small tick mark will be displayed above the range for each datalist <option> value. you can see an implementation example of this on the <input type="range"> reference page. and browsers that support <datalist>s and <input...
... that implement the <meter> element use those 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 ...

Sending form data - Learn web development
hich contains the php code seen in the above block. when this code is executed, the output in the browser is hi mom. note: this example won't work when you load it into a browser locally — browsers cannnot interpret php code, so when the form is submitted the browser will just offer to download the php file for you. to get it to work, you need to run the example through a php server of some kind. good options for local php testing are mamp (mac and windows) and ampps (mac, windows, linux). note also that if you are using mamp but don't have mamp pro installed (or if the mamp pro demo time trial has expired), you might have trouble getting it working. to get it working again, we have found that you can load up the mamp app, then choose the menu options mamp > preferences > php, and set...
...les are binary data — or considered as such — whereas all other data is text data. because http is a text protocol, there are special requirements for handling binary data. the enctype attribute this attribute lets you specify the value of the content-type http header included in the request generated when the form is submitted. this header is very important because it tells the server what kind of data is being sent. by default, its value is application/x-www-form-urlencoded. in human terms, this means: "this is form data that has been encoded into url parameters." if you want to send files, you need to take three extra steps: set the method attribute to post because file content can't be put inside url parameters. set the value of enctype to multipart/form-data because the data wi...

The web and web standards - Learn web development
this article provides some useful background on the web — how it came about, what web standard technologies are, how they work together, why "web developer" is a great career to choose, and what kinds of best practices you'll learn about through the course. brief history of the web we'll keep this very brief, as there are many (more) detailed accounts of the web's history out there, which we'll link to later on (also try searching for "history of the web" in your favorite search engine and see what you get, if you are interested in more detail.) in the late 1960s, the us military developed a communication network called arpanet. this can be considered a forerunner of the web, as it worked on packet switching, and featured the first implementation of the tcp/ip protocol suite. th...
...p, but displays as a more compact, single-column layout on mobile phone browsers. try adjusting the width of your browser window now, and see what happens. performance means getting web sites to load as quickly as possible, but also making them intuitive and easy to use so that users don't get frustrated and go somewhere else. accessibility means making your websites usable by as many different kinds of people as possible (related concepts are diversity and inclusion, and inclusive design). this includes people with visual impairments, hearing impairments, cognitive disabilities, or physical disabilities. it also goes beyond people with disabilities — how about young or old people, people from different cultures, people using mobile devices, or people with unreliable or slow network connec...

Creating hyperlinks - Learn web development
, that contains the web address. <p>i'm creating a link to <a href="https://www.mozilla.org/">the mozilla homepage</a>. </p> this gives us the following result: i'm creating a link to the mozilla homepage. adding supporting information with the title attribute another attribute you may want to add to your links is title. the title contains additional information about the link, such as which kind of information the page contains, or things to be aware of on the web site. <p>i'm creating a link to <a href="https://www.mozilla.org/" title="the best place to find more information about mozilla's mission and how to contribute">the mozilla homepage</a>. </p> this gives us the following result and hovering over the link displays the title as a tooltip. i'm creating a link to the...
...ect (opens a popup window, or loads a flash movie), you should add clear wording to reduce any confusion. for example: if you're on a low bandwidth connection, click a link, and then a multiple megabyte download starts unexpectedly. if you don't have the flash player installed, click a link, and then suddenly get taken to a page that requires flash. ...

Document and website structure - Learn web development
as covered in creating hyperlinks. objective: learn how to structure your document using semantic tags, and how to work out the structure of a simple website. basic sections of a document webpages can and will look pretty different from one another, but they all tend to share similar standard components, unless the page is displaying a fullscreen video or game, is part of some kind of art project, or is just badly structured: header: usually a big strip across the top with a big heading, logo, and perhaps a tagline. this usually stays the same from one webpage to another. navigation bar: links to the site's main sections; usually represented by menu buttons, links, or tabs. like the header, this content usually remains consistent from one webpage to another — having...
...e across a situation where you can't find an ideal semantic element to group some items together or wrap some content. sometimes you might want to just group a set of elements together to affect them all as a single entity with some css or javascript. for cases like these, html provides the <div> and <span> elements. you should use these preferably with a suitable class attribute, to provide some kind of label for them so they can be easily targeted. <span> is an inline non-semantic element, which you should only use if you can't think of a better semantic text element to wrap your content, or don't want to add any specific meaning. for example: <p>the king walked drunkenly back to his room at 01:00, the beer doing nothing to aid him as he staggered through the door <span class="editor-note"...

Getting started with HTML - Learn web development
wrong way to do nesting. in the example above, we opened the p element first, then opened the strong element. for proper nesting, we should close the strong element first, before closing the p. the following is an example of the wrong way to do nesting: <p>my cat is <strong>very grumpy.</p></strong> the tags have to open and close in a way that they are inside or outside one another. with the kind of overlap in the example above, the browser has to guess at your intent. this kind of guessing can result in unexpected results. block versus inline elements there are two important categories of elements to know in html: block-level elements and inline elements. block-level elements form a visible block on a page. a block-level element appears on a new line following the content that prece...
...apped in double quotes. however, you might see single quotes in some html code. this is a matter of style. you can feel free to choose which one you prefer. both of these lines are equivalent: <a href="http://www.example.com">a link to my example.</a> <a href='http://www.example.com'>a link to my example.</a> make sure you don't mix single quotes and double quotes. ...

From object to iframe — other embedding technologies - Learn web development
to maliciously modify your webpage, or trick people into doing something they don't want to do, such as reveal sensitive information like usernames and passwords. because of this, spec engineers and browser developers have developed various security mechanisms for making <iframe>s more secure, and there are also best practices to consider — we'll cover some of these below. clickjacking is one kind of common iframe attack where hackers embed an invisible iframe into your document (or embed your document into their own malicious website) and use it to capture users' interactions. this is a common way to mislead users or steal sensitive data. a quick example first though — try loading the previous example we showed above into your browser — you can find it live on github (see the source...
...tend to be better linked to than embedded, and other content such as images and video have much better, easier elements to handle those. plugins and these embedding methods are really a legacy technology, and we are mainly mentioning them in case you come across them in certain circumstances like intranets, or enterprise projects. ...

HTML table basics - Learn web development
s, and how to group together all the cells in a column for styling purposes. prerequisites: the basics of html (see introduction to html). objective: to gain basic familiarity with html tables. what is a table ? a table is a structured set of data made up of rows and columns (tabular data). a table allows you to quickly and easily look up values that indicate some kind of connection between different types of data, for example a person and their age, or a day of the week, or the timetable for a local swimming pool. tables are very commonly used in human society, and have been for a long time, as evidenced by this us census document from 1800: it is therefore no wonder that the creators of html provided a means by which to structure and present tabular d...
...if the column and row headings stood out in some way, it would be much better. active learning: table headers let's have a go at improving this table. first, make a local copy of our dogs-table.html and minimal-table.css files in a new directory on your local machine. the html contains the same dogs exampl...

Function return values - Learn web development
value. (in these cases, our reference pages list the return value as void or undefined.) for example, in the displaymessage() function we built in the previous article, no specific value is returned when the function is invoked. it just makes a box appear somewhere on the screen — that's it! generally, a return value is used where the function is an intermediate step in a calculation of some kind. you want to get to a final result, which involves some values that need to be calculated by a function. after the function calculates the value, it can return the result so it can be stored in a variable; and you can use this variable in the next stage of the calculation. using return values in your own functions to return a value from a custom function, you need to use the return keyword. we ...
...t a couple of functions of your own and adding them to the library. how about the square or cube root of the number? or the circumference of a circle with a given radius? some extra function related tips: look at another example of writing error handling into functions. it is generally a good idea to check that any necessary parameters are validated, and that any optional parameters have some kind of default value provided. this way, your program will be less likely to throw errors. think about the idea of creating a function library. as you go further into your programming career, you'll start doing the same kinds of things over and over again. it is a good idea to create your own library of utility functions to do these sorts of things. you can copy them over to new code, or even just a...

Introduction to web APIs - Learn web development
prerequisites: basic computer literacy, a basic understanding of html and css, javascript basics (see first steps, building blocks, javascript objects). ...
...w. the handler properties that allow us to run functions when events fire are generally listed in our reference material in separate "event handlers" sections. we already saw a number of event handlers in use in our web audio api example above. to provide another example, instances of the xmlhttprequest object (each one represents an http request to the server to retrieve a new resource of some kind) has a number of events available on them, for example, the load event is fired when a response has been successfully returned containing the requested resource, and it is now available. the following code provides a simple example of how this would be used: let requesturl = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; let request = new xmlhttprequest(); request.

JavaScript object basics - Learn web development
g objects all along as you've been going through these examples, you have probably been thinking that the dot notation you've been using is very familiar. that's because you've been using it throughout the course! every time we've been working through an example that uses a built-in browser api or javascript object, we've been using objects, because such features are built using exactly the same kind of object structures that we've been looking at here, albeit more complex ones than in our own basic custom examples. so when you used string methods like: mystring.split(','); you were using a method available on an instance of the string class. every time you create a string in your code, that string is automatically created as an instance of string, and therefore has several common methods ...
... instantiate a new object instance using the constructor for each notification you want to fire. try entering the following into your javascript console: const mynotification = new notification('hello!'); again, we'll look at constructors in a later article. note: it is useful to think about the way objects communicate as message passing — when an object needs another object to perform some kind of action often it sends a message to another object via one of its methods, and waits for a response, which we know as a return value. test your skills! you've reached the end of this article, but can you remember the most important information? you can find some further tests to verify that you've retained this information before you move on — see test your skills: object basics. summary ...

Aprender y obtener ayuda - Learn web development
ing is what you might more traditionally associate with academic subjects. you concentrate deeply on a low-level topic and solving the specific problems that it brings. you are focused on a narrow area. diffuse learning is more to do with high-level thinking around a wider area. you let your mind wander more widely, and seemingly make random connections between different things. this is more the kind of thinking you do while you are in the shower, or during a coffee break. from the studies that neuroscientists have done on brain activity, we have found out that you can't really engage in both ways of learning — or thinking — at once. so which one should you choose? you might think that focused learning is better for studying, but in reality, both are very important. focused thinking is...
...h as mozilla layout land, mozilladeveloper, and google chromedevelopers providing many useful videos. many people prefer textual articles for more in-depth learning and reference material, and videos for quick explanations of concepts and new features, but it is really up to you what you prefer to learn from. there is no right and wrong answer here. interactive code playgrounds you might be the kind of person that prefers minimal instructions and would prefer to jump straight in and start playing with code. this is also a reasonable approach, and some learning sites tend to favor it. codecademy for example is a learning site where the tutorials mainly consist of interactive code editors where you have to directly write code and see if the desired result was achieved. many mdn web docs refer...

Learning area release notes - Learn web development
t out for an opinionated pathway to follow for learning front-end development! also see our hacks post — introducing the mdn web docs front-end developer learning pathway — for more information about the rationale behind it. may 2020 our understanding client-side javascript frameworks module is now available. learn why frameworks exist, when you should use one (and when you shouldn't), what kinds of features are common to all frameworks, and how they relate to the vanilla javascript you may already know. once you have a general understanding of frameworks, move on to tutorial series covering popular frameworks like react, ember, and vue. our web forms learning module now has "test your skills" assessments accompanying the articles. april 2020 our new understanding client-side web deve...
...y know. once you have a general understanding of frameworks, move on to tutorial series covering popular frameworks like react, ember, and vue. our web forms learning module now has "test your skills" assessments accompanying the articles. april 2020 our new understanding client-side web development tools module has been released! learn the essentials of web development tooling, including what kind of tools exist, the command line, package managers, and how to assemble your own functioning tool chain. march 2020 you'll now find "test your skills" assessments accompanying the articles in the following modules: css building blocks javascript first steps javascript building blocks introducing javascript objects january 2020 the html forms module has been significantly updated: it...

Framework main features - Learn web development
as an argument, typescript would raise an error during compilation, and we would be forced to fix our mistake. we could write our own javascript that raises these errors for us, but it would make our source code significantly more verbose. it probably makes more sense to let typescript handle such checks for us. writing components as mentioned in the previous chapter, most frameworks have some kind of component model. react components can be written with jsx, ember components with handlebars, and angular and vue components with a templating syntax that lightly extends html. regardless of their opinions on how components should be written, each framework's components offer a way to describe the external properties they may need, the internal state that the component should manage, and the e...
...vascript memory. it ignores the parts of the dom that do not need to be changed. angular is the only framework discussed so far in this module that uses an incremental dom. you can read more about the incremental dom on the auth0 blog. the glimmer vm is unique to ember. it is not a virtual dom nor an incremental dom; it is a separate process through which ember's templates are transpiled into a kind of "byte code" that is easier and faster to read than javascript. routing as mentioned in the previous chapter, routing is an important part of the web experience. to avoid a broken experience in sufficiently complex apps with lots of views, each of the frameworks covered in this module provides a library (or more than one library) that helps developers implement client-side routing in their ap...

Getting started with React - Learn web development
der> ); note: the parentheses in the previous snippet aren't unique to jsx, and don’t have any effect on your application. they're a signal to you (and your computer) that the multiple lines of code inside are part of the same expression. you could just as well write the header expression like this: const header = <header> <h1>mozilla developer network</h1> </header> however, this looks kind of awkward, because the <header> tag that starts the expression is not indented to the same position as its corresponding closing tag. of course, your browser can't read jsx without help. when compiled (using a tool like babel or parcel), our header expression would look like this: const header = react.createelement("header", null, react.createelement("h1", null, "mozilla developer network")...
...="value". on line 3, the opening <div> tag has a classname attribute. this is the same as the class attribute in html, but because jsx is javascript, we can't use the word class — it's reserved, meaning javascript already uses it for a specific purpose and it would cause problems here in our code. a few other html attributes are written differently in jsx than they are in html too, for the same kind of reason. we'll cover them as we encounter them. take a moment to change the <p> tag on line 6 so that it reads "hello, world!", then save your file. you'll notice that this change is immediately rendered in the development server running at http://localhost:3000 in your browser. now delete the <a> tag and save; the "learn react" link will be gone. your app component should now look like this:...

Handling common HTML and CSS problems - Learn web development
any syntax errors. note: one common problem with css and html arises when different css rules begin to conflict with one another. this can be especially problematic when you are using third party code. for example, you might use a css framework and find that one of the class names it uses clashes with one you've already used for a different purpose. or you might find that html generated by some kind of third party api (generating ad banners, for example) includes a class name or id that you are already using for a different purpose. to ensure this doesn't happen, you need to research the tools you are using first and design your code around them. it is also worth "namespacing" css, e.g. if you have a widget, make sure it has a distinct class, and then start the selectors that select elements...
...t as expected in any browser, you'll just need to troubleshoot and work out what is wrong with your selector. we find that it is helpful to inspect the element you are trying to style using your browser's dev tools, then look at the dom tree breadcrumb trail that dom inspectors tend to provide to see if your selector makes sense compared to it. for example, in the firefox dev tools, you get this kind of output at the bottom of the dom inspector: if for example you were trying to use this selector, you'd be able to see that it wouldn't select the input element as desired: form > #date (the date form input isn't directly inside the <form>; you'd be better off using a general descendant selector instead of a child selector). however, another issue that appears in versions of ie older than ...

Introduction to cross browser testing - Learn web development
that are no longer being developed, which may have been frozen (i.e. no more new work done on them) a long time before a new feature was even invented. as an example, if you want to use cutting edge javascript features in your site, they might not work in older browsers. if you need to support older browsers, you might have to not use those, or convert your code to old fashioned syntax using some kind of cross-compiler where needed. some devices may have constraints that cause a web site to run slowly, or display badly. for example, if a site has been designed to look nice on a desktop pc, it will probably look tiny and be hard to read on a mobile device. if your site includes a load of big animations, it might be ok on a high spec tablet, but might be sluggish or jerky on a low end device. ...
...n successfully (like for example, a map displaying), displaying the results once the tests are completed take a screenshot of each, allowing you to see if a layout is consistent across the different browsers. you can also go further than this, if wished. there are commercial tools available such as sauce labs, browser stack, endtest, lambdatest, testingbot, and crossbrowsertesting that do this kind of thing for you, without you having to worry about the setup, if you wish to invest some money in your testing. it is also possible to set up an environment that automatically runs tests for you, and then only lets you check in your changes to the central code repository if the tests still pass. testing on prerelease browsers it is often a good idea to test on prerelease versions of browsers; ...

Setting up your own test automation environment - Learn web development
(see username and access keys). replace the your-user-name and your-access-key placeholders in the code with your actual user name and access key values (and make sure you keep them secure). run your test with the following command: node bstack_google_test the test will be sent to browserstack, and the test result will be returned to your console. this shows the importance of including some kind of result reporting mechanism! now if you go back to the browserstack automation dashboard page, you'll see your test listed: if you click on the link for your test, you'll get to a new screen where you will be able to see a video recording of the test, and multiple detailed logs of information pertaining to it. note: the resources menu option on the browserstack automation dashboard cont...
... get your user name and access key. replace the your-user-name and your-access-key placeholders in the code with your actual user name and access key values (and make sure you keep them secure). run your test with the following command: node sauce_google_test the test will be sent to sauce labs, and the test result will be returned to your console. this shows the importance of including some kind of result reporting mechanism! now if you go to your sauce labs automated test dashboard page, you'll see your test listed; from here you'll be able to see videos, screenshots, and other such data. note: sauce labs' platform configurator is a useful tool for generating capability objects to feed to your driver instances, based on what browser/os you want to test on. note: for more usefu...

Git and GitHub - Learn web development
the most popular vcs (at least among web developers) is git, along with github, a site that provides hosting for your repositories and several tools for working with them. this module aims to teach you what you need to know about both of them. ...
...teach you what you need to know about both of them. overview vcses are essential for software development: it is rare that you will work on a project completely on your own, and as soon as you start working with other people you start to run the risk of conflicting with each other's work — this is when both of you try to update the same piece of code at the same time. you need to have some kind of mechanism in place to manage the occurences, and help avoid loss of work as a result. when working on a project on your own or with others, you'll want to be able to back up the code in a central place, so it is not lost if your computer breaks. you will also want to be able to roll back to earlier versions if a problem is later discovered. you might have started doing this in your own work ...

Package management basics - Learn web development
possible to help reduce the time it takes to get your software downloaded and displayed in your visitors’ browser. in addition, what happens if you find a better tool that you want to use instead of the current one, or a new version of your dependency is released that you want to update to? this is not too painful for a couple of dependencies, but in larger projects with many dependencies this kind of thing can become really challenging to keep track of. it makes more sense to use a package manager such as npm, as this will guarantee that the code is added and removed cleanly, as well as a host of other advantages. what exactly is a package manager? we've met npm already, but stepping back from npm itself, a package manager is a system that will manage your project dependencies. the pack...
... (and yarn) commands are clever in that they will search for command line tools that are locally installed to the project before trying to find them through conventional methods (where your computer will normally store and allow software to be found). you can learn more about the technical intricacies of the run command, although in most cases your own scripts will run just fine. you can add all kinds of things to the scripts property that help you do your job. we certainly have, and others have too. summary this brings us to the end of our tour of package managers. our next move is to build up a sample toolchain, putting all that we've learnt so far into practice. previous overview: understanding client-side tools next ...

Tools and testing - Learn web development
as your web projects become larger and more complex, you'll want to start taking advantage of some of these tools, working out a reliable toolchain to give your development process superpowers. ...
...y modern companies use frameworks as a standard part of their tooling, so many front-end development jobs now require framework experience. this module gives you some fundamental background knowledge about how client-side frameworks work and how they fit into your toolset, before moving on to tutorial series covering some of today's most popular ones. git and github all developers will use some kind of version control system (vcs), a tool to allow them to collaborate with other developers on a project without danger of them overwriting each other's work, and roll back to previous versions of the code base if a problem is discovered later on. the most popular vcs (at least among web developers) is git, along with github, a site that provides hosting for your repositories and several tools for...

Mozilla accessibility architecture
sun microsystems, the maintainers of mozilla's atk support, believe the atk is rich enough to provide everything the assistive technologies on their platform will need. accessibility api module directory structure general rules for the directory structure: interfaces, both internally-used cross-platform and toolkit-specific interfaces exist in accessible/public. the implementations for each kind of object (document, text, table, edit box, button, etc.) exist in accessible/src. code and interfaces for specific toolkits should go in the appropriate directoy. toolkit specific implementations should have "wrap" appended to the class name. for example, document specific code for each toolkit goes in nsdocaccessiblewrap: public nsdocaccessible. directory purpose ...
...cessible implementations where we want to be sure to avoid children. returning nothing for leaf and text objects also helps speed up tree construction and traversal. 4. accessible events accessible events are dom events translated into the event mechanism of the given platform, using the enumerated event numbers listed in nsiaccessibleeventreceiver.idl. the accessibility client can find out what kind of event occurred as well as what accessible node the event occured on. table of gecko event to accessible event translation accessible documents listen for dom events on nodes within them, and consequently fire the appropriate accessible event. this happens in the handleevent() method. note: this chart is not complete, consult the handleevent() method to see the rest. gecko event...

Gecko info for Windows accessibility vendors
ucts is msaa (microsoft active accessibility), external readonly dom support, and the keyboard api/user interface. definitions here are some basic definitions that you'll need for this document to make sense: gecko: the rendering engine for firefox, thunderbird, nvu, mozilla seamonkey and other applications. gecko is the internal engine that mozilla uses to render any kind of web content. it supports html, xhtml, cascading style sheets (css) and the document object model (dom). microsoft active accessibility (msaa) an api devised by microsoft so that accessibility aids can track what's going on inside the user interface of any software package that supports it. if you seriously need to understand msaa, you'll need to read the docs on msdn and ...
...it's also used in the root pane object to show when the state_busy flag changes from loading new content. event_scrollingend is used to indicate when a document has scrolled, even if only 1 line. gecko fires this event when the scrolling is finished, rather than fire exces...

Accessible Toolkit Checklist
fiers and voice dictation software to understand your software. provide theme compatibility with the operating system, at least as an option. some low vision users will be running your software with high contrast or large font themes. go beyond section 508. implement true usability for everyone, and make your toolkit follow the guidelines for each platform. the approaches there are two basic kinds of toolkits, which each provide different challenges when implementing accessibility: native widget toolkits , like eclipse and wxwidgets, already have some accessibility built-in. these toolkits wrap the widgets implemented by the os with a consistent api for each platform. since the individual widgets predominately come from the operating system, they already implement stand...
...oolkits need to have accessibility implemented from the ground up, and get nothing for free in terms of keyboard, api or os-theme support. in this case, adding a complete or even a partial accessibility solution is major work, and will require more than one full time person as well as cooperation from windows assistive technology vendors when parts of your msaa solution isn't working. often these kinds of toolkits don't use a separate window for each control; in that case remember to generate a unique 32 bit child id for each control so that the msaa event system can call back for the right iaccessible for each event. the checklist this checklist is currently only for microsoft windows, but should be expanded to include information about linux and os x. it is maintained by the mozilla accessi...

SVG Guidelines
typical "created with editor" comments non-standard editor specific tags and attributes (sketch:foo, illustrator:foo, sopodi:foo, …) the xml namespace definition that comes with the latter (xmlns:sketch, xmlns:sopodi, …) other metadata in addition to non-standard editor metadata, standard compliant metadata also exists. typical examples of this are <title> and <desc> tags. although this kind of data is supported by the browser, it can only be displayed when the svg is opened in a new tab. plus, in most of the cases, the filename is quite descriptive so it's recommended to remove that kind of metadata since it doesn't bring much value. you shouldn't include doctypes in your svgs either; they are a source of many issues, and the svg wg recommends not to include them. see svg authoring...
... issues, and the svg wg recommends not to include them. see svg authoring guidelines. avoid the use of cdata sections cdata sections are used to avoid parsing some text as html. most of time, cdata isn't needed, for example, the content in <style> tags doesn't need to be wrapped in a cdata section as the content inside the tag is already correctly parsed as css. invisible shapes there are two kinds of invisible shapes: the off-screen ones and the uncolored ones. the offscreen shapes are hard to spot, even with an automated tool, and are usually context aware. those kinds of shapes are visible but off the svg view box. here's an example of a file with offscreen shapes. on the other hand, the uncolored ones are easier to spot, since they usually come with styles making them invisible. they...

Limitations of chrome scripts
work properly you can see all the places where your add-on uses compatibility shims by setting the dom.ipc.shims.enabledwarnings preference and watching the browser console as you use the add-on. the rest of this page documents patterns that don't work in multiprocess firefox as well as how are shims try to paper over the problem. for each pattern we've noted: whether a shim exists and what kind of behavior it provides how to update your add-on so you don't need the shim gbrowser.contentwindow, window.content... without the shim all apis in the chrome process that provide direct access to content objects will no longer work. for example: // chrome code gbrowser.contentwindow; // null gbrowser.contentdocument; // null gbrowser.selectedbrowser.c...
...rate script, load that script into the content process as a frame script, and communicate between the chrome script and the frame script using the message-passing apis. see the article on using the message manager. limitations of cpows cross process object wrappers (cpows) are a migration aid giving chrome code synchronous access to content objects. however, there are various limitations on the kinds of things you can do with a cpow. note that from firefox 47 onwards, unsafe cpow usage is no longer permitted in browser code. if browser code tries an unsafe cpow operation, the browser will throw an exception and you'll see an "unsafe cpow usage forbidden” error in the browser console. add-on code is still allowed to use cpows "unsafely". however, if an add-on passes a cpow into a platfor...

Script security
t's properties: functionally, it's as if the target is in the caller's compartment. cross-origin if the two compartments are cross-origin, the caller gets a cross-origin wrapper. this denies access to all the object's properties, except for a few properties of window and location objects, as defined by the same-origin policy. privileged to unprivileged code the most obvious example of this kind of security relation is between system-privileged chrome code and untrusted web content, but there are other examples in gecko. the add-on sdk runs content scripts in sandboxes, which are initialized with an expanded principal, giving them elevated privileges with respect to the web content they operate on, but reduced privileges with respect to chrome. if the caller has a higher privilege than ...
.... (this is what is used when html5 and other specs say "origin is a globally unique identifier".) principal relationships the diagram below summarizes the relationships between the different principals. the arrow connecting principals a and b means "a subsumes b". (a is the start of the arrow, and b is the end.) computing a wrapper the following diagram shows the factors that determine the kind of wrapper that compartment a would get when trying to access an object in compartment b. ...

Extending a Protocol
ok, let's ./mach build and make sure everything is compiling ok. once it's compiled, ./mach run and you should be able to spin up the developer console and type: navigator.echo("hi!"); that will return a pending promise that never settles. our goal is now to get that to settle with the value we sent in. ipdl basics while you are compiling, let's cover some ipdl basics. in ipdl there two kinds of "actors" - a "parent" and "child" - these actors are literally implemented as c++ classes, so they are more than just abstract ideas. usually, a child wants to send messages to the parent to do something off main thread for us. and we generally want the parent to let a child know when some work is done - and send some confirmation or result data back to the child. sometimes, the parent will...
...ill respond with the message we sent. as a heirarchy, this will look like this: this means that, pwindowglobal.ipdl: manages: meaning that pwindowglobal.ipdl is responsible managing the creation of instances of pecho children and the parent. and the inverse is also true, as you will soon see: pecho.idpl will need explicitly state that pwindowglobal.ipdl is managing it. includes: this is kinda like "#includes" in c++, except it's not a preprocessor directive. it just includes the defintion and makes it available to pwindowglobal.ipdl. constructs: by which we mean, pwindowglobal is in charge of contructing the parent/child relationship. without this, we can't send messages. anyway, let's put the above into practice by creating our custom protocol: pecho.ipdl. custom protocol - p...

Investigating leaks using DMD heap scan mode
rom, as that is where our leak really is. figure out what is holding the leaking object alive. now we need to use the dmd heap scan logs. these contain the contents of every live block of memory. the first step to using the dmd heap scan logs is to do some pre-processing for the dmd log. stacks need to be symbolicated, and we need to clamp the values contained in the heap. ...
... memory. the first step to using the dmd heap scan logs is to do some pre-processing for the dmd log. stacks need to be symbolicated, and we need to clamp the values contained in the heap. clamping is the same kind of analysis that a conservative gc does: if a word-aligned value in a heap block points to somewhere within another heap block, replace that value with the address of the block. both kinds of preprocessing are done by the dmd.py script, which can be invoked like this: $objdir/dist/bin/dmd.py --clamp-contents dmd-$pid.log.gz this can take a few minutes due to symbolification, but you only need to run it once on a log file. after that is done, we can finally find out which objects (possibly) point to other objects, using the block_analyzer script: python $srcdir/memory/replace/d...

Gecko Profiler FAQ
ation on the impact of cache line sharing across multiple cores on jemalloc’s multi-core performance in https://bugzilla.mozilla.org/show_bug.cgi?id=1291355#c26. what's the best way to measure the cost of new compiler flags (that affect all or most functions)? [ehsan] this is similar to the previous question to some extent, but the specific answer really depends on what kind of compiler flag we’re talking about and what performance impact we’re interested to study. but the short answer is picking up real browser workloads, and finding ways to split out the overall cost contributed by the thing that your change is going to affect and compare things before and after. [mstange] this question is more about benchmarking than about profiling. if you want t...
... i there an equivalent to itimer_prof vs itimer_real settings? (itimer_prof interrupts every n ms regardless of which thread used the time, real interrupts every nms of wall-clock time) the gecko profiler does not know which thread is used at which time. it interrupts all threads based on wall-clock time. [jesup] ok, that's the equivalent to itimer_real, kinda, except that per the previous question it doesn't interrupt every thread at once and snapshot the thread you started the itimer on, it interrupts each thread one at a time, which likely means distortion of the measurement if the number of threads monitored is significant (especially at high sample rates). a cleaner snapshot would stop all threads, walk all their stacks, and then resume all thre...

Memory reporting
a unitless count or percentage); a description of what is measured. see the nsimemoryreporter documentation and nsimemoryreporter.idl for full details. making measurements nsimemoryreporter provides the high-level interface for a memory reporter, but the heart of a memory reporter is the measurement of the "amount". two ways to measure memory reporters can be divided into the two following kinds. traversal-based reporters traverse one or more data structures and measure the size of all the allocated blocks in the data structure. counter-based reporters maintain a counter that is incremented on each relevant allocation and decremented on each relevant deallocation. traversal-based reporters are preferable, for the following reasons. they are less error-prone. we've had multiple ...
...class mystringreporter moz_final : public nsimemoryreporter { moz_define_malloc_size_of(mallocsizeof) public: ns_decl_isupports ns_method collectreports(nsihandlereportcallback* ahandlereport, nsisupports* adata) { // btw: if gmystring wasn't a pointer, you'd use // |gmystring.sizeofexcludingthis(mallocsizeof)| instead. return moz_collect_report( "explicit/mystring", kind_heap, units_bytes, gmystring->sizeofincludingthis(mallocsizeof), "memory used for mystring."); } }; ns_impl_isupports1(mystringreporter, nsimemoryreporter) note that moz_define_malloc_size_of defines a function of type mozilla::mallocsizeof that is specific to this memory reporter (and will be identified as such in dmd's output). and moz_collect_report is a macro that makes things...

Performance
siest-to-use tool for measuring memory usage in mozilla code, and is the best place to start. it also lets you do other memory-related operations like trigger gc and cc, dump gc & cc logs, and dump dmd reports. about:memory is built on top of firefox's memory reporting infrastructure. dmd dmd is a tool that identifies shortcomings in about:memory's measurements, and can also do multiple kinds of general heap profiling. are we slim yet areweslimyet.com (a.k.a. awsy) is a memory usage and regression tracker. bloatview bloatview prints per-class statistics on allocations and refcounts, and provides gross numbers on the amount of memory being leaked broken down by class. it is used as part of mozilla's continuous integration testing. refcount tracing and balancin...
... jobs. apple tools apple provides some tools for mac os x that report similar problems to those reported by lsan and valgrind. the "leaks" tool is not recommended for use with spidermonkey or firefox, because it gets confused by tagged pointers and thinks objects have leaked when they have not (see bug 390944). leak gauge leak gauge is a tool that can be used to detect certain kinds of leaks in gecko, including those involving documents, window objects, and docshells. logalloc logalloc is a tool that dumps a log of memory allocations in gecko. that log can then be replayed against firefox's default memory allocator independently or through another replace-malloc library, allowing the testing of other allocators under the exact same workload. memory profiler ...

I/O Types
nterpretation for seek functions directory type prdir file descriptor types nspr represents i/o objects, such as open files and sockets, by file descriptors of type prfiledesc. this section introduces prfiledesc and related types. ...
... nspr supports the implementation of layered i/o. each layer is represented by a prfiledesc structure, and the prfiledesc structures for the layers are chained together. ...

NSS API Guidelines
the structures being freed are opaque. dup, copy, and reference functions functions that return a new reference or copy of a given object should have the form layer_dupdatatype(). for instance, cert_dupcertifiate() will remain the same, but pk11_referenceslot() will become pk11_dupslot(), and pk11_clonecontext() will become pk11_dupcontext(). ...
...these functions operate on a variety of levels. some return allocated arrays of data, some return linked lists of data, others use callbacks to return data elements one at a time. unfortunately, there are good reasons to maintain all these types. ...

PKCS11 FAQ
tations of these functions, and nss uses those versions under certain conditions. however, these are not the services nss calls to get to other pkcs #11 modules, which show up separately under cryptographic modules. our plugin provides several slots with different capabilities. for example, one does all the hashing/symmetric operations, while another does only asymmetric rsa operations. can this kind of division lead to problems? the only issue is dealing with keys. for example, if the rsa slot unwraps a key, nss needs to move that key to a slot that can do the symmetric operations. nss itself uses two tokens internally--one that provides generic cryptographic services without authentication, and one that provides operations based on the keys stored in the user's database and do need authent...
...ts tokens for the private key that matches that certificate. the certificate is then written to the token where that private key resides, and the certificate's cka_id is set to match the private key. why does firefox require users to authenticate themselves by entering a pin at the keyboard? why not use a pin pad or a fingerprint reader located on the token or reader? pkcs #11 defines how these kinds of devices work. there is an outstanding bug in firefox to implement this support. ...

Python binding for NSS
down_context now called from initcontext destructor, this assures the context is shutdown even if the programmer forgot to. it's still best to explicitly shut it down, this is just failsafe. support was added for shutdown callbacks. ...
...s for strerror) certverifyerror derived from nsprerror, extends with: usages (bitmask of returned usages) log (certverifylog object) expose error lookup to sibling modules use macros for bitmask_to_list functions to reduce code duplication and centralize logic. add repr_kind parameter to cert_trust_flags_str() add support for repr_kind asenumname to bitstring table lookup. add cert_type_bitstr_to_tuple() lookup function add prtimeconvert(), used to convert python time values to prtime, centralizes conversion logic, reduces duplication add utf8ornoneconvert to better handle unicode parameters whic...

sslfnc.html
u typically call this in response to changes in user-controlled settings. you must call this function once for each cipher you want to enable or disable. to enable or disable cipher suites for an individual socket, use ssl_cipherprefset. the set of available ssl cipher suites may grow from release to release of nss. applications will find it desirable to determine, at run time, what ssl2 cipher kinds and ssl3 cipher suites are actually implememted in a particular release. applications may disable any cipher suites that they don't know about (for example, that they cannot present to the user via a gui). to that end, nss provides a table that can be examined at run time. all aspects of this table are declared in ssl.h. ssl_implementedciphers[] is an external array of unsigned 16-bit integers...
... implememted in a particular release. applications may disable any cipher suites that they don't know about (for example, that they cannot present to the user via a gui). to that end, nss provides a table that can be examined at run time. all aspects of this table are declared in ssl.h. ssl_implementedciphers[] is an external array of unsigned 16-bit integers whose values are either ssl2 cipher kinds or ssl3 cipher suites. the values are the same as the values used to enable or disable a cipher suite via calls to ssl_cipherprefsetdefault, and are defined in sslproto.h. the number of values in the table is contained in an external 16-bit integer named ssl_numimplementedciphers. the macro ssl_is_ssl2_cipher can be used to determine whether a particular value is an ssl2 or an ssl3 cipher. war...

NSS tools : signtool
important operations: * confirm the identity of the individual, company, or other entity whose digital signature is associated with the files * check whether the files have been tampered with since being signed if you have a signing certificate, you can use netscape signing tool to digitally sign files and package them as a jar file. an object-signing certificate is a special kind of certificate that allows you to associate your digital signature with one or more files. an individual file can potentially be signed with multiple digital signatures. for example, a commercial software developer might sign the files that constitute a software product to prove that the files are indeed from a particular company. a network administrator manager might sign the ...
...u must have an object-signing certificate, which is a special certificate whose associated private key is used to create digital signatures. for testing purposes only, you can create an object-signing certificate with netscape signing tool 1.3. when testing is finished and you are ready to disitribute your software, you should obtain an object-signing certificate from one of two kinds of sources: * an independent certificate authority (ca) that authenticates your identity and charges you a fee. you typically get a certificate from an independent ca if you want to sign software that will be distributed over the internet. * ca server software running on your corporate intranet or extranet. netscape certificate management system provides a complete management...

Garbage collection
c work is performed on helper threads. principal data structures cell a cell is the unit of memory that is allocated and collected by the gc, as used externally. in other words, from the point of view of the rest of the engine, the job of the gc is to allocate cells and automatically collect them. cell is the base class for all classes that are allocated by the gc, e.g., jsobject. allocation kind cells are classified by allocation kind. the allocation kind determines the size of the object and the finalization behavior. allocation kind is defined by enum allockind. arenas always hold objects of the same allocation kind. thus, an arena holds objects all of the same size and finalization behavior. compartments the js heap is partitioned into compartments. some key properties of compartm...
...t chunkinfo::freearenashead and linked through arenaheader::next. the chunkinfo also contains some basic stats, such as the number of free arenas. arena an arena is an internal unit of memory allocation. an arena is one page (4096 bytes on almost all platforms) and contains an arenaheader, a few pad bytes, and then an array of aligned elements. all elements in an arena have the same allocation kind and size. every arena maintains a list of free spans, starting at arenaheader::firstfreespanoffets. the last cell in each free span (except the last one) holds a freespan for the next free span. free span struct freespan represents a contiguous sequence of free cells [first,last] within an arena. freespan contains functions to allocate from the free span. mark bitmap the mark bitmap is repre...

Property cache
points to the js::shape that describes the property in question. this is the default type of vword generated when neither of the two special cases below applies. a cache hit of this type saves a property lookup, but the interpreter still has to examine vword.toshape() to determine what to do next. vword.isslot() the property has a slot which the interpreter can read directly. this special kind of entry is used only for jof_get instructions and only when the property has a stub getter and has a slot (i.e. it is not jsprop_shared). the slot index is vword.toslot(). vword.isobject() the property has a stub getter and its value is vword.toobject(). this special kind of entry is used only for jof_call instructions and only when the result is a function. it helps the jit avoid extra ...
...ry of this type is created, the scope of the object that contains the property is branded. the "branded scope guarantee" documented above ensures that any changes to function-valued own properties of that object will bump its shape, conservatively invalidating all property cache entries of this type for that object (and jit code that might inline a call to the function). the jit uses a fourth kind of pcval, having pcval.isnull(), internally to indicate that a property lookup missed entirely. but property cache entries are never populated such that .vword.isnull(). to do treat cache invalidation systematically. does the global object always have a unique shape? a branded scope? explain bug 554955. ...

Redis Tips
s for redis data types you may have heard of redis referred to as a nosql database. technically, this is true: it's a database that doesn't use sql. but the statement is meaningless. it is also true that ice cream is a food that isn't made from whale meat. ...
...om whale meat. but obviously, calling ice cream a nowhale food doesn't give you any sense of how good the ice cream is, or what sets it apart from other kinds of food that aren't made from whale meat but that are also very unlike ice cream -- it just gives the whaling industry a way to lump together people who don't use their products. so rather than thinking about redis as a database with some kind of non-existent relationship to sql, think of it as a data structure server with a rich set of commands for querying and manipulating those data structures over a network connection. redis data types include: strings hashes lists sets ordered sets (called zsets in redis) transactions publishers and subscribers this table lists some common programming tasks and data structures, and sug...

Creating the Component Code
at it supports. note that whatever you do in registerself should be undone in unregisterself. first, the nsgetmodule entry point is called in your component library, and it returns an interface pointer to a nsimodule implementation. then xpcom calls registerself, passing parameters that we'll examine here. the registerself method the first parameter is the nsicomponentmanager, which provides a kind of entry point into managing the registration process. you can queryinterface it in order to obtain access to the other component management interfaces described below. the many faces of the xpcom component manager the three core component management interfaces, nsicomponentmanager, nsiservicemanager, and nsicomponentregistrar, are described below: nsicomponentmanager - creates objects and ...
...eter, which is opaque and should not be modified, distinguishes components that are loaded from the same location specified by the nsifile parameter. a single zip archive may store several xpcom components, where every component in the archive has the same nsifile parameter but the aloaderstr parameter can be used to refer to the location within the zip archive. the last parameter specifies what kind of loader to use on the component. this is reserved as an optimization, for the most part, but it can be a useful way to extend xpcom. since xpcom already knows internally what kind of file it has just loaded and called registerself on, passing this value to the registration methods is a shortcut for determining what kind of component is being registered. nsicomponentregistrar methods to tell x...

Finishing the Component
the nsiuri interface (and perhaps other interfaces as well). currently, the weblock implementation of the shouldload method compares the in parameter with each string in the white list. but it only should do this comparison for remote urls, because we don't want to block the application from loading local content that it requires, like files it gets via the resource:// protocol. if uris of this kind are blocked, then gecko will not be able to start up, so we'll restrict the content policy to the http and ftp protocols. instead of extracting the string spec out of the nsiuri to do a string comparison, which would require you to do the parsing yourself, you can compare the nsiuri objects with each other, as in the following section. this ensures that the urls are canonical before they are com...
...cts with each other, as in the following section. this ensures that the urls are canonical before they are compared. checking the white list the weblock implementation of the shouldload method starts by extracting the scheme of the incoming nsiuri. if the scheme isn't "http", "https", or "ftp", it immediately returns true, which continues the loading process unblocked. these three are the only kinds of uri that weblock will try to block. when it has one, it walks the linked list and creates a new nsiuri object for each string url in the list. from each object, shouldload() extracts the host and compares it to the uri. if they match, the component allows the load to continue by returning true. if these two strings do not match, then the component returns return false and blocks the load. u...

Starting WebLock
he weblock component. file interface hierarchy remote files and nsifile it is not inconceivable for remote files to be represented by the nsifile interface. someone could write an nsifile implementation that represented ftp files on some server. the existing code would need to change very little for a weblock implementation to take advantage of files that do not actually exist on disk. this kind of implementation does not exist, but this expandability shows some of the flexibility that interface-based programming can provide. the xpcom api reference contains detailed information on nsifile and other xpcom interfaces. the directory service the file interfaces are most useful when you can use them to find and manipulate files that are relative to the application. the directory service ...
...nt manages a simple linked list of url strings. a linear search through the data in the white list may not be terribly bad if the number of urls is under a couple of dozen, but it decays as the list grows. there's also a large bottleneck in the network request. url data is accessed as in the diagram below: you might construct hash values for each of the url strings instead, or add them to some kind of database. but we leave optimizations and real-world performance for web locking to the reader. iweblock method by method the implementation of the iweblock interface is straightforward. weblock is designed so that the user interface notifies this service when we should go into lock mode. during this time, any new url request that is not in our list of "good" urls will be denied. through scr...

Mozilla internal string guide
hich are used to manage buffers of wide (16-bit) and narrow (8-bit) character strings. the headers and implementation are in the xpcom/string directory. all strings are stored as a single contiguous buffer of characters. the 8-bit and 16-bit string classes have completely separate base classes, but share the same apis. as a result, you cannot assign a 8-bit string to a 16-bit string without some kind of conversion helper class or routine. for the purpose of this document, we will refer to the 16-bit string classes in class documentation. every 16-bit class has an equivalent 8-bit class: naming convention for wide and narrow string classes wide narrow nsastring nsacstring nsstring nscstring nsautostring nsautocstring etc... the ...
...is capable of representing the entire unicode character repertoire, and it efficiently maps to utf-32. (win32 w apis and mac os x natively use utf-16.) latin1 - 8-bit encoding for the first 256 unicode code points. used for http headers and for size-optimized storage in text node and spidermonkey strings. latin1 converts to utf-16 by zero-extending each byte to a 16-bit code unit. note that this kind of "latin1" is not available for encoding html, css, js, etc. specifying charset=latin1 means the same as charset=windows-1252. windows-1252 is a similar but different encoding used for interchange. in addition, there exist multiple other (legacy) encodings. the web-relevant ones are defined in the encoding standard. conversions from these encodings to utf-8 and utf-16 are provided by mozilla::...

nsIMemoryMultiReporterCallback
xpcom/base/nsimemoryreporter.idlscriptable implement this interface to handle callbacks from nsimemorymultireporter instances. ...
...4) method overview void callback(in acstring process, in autf8string path, in print32 kind, in print32 units, in print64 amount, in autf8string description, in nsisupports closure); methods callback() called to provide information from a multi-reporter. implement this method to handle the report information. void callback( in acstring process, in autf8string path, in print32 kind, in print32 units, in print64 amount, in autf8string description, in nsisupports closure ); parameters process the value of the process attribute for the memory reporter. path the value of the path attribute. kind the value of the kind attribute. units the value of the units attribute. amount the value of the amount attribute. description ...

nsIScriptError
sible for providing that line. you may pass null if you are lazy; that will prevent showing the source line in javascript console. linenumber the number of the line where the error occurred. columnnumber the column number where the error occurred. this is used to draw an arrow pointing to the problem character. flags one of flags listed in flag constants. category a string indicating what kind of code caused the message. there are quite a few category strings and they don't seem to be listed in a single place. see categories for a partial list. initwithwindowid() initializes the nsiscripterror object with the given inner window's id. note: prior to gecko 12.0, this method was provided by the nsiscripterror2 interface, which has now been merged into this one. void initwithwindowi...
...sible for providing that line. you may pass null if you are lazy; that will prevent showing the source line in javascript console. linenumber the number of the line where the error occurred. columnnumber the column number where the error occurred. this is used to draw an arrow pointing to the problem character. flags one of the script error flag constants category a string indicating what kind of code caused the message. there are quite a few category strings and they aren't listed in a single place, so you may need to search the firefox code to find the one you want. see categories for a partial list. innerwindowid the id of the inner window associated with the error. tostring() outputs a string representing the error message described by the object. autf8string tostring(); pa...

Weak reference
y after the first interesting event, even. but in this design, by hitching its life to the observable, it is kept on life-support long past any need or use. what is actually needed in this case, is either out-of-band signaling, where when the observer wants to go away, it unregisters itself from the observable, which then releases its owning reference, allowing the observer to die, or else a new kind of reference. this document describes an implementation ofweak references. a weak reference does not hold its referent in existence, but also will not dangle. when the referent is destroyed, the weak reference automatically becomes nsnull. this technique can significantly simplify certain relationships, and you should consider it when an owning reference is inappropriate, but where a raw pointer ...
....but to use my weak reference, i'll need a (short-lived) owning reference nscomptr<nsifoo> tempfooptr = do_queryreferent(weakptr); if ( tempfooptr ) tempfooptr->somefoomethod(...); // else, the `real' object has gone away } in a real world example, however, you are more likely to be holding a weak reference in a member variable. in the following example, an nsobservable must keep some kind of a reference to each observer, in order to report events. the nsobservable doesn't want to keep the observers alive just to prevent a dangling pointer, however. so, instead of holding an owning reference to an nsiobserver, it holds a weak reference. the weak reference doesn't artificially extend the life of the observer, and yet, it can never dangle. the following assumes that any nsiobserver ...

Zombie compartments
they can be caused by bugs in firefox itself, or by bugs in firefox add-ons. compartments firefox’s javascript memory is segregated into zones and compartments. roughly speaking, all memory used by javascript code that is from a particular origin (i.e. website) goes into its own compartment. firefox’s own javascript code also gets one or more compartments and so do add-on scripts. multiple compartments can share a zone, where a zone keeps track of things that can easily and securely be shared between related compartments such as string data and type information. ...
...is means there can be a delay between a page being closed and its compartments disappearing. explicitly minimizing the memory (a couple of times), i.e. running the garbage collector, with the corresponding about:memory button will help. zombie compartments sometimes, due to bugs in firefox, the add-on sdk and/or add-ons, compartments are created that are never destroyed. these are a particular kind of memory leak, and they cause firefox's memory usage to increase gradually over time, slowing it down and making it more likely to crash. reactive checking if you look at about:memory and you see a compartment for www.foo.com, but you closed your last www.foo.com tab a while ago, there's a good chance you're seeing a zombie compartment. follow these steps to make a more conclusive diagnosis. ...

Debugger - Firefox Developer Tools
where within the javascript system (the “jsruntime”, in spidermonkey terms), thereby escaping the capability-based limits. for this reason, onnewglobalobject is only available to privileged code. function properties of the debugger prototype object the functions described below may only be called with a this value referring to a debugger instance; they may not be used as methods of other kinds of objects. adddebuggee(global) add the global object designated byglobal to the set of global objects this debugger instance is debugging. if the designated global is already a debuggee, this has no effect. return this debugger’s debugger.object instance referring to the designated global. the valueglobal may be any of the following: a global object. an html5 windowp...
...es as debugger.prototype.adddebuggee. adoptdebuggeevalue(value) given a debuggee value value owned by an arbitrary debugger, return an equivalent debuggee value owned by this debugger. if value is a primitive value, return it unchanged. if value is a debugger.object owned by an arbitrary debugger, return an equivalent debugger.object owned by this debugger. otherwise, if value is some other kind of object, and hence not a proper debuggee value, throw a typeerror instead. static methods of the debugger object the functions described below are not called with a this value. iscompilableunit(source) given a string of source code, designated bysource, return false if the string might become a valid javascript statement with the addition of more lines. otherwise return true. the inten...

Debugger-API - Firefox Developer Tools
the debugger interface mozilla’s javascript engine, spidermonkey, provides a debugging interface named debugger which lets javascript code observe and manipulate the execution of other javascript code. both firefox’s built-in developer tools and the firebug add-on use debugger to implement their javascript debuggers. however, debugger is quite general, and can be used to implement other kinds of tools like tracers, coverage analysis, patch-and-continue, and so on. debugger has three essential qualities: it is a source level interface: it operates in terms of the javascript language, not machine language. it operates on javascript objects, stack frames, environments, and code, and presents a consistent interface regardless of whether the debuggee is interpreted, compiled, or optimi...
...to chrome code only. by design, it ought not to introduce security holes, so in principle it could be made available to content as well; but it is hard to justify the security risks of the additional attack surface. the debugger api cannot currently observe self-hosted javascript. this is not inherent in the api’s design, but simply that the self-hosting infrastructure isn’t prepared for the kind of invasions the debugger api can perform. debugger instances and shadow objects debugger reflects every aspect of the debuggee’s state as a javascript value—not just actual javascript values like objects and primitives, but also stack frames, environments, scripts, and compilation units, which are not normally accessible as objects in their own right. here is a javascript program in the p...

Migrating from Firebug - Firefox Developer Tools
st and response times of the network requests. inspect request information both firebug and the firefox devtools' network monitor allow you to inspect the information about a request by clicking on it. the only difference is that firebug shows the information below the request while the network monitor displays it within a side panel. in both tools there are different tabs containing different kinds of information for the selected request. they contain a headers, params, response and cookies panel. a preview of the response is shown within specifically named panels like html. the network monitor has a preview panel for this purpose. it doesn't provide information about the cached data yet (see bug 859051), but provides a security tab in addition to firebug's information and a timings tab sh...
...rk monitor allows to filter by different request properties. storage inspector the cookies panel in firebug displays information related to the cookies created by a page and allows to manipulate the information they store. within the devtools this functionality is located within the storage inspector. in contrast to firebug the storage inspector not only allows to inspect cookies but also other kinds of storages like the local and session storage, the cache and indexeddb databases. inspect cookies all cookies related to a website are listed inside the cookies panel in firebug. inside the devtools, the cookies are grouped by domain under the cookies section within the storage inspector. both show pretty much the same information per cookie, i.e. the name, value, domain, path, expiration dat...

Waterfall - Firefox Developer Tools
e page's html. stack call stack, with links to functions. parse xml time spent parsing the page's xml. stack call stack, with links to functions. recalculate style calculating the computed styles that apply to page elements. restyle hint a string indicating what kind of restyling is needed. the hint may be any of: self subtree latersiblings csstransitions cssanimations svgattranimations styleattribute styleattribute_animations force forcedescendants layout calculating the position and size of page elements. this operation is sometimes called "reflow". paint...
...serializing a message received from the main thread. the markers, and their colors, are the same in the waterfall tool as in the waterfall overview, making is easy to correlate from one to the other. filtering markers you can control which markers are displayed using a button in the toolbar: waterfall patterns exactly what you'll see in the waterfall is very dependent on the kind of thing your site is doing: javascript-heavy sites will have a lot of orange, while visually dynamic sites will have a lot of purple and green. but there are common patterns which can alert you to possible performance problems. rendering waterfall one pattern that you'll often see in the waterfall view is something like this: this is a visualization of the basic algorithm the browser uses t...

BiquadFilterNode - Web APIs
a biquadfilternode always has exactly one input and one output. ...
...filternode.detune read only is an a-rate audioparam representing detuning of the frequency in cents. biquadfilternode.q read only is an a-rate audioparam, a double representing a q factor, or quality factor. biquadfilternode.gain read only is an a-rate audioparam, a double representing the gain used in the current filtering algorithm. biquadfilternode.type is a string value defining the kind of filtering algorithm the node is implementing. the meaning of the different parameters depending of the type of the filter (detune has the same meaning regardless, so isn't listed below) type description frequency q gain lowpass standard second-order resonant lowpass filter with 12db/octave rolloff. frequencies below the cutoff pass throug...

DataTransferItem - Web APIs
datatransferitem.type read only the drag data item's type, typically a mime type. ...
... datatransferitem.type read only the drag data item's type, typically a mime type. ...

DataTransferItemList.DataTransferItem() - Web APIs
xt/plain"); // add some other items to the drag payload datalist.add("<p>... paragraph ...</p>", "text/html"); datalist.add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html data[i].getasstring(function (s){ console.log("... drop: html = " + ...
...^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html data[i].getasstring(function (s){ console.log("... drop: html = " + s); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/uri-list'))) { // drag data item is uri data[i].getasstring(function (s){ console.log("... drop: uri = " + s); }); } } } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } function dragend_handler(ev) { console.log("d...

DataTransferItemList.clear() - Web APIs
plain"); // add some other items to the drag payload datalist.add("<p>... paragraph ...</p>", "text/html"); datalist.add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = event.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html data[i].getasstring(function (s){ console.log("... drop: html = " + ...
...^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html data[i].getasstring(function (s){ console.log("... drop: html = " + s); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/uri-list'))) { // drag data item is uri data[i].getasstring(function (s){ console.log("... drop: uri = " + s); }); } } } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } function dragend_handler(ev) { console.log("d...

DataTransferItemList.length - Web APIs
xt/plain"); // add some other items to the drag payload datalist.add("<p>... paragraph ...</p>", "text/html"); datalist.add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html data[i].getasstring(function (s){ console.log("... drop: html = " + ...
...^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html data[i].getasstring(function (s){ console.log("... drop: html = " + s); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/uri-list'))) { // drag data item is uri data[i].getasstring(function (s){ console.log("... drop: uri = " + s); }); } } } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } function dragend_handler(ev) { console.log("d...

DataTransferItemList.remove() - Web APIs
plain"); // add some other items to the drag payload datalist.add("<p>... paragraph ...</p>", "text/html"); datalist.add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = event.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html data[i].getasstring(function (s){ console.log("... drop: html = " + ...
...^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html data[i].getasstring(function (s){ console.log("... drop: html = " + s); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/uri-list'))) { // drag data item is uri data[i].getasstring(function (s){ console.log("... drop: uri = " + s); }); } } } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } function dragend_handler(ev) { console.log("d...

Cross-global fetch usage - Web APIs
when a cross-origin fetch involving a relative url is initiated from an <iframe>, the relative url used to be resolved against the current global location, rather than the iframe's location. the edge case many sites will never comes up against this edge case. to see it: you need a same-origin iframe that same-origin iframe needs to have a location with a different base url you have to use the fetch function cross-global, e.g. ...
...ation with a different base url you have to use the fetch function cross-global, e.g. frame.contentwindow.fetch() the url passed to fetch needs to be relative the problem in the past we would resolve the relative url against the current global, for example: let absolute = new url(relative, window.location.href) this is not a problem as such. it is just that different apis that exhibit this kind of behavior were doing it inconsistently with the behavior defined in the spec, which could lead to problems further down the line. the solution in firefox 60 onwards, mozilla resolves the relative url against the global that owns the fetch() function being used (see bug 1432272). so in the case described above, it is resolved against the iframe's location: let absolute = new url(relative, fra...

Checking when a deadline is due - Web APIs
me and date information in a format that is both machine readable and human understandable when displayed, and then check whether each time and date is occurring at the current moment. basically, we want to check what the time and date is right now, and then check each stored event to see if any of their deadlines match the current time and date. if they do, we want to let the user know with some kind of notification. this would be easy if we were just comparing two date objects, but of course humans don't want to enter deadline information in the same format javascript understands. human-readable dates are quite different, with a number of different representations. recording the date information to provide a reasonable user experience on mobile devices, and to cut down on ambiguities, i d...
... "no") { // if the numbers all do match, run the createnotification() // function to create a system notification createnotification(cursor.value.tasktitle); } with the current time and date segments that we want to check against the indexeddb stored values all assembled, it is time to perform the checks. we want all the values to match before we show the user some kind of notification to tell them their deadline is up. the + operator in this case converts numbers with leading zeros into their non leading zero equivalents, e.g. 09 -> 9. this is needed because javascript date number values never have leading zeros, but our data might. the notified == "no" check is designed to make sure you will only get one notification per to-do item. when a notification is fi...

Using IndexedDB - Web APIs
well as the methods of the asynchronous api (the synchronous api was removed from spec). basic pattern the basic pattern that indexeddb encourages is the following: open a database. create an object store in the database. start a transaction and make a request to do some database operation, like adding or retrieving data. wait for the operation to complete by listening to the right kind of dom event. do something with the results (which can be found on the request object). with these big concepts under our belts, we can get to more concrete stuff. creating and structuring the store using an experimental version of indexeddb in case you want to test your code in browsers that still use a prefix, you can use the following code: // in the following line, you should ...
...alue is stored in an object store, it is associated with a key. there are several different ways that a key can be supplied depending on whether the object store uses a key path or a key generator. the following table shows the different ways the keys are supplied: key path (keypath) key generator (autoincrement) description no no this object store can hold any kind of value, even primitive values like numbers and strings. you must supply a separate key argument whenever you want to add a new value. yes no this object store can only hold javascript objects. the objects must have a property with the same name as the key path. no yes this object store can hold any kind of value. the key is generated for you automatically, or you c...

IndexedDB API - Web APIs
ddb originally included both synchronous and asynchronous apis. the synchronous api was intended for use only with web workers but was removed from the spec because it was unclear whether it was needed. however, the synchronous api may be reintroduced if there is enough demand from web developers. storage limits and eviction criteria there are a number of web technologies that store data of one kind or another on the client side (i.e. on your local disk). indexeddb is most commonly talked about. the process by which the browser works out how much space to allocate to web data storage and what to delete when that limit is reached is not simple, and differs between browsers. browser storage limits and eviction criteria attempts to explain how this works, at least in the case of firefox. inter...
...he entry point for the api. idbopendbrequest represents a request to open a database. idbdatabase represents a connection to a database. it's the only way to get a transaction on the database. retrieving and modifying data idbtransaction represents a transaction. you create a transaction on a database, specify the scope (such as which object stores you want to access), and determine the kind of access (read only or readwrite) that you want. idbrequest generic interface that handles database requests and provides access to results. idbobjectstore represents an object store that allows access to a set of data in an indexeddb database, looked up via primary key. idbindex also allows access to a subset of data in an indexeddb database, but uses an index to retrieve the record(s) ra...

Intersection Observer API - Web APIs
target element with an ancestor element or with a top-level document's viewport. historically, detecting visibility of an element, or the relative visibility of two elements in relation to each other, has been a difficult task for which solutions have been unreliable and prone to causing the browser and the sites the user is accessing to become sluggish. as the web has matured, the need for this kind of information has grown. intersection information is needed for many reasons, such as: lazy-loading of images or other content as a page is scrolled. implementing "infinite scrolling" web sites, where more and more content is loaded and rendered as you scroll, so that the user doesn't have to flip through pages. reporting of visibility of advertisements in order to calculate ad revenues. d...
...ustrated with the browser, the web site, and their computer. the intersection observer api lets code register a callback function that is executed whenever an element they wish to monitor enters or exits another element (or the viewport), or when the amount by which the two intersect changes by a requested amount. this way, sites no longer need to do anything on the main thread to watch for this kind of element intersection, and the browser is free to optimize the management of intersections as it sees fit. one thing the intersection observer api can't tell you: the exact number of pixels that overlap or specifically which ones they are; however, it covers the much more common use case of "if they intersect by somewhere around n%, i need to do something." intersection observer concepts and ...

MediaDeviceInfo - Web APIs
tion. it is reset when the user clears cookies (for private browsing, a different identifier is used that is not persisted across sessions). mediadeviceinfo.groupidread only returns a domstring that is a group identifier. two devices have the same group identifier if they belong to the same physical device — for example a monitor with both a built-in camera and a microphone. mediadeviceinfo.kindread only returns an enumerated value that is either "videoinput", "audioinput" or "audiooutput". mediadeviceinfo.labelread only returns a domstring that is a label describing this device (for example "external usb webcam"). for security reasons, the label field is always blank unless an active media stream exists or the user has granted persistent permission for media device access. the s...
...ethods none. example here's an example that uses enumeratedevices() to get a list of devices. if (!navigator.mediadevices || !navigator.mediadevices.enumeratedevices) { console.log("enumeratedevices() not supported."); return; } // list cameras and microphones. ...

MediaError - Web APIs
the mediaerror interface represents an error which occurred while handling media in an html media element based on htmlmediaelement, such as <audio> or <video>. a mediaerror object describes the error in general terms using a numeric code categorizing the kind of error, and a message, which provides specific diagnostics about what went wrong. properties this interface doesn't inherit any properties. ...
...ides specific diagnostics about what went wrong. properties this interface doesn't inherit any properties. mediaerror.code a number which represents the general type of error that occurred, as follows: name value description media_err_aborted 1 the fetching of the associated resource was aborted by the user's request. media_err_network 2 some kind of network error occurred which prevented the media from being successfully fetched, despite having previously been available. media_err_decode 3 despite having previously been determined to be usable, an error occurred while trying to decode the media resource, resulting in an error. media_err_src_not_supported 4 the associated resource or media provider object (suc...

MediaStream.getAudioTracks() - Web APIs
the array is empty if the stream contains no audio tracks. ...
...the array is empty if the stream contains no audio tracks. note: the order of the returned tracks is not defined by the specification and may, in fact, change from one call to getaudiotracks() to the next. ...

MediaStream.onremovetrack - Web APIs
this event is fired when the browser removes a track from the stream (such as when a rtcpeerconnection is renegotiated or a stream being captured using htmlmediaelement.capturestream() gets a new set of tracks because the media element being captured loaded a new source. ...
...eamtrack representing the track which was removed is specified in the event's track property. example this example adds a listener which, when a track is removed from the stream, logs the track that was removed. stream.onremovetrack = function(event) { let tracklist = document.getelementbyid("tracks"); let label = document.createelement("li"); label.innerhtml = "removed: " + event.track.kind + ": " + event.track.label; tracklist.appendchild(label); }; specifications specification status comment media capture and streamsthe definition of 'mediastream.onremovetrack' in that specification. candidate recommendation initial specification. ...

MediaStream - Web APIs
addtrack() stores a copy of the mediastreamtrack given as argument. if the track has already been added to the mediastream object, nothing happens. mediastream.clone() returns a clone of the mediastream object. the clone will, however, have a unique value for id. mediastream.getaudiotracks() returns a list of the mediastreamtrack objects stored in the mediastream object that have their kind attribute set to audio. the order is not defined, and may not only vary from one browser to another, but also from one call to another. mediastream.gettrackbyid() returns the track whose id corresponds to the one given in parameters, trackid. if no parameter is given, or if no track with that id does exist, it returns null. if several tracks have the same id, it returns the first one. media...
...her. mediastream.gettrackbyid() returns the track whose id corresponds to the one given in parameters, trackid. if no parameter is given, or if no track with that id does exist, it returns null. if several tracks have the same id, it returns the first one. mediastream.gettracks() returns a list of all mediastreamtrack objects stored in the mediastream object, regardless of the value of the kind attribute. the order is not defined, and may not only vary from one browser to another, but also from one call to another. mediastream.getvideotracks() returns a list of the mediastreamtrack objects stored in the mediastream object that have their kind attribute set to "video". the order is not defined, and may not only vary from one browser to another, but also from one call to another. ...

MediaStreamAudioSourceNode - Web APIs
apture and streams apis. this media could be from a microphone (through getusermedia()) or from a remote peer on a webrtc call (using the rtcpeerconnection's audio tracks). a mediastreamaudiosourcenode has no inputs and exactly one output, and is created using the audiocontext.createmediastreamsource() method. the mediastreamaudiosourcenode takes the audio from the first mediastreamtrack whose kind attribute's value is audio. see track ordering for more information about the order of tracks. the number of channels output by the node matches the number of tracks found in the selected audio track. number of inputs 0 number of outputs 1 channel count defined by the first audio mediastreamtrack passed to the audiocontext.createmediastreamsource() method tha...
...eplaced with the more predictable mediastreamtrackaudiosourcenode, which has better-defined rules for how it chooses the track to output. if you do chooose to use mediastreamaudiosourcenode, you should keep the following in mind. track ordering for the purposes of the mediastreamtrackaudiosourcenode interface, the order of the audio tracks on the stream is determined by taking the tracks whose kind is audio, then sorting the tracks by their id property's values, in unicode code point order (essentially, in alphabetical or lexicographical order, for ids which are simple alphanumeric strings). the first track, then, is the track whose id comes first when the tracks' ids are all sorted by unicode code point. however, it's important to note that the rule establishing this ordering was added l...

MutationObserver.MutationObserver() - Web APIs
the dom mutationobserver() constructor — part of the mutationobserver interface — creates and returns a new observer which invokes a specified callback when dom events occur. dom observation does not begin immediately; the observe() method must be called first to establish which portion of the dom to watch and what kinds of changes to watch for. syntax const observer = new mutationobserver(callback) parameters callback a function which will be called on each dom change that qualifies given the observed node or subtree and options. the callback function takes as input two parameters: an array of mutationrecord objects, describing each change that occurred; and the mutationobserver which invoked the callback. see the example below for more details. return va...
...e value changed on the element in mutation.target. the attribute name is in mutation.attributename, and its previous value is in mutation.oldvalue. */ break; } }); } the callback() function is invoked when the observer sees changes matching the configuration of the observation request specified when calling observe() to begin watching the dom. the kind of change that took place (either a change to the list of children, or a change to an attribute) is detected by looking at the mutation.type property. creating and starting the observer this code actually sets up the observation process. const targetnode = document.queryselector("#someelement"); const observeroptions = { childlist: true, attributes: true, // omit (or set to false) to ob...

Node - Web APIs
node interface is an abstract base class upon which many other dom api objects are based, thus letting those object types to be used similarly and often interchangeably. as an abstract class, there is no such thing as a plain node object. all objects that implement node functionality are based on one of its subclasses. most notable are document, element, and documentfragment. in addition, every kind of dom node is represented by an interface based on node. these include attr, characterdata (which text, comment, and cdatasection are all based on), processinginstruction, documenttype, notation, entity, and entityreference. in some cases, a particular feature of the base node interface may not apply to one of its child interfaces; in that case, the inheriting node may return null or throw an e...
...ing properties: attributes, namespaceuri, prefix, and localname. removed the following methods: issupported(), hasattributes(), getfeature(), setuserdata(), and getuserdata(). document object model (dom) level 3 core specificationthe definition of 'node' in that specification. obsolete the methods insertbefore(), replacechild(), removechild(), and appendchild() returns one more kind of error (not_supported_err) if called on a document. the normalize() method has been modified so that text node can also be normalized if the proper domconfiguration flag is set. added the following methods: comparedocumentposition(), issamenode(), lookupprefix(), isdefaultnamespace(), lookupnamespaceuri(), isequalnode(), getfeature(), setuserdata(), and getuserdata(). added the foll...

PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable() - Web APIs
isuserverifyingplatformauthenticatoravailable() is a static method of the publickeycredential interface that returns a promise which resolves to true if a user-verifying platform authenticator is available. a user-verifying platform authenticator is a kind of multi-factor authenticator that is part of the client device (it is generally not removable) and that involves an action from the user in order to identify them. at the time of this writing, this method's result only resolves to true on windows when windows hello capabilities are available (on recent versions of this os). note: this method may only be used in top-level contexts and will not be available in an <iframe> for example. syntax publickeycredential.isuserverifyingplatformauthenticatoravailable() parameters none. retu...
...e: in earlier versions of the specification, the boolean also conveyed the consent of the user to disclose such an authenticator existed. examples publickeycredential.isuserverifyingplatformauthenticatoravailable() .then(function(available){ if(available){ // we can proceed with the creation of a publickeycredential // with this authenticator } else { // use another kind of authenticator or a classical login/password // workflow } }).catch(function(err){ // something went wrong console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'isuserverifyingplatformauthenticatoravailable' in that specification. recomm...

RTCPeerConnection.addTrack() - Web APIs
may return either a new rtcrtpsender or, under very specific circumstances, an existing compatible sender which has not yet been used to transmit data. compatible reusable rtcrtpsender instances meet these criteria: there is no track already associated with the sender. the rtcrtptransceiver associated with the sender has a rtcrtpreceiver whose track property specifies a mediastreamtrack whose kind is the same as the kind of the track parameter specified when calling rtcpeerconnection.addtrack(). this ensures that a transceiver only handles audio or video and never both. the rtcrtptransceiver's stopped property is false. the rtcrtpsender being considered has never been used to send data. if the transceiver's currentdirection has ever been "sendrecv" or "sendonly", the sender can't be reus...
...one is created. this also results in the creation of the associated objects that must exist. the process of creating a new sender results in these changes: the new rtcrtpsender is created with the specified track and set of stream(s). a new rtcrtpreceiver is created with a new mediastreamtrack as its track property (not the track specified as a parameter when calling addtrack()). this track's kind is set to match the kind of the track provided as an input parameter. a new rtcrtptransceiver is created and associated with the new sender and receiver. the new transceiver's direction is set to "sendrecv". the new transceiver is added to the rtcpeerconnection's set of transceivers. example this example is drawn from the code presented in the article signaling and video calling and its ...

RTCPeerConnection.addTransceiver() - Web APIs
the rtcpeerconnection method addtransceiver() creates a new rtcrtptransceiver and adds it to the set of transceivers associated with the rtcpeerconnection. each transceiver represents a bidirectional stream, with both an rtcrtpsender and an rtcrtpreceiver associated with it. syntax rtptransceiver = rtcpeerconnection.addtransceiver(trackorkind, init); parameters trackorkind a mediastreamtrack to associate with the transceiver, or a domstring which is used as the kind of the receiver's track, and by extension of the rtcrtpreceiver itself. init optional an object that conforms to the rtcrtptransceiverinit dictionary which provides any options that you may wish to specify when creating the new transceiver. possible values are: direction optional the new transceiver's preferred directi...
... list of encodings to allow when sending rtp media from the rtcrtpsender. each entry is of type rtcrtpencodingparameters. streams optional a list of mediastream objects to add to the transceiver'srtcrtpreceiver; when the remote peer's rtcpeerconnection's track event occurs, these are the streams that will be specified by that event. exceptions typeerror a string was specified as trackorkind which is not valid. the string must be either "audio" or "video". specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.addtransceiver()' in that specification. candidate recommendation ...

RTCRtpEncodingParameters - Web APIs
alue is true. codecpayloadtype when describing a codec for an rtcrtpsender, codecpayloadtype is a single 8-bit byte (or octet) specifying the codec to use for sending the stream; the value matches one from the owning rtcrtpparameters object's codecs parameter. this value can only be set when creating the transceiver; after that, this value is read only. dtx only used for an rtcrtpsender whose kind is audio, this property indicates whether or not to use discontinuous transmission (a feature by which a phone is turned off or the microphone muted automatically in the absence of voice activity). the value is taken from the enumerated string type rtcdtxstatus. maxbitrate an unsigned long integer indicating the maximum number of bits per second to allow for this encoding. other parameters may ...
...ant for audio encodings. the user agent will try to match this as well as it can, but there is no guarantee. rid a domstring which, if set, specifies an rtp stream id (rid) to be sent using the rid header extension. this parameter cannot be modified using setparameters(). its value can only be set when the transceiver is first created. scaleresolutiondownby only used for senders whose track's kind is video, this is a double-precision floating-point value specifying a factor by which to scale down the video during encoding. the default value, 1.0, means that the sent video's size will be the same as the original. a value of 2.0 scales the video frames down by a factor of 2 in each dimension, resulting in a video 1/4 the size of the original. the value must not be less than 1.0 (you can't us...

RTCRtpSendParameters.encodings - Web APIs
alue is true. codecpayloadtype when describing a codec for an rtcrtpsender, codecpayloadtype is a single 8-bit byte (or octet) specifying the codec to use for sending the stream; the value matches one from the owning rtcrtpparameters object's codecs parameter. this value can only be set when creating the transceiver; after that, this value is read only. dtx only used for an rtcrtpsender whose kind is audio, this property indicates whether or not to use discontinuous transmission (a feature by which a phone is turned off or the microphone muted automatically in the absence of voice activity). the value is taken from the enumerated string type rtcdtxstatus. maxbitrate an unsigned long integer indicating the maximum number of bits per second to allow for this encoding. other parameters may ...
...ant for audio encodings. the user agent will try to match this as well as it can, but there is no guarantee. rid a domstring which, if set, specifies an rtp stream id (rid) to be sent using the rid header extension. this parameter cannot be modified using setparameters(). its value can only be set when the transceiver is first created. scaleresolutiondownby only used for senders whose track's kind is video, this is a double-precision floating-point value specifying a factor by which to scale down the video during encoding. the default value, 1.0, means that the sent video's size will be the same as the original. a value of 2.0 scales the video frames down by a factor of 2 in each dimension, resulting in a video 1/4 the size of the original. the value must not be less than 1.0 (you can't us...

RTCRtpStreamStats - Web APIs
as implemented in specific browsers. properties the rtcrtpstreamstats dictionary is based on rtcstats, and inherits its properties. in addition, some or all of the following properties are available. standard fields included for all media types codecid a domstring which uniquely identifies the object which was inspected to produce the rtccodecstats object associated with this rtp stream. kind a domstring whose value is "audio" if the associated mediastreamtrack is audio-only or "video" if the track contains video. this value will match that of the media type indicated by rtccodecstats.codec, as well as the track's kind property. previously called mediatype. ssrc the 32-bit integer which identifies the source of the rtp packets this rtcrtpstreamstats object covers. this value is gen...
...0 specification. trackid a domstring which uniquely identifies the rtcmediastreamtrackstats object representing the associated mediastreamtrack. this is not the same as the value of mediastreamtrack.id. transportid a domstring uniquely identifying the object which was inspected to produce the rtctransportstats object associated with this rtp stream. obsolete fields mediatype renamed to kind in the specification in february 2018. see browser compatibility in rtcrtpstreamstats.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 ...

RTCStatsReport - Web APIs
of the remote peers (such as round-trip time) is unavailable, since those values can't be computed without knowing about the other peers' states. peer-connection a rtcpeerconnectionstats object provides statistics related to the overall peer connection's rtcpeerconnection. receiver provides statistics about a specific rtcrtpreceiver. the statistics object is an rtcaudioreceiverstats object if kind is audio; if kind is video, the object is an rtcvideoreceiverstats object. remote-candidate the report is an rtcicecandidatestats object containing statistics about the remote candidate's rtcicetransport. this may include information such as the type of network, the protocol, the url, the type of relay being used, and so forth. remote-inbound-rtp the report is an rtcremoteinboundrtpstreamstat...
...you can use this information to do things like determine how well the remote peer is receiving data. remote-outbound-rtp the report is an rtcremoteoutboundrtpstreamstats object that contains statistics about your inbound rtp (inbound-rtp) stream, but from the perspective of the remote peer. sender an object containing statistics about the rtcrtpsender for a stream on the rtcpeerconnection. if kind is "audio", this object is of type rtcaudiosenderstats; if kind is "video", this is an rtcvideosenderstats object. stream an object of type rtcmediastreamstats, providing statistics and information about a mediastream which is part of the rtcpeerconnection. track the object is one of the types based on rtcmediahandlerstats: for audio tracks, the type is rtcsenderaudiotrackattachmentstats and ...

RTCStatsType - Web APIs
of the remote peers (such as round-trip time) is unavailable, since those values can't be computed without knowing about the other peers' states. peer-connection a rtcpeerconnectionstats object provides statistics related to the overall peer connection's rtcpeerconnection. receiver provides statistics about a specific rtcrtpreceiver. the statistics object is an rtcaudioreceiverstats object if kind is audio; if kind is video, the object is an rtcvideoreceiverstats object. remote-candidate the report is an rtcicecandidatestats object containing statistics about the remote candidate's rtcicetransport. this may include information such as the type of network, the protocol, the url, the type of relay being used, and so forth. remote-inbound-rtp the report is an rtcremoteinboundrtpstreamstat...
...you can use this information to do things like determine how well the remote peer is receiving data. remote-outbound-rtp the report is an rtcremoteoutboundrtpstreamstats object that contains statistics about your inbound rtp (inbound-rtp) stream, but from the perspective of the remote peer. sender an object containing statistics about the rtcrtpsender for a stream on the rtcpeerconnection. if kind is "audio", this object is of type rtcaudiosenderstats; if kind is "video", this is an rtcvideosenderstats object. stream an object of type rtcmediastreamstats, providing statistics and information about a mediastream which is part of the rtcpeerconnection. track the object is one of the types based on rtcmediahandlerstats: for audio tracks, the type is rtcsenderaudiotrackattachmentstats and ...

Resize Observer API - Web APIs
res of the element after a resize using element.getboundingclientrect or window.getcomputedstyle, for example. such a solution tends to only work for limited use cases, be bad for performance (continually calling the above methods would result in a big performance hit), and often won't work when the browser window size is not changed. the resize observer api provides a solution to exactly these kinds of problems, and more besides, allowing you to easily observe and respond to changes in the size of an element’s content or border box in a performant way. it provides a javascript solution to the often-discussed lack of element queries in the web platform. usage is simple, and pretty much the same as other observers, such as performance observer or intersection observer — you create a new ...
...quare corners that scale with the box size. resize-observer-text.html (see source): here we use the resize observer to change the font-size of a header and paragraph as a slider’s value is changed causing the containing <div> to change width. this shows that you can respond to changes in an element’s size, even if they have nothing to do with the viewport. ...

ServiceWorker.onstatechange - Web APIs
ngeevent) { ... } serviceworker.addeventlistener('statechange', function(statechangeevent) { ... } ) examples this code snippet is from the service worker registration-events sample (live demo). the code listens for any change in the serviceworker.state and returns its value. ...
... the service worker registration-events sample (live demo). the code listens for any change in the serviceworker.state and returns its value. var serviceworker; if (registration.installing) { serviceworker = registration.installing; document.queryselector('#kind').textcontent = 'installing'; } else if (registration.waiting) { serviceworker = registration.waiting; document.queryselector('#kind').textcontent = 'waiting'; } else if (registration.active) { serviceworker = registration.active; document.queryselector('#kind').textcontent = 'active'; } if (serviceworker) { logstate(serviceworker.state); serviceworker.addeventlistener('statechange', function(e) { logstate(e.target.state); }); } note that when statechange fires, the service worker's references may have changed. f...

ServiceWorker - Web APIs
demo). the code listens for any change in the serviceworker.state and returns its value. ...
...ervice-worker.js', { scope: './' }).then(function (registration) { var serviceworker; if (registration.installing) { serviceworker = registration.installing; document.queryselector('#kind').textcontent = 'installing'; } else if (registration.waiting) { serviceworker = registration.waiting; document.queryselector('#kind').textcontent = 'waiting'; } else if (registration.active) { serviceworker = registration.active; document.queryselector('#kind').textcontent = 'active'; } if (serviceworker) { // logstate(serviceworker.state); serviceworker.addeventlistener('statechange', function (e) { // logstate(e.target.state); ...

Streams API concepts - Web APIs
sizes and types. the chunks placed in a stream are said to be enqueued — this means they are waiting in a queue ready to be read. an internal queue keeps track of the chunks that have not yet been read (see the internal queues and queuing strategies section below). the chunks inside the stream are read by a reader — this processes the data one chunk at a time, allowing you to do whatever kind of operation you want to do on it. the reader plus the other processing code that goes along with it is called a consumer. there is also a construct you’ll use called a controller — each reader has an associated controller that allows you to control the stream (for example, to cancel it if wished). only one reader can read a stream at a time; when a reader is created and starts reading a st...
... will do when browsers implement the relevant functionality) using a structure called a pipe chain. there are two methods available in the spec to facilitate this: readablestream.pipethrough() — pipes the stream through a transform stream, which is a pair comprised of a writable stream that has data written to it, and a readable stream that then has the data read out of it — this acts as a kind of treadmill that constantly takes data in and transforms it to a new state. effectively the same stream is written to, and then the same values are read. a simple example is a text decoder, where raw bytes are written, and then strings are read. you can find more useful ideas and examples in the spec — see transform streams for ideas, and this web sockets example. readablestream.pipeto() — ...

TrackDefault - Web APIs
a trackdefault object is provided to a sourcebuffer object by setting its sourcebuffer.trackdefaults property. constructor trackdefault() constructs and returns a new trackdefault object. properties trackdefault.type read only returns the type of track that this sourcebuffer's media segment data relates to (i.e. audio, video, or text track.) trackdefault.bytestreamtrackid read only returns the id of the specific track that the sourcebuffer should apply to. ...
...ly returns the id of the specific track that the sourcebuffer should apply to. trackdefault.language read only returns the default language to use when an initialization segment does not contain language information for a new track. trackdefault.label read only returns the default label to use when an initialization segment does not contain label information for a new track. trackdefault.kinds read only returns the default kinds used when an initialization segment does not contain kind information for a new track. ...

TrackEvent - Web APIs
"removetrack", handletrackevent, false); videoelem.audiotracks.addeventlistener("addtrack", handletrackevent, false); videoelem.audiotracks.addeventlistener("removetrack", handletrackevent, false); videoelem.texttracks.addeventlistener("addtrack", handletrackevent, false); videoelem.texttracks.addeventlistener("removetrack", handletrackevent, false); function handletrackevent(event) { var trackkind; if (event.target instanceof(videotracklist)) { trackkind = "video"; } else if (event.target instanceof(audiotracklist)) { trackkind = "audio"; } else if (event.target instanceof(texttracklist)) { trackkind = "text"; } else { trackkind = "unknown"; } switch(event.type) { case "addtrack": console.log("added a " + trackkind + " track"); break; case ...
... trackkind = "video"; } else if (event.target instanceof(audiotracklist)) { trackkind = "audio"; } else if (event.target instanceof(texttracklist)) { trackkind = "text"; } else { trackkind = "unknown"; } switch(event.type) { case "addtrack": console.log("added a " + trackkind + " track"); break; case "removetrack": console.log("removed a " + trackkind + " track"); break; } } the event handler uses the javascript instanceof operator to determine which type of track the event occurred on, then outputs to console a message indicating what kind of track it is and whether it's being added to or removed from the element. specifications specification status comment html living standardthe definition of 'trackevent'...

WebGL2RenderingContext.getActiveUniformBlockName() - Web APIs
return value a domstring indicating the active uniform block name. ...
... return value a domstring indicating the active uniform block name. ...

WebGL2RenderingContext.uniformBlockBinding() - Web APIs
uniformblockbinding a gluint specifying the binding point to which to bind the uniform block. return value none. ...
... uniformblockbinding a gluint specifying the binding point to which to bind the uniform block. return value none. ...

Data in WebGL - Web APIs
attributes attributes are glsl variables which are only available to the vertex shader (as variables) and the javascript code. ...
... attributes attributes are glsl variables which are only available to the vertex shader (as variables) and the javascript code. ...

Web Video Text Tracks Format (WebVTT) - Web APIs
is the second. 3 00:00:34.159 --> 00:00:35.743 third cue timings a cue timing indicates when the cue is shown. it has a start and end time which are represented by timestamps. the end time must be greater than the start time, and the start time must be greater than or equal to all previous start times. cues may have overlapping timings. if the webvtt file is being used for chapters (<track> kind is chapters) then the file cannot have overlapping timings. each cue timing contains five components: timestamp for start time. at least one space. the string "-->". at least one space. timestamp for end time. which must be greater than the start time. the timestamps must be in one of two formats: mm:ss.ttt hh:mm:ss.ttt where the components are defined as follows: hh...
...uence ampersand & &amp; less-than < &lt; greater-than > &gt; left-to-right mark &lrm; right-to-left mark &rlm; non-breaking space &nbsp; cue payload text tags there are a number of tags, such as <bold>, that can be used. however, if the webvtt file is used in a <track> element where the attribute kind is chapters then you cannot use tags. timestamp tag the timestamp must be greater that the cue's start timestamp, greater than any previous timestamp in the cue payload, and less than the cue's end timestamp. the active text is the text between the timestamp and the next timestamp or to the end of the payload if there is not another timestamp in the payload. any text before the active t...

Web Animations API Concepts - Web APIs
animation objects, and animation effect objects working together. by assembling these disparate objects, we can create animations of our own. timeline timeline objects provide the useful property currenttime, which lets us see how long the page has been opened for: it's the "current time" of the document's timeline, which started when the page was opened. as of this writing, there’s only one kind of timeline object: the one based on the active document’s timeline. in the future we may see timeline objects that correspond to the length of the page, perhaps a scrolltimeline, or other things entirely. animation animation objects can be imagined as dvd players: they’re used for controlling media playback, but without media to play, they don’t do anything. animation objects accept medi...
...ame effects, as dvds. keyframe effects are a bundle of information including at the bare minimum a set of keys and the duration they need to be animated over. the animation object takes this information and, using the timeline object, assembles a playable animation we can view and reference. we currently have only one animation effect type available: keyframeeffect. potentially we could have all kinds of animation effects in the future—e.g. effects for grouping and sequencing, not unlike features we had in flash. in fact, group effects and sequence effects have already been outlined in the currently-in-progress level 2 spec of the web animations api. assembling the animation from disparate pieces we can assemble all these pieces together to create a working animation with the animation() ...

ARIA live regions - Accessibility
in the following well-known predefined cases it is better to use a specific provided "live region role": role description compatibility notes log chat, error, game or other type of log to maximize compatibility, add a redundant aria-live="polite" when using this role. status a status bar or area of the screen that provides an updated status of some kind. screen reader users have a special command to read the current status. to maximize compatibility, add a redundant aria-live="polite" when using this role. alert error or warning message that flashes on the screen. alerts are particularly important for client side validation notices to users. (tbd: link to aria form tutorial with aria info) to maximize compatibility, some people...
...ia-live="assertive" when using this role. however, adding both aria-live and role="alert" causes double speaking issues in voiceover on ios. progressbar a hybrid between a widget and a live region. use this with aria-valuemin, aria-valuenow and aria-valuemax. (tbd: add more info here). marquee for text which scrolls, such as a stock ticker. timer or any kind of timer or clock, such as a countdown timer or stopwatch readout. advanced live regions (tbd: more granular information on the support of the individual attributes with combinations of os/browser/at). general support for live regions was added to jaws on version 10.0. in windows eyes supports live regions since version 8.0 "for use outside of browse mode for microsoft internet explo...

ARIA - Accessibility
t state of it and therefore must be kept updated with javascript. along with placing them directly in the markup, aria attributes can be added to the element and updated dynamically using javascript code like this: // find the progress bar <div> in the dom. var progressbar = document.getelementbyid("percent-loaded"); // set its aria roles and states, // so that assistive technologies know what kind of widget it is. progressbar.setattribute("role", "progressbar"); progressbar.setattribute("aria-valuemin", 0); progressbar.setattribute("aria-valuemax", 100); // create a function that can be called at any time to update // the value of the progress bar. function updateprogress(percentcomplete) { progressbar.setattribute("aria-valuenow", percentcomplete); } note that aria was invented after...
...cessibility gains it provides far outweigh any technical invalidity. in html5, all aria attributes validate. the new landmark elements (<main>, <header>, <nav> etc) have built-in aria roles, so there is no need to duplicate them. support like any other web technology, there are varying degrees of support for aria. support is based on the operating system and browser being used, as well as the kind of assistive technology interfacing with it. in addition, the version of the operating system, browser, and assistive technology are contributing factors. older software versions may not support certain aria roles, have only partial support, or misreport its functionality. it is also important to acknowledge that some people who rely on assistive technology are reluctant to upgrade their softwar...

Architecture - Accessibility
it is used by nshypertextaccessible to collect information about itself it is still exposed in msaa for backward compatibility by old windows assistive technologies. those at's don't yet know about any iaccessibletext yet, and want to see the hierarchy how they always did -- with text in leaf nodes. ...
...essible to collect information about itself it is still exposed in msaa for backward compatibility by old windows assistive technologies. those at's don't yet know about any iaccessibletext yet, and want to see the hierarchy how they always did -- with text in leaf nodes. how does an at deal with text (a) to get the embedded object for an embedded object char: linkindex = iahypertext::getlinkindex(offset) iahyperlink*object = iahypertext::getlink(linkindex) iaccessible* accessible = qi/qs(object) (b) to get the offset in the parent text for a given embedded object: qi/qa to iahyperlink if not successful, then it is not embedded in text, so it's position in parent should be determined just by ia2::indexinparent, which will return its child offset within the parent. examples of o...

Accessibility documentation index - Accessibility
plications and widgets aria, accessibility, guide, web apps, widget most javascript libraries offer a library of client-side widgets that mimic the behavior of familiar desktop interfaces. sliders, menu bars, file list views, and more can be built with a combination of javascript, css, and html. since the html4 specification doesn't provide built-in tags that semantically describe these kinds of widgets, developers typically resort to using generic elements such as and . while this results in a widget that looks like its desktop counterpart, there usually isn't enough semantic information in the markup to be usable by an assistive technology. 88 architecture accessibility, developing mozilla the implementation of text and embedded objects in mozilla is clever bu...
...teps that need to be taken to conform to the recommendations outlined in the w3c web content accessibility guidelines 2.0 or 2.1 (or just wcag, for the purposes of this writing). 96 keyboard accessibility, keyboard if an element can be focused using the keyboard, then it should be interactive; that is, the user should be able to do something to it and produce a change of some kind (for example, activating a link or changing an option). 97 operable accessibility, focus, navigation, principle 2, timing, wcag, web content accessibility guidelines, headings, keyboard, keyboard trap, labels, operable, seizures this article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the operable principl...

Web accessibility for seizures and physical reactions - Accessibility
trigger photosensitive epilepsy. web technologies that use video, animated gifs, animated pngs, animated svgs, canvas, and css or javascript animations are all capable of content that can induce seizures or other incapacitating physical reactions. certain visual patterns, especially stripes, can also cause physical reactions even though they are not animated. photosensitive epilepsy is actually a kind of "reflex epilepsy"—seizures occurring in response to a trigger. in the case of photosensitive epilepsy, seizures are triggered specifically by flashing lights, but other types of reflex epilepsies may be triggered by the act of reading, or by noises. patterns and images can also trigger epilepsy. the fact that static images may cause seizures and other disorders is documented in such article...
...however, seizures are not the only adverse physical response possible from flashing, flickering, blnking, and other such stimuli. in 1997, a japanese cartoon featured an animated "virus bomb". some of the children watching the cartoon reacted by having seizures, others by suffering n...

Web Accessibility: Understanding Colors and Luminance - Accessibility
t to consider is the ambience of light surrounding the color. the color will appear differently if the background lighting is dark, or light. one of the greatest gifts to accessibility now in development is the css media queries level 5. these queries will allow users to choose contrast levels that is right for them, and enable them to adjust these levels depending upon where they are, and what kind of screen they are using. the mdn document, ambient light events, describes an experimental technology worth watching; this technology would enable a web page to be aware of any change in the light intensity, and consquently, adjust the text accordingly. this would be a great boon to those with motor skills problems, or do not have the use of their hands. to summarize, color is as much about h...
...e than the other, for example, red-blue flickering stimulus causes larger cortical excitation than red-green or blue-green stimulus.." adaption our eyes don't adapt equally, in the same way, going from light areas to dark ones, and vice versa. this is due to the physiological ways our eye are built. this affects the ability of a user to read text against a background. there's (at least) two kinds of adaptation that take place: local adaptation, and adaptation to an ambient environment. local adaptation takes place right on the "page" a reader is looking at. for example, if you have blue text within a gray "highlighted" area, your eyes will perceive that same blue text with a gray highlight differently if it is in a black div, or a white one. this is called local adaptation. this dif...

Variable fonts guide - CSS: Cascading Style Sheets
w light or how bold the letterforms can be; the 'width axis' describes how narrow or how wide they can be; the 'italic axis' describes if italic letterforms are present and can be turned on or off accordingly, etc. note that an axis can be a range or a binary choice. weight might range from 1–999, whereas italic might simply be 0 or 1 (off or on). as defined in the specification, there are two kinds of axes: registered and custom: registered axes are simply those that are most frequently encountered, and common enough that the authors of the specification felt it was worth standardizing. the five currently registered axes are weight, width, slant, italic, and optical size. the w3c has undertaken mapping them to existing css attributes, and in one case introduced a new one, which you'l...
...used to prevent faux-bolding as well. font-style: italic; font-variation-settings: 'ital' 1; font-synthesis: none; the following live example's css can be edited to allow you to play with font italics. slant slant (represented by the slnt tag), or as it's often referred to, 'oblique' — is different to true italics in that it changes the angle of the letterforms but doesn’t perform any kind of character substitution. it is also variable, in that it is expressed as a numeric range. this allows the font to be varied anywhere along that axis. the allowed range is generally 0 (upright) to 20 degrees — any number value along that range can be supplied, so the font can be slanted just a tiny bit. however, any value from -90–90 degrees is valid. note: the deg keyword is not used when...

Syntax - CSS: Cascading Style Sheets
am below. as an element of the page may be matched by several selectors, and therefore by several rules potentially containing a given property several times, with different values, the css standard defines which one has precedence over the other and must be applied: this is called the cascade algorithm. it is important to note that even if a ruleset characterized by a group of selectors is a kind of shorthand replacing rulesets with a single selector each, this doesn't apply to the validity of the ruleset itself. this leads to an important consequence: if one single basic selector is invalid, like when using an unknown pseudo-element or pseudo-class, the whole selector is invalid and therefore the entire rule is ignored (as invalid too). css statements rulesets are the main building bl...
...the entire rule is ignored (as invalid too). css statements rulesets are the main building blocks of a style sheet, which often consists of only a big list of them. but there is other information that a web author wants to convey in the style sheet, like the character set, other external style sheets to import, font face or list counter descriptions and many more. it will use other and specific kinds of statements to do that. a statement is a building block that begins with any non-space characters and ends at the first closing brace or semi-colon (outside a string, non-escaped and not included into another {}, () or [] pair). there are two kinds of statements: rulesets (or rules) that, as seen, associate a collection of css declarations to a condition described by a selector. at-rul...

Value definition syntax - CSS: Cascading Style Sheets
ues in enumerations, or parameters in mathematical-like functions; the slash often separates parts of the value that are semantically different, but have a common syntax. typically, the slash is used in shorthand properties; to separate component that are of the same type, but belong to different properties. both symbols appear literally in a value definition. ...
...in this case, the data type shares the same set of values as the property. they are often used in the definition of shorthand properties. data type not sharing the same name of a property. these data types are very close to the basic data types. ...

<easing-function> - CSS: Cascading Style Sheets
<number>s. for these values, 0.0 represents the initial state, and 1.0 represents the final state. depending on the specific function used, the calculated output can sometimes grow to be greater than 1.0 or smaller than 0.0 during the course of an animation. this causes the animation to go farther than the final state, and then return. for some properties, such as left or right, this creates a kind of "bouncing" effect. however, certain properties will restrict the output if it goes outside an allowable range. for example, a color component greater than 255 or smaller than 0 will be clipped to the closest allowed value (255 and 0, respectively). some cubic-bezier() curves exhibit this property. syntax there are three types of easing function: linear, cubic bézier curves, and staircase f...
...eater than 255 or smaller than 0 will be clipped to the closest allowed value (255 and 0, respectively). some cubic-bezier() curves exhibit this property. syntax there are three types of easing function: linear, cubic bézier curves, and staircase functions. the value of an <easing-function> type describes the easing function using one of those three types. easing functions css supports three kinds of easing functions: linear, the subset of the cubic bézier curves that are functions, and staircase functions. the most useful of these functions are given a keyword that allows them to be easily referenced. the linear class of easing functions linear the animation moves from beginning to end at a constant rate. this keyword represents the easing function cubic-bezier(0.0, 0.0, 1.0, 1.0).

Cross-browser audio basics - Developer guides
//you can display the duration now }); loadeddata the loadeddata event is fired when the first bit of media arrives. the playhead is in position but not quite ready to play. myaudio.addeventlistener("loadeddata", function() { //you could display the playhead now }); progress the progress event indicates that the download of media is still in progress. it is good practice to display some kind of 'loader' at this point. myaudio.addeventlistener("progress", function() { // you could let the user know the media is downloading }); canplay canplay is a useful event to detect should you want to determine whether the media is ready to play. you could, for example, disable custom controls until this event occurs. myaudio.addeventlistener("canplay", function() { //audio is ready to pla...
...do not occur). myaudio.addeventlistener("canplaythrough", function() { //audio is ready to play all the way through }); media loading event order to recap, the order of the media loading events are: loadstart > durationchange > loadedmetadata > loadeddata > progress > canplay > canplaythrough loading interruption events we also have a few events available that will fire when there is some kind of interruption to the media loading process. suspend media data is no longer being fetched even though the file has not been entirely downloaded. abort media data download has been aborted but not due to an error. error an error is encountered while media data is being download. emptied the media buffer has been emptied, possibly due to an error or because the load() method was invoked...

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
scripts. we'll also take a look at how to let the user pick a color. then we'll wrap things up with a brief discussion of how to use color wisely: how to select appropriate colors, keeping in mind the needs of people with differing visual capabilities. things that can have color at the element level, everything in html can have color applied to it. instead, let's look at things in terms of the kinds of things that are drawn in the elements, such as text and borders and so forth. for each, we'll see a list of the css properties that apply color to them. at a fundamental level, the color property defines the foreground color of an html element's content and the background-color property defines the element's background color. these can be used on just about any element. text whenever an el...
...an be an accessibility problem. improper or careless use of color can result in a website or app that a percentage of your target audience may not be able to use adequately, resulting in lost traffic, lost business, and possibly even 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 ...

<input type="number"> - HTML: Hypertext Markup Language
the minimum value to accept for this input. if the value of the element is less than this, the element fails constraint validation. if a value is specified for min that isn't a valid number, the input has no minimum value. this value must be less than or equal to the value of the max attribute. placeholder the placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. it should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. the text must not include carriage returns or line feeds. if the control's content has one directionality (ltr or rtl) but needs to present the placeholder in the opposite directionality, you can use unicode bidirectional algorithm formatti...
...nput other than numbers. there seems to be some disagreement about this among browsers; see bug 1398528. note: it's crucial to remember that a user can tinker with your html behind the scenes, so your site must not use simple client-side validation for any security purposes. you must verify on the server side any transaction in which the provided value may have any security implications of any kind. mobile browsers further help with the user experience by showing a special keyboard more suited for entering numbers when the user tries to enter a value. the following screenshot is taken from firefox for android: a simple number input in its most basic form, a number input can be implemented like this: <label for="ticketnum">number of tickets you would like to buy:</label> <input id="ti...

<input type="search"> - HTML: Hypertext Markup Language
e is ignored completely. tip: use the title attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. you should also include other explanatory text nearby. see the section specifying a pattern for details and an example. placeholder the placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. it should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. the text must not include carriage returns or line feeds. if the control's content has one directionality (ltr or rtl) but needs to present the placeholder in the opposite directionality, you can use unicode bidirectional algorithm formatti...
...eturn key while editing the field). the search event is rate-limited so that it is not sent more more frequently than an implementation-defined interval. mozactionhint a mozilla extension, supported by firefox for android, which provides a hint as to what sort of action will be taken if the user presses the enter or return key while editing the field. this information is used to decide what kind of label to use on the enter key on the virtual keyboard. note: this has been standardized as the global attribute enterkeyhint, but is not yet widely implemented. to see the status of the change being implemented in firefox, see bug 1490661. permitted values are: go, done, next, search, and send. the browser decides, using this hint, what label to put on the enter key. results the resul...

<input type="text"> - HTML: Hypertext Markup Language
bute is ignored completely. tip: use the title attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. you should also include other explanatory text nearby. see specifying a pattern for further details and an example. placeholder the placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. it should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. the text must not include carriage returns or line feeds. if the control's content has one directionality (ltr or rtl) but needs to present the placeholder in the opposite directionality, you can use unicode bidirectional algorithm formatti...
...matic correction of typos, as well as processing of text substitutions if any are configured. off disable automatic correction and text substitutions. mozactionhint a mozilla extension, supported by firefox for android, which provides a hint as to what sort of action will be taken if the user presses the enter or return key while editing the field. this information is used to decide what kind of label to use on the enter key on the virtual keyboard. note: this has been standardized as the global attribute enterkeyhint, but is not yet widely implemented. to see the status of the change being implemented in firefox, see bug 1490661. permitted values are: go, done, next, search, and send. the browser decides, using this hint, what label to put on the enter key. using text inputs <...

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
y. you can also include a title attribute to explain what the requirements are to match the pattern; most browsers will display this title as a tooltip. the visible explanation is required for accessibility. the tooltip is an enhancement. see client-side validation for more information. placeholder the placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. it should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. the text must not include carriage returns or line feeds. note: the placeholder attribute is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. see labels in <input...
...return key while editing the field). the search event is rate-limited so that it is not sent more more frequently than an implementation-defined interval. mozactionhint a mozilla extension, supported by firefox for android, which provides a hint as to what sort of action will be taken if the user presses the enter or return key while editing the field. this information is used to decide what kind of label to use on the enter key on the virtual keyboard. note: this has been standardized as the global attribute enterkeyhint, but is not yet widely implemented. to see the status of the change being implemented in firefox, see bug 1490661. permitted values are: go, done, next, search, and send. the browser decides, using this hint, what label to put on the enter key. orient results ...

<link>: The External Resource Link element - HTML: Hypertext Markup Language
tylesheet"> this simple example provides the path to the stylesheet inside an href attribute, and a rel attribute with a value of stylesheet. the rel stands for "relationship", and is probably one of the key features of the <link> element — the value denotes how the item being linked to is related to the containing document. as you'll see from our link types reference, there are many different kinds of relationship. there are a number of other common types you'll come across. for example, a link to the site's favicon: <link rel="icon" href="favicon.ico"> there are a number of other icon rel values, mainly used to indicate special icon types for use on various mobile platforms, e.g.: <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-icon-114.png" type="image/png"...
...s mainly useful when linking to external stylesheets — it allows the user agent to pick the best adapted one for the device it runs on. notes: in html 4, this can only be a simple white-space-separated list of media description literals, i.e., media types and groups, where defined and allowed as values for this attribute, such as print, screen, aural, braille. html5 extended this to any kind of media queries, which are a superset of the allowed values of html 4. browsers not supporting css3 media queries won't necessarily recognize the adequate link; do not forget to set fallback links, the restricted set of media queries defined in html 4. referrerpolicy a string indicating which referrer to use when fetching the resource: no-referrer means that the referer header wi...

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

HTTP conditional requests - HTTP
validators all conditional headers try to check if the resource stored on the server matches a specific version. to achieve this, the conditional requests need to indicate the version of the resource. as comparing the whole resource byte to byte is impracticable, and not always what is wanted, the request transmits a value describing the version. such values are called validators, and are of two kinds: the date of last modification of the document, the last-modified date. an opaque string, uniquely identifying each version, called the entity tag, or the etag. comparing versions of the same resource is a bit tricky: depending on the context, there are two kinds of equality checks: strong validation is used when byte to byte identity is expected, for example when resuming a download. ...
...both last-modified and etag allow both types of validation, though the complexity to implement it on the server side may vary. http uses strong validation by default, and it specifies when weak validation can be used. ...

HTTP Index - HTTP
ing might fail: 27 reason: cors request did not succeed cors, corsdidnotsucceed, cross-origin, error, http, https, messages, reasons, security, console, troubleshooting the http request which makes use of cors failed because the http connection failed at either the network or protocol level. the error is not directly related to cors, but is a fundamental network error of some kind. 28 reason: cors request external redirect not allowed cors, corsoriginheadernotadded, cross-origin, error, http, https, messages, reasons, security, console, troubleshooting the cors request was responded to by the server with an http redirect to a url on a different origin than the original request, which is not permitted during cors requests. 29 reason: cors req...
...(http, https, and ftp) go directly to the destination or are forwarded to a web proxy server. the javascript function contained in the pac file defines the function: 275 redirections in http guide, http, redirects url redirection, also known as url forwarding, is a technique to give a page, a form, or a whole web application, more than one url address. http provides a special kind of response, called http redirect, to perform this operation and is used for numerous goals: temporary redirection while site maintenance is ongoing, permanent redirection to keep external links working after a change of the site's architecture, progress pages when uploading a file, and so on. 276 resources and uris http, mime, mime type, overview, type, uri, uris, url, resources, ...

Lexical grammar - JavaScript
code can be disabled this way. hashbang comments a specialized third comment syntax, the hashbang comment, is in the process of being standardized in ecmascript (see the hashbang grammar proposal). a hashbang comment behaves exactly like a single line-only (//) comment. instead, it begins with #! and is only valid at the absolute start of a script or module. note also that no whitespace of any kind is permitted before the #!. the comment consists of all the characters after #! up to the end of the first line; only one such comment is permitted. the hashbang comment specifies the path to a specific javascript interpreter that you want to use to execute the script. an example is as follows: #!/usr/bin/env node console.log("hello world"); note: hashbang comments in javascript mimic sheba...
...s an identifier, which is an identifiername without the reserved words. identifiers are used for functiondeclaration, functionexpression, variabledeclaration and so on. identifiernames are used for memberexpression, callexpression and so on. function import() {} // illegal. identifiers with special meanings a few identifiers have a special meaning in some contexts without being keywords of any kind. they include: arguments get set literals null literal see also null for more information. null boolean literal see also boolean for more information. true false numeric literals the number and bigint types use numeric literals. decimal 1234567890 42 // caution when using with a leading zero: 0888 // 888 parsed as decimal 0777 // parsed as octal, 511 in decimal note that decim...

Image file type and format guide - Web media technologies
ing http compression techniques, or on disk as an .svgz file. licensing ©2018 w3c® (mit, ercim, keio, beihang), all rights reserved. w3c liability, trademark, document use and software licensing rules apply. no known royalty-bearing patents. tiff (tagged image file format) tiff is a raster graphics file format which was created to store scanned photos, although it can be any kind of image. it is a somewhat "heavy" format, in that tiff files have a tendency to be larger than images in other formats. this is because of the metadata often included, as well as the fact that most tiff images are either uncompressed or use compression algorithms that still leave fairly large files after compression. tiff supports a variety of compression methods, but the most commonly used are...
...ther uncompressed or use compression algorithms that still leave fairly large files after compression. tiff supports a variety of compression methods, but the most commonly used are the ccitt group 4 (and, for older fax systems, group 3) compression systems used for by fax software, as well as lzw and lossy jpeg compression. every value in a tiff file is specified using its tag (indicating what kind of information it is, such as the width of the image) and its type (indicating the format the data is stored in), followed by the length of the array of values to assign to that tag (all properties are stored in arrays, even for single values). this allows different data types to be used for the same properties. for example, the width of an image, imagewidth, is stored using tag 0x0100, and is a ...

Loading Content Scripts - Archive of obsolete content
...

Content Scripts - Archive of obsolete content
has loaded. passing configuration options the contentscriptoptions is a json object that is exposed to content scripts as a read-only value under the self.options property: // main.js var tabs = require("sdk/tabs"); tabs.on('ready', function(tab) { tab.attach({ contentscript: 'window.alert(self.options.message);', contentscriptoptions: {"message" : "hello world"} }); }); any kind of jsonable value (object, array, string, etc.) can be used here. accessing the dom content scripts can access the dom of a page, of course, just like any scripts that the page has loaded (page scripts). but content scripts are insulated from page scripts: content scripts don't see any javascript objects added to the page by page scripts if a page script has redefined the behavior of some d...

Content Processes - Archive of obsolete content
, however. code with content privileges should not be able to acces code with chrome privileges, so we use specialized wrappers, called security wrappers, to limit access to the object in the other sandbox. the xray wrappers we saw earlier are an example of such a security wrapper. security wrappers are created automatically, by the underlying host application. a full discussion of the different kinds of security wrappers and how they work is out of scope for this document, but the main point is this: security wrappers are very complex, and very error-prone. they are subject to change, in order to fix some security leak that recently popped up. as a result, code that worked just fine last week suddenly does not work the way you expect. by only passing messages between add-on modules and conte...

context-menu - Archive of obsolete content
to communicate to the menu item associated with the content script, the content script can call the postmessage function attached to the global self object, passing it some json-able data. the menu item's "message" event listener will be called with that data. var cm = require("sdk/context-menu"); cm.item({ label:...

ui - Archive of obsolete content
("sdk/ui"); var action_button = ui.actionbutton({ id: "my-button", label: "action button!", icon: "./icon.png", onclick: function(state) { console.log("you clicked '" + state.label + "'"); } }); you can make a button standalone or add it to a toolbar. if it's standalone, it appears in the toolbar at the top right of the browser window: togglebutton a toggle button is a special kind of button that's for representing a binary on/off state, like a checkbox. so they have a checked property which is toggled when the user clicks the button, and the icon gets a "pressed" look when the button is checked. it's otherwise identical to the action button. attaching panels to buttons is only supported from firefox 30 onwards. from firefox 30 onwards, you can attach panels to toggle b...

content/loader - Archive of obsolete content
optional. contenturl the url of the content loaded. allow permissions for the content, with the following keys: ...

JavaScript Daemons Management - Archive of obsolete content
daemon.makeloop() sets the reversals property equal to infinity. mydaemon.unmakeloop() sets the reversals property equal to 0. mydaemon.setrate(milliseconds) sets the time lapse between calls (in milliseconds). if the daemon is running it will be immediately updated with the new property. mydaemon.forceposition(index) sets the internal index property equal to the index argument without any kind of control about the range. mydaemon.getduration() returns the duration of the daemon in milliseconds. mydaemon.getposition() returns the internal index property. mydaemon.makesteps(howmany[, backwards[, force]]) calls synchronously the callback function howmany times. forwards or backwards. if the force argument is set to true, the possible return false of the callback function will be ign...

XPath - Archive of obsolete content
[i].text); } } else { var tobj = obj.evaluate("/root/field/item",obj.documentelement,null, xpathresult.any_type, null); var tmp = tobj.iteratenext(); while(tmp) { fields.push(tmp.textcontent); tmp = tobj.iteratenext(); } } alert(fields); } //here is the demo xml file for xpath <?xml version="1.0"?> <root> <field> <item>art_id</item> <item>psection</item> <item>qkind</item> <item>qtitle</item> <item>question</item> <item>pic</item> <item>answer1</item> <item>answer2</item> <item>answer3</item> <item>answer4</item> </field> </root> //add by mooring 2008-11-15 16:16 china ...

Code snippets - Archive of obsolete content
trees using xul and js scrollbar changing style of scrollbars. applies to scrollbars in browser and iframe as well. autocomplete code used to enable form autocomplete in a browser boxes tips and tricks when using boxes as containers tabbox removing and manipulating tabs in a tabbox windows-specific finding window handles (hwnd) (firefox) how to use windows api calls to find various kinds of mozilla window handles. window handles can be used for ipc and accessibility purposes. using the windows registry with xpcom how to read, write, modify, delete, enumerate, and watch registry keys and values. external links the content at mozillazine example code is slowly being moved here, but you can still find useful examples there for now. ...

Communication between HTML and your extension - Archive of obsolete content
org#extdev i was able to get it running pretty well, but i still would rather have the client less responsible for pinging the extension to "look" for what is on the page. what i tried my first attempt was trying to create an xbl component. from what i gather, xbl components are more designed for creating custom components and their specific component behavior rather than trying to impose some kind of messaging on existing components. next i started investigating events, there are only a handful of events and the w3c documentation is pretty complete. the basic problem with the event model is probably due to what i was trying to do. in my html i have an input element in a form. i set the onblur action to a little javascript function that performed a standard ajax request to get a result...

Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
ell as a complete directory structure mirroring that of the jar file. the directory structure, however, is empty. why? i don't know. don't worry about this, the files in the jar are the ones that are actually used. keeping it complex if you're developing a really complex extension with lots of xpcom components, you'll probably want to divide your code up into smaller modules. kinda, sorta complex extensions for a moderately complex extension, it's probably enough just to subdivide the code into a single level of modules. let's assume that you have a base/ module that defines a bunch of basic xpcom components and an advanced/ module that defines some chrome as well as other components that use the basic components. your complete directory structure will look somethin...

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

Enhanced Extension Installation - Archive of obsolete content
ty, but extension and theme authors should be good citizens and upgrade their install manifests to include the type. the type information supplied or inferred will be added to the extensions datasource. tracking item type we still track the item type at this stage by looking at containment. see below in things this upgrade does not do. installation installation is much different. there three kinds of item installation: installation from a file installation by a folder or folder-link "appearing" in an install location, and a hybrid of the two - an xpi file "appearing" into a directory based install location. installation from a file initiation when an item is installed from a file (such as, when an item is installed from the web, via xpinstall, upgraded by xpinstall or dropped int...

Extension Packaging - Archive of obsolete content
er. register an extension location using the windows registry external installers, such as the java runtime, may wish to install application integration points as an extension, even if the application is not yet installed. this can be accomplished on windows using the registry. multi-item extension xpis in some cases, a single xpi file may wish to install multiple extensions/themes. a special kind of extension xpi, called the multiple item package, explains how to create this kind of package. (firefox 1.5/xulrunner 1.8 required.) from the release of firefox 53, multiple item extension packages are no longer supported and will not load. as a consequence, these packages are no longer accepted by amo. official references for toolkit api structure of an installable bundle: describes...

Extension Etiquette - Archive of obsolete content
it assumes that you are already familiar with building an extension. user interface tools menu items using the tool menu option gives the author the maximum amount of choices. whether the extensions should go at the top, bottom, or somewhere in between on the tools menu, the author always has a choice. ideally, the location would be below the add-ons item, grouped with the other extension-related commands (menuitem:insertafter="javascriptconsole,devtoolsseparator"). ...

How to convert an overlay extension to restartless - Archive of obsolete content
some of that will have to be replaced and the rest will need to be loaded differently. ...

Migrating from Internal Linkage to Frozen Linkage - Archive of obsolete content
all these functions are now available via the new string api - appendutf16toutf8(srcstring, deststring); + deststring.append(ns_convertutf16toutf8(srcstring)); the signatures of the find methods differ between the two apis. if you are only finding a single character, prefer the findchar method. the (lossy)copy(ascii|utf8|16)to(ascii|utf8|16) do not accept character pointer parame...

Chapter 6: Firefox extensions and XUL applications - Archive of obsolete content
mozunit window. select the menu item file:new, and save test_calc.js in the same directory as the file that is the test target. next, click the edit button to set up the “2 1+” test case (listing 2). note that in this file, the method names serve as the test names. in junit and similar packages, methods containing tests that start with testhoge are recognized as tests. mozunit uses the same kind of notation, but you can also make the string the method name, making the test self-documenting. pretty clever. listing 2: content for test_calc.js (first-round test case) var testcase = mozlab.mozunit.testcase; var assert = mozlab.mozunit.assertions; var tc = new testcase('rpn calc testcase'); var module = new modulemanager(); var rpncalc = module.require('package', 'calc'); tc.tests = { '2 ...

Chapter 1: Introduction to Extensions - Archive of obsolete content
customization options available to a user in firefox. users have flexible customization options, using css in user style sheets and javascript/dom in user scripts (these depend on stylish, greasemonkey, and userchrome.js). in addition to css and javascript, extensions can take advantage of xul and xpcom technologies for more sophisticated features. themes, which alter firefox's appearance, are a kind of add-on. in order to create an extension, you need an idea and just a little programming ability. the following chapters explain in detail the extension-writing techniques of some of japan's leading extension authors. we encourage you to try your hand at it as well. 1 one of the authors of this special edition, piro, is world-famous as one of the original developers. « previousnext ...

Chapter 2: Technologies used in developing extensions - Archive of obsolete content
ou will need to understand in order to develop for firefox. i will assume that you have experience developing with dynamic html, as well as the topics below. for more information on these technologies, please refer to other sources. xml coding css coding basic javascript syntax xml: a text-based structural language extensible markup language (xml) is a meta-language for expressing various kinds of data. it was specified in 1998 by w3c, the organization that sets standards for web-related technologies. it has a number of useful qualities: it is generic, extensible, and easy to validate as well-formed. some examples of xml-based markup languages include xhtml, which is html redefined on an xml base; svg, for expressing vector images; and mathml, for expressing mathematical formulas. xul...

Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
y referred to as xpcoms. firefox itself includes a great number of xpcom components, and they can be used in extensions as well. sometimes an extension will be packaged with a special xpcom component developed specifically for it. note: if you're developing components in c++ or other compiled languages, be sure to include binaries for every platform. reference materials to get an idea of what kinds of functions embedded xpcom can handle, take a look at the api reference and the interface definitions from xpidl in the actual source code. note: interface definition language (idl) is a language for giving standard definitions of objects, methods, and so forth. the xpidl (cross-platform idl) used by mozilla is a partial extension to the corba idl. you can perform a full-text search of the ...

Adding Toolbars and Toolbar Buttons - Archive of obsolete content
utton here. } }) both function firstrun(extensions) { let extension = extensions.get(your_extension_id); if (extension.firstrun) { // add button here. } } if (application.extensions) firstrun(application.extensions); else application.getextensions(firstrun); the fuel library currently only works on firefox 3 and above. « previousnext » this tutorial was kindly donated to mozilla by appcoast. ...

Adding menus and submenus - Archive of obsolete content
is seems to happen when remote images are used. menu items are not dynamically updated while they are open. for example, you could have a menuitem that tells you the current time and is updated every second. on other systems you would be able to see the item update itself without having to close the menu and then reopen. this is not the case on mac os. « previousnext » this tutorial was kindly donated to mozilla by appcoast. ...

Custom XUL Elements with XBL - Archive of obsolete content
...

Getting Started with Firefox Extensions - Archive of obsolete content
...

Handling Preferences - Archive of obsolete content
ome://browser/skin/preferences/preferences.css). this way you don't have to rewrite all the css rules defined for firefox. you should also look at the class values set to elements in the xul file, so that your preferences window is just like the one in firefox and your extension is better integrated into the application and the native os look and feel. « previousnext » this tutorial was kindly donated to mozilla by appcoast. ...

Intercepting Page Loads - Archive of obsolete content
for redirects. you only get one call, for the first url requested. if you let it pass, it can redirect anywhere without you noticing it. this approach is used in popular filtering extensions, such as adblock plus. we recommend you look into the other solutions first, though. maybe a combination of some or all of these will be what your extension needs. « previousnext » this tutorial was kindly donated to mozilla by appcoast. ...

Introduction - Archive of obsolete content
rom the main menu. on to the tutorial with the basic concepts out of the way, we can now get right into extension development. you are probably still wondering what exactly is an extension, what can it do, and how can you make them. well, this whole tutorial is devoted to explaining that to you. welcome to the world of extension development. now let's get to it. next » this tutorial was kindly donated to mozilla by appcoast. ...

JavaScript Object Management - Archive of obsolete content
e objects that are window-independent. in the following section we'll discuss xpcom, which is an older alternative to jsm and one of the foundations of mozilla applications. you shouldn't skip that section because there are many common situations in extension development where you'll have to use xpcom, maybe even implement xpcom components of your own. « previousnext » this tutorial was kindly donated to mozilla by appcoast. ...

Mozilla Documentation Roadmap - Archive of obsolete content
...

Observer Notifications - Archive of obsolete content
en a notification is sent. useful firefox notifications we have covered sending and receiving custom notification topics using observers and the observer service. in firefox, there are many built-in observer topics that you can observe as well. the observer notifications page lists some useful topics and is definitely worth spending time studying it. « previousnext » this tutorial was kindly donated to mozilla by appcoast. ...

The Essentials of an Extension - Archive of obsolete content
level of your archive. if you zip the containing folder, your extension will not load. note that the tools menu is hidden by default on firefox 4 and above, on windows and some linux distributions. check menu bar under the options menu of the firefox menu button to enable it. once you're done, you can look at this reference solution: hello world 2. « previousnext » this tutorial was kindly donated to mozilla by appcoast. ...

Useful Mozilla Community Sites - Archive of obsolete content
...

XPCOM Objects - Archive of obsolete content
n firefox extensions. they are only available to code built into firefox itself. if you are writing an extension and need to interact with 3rd-party binary code, the best way to do that is to use the system/child_process ipc layer from the addon sdk. the c-types module is also available as a bridge to load and use shared libraries from extension code. « previousnext » this tutorial was kindly donated to mozilla by appcoast. ...

Setting up an extension development environment - Archive of obsolete content
a variety of development tools (firefox) pentadactyl, a general purpose extension with builtin tools for extension development, including a command line with chrome javascript evaluation (including property and function argument completion) and the ability to demand-load external javascript and css files into window chrome. ...

Updating addons broken by private browsing changes - Archive of obsolete content
to open a window that matches the current window's privacy status. openlinkin: can receive an extra private boolean property in the parameter object. internalsave: takes a new required document argument (prior to the optional boolean and string arguments) indicating the document that originated the save action. gprivatebrowsingui: can no longer be used to control private browsing of any kind. any new private browsing session should be opened using openbrowserwindow, and any queries for private browsing status should use privatebrowsingutils.iswindowprivate(win) on a relevant window object. saveurl: takes a new required document argument indicating the source of the url being saved. ...

Search Extension Tutorial (Draft) - Archive of obsolete content
ame preference to its name. a separate url for keyword can be set by adding a type="application/x-moz-keywordsearch" url to the search description file if desired. while it is possible to achieve similar effects by changing the keyword.url preference, this method is deprecated and should not be used. example extension and utility module in order to simplify the process of correctly changing these kinds of settings, we've developed a reusable utility module, and an example add-on to demonstrate its use. this module should be preferred to custom search management code where at all possible. ...

XML data - Archive of obsolete content
this page contains an example of how you can use css with xml data. you create a sample xml document, and a stylesheet that you can use to display it in your browser. this is the 3rd section of part ii of the css tutorial. previous section: svg next section: xbl binding information: xml data xml (extensible markup language) is a general-purpose language for any kind of structured data. by default, your mozilla browser displays xml in a format very similar to the original data in the xml file. you see the actual tags that define the data's structure. by linking a css stylesheet with the xml document, you can define other ways to display it. to do this, your stylesheet uses rules that map tags in the xml document to the display types used by html. example data in an xml document...

Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
begin license block ***** * version: mpl 1.1 * * the contents of this file are subject to the mozilla public license version * 1.1 (the "license"); you may not use this file except in compliance with * the license. you may obtain a copy of the license at * http://www.mozilla.org/mpl/ * * software distributed under the license is distributed on an "as is" basis, * without warranty of any kind, either express or implied. see the license * for the specific language governing rights and limitations under the * license. * * the original code is netscape code. * * the initial developer of the original code is * netscape corporation. * portions created by the initial developer are copyright (c) 2003 * the initial developer. all rights reserved. * * contributor(s): marcio galli <m...

Images, Tables, and Mysterious Gaps - Archive of obsolete content
ge, as was done in figure 5. so we have an image sitting on the baseline of a line box that contains only the image. now consider what happens when we put that line in a table cell (figure 6). and there you have it-- spaces opening up where none have ever been seen before. it gets even worse with small images, like ones that are one pixel tall, as illustrated in figure 7. now there's all kinds of space unexpectedly opening up. it's enough to drive a designer mad. how about a fix? there is one obvious fix-- stop creating designs that are dependent on tables and sliced up or single-pixel images-- but it's not terribly practical for many designers, and it sure doesn't help fix old designs that are suddenly blowing apart in recent browsers. there's another obvious fix, which is to make ...

Notes on HTML Reflow - Archive of obsolete content
it on itself and recursively calls reflowdirtychild. eventually, the reflowdirty incremental reflow is dispatched, and arrives at the container frame that scheduled it. the target frame recovers its bookkeeping information (e.g., the block frame iterates through the dirty lineboxes), and reflows the dirty child frames. isn't information lost if a reflowdirty incremental reflow coalesces different kinds of incremental reflows (e.g., a contentchanged with a stylechanged)? no, because these kinds of reflows aren't coalesced; instead, they're directly enqueued to the presentation shell's reflow queue. html and xul interaction as mentioned above, html and xul have fundamentally different layout models, the former being a flow-based model, and the latter being a constraint based model. thes...

Adding the structure - Archive of obsolete content
es about an application's state can be displayed. it can contain both text messages (i.e. "done" in mozilla when a document finishes loading) and graphical messages (f.e. the lock icon in mozilla that shows whether or not a loaded document was encrypted with ssl). status bars comprise a series of panels, each one defined by a statusbarpanel xul element. each status bar panel displays a different kind of status information. graphical panels (like the one we are creating here that displays an icon) are given the statusbarpanel-iconic class so they can be styled accordingly by the css stylesheet that defines these elements' appearance. the status attribute is not part of the xul definition for the statusbarpanel element, but is used by our extension to store the current tinderbox state. we'll u...

Enabling the behavior - retrieving tinderbox status - Archive of obsolete content
{ gxmlhttprequest = new xmlhttprequest(); gxmlhttprequest.onload = updatetinderboxstatus; gxmlhttprequest.open("get", "http://tinderbox.mozilla.org/seamonkey/panel.html"); gxmlhttprequest.send(null); } xmlhttprequest is an interface in mozilla for retrieving documents via http. although it is designed to retrieve xml content and parse it into a dom, it can retrieve (but not parse) other kinds of content as well. in this case we use it to retrieve an html page containing a brief summary of the current tinderbox state. that document gets updated by the tinderbox server every time a build finishes. it displays a list of active tinderbox clients along with the result of their last build attempt. xmlhttprequest is easy to use in the simple case we have here. we use new to create a new in...

Tinderbox - Archive of obsolete content
e for watching the code and getting engineers to fix breakage, checks tinderbox even more regularly. while it isn't difficult to load the tinderbox web page or sidebar, it would be useful to have an even quicker way to check tinderbox that doesn't require going to a web page, changing sidebars, or even having the sidebar open. although there are multiple tinderbox clients machines doing different kinds of builds (f.e. different platforms), most people only care about the overall situation, i.e. whether or not any clients have failed. by checking for build failures first and test failures second, we make sure to show users the worst possible situation, i.e. if any clients have failed to build, we will display a red icon that signifies a build failure; if all clients built successfully but some ...

Creating regular expressions for a microsummary generator - Archive of obsolete content
a sequence of characters) that matches patterns of characters in other strings. microsummary generators use them to identify the pages that the generators know how to summarize by matching patterns in those pages' urls. in this tutorial, we'll explain how to make regular expressions that match the urls for ebay auction item pages. by the end of the tutorial, you should know some basics about regular expressions and understand how to create expressions that match urls. ...

Dehydra Object Reference - Archive of obsolete content
ersion is considered a variant of the normal version. the variantof property allows access to the original type object. .hasdefault boolean flag applicable to function parameters only. indicates whether the parameter has a default value, e.g. void foo(int i = 42). aggregate types (class/struct/union/enum) this type object represents aggregate types in gcc. property type description .kind string one of "class", "struct", "union", or "enum". .isincomplete boolean flag the type was forward-declared and the full declaration has not been processed. .bases array of objects inheritance information about the class. each member of the array has the following properties: { access: 'public' | 'protected' | 'private', type: type object representing the base class } .members a...

Repackaging Firefox - Archive of obsolete content
s strategy only works when your strings either do not need localization, or are programmatically localizable (for example, simply adding the locale to a url, like http://<locale>.example.com/). but it's something to keep in mind when planning your locale support. preferences preferences are one of the two main things you will want to set in your extension (the other is bookmarks). there are two kinds of preferences in firefox, both set in the partner.js file: localizable preferences, which have a value of a chrome:// uri pointing to the properties file where firefox can fetch the localized value from. non-localizable preferences, which simply have the value in partner.js directly. it is possible to set a value for localizable preferences directly in the partner.js file, like this: pre...

Gecko Coding Help Wanted - Archive of obsolete content
so we've compiled a list of pointers —from the experts. there's plenty to do, and we sure could use the help. here are some fixes that are straightforward; they just need some time and attention: decomtamination convert weird, ugly and inefficient method signatures to more natural c++ method signatures. it's really improved code readability, reduced code size, and sped up performance. it's kind of tedious but it's extremely valuable and will help you learn the way around the codebase. we've done a lot, but there's a lot more to do. roc is willing to work closely with anyone with reasonable c++ experience to get them started on this. just send him mail. not up for coding yet? join the gecko bugathon and help save gecko engineers from imminent doom! original document information ...

Plugin Architecture - Archive of obsolete content
ocument describes how things are, not necessarily how things should be. it is not set in stone. do not use this document for deciding what plugins can rely on. the described sequences are subject to change at any time. classes there are some classes involved in plugins: nsobjectloadingcontent embed, object and applet nodes inherit from that class, which provides services for loading various kinds of objects. it takes care of most of the work involved in loading the data and instantiating plugins. nsobjectframe the frame responsible for displaying plugins nsplugininstanceowner glue between plugin code (modules/plugin) and layout code (layout/generic). a refcounted object, contrary to nsobjectframe. note that while nsobjectloadingcontent also deals with images and documents, this d...

Abc Assembler Tests - Archive of obsolete content
ock ***** * version: mpl 1.1/gpl 2.0/lgpl 2.1 * * the contents of this file are subject to the mozilla public license version * 1.1 (the "license"); you may not use this file except in compliance with * the license. you may obtain a copy of the license at * http://www.mozilla.org/mpl/ * * software distributed under the license is distributed on an "as is" basis, * without warranty of any kind, either express or implied. see the license * for the specific language governing rights and limitations under the * license. * * the original code is [open source virtual machine.]. * * the initial developer of the original code is * adobe system incorporated. * portions created by the initial developer are copyright (c) 2009 * the initial developer. all rights reserved. * * contribut...

Tamarin Acceptance Test Template - Archive of obsolete content
ock ***** * version: mpl 1.1/gpl 2.0/lgpl 2.1 * * the contents of this file are subject to the mozilla public license version * 1.1 (the "license"); you may not use this file except in compliance with * the license. you may obtain a copy of the license at * http://www.mozilla.org/mpl/ * * software distributed under the license is distributed on an "as is" basis, * without warranty of any kind, either express or implied. see the license * for the specific language governing rights and limitations under the * license. * * the original code is [open source virtual machine.]. * * the initial developer of the original code is * adobe system incorporated. * portions created by the initial developer are copyright (c) 2005-2010 * the initial developer. all rights reserved. * * cont...

Actionscript Acceptance Tests - Archive of obsolete content
ch will let the test harness run compiled files without source. the underscore is necessary otherwise the buildbot system will delete the .abc before starting up a testrun (not an issue when running locally, but makes it easy to differentiate between binary-only abc files and generated abcs. support directories in some cases a test may require additional files to successfully run. there are two kinds of support directories available. files to be included when compiling the test: if a test requires additional .as files to be included when compiling, a directory with the same name as the test (minus any extension) can be created. the name is case-sensitive. e.g: given a test named inheritclass.as, the user can create a directory named inheritclass and place files a.as and b.as in that directo...

Examples - Archive of obsolete content
examples trigger scripts and install scripts describes typical kinds of script that use the xpinstall api. the following samples demonstrate some of the principal installation functions in the xpinstall api: file.macalias file.windowsshortcut [install.]adddirectory [install.]addfile installtrigger.installchrome installtrigger.startsoftwareupdate windows install example ...

Learn XPI Installer Scripting by Example - Archive of obsolete content
the chrome registry. note that in the first few lines of this process, new content from the xpi is being registered, and in the remainder, it is new skin information. in this most common form of the registerchrome function (it can also be used to support the now-deprecatedmanifest.rdf style of installation archive), the three parameters represent, in order, the chrome switch used to indicate what kind of software is being registered, the target destination of the software (e.g., the "chrome" folder in the example above), and the path within the xpi (or jar theme archive) where the contents.rdf file is located. see registerchrome in the xpinstall api reference for more information about registering new packages with the chrome registry. executing the installation once you have added all the ...

A XUL Bestiary - Archive of obsolete content
ynonym for or instead of terms like "dynamic html" or "dhtml." the aom stands for the application object model, and is an extension of the dom up into the interface defined in xul. just as html is reflected in the dom as nodes like link, layer, and img, xul is reflected in the application object model in the hierarchy of xul widgets: browser, menu, menuitem, and so on. the dom and the aom form a kind of continuum, the whole of which is manipulable from the standards upon which xul is based. near synonyms for xul there is much confusion about the words that begin with "x" in the mozilla open source project. the mozilla xparchitecture section below describes xpcom, xpidl, and xpconnect, three somewhat related technologies for getting access to application code from the interface. this section...

datepicker.type - Archive of obsolete content
« xul reference home type type: one of the values below you can set the type attribute to one of the values below to specify the type of datepicker to use normal a datepicker with three fields for entering the year, month and date. this is the default value so do not specify the type attribute if this kind is desired. grid a datepicker that displays a calendar grid where one month is shown at a time. popup a datepicker with three entry fields but an additional dropdown button, which, when pressed, will display a popup calendar grid. normal type grid type popup type ...

Working With Directories - Archive of obsolete content
igates to a further subdirectory. the result is a subdirectory three levels below the desktop directory. these directories do not need to exist yet, but they can be created using nsifile.create(). see creating directories below for information about this. note that nsifile.append() modifies the file object, rather than returning a new one. both files and directories are represented using the same kind of object so most of the functions available for nsifile will work for both. you can check if the object refers to a directory or a file by using nsifile.isdirectory(). this method returns true if a file object returned by nsiscriptableio.getfile() refers to a directory, and false otherwise. there is also a corresponding nsifile.isfile() method to check if an object refers to a file. in both case...

Namespaces - Archive of obsolete content
., no prefix and colon) belongs to the default namespace. that's why we can write the shorthand <textbox/> instead of <xul:textbox/> in xul (although the latter is just as correct when not using http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul as the default namespace) -- the xul namespace is defined as the default on the topmost element. in other words, a default namespace permits a kind of short-hand to be used for all descendants of an element. here's a question: what namespace contains the element foo in the xml document below? <foo/> the answer is that it's in no namespace, or alternately, it's in the namespace denoted by the empty string: <foo xmlns=""/> this second example is semantically equivalent to the first. now, a second question: what namespaces are the bar, ba...

Menus - Archive of obsolete content
mentbyid("menu-file-open"); item.hidden = true; } the hidden property is set to true to hide the menu with the id 'menu-fileopen'. this function may be called from within an onload attribute on the window. accessing and setting the active item in a menu, there will usually be an item that is considered "active". this item will be highlighted, and will do certain functions depending on the kind of item it is, and the way in which it has been activated, whether via the keyboard or mouse. for example, if it is a menu element and has been activated via a mouseover, then the menu will open. if it has been activated via navigation with the up or down arrow on the keyboard, then pressing the return key or right arrow key will open the menu. if it were a menuitem, then pressing the return k...

Rule Compilation - Archive of obsolete content
more than one. for each result that is generated by the query, the conditions specified within the rules are scanned, and content is generated when a rule matches. only the first matching rule for each result from the query will apply. for example, the first rule might apply to results that represent books, while the second rule might apply only to results that are magazines. this way, different kinds of output can be created based on the specifics of the result. in many cases, you will only have need for one rule, as you want all results to be generated in the same manner. for instance, if generating the items in a listbox, you will typically use only one rule. if only one rule is needed, the rule element is optional. a template without any rules (or, in fact, one with a rule with no query d...

Simple Query Syntax - Archive of obsolete content
ax. in fact, the builder will internally convert the attribute into the same compiled form that would be used for a <triple>. the equivalent triple for the above example might be: <triple subject="?photo" predicate="http://www.xulplanet.com/rdf/country" object="http://www.daml.org/2001/09/countries/iso#it"/> adjusting simple query conditions the simple syntax is limited in the kind of filtering it can do, however it is often sufficient for many purposes. naturally, if you want to set a filter dynamically, as the photos example does with a menulist, you will need to set the attribute on the rule element and rebuild the template. function applyfilter(country) { var rule = document.getelementbyid("filterrule"); if (country){ rule.setattributens("http://www.xulplanet.c...

Special Condition Tests - Archive of obsolete content
, so the content from the second rule is generated instead. the end effect is the same output, however, the source code is simpler. this technique is useful when you know that the content will be different at each level. if this is not the case, you will still need to use other types of conditions to handle this case. rdf parent matching for rdf sources, you can use the same technique. to do this kind of matching, you again place a parent attribute on the rule, set to the tag to match. for instance, we might use the following: <vbox datasources="template-guide-streets.rdf" ref="http://www.xulplanet.com/rdf/myneighbourhood"> <template> <rule parent="vbox"> <groupbox uri="rdf:*"> <caption label="rdf:http://purl.org/dc/elements/1.1/title"/> </groupbox> </rule> ...

Template Logging - Archive of obsolete content
ates that the querytype attribute is set to an unrecognized value. only the 'rdf', 'xml' and 'storage' values are provided by default. if you are using a custom query processor, it may indicate that it is not installed or set up properly. unexpected <queryset> element a <queryset> element was placed in an invalid location; they should be placed directly inside the <template> element with no other kinds of elements as siblings. no member variable found. action body should have an element with uri attribute the member variable could not be determined. you should specify an element inside the first <action> body with a uri attribute. you can also specify the member attribute on the template. either way, the member variable isn't known so it isn't clear what value to use for each generated result ...

Box Objects - Archive of obsolete content
onversely, some content nodes have no layout objects at all. for instance, the key element doesn't have any layout objects since it isn't displayed in any way. similarly, any element that has been hidden will not have a layout object either. the dom is generally used only to get and modify information pertaining to the content or structure of the document. it's relatively simple to determine what kind of content tree node will be created for a given element. a xul element, for example, will have a xulelement type of content node. the layout objects that will be created are determined in a more complex manner. various pieces of information are used such as the tag name, the attributes on an element, various css properties, the elements and layout objects around the element, and the xbl associat...

Creating a Skin - Archive of obsolete content
chrome.txt of the following form: skin,install,url,file:///stuff/blueswayedshoes/ where the last part points to the directory you created. make sure to add a slash at the end. copy the original findfile.css into the new directory. we'll use this as a basis for the new skin. we can then refer to it using the url 'chrome://findfile/skin/findfile.css'. adding style rules first, let's decide what kind of changes we want to make. we'll make some simple color changes, modify the button styles, and modify the spacing a bit. let's start with the menus, toolbars and the overall tab panel. the following style rules added to findfile.css will cause the changes shown in the accompanying image. window > box { background-color: #0088cc; } menubar,menupopup,toolbar,tabpanels { background-color: li...

Custom Tree Views - Archive of obsolete content
t tree view. in this section, we will look at creating a custom view. this is necessary when the page has a lot of data or that data is highly nested. for instance, 5000 rows of treeitems would load too slowly. you might also implement a custom view when you want to perform computations on the data to be displayed. since the view can store and retrieve the data in the most suitable manner for the kind of data used, the tree can be used even when there are hundreds of thousands of rows to be displayed. note: the tree-related interfaces changed in gecko 1.8. see tree widget changes for details. to implement a custom view, you will need to create an object which implements the nsitreeview interface. you can create these objects in javascript, but you will need a separate object for each tree. n...

Input Controls - Archive of obsolete content
xtbox to have default text, supply it with the value attribute. disabled set to true to have text entry disabled. textbox.type you can set this attribute to the special value password to create a textbox that hides what it types. this is usually used for password entry fields. maxlength the maximum number of characters that the textbox allows. note that while in html, several different kinds of fields can be created with the input element, in xul there are separate elements for each type. the following example shows some textboxes: example 1 : source view <label control="some-text" value="enter some text"/> <textbox id="some-text"/> <label control="some-password" value="enter a password"/> <textbox id="some-password" type="password" maxlength="8"/> multiline textbox the textbo...

Install Scripts - Archive of obsolete content
ed to be installed. you can also set files to be moved and deleted. start the process of installing the necessary files. it is important to note that during step two, you only indicate which files should be installed and any other operations you wish to have happen. no files get copied until step three. because of this, you can easily specify a number of files to be installed, come across some kind of error, and abort the whole process without modifying the user's system. the component registry mozilla maintains a file which is a registry of all the components that are currently installed. components include new chrome packages, skins and plugins. when a new component is installed, the registry gets updated. the registry also stores the set of files and version information about the install...

Introduction - Archive of obsolete content
equired to compile and debug can be lengthy. with xul, an interface can be implemented and modified quickly and easily. xul has all the advantages of other xml languages. for example xhtml or other xml languages such as mathml or svg can be inserted within it. also, text displayed with xul is easily localizable, which means that it can be translated into other languages with little effort. what kinds of user interfaces can be made with xul? xul provides the ability to create most elements found in modern graphical interfaces. some elements that can be created are: input controls such as textboxes and checkboxes toolbars with buttons or other content menus on a menu bar or pop up menus tabbed dialogs trees for hierarchical or tabular information keyboard shortcuts the displayed con...

More Event Handlers - Archive of obsolete content
ed from the event coordinates to get the event position relative to the element. load events the load event is sent to the document (the window tag) once the xul file has finished loading and just before the content is displayed. this event is commonly used to initialize fields and perform other tasks that need to be done before the user can use the window. you should use a load event to do these kinds of things as opposed to adding a script at the top level outside of a function. this is because the xul elements may not have loaded or fully initialized yet, so some things may not work as expected. to use a load event, place an onload attribute on the window tag. call code within the load handler which will initialize the interface as necessary. there is also an unload event which is called on...

Trees - Archive of obsolete content
later sections. also, events do not get sent to treeitem element and their children; instead they get sent to the treechildren element. that the treeitems are unlike other xul elements is a common source of confusion for xul developers. essentially, the tree content view is a view where the data for the cells is supplied from tags placed inside the tree. naturally, if you are using a different kind of view, the data will be supplied from another source, and there won't be any treeitem elements at all. let's start by looking at how to create a simple tree with multiple columns using the tree content view. this could be used to create a list of mail messages. there might be multiple columns, such as the sender and the subject. example tree with treechildren example 2 : source view <tree f...

XML - Archive of obsolete content
es like xpcom, which also went into mozilla. gecko reads xul and makes interfaces just as our specially created memo is nothing but text unless there is an application for making use of the structure in some way, so too our xul widgets are just marked-up text unless there is software to interpret the structures and render the xul as actual widgets. all xml requires a parser or an engine of some kind at the receiving end to make it run. this is, in short, what gecko is. gecko is a rendering engine that understands xul and knows how to make it into pixels on the screen. mozilla is a product made with all these technologies, but gecko is the thing sitting inside that renders that product. gecko was designed to be lightweight, standards-compliant and cross-platform, so rather than defining on ...

XUL Coding Style Guidelines - Archive of obsolete content
s are very similar, but use the pound sign instead of <!--<var>xxxxx</var>-->: # localization note entity name : content we recognize that translation is a subset of localization even though we've consistently referred to our notes as "localization note". files not to be localized? some files live in the tree but aren't really part of the build; they're just there as programming examples or a kind of source documentation. to prevent them from being localized, you may insert a line of comment following the xml declaration as follows. <?xml version="1.0" encoding='utf-8'?> <!-- do not localize this file: [reason...] it isn't part of the build; --> when translators see this line, they won't bother to look at the rest of the file. references xul is discussed in depth in xul language spec a...

datepicker - Archive of obsolete content
with a higher tabindex are later in the tab sequence. type type: one of the values below you can set the type attribute to one of the values below to specify the type of datepicker to use normal a datepicker with three fields for entering the year, month and date. this is the default value so do not specify the type attribute if this kind is desired. grid a datepicker that displays a calendar grid where one month is shown at a time. popup a datepicker with three entry fields but an additional dropdown button, which, when pressed, will display a popup calendar grid. value type: string the initial value of the datepicker in the form yyyy-m...

Creating XULRunner Apps with the Mozilla Build System - Archive of obsolete content
yet checked into the main repository or making your own changes to deploy as part of a customized xulrunner build. so basically, almost everyone should be able to skip the next section. building xulrunner still here? hey, it's not all bad. you'll get a warm fuzzy feeling from mastering the complex but very powerful mozilla build system. and all that furniture you smash in the meantime makes great kindling to get you through those cold winter nights. let's face it, it was probably time for you to get some new furniture anyway. everything you ever wanted to know about building mozilla (and thus xulrunner) can be found in the build documentation. follow the instructions for meeting build requirements and getting the source, then come back here since the build process itself will be slightly diffe...

xbDesignMode.js - Archive of obsolete content
ock ***** * version: mpl 1.1/gpl 2.0/lgpl 2.1 * * the contents of this file are subject to the mozilla public license version * 1.1 (the "license"); you may not use this file except in compliance with * the license. you may obtain a copy of the license at * http://www.mozilla.org/mpl/ * * software distributed under the license is distributed on an "as is" basis, * without warranty of any kind, either express or implied. see the license * for the specific language governing rights and limitations under the * license. * * the original code is netscape cross browser design mode code. * * the initial developer of the original code is * netscape communications corporation. * portions created by the initial developer are copyright (c) 2003 * the initial developer. all rights reserv...

Archived Mozilla and build documentation - Archive of obsolete content
ozilla uses standard gif, png, and jpeg images for the buttons and css to style everything else in the interface. creating a skin for seamonkey 2.x you're going to make a theme for seamonkey 2, but don't know how? i hope this manual will help you. creating regular expressions for a microsummary generator a regular expression is a special kind of string (i.e. a sequence of characters) that matches patterns of characters in other strings. microsummary generators use them to identify the pages that the generators know how to summarize by matching patterns in those pages' urls. dehydra the development focus switched to dxr (where the "d" comes from "dehydra"), which is based on clang instead of ...

2006-10-27 - Archive of obsolete content
sions final ff release already announced october 23rd: axel hecht posted an answer to cédric corazza posting. cédric's posting was about a french site which had already announced the availablity of ff 2.0 final release and provided download links, even though the release was on october 24. the owner of the site probably browsed on the releases/2.0 dir on the ftp and got the releases, which is kind of unpolite. cédric wanted to know if the release directory should be closed before a major release to avoid this kind of thing to happen. axel responded by stating that cédric should send them a nice note to correct that. on the same day cédric replied to axel's posting stating that he was going to forward a note to tristan separately. on the same day paul reed replied to cédric's pos...

SAX - Archive of obsolete content
;1"] .createinstance(components.interfaces.nsisaxxmlreader); after you created the sax parser, you need to set the handlers for the events you're interested in and fire off the parsing process. all functionality is available through the nsisaxxmlreader interface. set the handlers handlers are user-defined objects implementing sax handler interfaces, depending on what kind of information they need to get from the parser. after the parsing process is started, handlers receive a series of callbacks for the content of xml being parsed. the following handlers are available: interface purpose nsisaxcontenthandler receive notification of the logical content of a document (e.g. elements, attributes, whitespace, and processing instructions). ...

Threats - Archive of obsolete content
lware. website malware is a growing problem. business needs have changed the way websites store sensistive data, with more usage of cloud services. but hackers may make out money, data and confidential information from your website by infecting website with malware. for example, site can be infected with a malware redirect hack in which a legitimate redirects to spam site or a phishing page. this kind of malware is widespread on wordpress websites. for more detailed look on this you can refer to this detailed post on wordpress malware redirect. phishing. phishing is a method of a social engineering with the goal of obtaining sensitive data such as passwords, usernames, credit card numbers. the attacks often comes in form of instant messages or phishing emails which appear to be legitimate bu...

Sunbird Theme Tutorial - Archive of obsolete content
of the toolbar buttons, and provide different icons on the buttons. but a theme cannot provide an extra button. what do you need to make a theme? to make a theme, you usually need these tools: a jar tool or zip tool an editor for plain text files software for creating and editing images note: some zip tools only work with files whose names have <tt>.zip</tt> at the end. you can use this kind of zip tool if you rename each file before and after using the tool. you also need knowledge of: using your operating system to create files and directories using the tools listed above css graphic design knowledge of xul, xbl and javascript is useful for advanced themes. making a theme a theme consists of: a unique identifier a file containing information about the theme a file that...

Developing cross-browser and cross-platform pages - Archive of obsolete content
ay enter a page through a link, bookmark, search engine or cache with a "wrong" browser. let's see a basic example of this approach. // bad sample if (navigator.appversion.charat(0) == "8") { if (navigator.appname == "netscape") { isns8 = true; alert("netscape 8"); }; } else if (navigator.appversion.indexof("msie") != -1) { isie = true; alert("internet explorer"); }; while this kind of checking in the above code can work in a crude sense, sharp readers may wonder what happens when internet explorer 8 is released or when an opera 8.x user visits the page or even when an user with any non-netscape browser starting with a "8" character in the appversion string visits that page. as new browsers are released, it becomes necessary to make updates to such code which attempts to nar...

display-outside - Archive of obsolete content
arent and children to be of particular display types. for example, a table-row box requires its parent to be a table row group box and its children to be table-cell boxes. layout-specific leaf types these display types require their parent to be of a particular display type, but can accept any display-inside value. for example, a table-caption box must have a table parent, but can establish any kind of formatting context for its children. formal syntax syntax not found in db! specifications specification status comment css display module level 3the definition of 'display-outside' in that specification. candidate recommendation initial definition ...

Array comprehensions - Archive of obsolete content
array comprehension syntax was a javascript expression which allowed you to quickly assemble a new array based on an existing one. however, it has been removed from the standard and the firefox implementation. do not use it! syntax [for (x of iterable) x] [for (x of iterable) if (condition) x] [for (x of iterable) for (y of iterable) x + y] description inside array comprehensions, these two kinds of components are allowed: for...of and if the for-of iteration is always the first component. multiple for-of iterations or if statements are allowed. array comprehension was previously proposed to be standardized in ecmascript 2016, it provide a useful shortcut for constructing a new array based on the contents of another. comprehensions can often be used in place of calls to map() and ...

Generator comprehensions - Archive of obsolete content
as a javascript expression which allowed you to quickly assemble a new generator function based on an existing iterable object. however, it has been removed from the standard and the firefox implementation. do not use it! syntax (for (x of iterable) x) (for (x of iterable) if (condition) x) (for (x of iterable) for (y of iterable) x + y) description inside generator comprehensions, these two kinds of components are allowed: for...of and if the for-of iteration is always the first component. multiple for-of iterations or if statements are allowed. a significant drawback of array comprehensions is that they cause an entire new array to be constructed in memory. when the input to the comprehension is itself a small array the overhead involved is insignificant — but when the input is...

JSException - Archive of obsolete content
g evaluated. tokenindex the index into the source string where the error occurred. getwrappedexception instance method getwrappedexception. declaration public object getwrappedexception() description getwrappedexception() returns an object that represents the value that the javascript actually threw. javascript can throw any type of value. use getwrappedexception() to determine what kind of value the object return type represents. getwrappedexceptiontype instance method getwrappedexceptiontype. declaration public int getwrappedexceptiontype() description getwrappedexceptiontype() returns an int that matches one of the following static ints declared by the jsexception class: exception_type_empty exception_type_void exception_type_object exception_type_function except...

Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
> <p> our clown trigger is a bold little fish, though for a few weeks he slept a lot and didn't look well in general. he's much better now. </p> </div> basically, that's all that was needed. the reason for the class value being card is that the original idea was to style each fish's description like a trading card. although this design approach was abandoned fairly quickly, 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 boxe...

Correctly Using Titles With External Stylesheets - Archive of obsolete content
title attribute affects how your external stylesheet is applied to a document. in fact, the use of the title attribute is so significant that html 4.01 categorizes stylesheets according to the presence or absence of a title. by including a title attribute, you can control whether a particular stylesheet always affects a document, or if it is only used under certain circumstances. there are three kinds of stylesheets that are possible: persistent, preferred, and alternate stylesheets. authors will be most familiar with persistent stylesheets, of which any number may be applied to a document at once. a persistent stylesheet is one which has no title attribute and a value of stylesheet supplied for the rel attribute. a document may refer to one or more persistent stylesheets, all of which are u...

RDF in Fifty Words or Less - Archive of obsolete content
mean,really? to a mozilla developer, it means that the rdf data model (the "graph") can be used as a mechanism for integrating and organizing internet resources. let's look at an example:bookmarks. right now, most web browsers let you organize your bookmarks hierarchically intofolders. each bookmark is apointer to a web page called a uri (uniform resource identifier). but a web page is just one kind of internet resource. there are tons of others, including email messages, usenet news articles (or entire usenet news groups), and search results from your favorite web crawler, just to name a few. and fundamentally, there's no reason that you shouldn't be able to treat these as "bookmarks" as well, grouping them together into folders as you please, or maybe even creating "smart" folders that, wh...

RDF in Mozilla FAQ - Archive of obsolete content
lows for sophisticated pattern matching against the rdf graph. see the xul:template guide. (these are bizarrely arranged because the eventual intent is to introduce templates using the extended form -- which in many ways is conceptually simpler, even if more verbose -- and then treat the "simple" form as a shorthand for the extended form.) what can i build with a xul template? you can build any kind of content using a xul template. you may use any kind of tag (including html, or arbitrary xml) in the <action> section of a <rule>. when should i use a xul template? one alternative to using rdf and xul templates is to use the w3c dom apis to build up and manipulate a xul (or html) content model. there are times, however, when doing so may be inconvenient: there are several "views" of the d...

Windows Media in Netscape - Archive of obsolete content
scape 7.1 introduces geckoactivexobject which can be used in a similar way to create instances of the windows media player. the following javascript illustrates one approach using object detection of activexobject and geckoactivexobject to determine if the windows media activex control is supported and available for use. javascript will dynamically write out what browser you are running, and what kind of windows media player technology you may have. example 1: client-side detection scripts browser architecture supports: netscapeplugin windows media player installed: true windows media scriptable: false windows media version: pluginversion a complete source code listing showing how that detection was done can be found here (devedge-temp). below, some of the salient points are illus...

Introduction to game development for the Web - Game development
site to a server to transmit data back and forth in real-time. perfect for multiplayer gaming action, chat services, and so forth. web workers workers give you the ability to spawn background threads running their own javascript code, to take advantage of modern, multi-core processors. xmlhttprequest and file api the combination of xmlhttprequest and the file api lets you send and receive any kind of data you want (don't let the "xml" throw you!) from a web server. this is a great way to do anything from downloading new game levels and artwork to transmitting non-real-time game status information back and forth. ...

Tools for game development - Game development
y in javascript, webgl, etc., bridging the gap between flash and web standards. this article shows how to make use of shumway, and how to contribute fixes and bugs to the project. ...

Game over - Game development
the easiest thing to do is to check whether the center of the ball is between the left and right edges of the paddle. update the last bit of code you modified again, to the following: if(y + dy < ballradius) { dy = -dy; } else if(y + dy > canvas.height-ballradius) { if(x > pad...

Physics - Game development
ine has gravity and friction set to zero. adding gravity would result in the ball falling down while friction would eventually stop the ball. fun with physics you can do much more with physics, for example by adding ball.body.gravity.y = 100; you will set the vertical gravity of the ball. as a result it will be launched upwards, but then fall due to the effects of gravity pulling it down. this kind of functionality is just the tip of the iceberg — there are various functions and variables that can help you manipulate the physics objects. check out the official physics documentation and see the huge collection of examples using the arcade and p2 physics systems. compare your code you can check the finished code for this lesson in the live demo below, and play with it to understand better...

Visual-js game engine - Game development
f visual js library in any other project (even commercial projects) as long as the copyright header is left intact except for plugins on sale and graphics that come with them (they have special commercial licence). 3) please read the following terms and conditions before using this application: disclaimer of warranty 'visual js' is provided "as-is" and without warranty of any kind, express, implied or otherwise, including without limitation, any warranty of merchantability or fitness for a particular purpose. in no event shall the author of this software be held liable for data loss, damages, loss of profits or any other kind of loss while using or misusing this software. external licences in this project : webcam nui control is under : creat...

Accessibility tree (AOM) - MDN Web Docs Glossary: Definitions of Web-related terms
e four things in an accessibility tree object: name how can we refer to this thing? for instance, a link with the text ‘read more’ will have ‘read more’ as its name (more on how names are computed in the accessible name and description computation spec). description how do we describe this element, if we want to add anything to the name? the description of a table could explain what kind of info that table offers. role what kind of thing is it? for example, is it a button, a nav bar, or a list of items? state does it have a state? think checked/unchecked for checkboxes, or collapsed/expanded for the <summary> element. additionally, the accessibility tree often contains information on what can be done with an element: a link can be followed, a text input can be typed into, e...

CMS - MDN Web Docs Glossary: Definitions of Web-related terms
learn more general knowledge content management system on wikipedia ...

Callback function - MDN Web Docs Glossary: Definitions of Web-related terms
here is a quick example: function greeting(name) { alert('hello ' + name); } function processuserinput(callback) { var name = prompt('please enter your name.'); callback(name); } processuserinput(greeting); the above example is a synchronous callback, as it is executed immediately. note, however, that callbacks are often used to continue code execution after an asynchronous operation has completed — these are called asynchronous callbacks. ...

DoS attack - MDN Web Docs Glossary: Definitions of Web-related terms
ts of various techniques to exhaust these resources and make a server or a network unavailable to legitimate users, or at least make the server perform sluggishly. there are also distributed denial of service (ddos) attacks in which a multitude of servers are used to exhaust the computing capacity of an attacked computer. types of dos attack dos attacks are more of a category than a particular kind of attack. here is a non-exhaustive list of dos attack types: bandwidth attack service request flood syn flooding attack icmp flood attack peer-to-peer attack permanent dos attack application level flood attack learn more denial-of-service attack on wikipedia denial-of-service on owasp ddos ...

Denial of Service - MDN Web Docs Glossary: Definitions of Web-related terms
ts of various techniques to exhaust these resources and make a server or a network unavailable to legitimate users, or at least make the server perform sluggishly. there are also distributed denial of service (ddos) attacks in which a multitude of servers are used to exhaust the computing capacity of an attacked computer. types of dos attack dos attacks are more of a category than a particular kind of attack. here is a non-exhaustive list of dos attack types: bandwidth attack service request flood syn flooding attack icmp flood attack peer-to-peer attack permanent dos attack application level flood attack learn more denial-of-service attack on wikipedia denial-of-service on owasp ddos ...

HMAC - MDN Web Docs Glossary: Definitions of Web-related terms
with such a combination, the hmac verification algorithm is then known with a compound name such as hmac-sha1. hmac is used to ensure both integrity and authentication. ...

Latency - MDN Web Docs Glossary: Definitions of Web-related terms
latency is the network time it takes for a requested resource to reach its destination. low latency is good, meaning there is little or no delay. high latency is bad, meaning it takes a long time for the requested resource to reach its destination. latency can be a factor in any kind of data flow, but is most commonly discussed in terms of network latency (the time it takes for a packet of data to travel from source to destination) and media codec latency (the time it takes for the source data to be encoded or decoded and reach the consumer of the resulting data). learn more understanding latency ...

MVC - MDN Web Docs Glossary: Definitions of Web-related terms
pdate the view to display the data in a different format, e.g., change the item order to alphabetical, or lowest to highest price. in this case the controller could handle this directly without needing to update the model. mvc on the web as a web developer, this pattern will probably be quite familiar even if you've never consciously used it before. your data model is probably contained in some kind of database (be it a traditional server-side database like mysql, or a client-side solution such as indexeddb [en-us].) your app's controlling code is probably written in html/javascript, and your user interface is probably written using html/css/whatever else you like. this sounds very much like mvc, but mvc makes these components follow a more rigid pattern. in the early days of the web, mvc a...

Method - MDN Web Docs Glossary: Definitions of Web-related terms
note: in javascript functions themselves are objects, so, in that context, a method is actually an object reference to a function. ...

Modem - MDN Web Docs Glossary: Definitions of Web-related terms
a modem ("modulator-demodulator") is a device that converts digital information to analog signals and vice-versa, for sending data through networks. different kinds are used for different networks: dsl modems for telephone wires, wifi modems for short-range wireless radio signals, 3g modems for cellular data towers, and so on. modems are different from routers, but many companies sell modems combined with routers. learn more general knowledge modem on wikipedia ...

Navigation directive - MDN Web Docs Glossary: Definitions of Web-related terms
from a given context. frame-ancestors specifies valid parents that may embed a page using <frame>, <iframe>, <object>, <embed>, or <applet>. ...

Parameter - MDN Web Docs Glossary: Definitions of Web-related terms
a parameter is a named variable passed into a function. parameter variables are used to import arguments into functions. note the difference between parameters and arguments: function parameters are the names listed in the function's definition. function arguments are the real values passed to the function. parameters are initialized to the values of the arguments supplied. two kinds of parameters: input parameters the most common kind; they pass values into functions. depending on programming language, input parameters can be passed several ways (e.g., call-by-value, call-by-address, call-by-reference). output/return parameters primarily return multiple values from a function, but not recommended since they cause confusion learn more general knowledge difference be...

Script-supporting element - MDN Web Docs Glossary: Definitions of Web-related terms
...

State machine - MDN Web Docs Glossary: Definitions of Web-related terms
. a transition is a set of actions to execute when a condition is fulfilled or an event received. in a state diagram, circles represent each possible state and arrows represent transitions between states. looking at the final state, you can discern something about the series of inputs leading to that state. there are two types of basic state machines: deterministic finite state machine this kind allows only one possible transition for any allowed input. this is like the "if" statement in that if x == true then dothis else dothat is not possible. the computer must perform one of the two options. non-deterministic finite state machine given some state, an input can lead to more than one different state. . figure 1: deterministic finite state machine in figure 1, the state begins in...

UX - MDN Web Docs Glossary: Definitions of Web-related terms
ux is an acronym that stands for user experience. it is the study of the interaction between users and a system. its goal is to make a system easy to interact with from the user's point of view. the system can be any kind of product or application that an end user is meant to interact with. ux studies undertaken on a web page for example can demonstrate whether it is easy for users to understand the page, navigate to different areas, and complete common tasks, and where such processes could have less friction. learn more general knowledge user experience on wikipedia ...

Property (JavaScript) - MDN Web Docs Glossary: Definitions of Web-related terms
static properties hold data that are shared among all object instances. a property has a name (a string) and a value (primitive, method, or object reference). note that when we say that "a property holds an object", that is shorthand for "a property holds an object reference". this distinction matters because the original referenced object remains unchanged when you change the property's value. ...

Speculative parsing - MDN Web Docs Glossary: Definitions of Web-related terms
r scripts, style sheets and images it finds ahead in the stream and runs the html tree construction algorithm speculatively. the upside is that when a speculation succeeds, there's no need to reparse the part of the incoming file that was already scanned for scripts, style sheets and images. the downside is that there's more work lost when the speculation fails. this document helps you avoid the kind of things that make speculation fail and slow down the loading of your page. to make speculative loads of linked scripts, style sheets and images successful, avoid document.write. if you use a <base> element to override the base uri of your page, put the element in the non-scripted part of the document. don't add it via document.write() or document.createelement. avoiding losing tree builder ...

Mobile accessibility - Learn web development
ontent="width=device-width; user-scalable=yes"> you should never set user-scalable=no if at all possible — many people rely on zoom to be able to see the content of your website, so taking this functionality away is a really bad idea. there are certain situations where zooming might break the ui; in such cases, if you feel that you absolutely need to disable zoom, you should provide some other kind of equivalent, such as a control for increasing the text size in a way that doesn't break your ui. keeping menus accessible because the screen is so much narrower on mobile devices, it is very common to use media queries and other technologies to make the navigation menu shrink down to a tiny icon at the top of the display — which can be pressed to reveal the menu only if it's needed — when...

Test your skills: HTML accessibility - Learn web development
load the starting point for this task to work in your own editor or in an online editor. html accessibility 3 in this task you are required to turn all the information links in the paragraph into good, accessible links. the first two links just go to regular web pages. the third link goes to a pdf, and it's large — 8mb. the fourth link goes to a word document, so the user will need some kind of application installed that can handle that. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. html accessibility 4 in our final html accessibility task, you are given a simple image gallery, which has some accessibility problems. can you fix them? the header image has an ac...

Advanced styling effects - Learn web development
...

Type, class, and ID selectors - Learn web development
ement if it is being chained together with another element and a descendant combinator). in the following example we have used the universal selector to remove the margins on all elements. this means that instead of the default styling added by the browser, which spaces out headings and paragraphs with margins, everything is close together and we can't see the different paragraphs easily. this kind of behavior can sometimes be seen in "reset stylesheets", which strips out all of the browser styling. since the universal selector makes global changes, we use it to deal with very specific situations such as the one outlined below. using the universal selector to make your selectors easier to read one use of the universal selector is to make selectors easier to read and more obvious in terms ...

Flexbox - Learn web development
system to create web layouts. why flexbox? for a long time, the only reliable cross browser-compatible tools available for creating css layouts were things like floats and positioning. these are fine and they work, but in some ways they are also rather limiting and frustrating. the following simple layout requirements are either difficult or impossible to achieve with such tools, in any kind of convenient, flexible way: vertically centering a block of content inside its parent. making all the children of a container take up an equal amount of the available width/height, regardless of how much width/height is available. making all columns in a multiple column layout adopt the same height even if they contain a different amount of content. as you'll see in subsequent sections, f...

Floats - Learn web development
dy introduction to css.) objective: to learn how to create floated features on webpages, and to use the clear property and other methods of clearing floats. the background of floats the float property was introduced to allow web developers to implement simple layouts involving an image floating inside a column of text, with the text wrapping around the left or right of it. the kind of thing you might get in a newspaper layout. but web developers quickly realized that you can float anything, not just images, so the use of float broadened, for example to fun layout effects such as drop-caps. floats have commonly been used to create entire web site layouts featuring multiple columns of information floated so they sit alongside one another (the default behavior would be for t...

Practical positioning examples - Learn web development
prerequisites: html basics (study introduction to html), and an idea of how css works (study introduction to css.) objective: to get an idea of the practicalities of positioning a tabbed info-box the first example we'll look at is a classic tabbed info box — a very common feature used when you want to pack a lot of information into a small area. ...

Styling links - Learn web development
let's look at a really simple example that adds an icon to external links (links that lead to other sites.) such an icon usually looks like a little arrow pointing out of a box — for this example, we'll use this great example from icons8.com. let's look at some html and css that will give us the effect we want. first, some simple html to style: <p>for more infor...

Web fonts - Learn web development
ogle fonts, a useful free service, especially for rapid testing work and writing demos. most of these services are easy to use, so we won't cover them in great detail. let's have a quick look at google fonts, so you can get the idea. again, use copies of web-font-start.html and web-font-start.css as your starting point. go to google fonts. use the filters on the left-hand side to display the kinds of fonts you want to choose and choose a couple of fonts you like. to select a font family, press the ⊕ button alongside it. when you've chosen the font families, press the [number] families selected bar at the bottom of the page. in the resulting screen, you first need to copy the line of html code shown and paste it into the head of your html file. put it above the existing <link> element...

How can we design for all types of users? - Learn web development
prerequisites: you should first read what is accessibility?, since we don't cover accessibility in detail here. objective: universal design means design for everybody, regardless of disabilities or technical constraints. this article lists the most important quick-wins for universal design. summary when you're building a website, one top issue to consider is universal design: accommodating all users regardless of disability, technical constraints, culture, location, and so on. active learning there is no active learning available yet. ...

How much does it cost to do something on the Web? - Learn web development
read on about how to choose and install a text editor. if you're more focused on design, take a look at the anatomy of a web page. ...

What is the difference between webpage, website, web server, and search engine? - Learn web development
importantly, since a web server can host multiple websites, the term web server is never used to designate a website, as it could cause great confusion. in our previous example, if we said, "my web server is not responding", it means that multiple websites on that web server are not available. search engine search engines are a common source of confusion on the web. a search engine is a special kind of website that helps users find web pages from other websites. there are plenty out there: google, bing, yandex, duckduckgo, and many more. some are generic, some are specialized about certain topics. use whichever you prefer. many beginners on the web confuse search engines and browsers. let's make it clear: a browser is a piece of software that retrieves and displays web pages; a search engi...

What are browser developer tools? - Learn web development
correct versions of the code and see what you get. alert('hello!); document.cheeseselector('html').style.backgroundcolor = 'purple'; const mywordmark = document.createelement('img'); mybanana.setattribute('src','https://blog.mozilla.org/press/wp-content/themes/onemozilla/img/mozilla-wordmark.png'); document.queryselector('h1').appendchild(mywordmark); you'll start to see the kind of errors that the browser returns. often these errors are fairly cryptic, but it should be pretty simple to figure these problems out! find out more find more out about the javascript console in different browsers: firefox web console ie javascript console chrome javascript console (opera's inspector works the same as this) safari console ...

What is a web server? - Learn web development
ly an application server and a database. we call it "dynamic" because the application server updates the hosted files before sending content to your browser via the http server. for example, to produce the final webpages you see in the browser, the application server might fill an html template with content from a database. sites like mdn or wikipedia have thousands of webpages. typically, these kinds of sites are composed of only a few html templates and a giant database, rather than thousands of static html documents. this setup makes it easier to maintain and deliver the content. active learning there is no active learning available yet. deeper dive to review: to fetch a webpage, your browser sends a request to the web server, which searches for the requested file in its own storage sp...

Common questions - Learn web development
ning pages for your website, it's good to have an idea of the most common layouts. this article runs through some typical web layouts, looking at the parts that make up each one. what is accessibility? this article introduces the basic concepts behind web accessibility. how can we design for all types of users? this article provides basic techniques to help you design websites for any kind of user — quick accessibility wins, and other such things. what html features promote accessibility? this article describes specific features of html that can be used to make a webpage more accessible to people with different disabilities. html, css and javascript questions for common solutions to html/css/javascript problems, try the following articles: use html to solve common pro...

Client-side form validation - Learn web development
lidation guide, and the constraint validation api reference. validating forms without a built-in api in some cases, such as legacy browser support or custom controls, you won't be able to or won't want to use the constraint validation api.you're still able to use javascript to validate your form, but you'll just have to write your own. to validate a form, ask yourself a few questions: what kind of validation should i perform? you need to determine how to validate your data: string operations, type conversion, regular expressions, and so on. it's up to you. what should i do if the form doesn't validate? this is clearly a ui matter. you have to decide how the form will behave. does the form send the data anyway? should you highlight the fields that are in error? should you display erro...

How to structure a web form - Learn web development
e elements used to provide structure and meaning to the different parts of a form. prerequisites: basic computer literacy, and a basic understanding of html. objective: to understand how to structure html forms and give them semantics so they are usable and accessible. the flexibility of forms makes them one of the most complex structures in html; you can build any kind of basic form using dedicated form elements and attributes. using correct structure when building an html form will help ensure that the form is both usable and accessible. the <form> element the <form> element formally defines a form and attributes that determine the form's behavior. each time you want to create an html form, you must start it by using this element, nesting all the contents in...

Styling web forms - Learn web development
type="radio">, <input type="checkbox">, <input type="range">, <input type="text">, <input type="date"> input, <select>, <textarea>,<input type="submit">, and <button>. the right column on the other hand shows the same elements with our above rule applied to them. notice how this lets us ensure that all of the elements occupy the same amount of space, despite the platform's default rules for each kind of widget. what may not be apparent via the screenshot is that the radio and checkbox controls still look the same, but they are centered in the 150px of horizontal space provided by the width property. other browsers may not center the widgets, but they do adhere to the space allotted. legend placement the <legend> element is okay to style, but it can be a bit tricky to control placement of...

Test your skills: Advanced styling - Learn web development
ing, you'll need to add back one of the features it was providing, to keep same look and feel we originally had. how do you do this? one thing that is inconsistent across browsers (particularly looking at safari here) is the position of the standard blue focus outline. how can you remove this? there is a major problem with just getting rid of the blue focus outline. what is it? can you add some kind of styling back in so that users can tell when the search box is being hovered or focused? another thing that commonly denotes a search box is a magnifying glass icon. we've made one available in the same directory as our html files — see search-24px.png — plus a <div> element after the search input to help you attach it, should you need it. can you figure out a sensible way to attach it, an...

Test your skills: Styling basics - Learn web development
e tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. styling basics 1 our basic form styling assessment is fairly free-form, and you have a lot of flexibility over what you end up doing here. but your css should aim to fulfill the following requirements: add some kind of lightweight "reset" to make fonts, padding, margin, and sizing more consistent to begin with. on top of that, add in some nice, consistent styling for the inputs and button. use some kind of layout technique to make the inputs and labels line up neatly. download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practi...

Your first form - Learn web development
attribute is the type attribute. this attribute is extremely important because it defines the way the <input> element appears and behaves. you'll find more about this in the basic native form controls article later on. in our simple example, we use the value <input/text> for the first input — the default value for this attribute. it represents a basic single-line text field that accepts any kind of text input. for the second input, we use the value <input/email>, which defines a single-line text field that only accepts a well-formed e-mail address. this turns a basic text field into a kind of "intelligent" field that will perform some validation checks on the data typed by the user. it also causes a more appropriate keyboard layout for entering email addresses (e.g. with an @ symbol by ...

What will your website look like? - Learn web development
ading, an image, and a few paragraphs. to begin, you'll need to answer these questions: what is your website about? do you like dogs, new york, or pac-man? what information are you presenting on the subject? write a title and a few paragraphs and think of an image you'd like to show on your page. what does your website look like, in simple high-level terms? what's the background color? what kind of font is appropriate: formal, cartoony, bold and loud, subtle? note: complex projects need detailed guidelines that go into all the details of colors, fonts, spacing between items on a page, appropriate writing style, and so on. this is sometimes called a design guide, design system, or brand book, and you can see an example at the firefox photon design system. sketching out your design n...

Define terms with HTML - Learn web development
re not suitable for marking up dialogue, because conversation does not directly describe the speakers. here are recommendations for marking up dialogue. the terms described go inside <dt> elements. the matching description follows immediately, contained within one or more <dd> elements. enclose the whole description list with a <dl> element. ...

Debugging HTML - Learn web development
code is? this article will introduce you to some tools that can help you find and fix errors in html. prerequisites: html familiarity, as covered in, for example, getting started with html, html text fundamentals, and creating hyperlinks. objective: learn the basics of using debugging tools to find problems in html. debugging isn't scary when writing code of some kind, everything is usually fine, until that dreaded moment when an error occurs — you've done something wrong, so your code doesn't work — either not at all, or not quite how you wanted it to. for example, the following shows an error reported when trying to compile a simple program written in the rust language. here, the error message is relatively easy to understand — "unterminated double qu...

HTML text fundamentals - Learn web development
ing a writing system other than the latin alphabet. <i> is used to convey a meaning traditionally conveyed by italic: foreign words, taxonomic designation, technical terms, a thought... <b> is used to convey a meaning traditionally conveyed by bold: key words, product names, lead sentence... <u> is used to convey a meaning traditionally conveyed by underline: proper name, misspelling... a kind warning about underline: people strongly associate underlining with hyperlinks. therefore, on the web, it's best to underline only links. use the <u> element when it's semantically appropriate, but consider using css to change the default underline to something more appropriate on the web. the example below illustrates how it can be done. <!-- scientific names --> <p> the ruby-throated hummin...

Adding vector graphics to the Web - Learn web development
nent of the image is an element that can be styled via css or scripted via javascript. so why would anyone want to use raster graphics over svg? well, svg does have some disadvantages: svg can get complicated very quickly, meaning that file sizes can grow; complex svgs can also take significant processing time in the browser. svg can be harder to create than raster images, depending on what kind of image you are trying to create. svg is not supported in older browsers, so may not be suitable if you need to support older versions of internet explorer with your web site (svg started being supported as of ie9.) raster graphics are arguably better for complex precision images such as photos, for the reasons described above. note: in inkscape, save your files as plain svg to save space. ...

HTML table advanced features and accessibility - Learn web development
llows: you add a unique id to each <th> element. you add a headers attribute to each <td> element. each headers attribute has to contain a list of the ids of all the <th> elements that act as a header for that cell, separated by spaces. this gives your html table an explicit definition of the position of each cell in the table, defined by the header(s) for each column and row it is part of, kind of like a spreadsheet. for it to work well, the table really needs both column and row headers. returning to our spending costs example, the previous two snippets could be rewritten like this: <thead> <tr> <th id="purchase">purchase</th> <th id="location">location</th> <th id="date">date</th> <th id="evaluation">evaluation</th> <th id="cost">cost (€)</th> </tr> </thead...

Functions — reusable blocks of code - Learn web development
ng to find in the main string, and the substring to replace that string with: let mytext = 'i am a string'; let newstring = mytext.replace('string', 'sausage'); note: when you need to specify multiple parameters, they are separated by commas. it should also be noted that sometimes parameters are optional — you don't have to specify them. if you don't, the function will generally adopt some kind of default behavior. as an example, the array join() function's parameter is optional: let myarray = ['i', 'love', 'chocolate', 'frogs']; let madeastring = myarray.join(' '); // returns 'i love chocolate frogs' let madeastring = myarray.join(); // returns 'i,love,chocolate,frogs' if no parameter is included to specify a joining/delimiting character, a comma is used by default. function scope a...

Test your skills: Loops - Learn web development
ber, returns true if the number is a prime number, and false if not. you need to use a loop to go through the numbers 2 to 500 backwards (1 is not counted as a prime number), and run the provided isprime() function on them. for each number that isn't a prime number, continue on to the next loop iteration. for each one that is a prime number, add it to the paragraph's textcontent along with some kind of separator. you should use a type of loop that you've not used in the previous two tasks. download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the interactive editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online share...

Client-side storage - Learn web development
ee first steps, building blocks, javascript objects), the basics of client-side apis objective: to learn how to use client-side storage apis to store application data. client-side storage? elsewhere in the mdn learning area we talked about the difference between static sites and dynamic sites. most major modern web sites are dynamic — they store data on the server using some kind of database (server-side storage), then run server-side code to retrieve needed data, insert it into static page templates, and serve the resulting html to the client to be displayed by the user's browser. client-side storage works on similar principles, but has different uses. it consists of javascript apis that allow you to store data on the client (i.e. on the user's machine) and then retriev...

Drawing graphics - Learn web development
the spotlight object, on the other hand, is a directional beam of light, more like a flashlight/torch (or a spotlight, in fact). last of all, let's add our draw() function to the bottom of the code: function draw() { cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera);...

Third-party APIs - Learn web development
of steps to follow that you can use as an approach for working with new apis. find the documentation when you want to use a third party api, it is essential to find out where the documentation is, so you can find out what features the api has, how you use them, etc. the new york times api documentation is at https://developer.nytimes.com/. get a developer key most apis require you to use some kind of developer key, for reasons of security and accountability. to sign up for an nytimes api key, following the instructions at https://developer.nytimes.com/get-started. let's request a key for the article search api — create a new app, selecting this as the api you want to use (fill in a name and description, toggle the switch under the "article search api" to the on position, and then c...

Client-side web APIs - Learn web development
create your own files, you could try out (most of) the code examples in an online coding program such as jsbin or glitch. guides introduction to web apis first up, we'll start by looking at apis from a high level — what are they, how do they work, how do you use them in your code, and how are they structured? we'll also take a look at what the different main classes of apis are, and what kind of uses they have. manipulating documents when writing web pages and apps, one of the most common things you'll want to do is manipulate web documents in some way. this is usually done by using the document object model (dom), a set of apis for controlling html and styling information that makes heavy use of the document object. in this article, we'll look at how to use the dom in detail, along...

Basic math in JavaScript — numbers and operators - Learn web development
ues and their datatypes. the strict versions tend to result in fewer errors, so we recommend you use them. if you try entering some of these values in a console, you'll see that they all return true/false values — those booleans we mentioned in the last article. these are very useful, as they allow us to make decisions in our code, and they are used every time we want to make a choice of some kind. for example, booleans can be used to: display the correct text label on a button depending on whether a feature is turned on or off display a game over message if a game is over or a victory message if the game has been won display the correct seasonal greeting depending what holiday season it is zoom a map in or out depending on what zoom level is selected we'll look at how to code such...

What is JavaScript? - Learn web development
but you should be careful if you find yourself adding lots of comments to explain what variables are (your variable names perhaps should be more intuitive), or to explain very simple operations (maybe your code is overcomplicated). summary so there you go, your first step into the world of javascript. we've begun with just theory, to start getting you used to why you'd use javascript and what kind of things you can do with it. along the way, you saw a few code examples and learned how javascript fits in with the rest of the code on your website, amongst other things. javascript may seem a bit daunting right now, but don't worry — in this course, we will take you through it in simple steps that will make sense going forward. in the next article, we will plunge straight into the practical...

Object building practice - Learn web development
lowing to create a new ball instance: let testball = new ball(50, 100, 4, 4, 'blue', 10); try calling its members: testball.x testball.size testball.color testball.draw() when you enter the last line, you should see the ball draw itself somewhere on the canvas. updating the ball's data we can draw the ball in position, but to actually move the ball, we need an update function of some kind. add the following code at the bottom of your javascript file, to add an update() method to the ball()'s prototype: ball.prototype.update = function() { if ((this.x + this.size) >= width) { this.velx = -(this.velx); } if ((this.x - this.size) <= 0) { this.velx = -(this.velx); } if ((this.y + this.size) >= height) { this.vely = -(this.vely); } if ((this.y - this.size)...

Introduction to the server side - Learn web development
e responses based on analysis of this data. for example, amazon and google both advertise products based on previous searches (and purchases). note: if you're a facebook user, go to your main feed and look at the stream of posts. note how some of the posts are out of numerical order - in particular, posts with more "likes" are often higher on the list than more recent posts. also look at what kind of ads you are being shown — you might see ads for things you looked at on other sites. facebook's algorithm for highlighting content and advertising can be a bit of a mystery, but it is clear that it does depend on your likes and viewing habits! summary congratulations, you've reached the end of the first article about server-side programming. you've now learned that server-side code is r...

Server-side website programming - Learn web development
for example, imagine how many products are available on amazon, and imagine how many posts have been written on facebook. ...

Accessibility in React - Learn web development
e focus back to our "edit" button when the edit is saved or cancelled appears deceptively easy. surely we could add a condition to our useeffect to focus on the edit button if isediting is false? let's try it now — update your useeffect() call like so: useeffect(() => { if (isediting) { editfieldref.current.focus(); } else { editbuttonref.current.focus(); } }, [isediting]); this kind of mostly works. head back to your browser and you’ll see that your focus moves between edit <input> and "edit" button as you start and end an edit. however, you may have noticed a new problem — the "edit" button in the final <todo /> component is focussed immediately on page load, before we even interact with the app! our useeffect() hook is behaving exactly as we designed it: it runs as so...

Beginning our React todo list - Learn web development
words are not needed by sighted users; they are there to provide more information about what the button does for screenreader users that do not have the extra visual context to help them. further down, you can find our <ul> element: <ul role="list" classname="todo-list stack-large stack-exception" aria-labelledby="list-heading" > the role attribute helps assistive technology explain what kind of element a tag represents. a <ul> is treated like a list by default, but the styles we're about to add will break that functionality. this role will restore the "list" meaning to the <ul> element. if you want to learn more about why this is necessary, you can check out scott o'hara’s article, “fixing lists”. the aria-labelledby attribute tells assistive technologies that we're treating ...

Starting our Svelte Todo list app - Learn web development
ecause these words are not needed by sighted users; they are there to provide more information about what the button does for screenreader users that do not have the extra visual context to help them. further down, you can find the following <ul> element: <ul role="list" classname="todo-list stack-large" aria-labelledby="list-heading"> the role attribute helps assistive technology explain what kind of semantic value an element has — or what its purpose is. a <ul> is treated like a list by default, but the styles we're about to add will break that functionality. this role will restore the "list" meaning to the <ul> element. if you want to learn more about why this is necessary, you can check out scott o'hara’s article, “fixing lists”. the aria-labelledby attribute tells assistive t...

Getting started with Svelte - Learn web development
reate a starter app template is to just download the starter template application. you can do that by visiting sveltejs/template on github or you can avoid having to download and unzip it and just use degit. to create your starter app template, run the following terminal commands: npx degit sveltejs/template moz-todo-svelte cd moz-todo-svelte npm install npm run dev note: degit doesn't do any kind of magic — it just lets you download and unzip the latest version of a git repo's contents. this is much quicker than using git clone because it will not download all the history of the repo, or create a complete local clone. after running npm run dev, svelte will compile and build your application. it will start a local server at localhost:5000. svelte will watch for file updates, and automa...

Getting started with Vue - Learn web development
el" and "linter / formatter" are selected. if they are not, use the arrow keys and the space bar to toggle them on. once they are selected, press enter to proceed. next you’ll select a config for the linter / formatter. navigate to "eslint with error prevention only" and hit enter again. this will help us catch common errors, but not be overly opinionated. next you are asked to configure what kind of automated linting we want. select "lint on save". this will check for errors when we save a file inside the project. hit enter to continue. now, you will select how we want your config files to be managed. "in dedicated config files" will put your config settings for things like eslint into their own, dedicated files. the other option, "in package.json", will put all of your config settings i...

Introduction to automated testing - Learn web development
us and it is fairly accessible to beginners. you could also try using other solutions: grunt works in a very similar way to gulp, except that it relies on tasks specified in a config file, rather than using written javascript. see getting started with grunt for more details. you can also run tasks directly using npm scripts located inside your package.json file, without needing to install any kind of extra task runner system. this works on the premise that things like gulp plugins are basically wrappers around command line tools. so, if you can work out how to run the tools using the command line, you can then run them using npm scripts. it is a bit trickier to work with, but can be rewarding for those who are strong with their command line skills. why npm scripts? provides a good introduc...

Command line crash course - Learn web development
ly, if you look back at your javascript file you’ll find it has been reformatted to something like this: const myobj = { a: 1, b: { c: 2 }, }; function printme(obj) { console.log(obj.b.c); } printme(myobj); depending on your workflow (or the workflow that you pick) you can make this an automated part of your process. automation is really where tools excel; our personal preference is the kind of automation that "just happens" without having to configure anything. with prettier there's a number of ways automation can be achieved and though they're beyond the scope of this article, there's some excellent resources online to help (some of which have been linked to). you can invoke prettier: before you commit your code into a git repository using husky. whenever you hit "save" in you...

Deploying our app - Learn web development
things, also allows you to run pre-deployment tasks, which in our case means that all the production code build processes can be performed inside of netlify and if the build is successful, the website changes will be deployed. although netlify offers a drag and drop deployment service, we are intending to trigger a new deployment to netlify each time we push to a github repo. it's exactly these kinds of connected services that we would encourage you to look for when deciding on your own build toolchain. we can commit our code and push to github and the updated code will automatically trigger the entire build routine. if all is well, we get a live change deployed automatically. the only action we need to perform is that initial "push". however, we do have to set these steps up, and we'll loo...

Introducing a complete toolchain - Learn web development
roject releases and much more. in the next chapter we will push to a github code repository, which will cause a cascade effect that (should) deploy all the software to a home on the web. netlify is a hosting service for static websites (that is, websites that entirely consist of files that do not change in real time), which lets us deploy multiple times a day and freely hosts static sites of all kinds. netlify is what provides the "home on the web" mentioned above — free hosting for us to deploy our test app to. once you've signed up for github (click the sign up link on the homepage if you don't already have an account, and follow the instructions), you can use your github account for authentication on netlify (click sign up, then choose github from the "sign up with one of the following...

Understanding client-side web development tools - Learn web development
the basics of the core html, css, and javascript languages first before attempting to use the tools detailed here. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started guides 1. client-side tooling overview in this article we provide an overview of modern web tooling, what kinds of tools are available and where you’ll meet them in the lifecycle of web app development, and how to find help with individual tools. 2. command line crash course in your development process you'll undoubtedly be required to run some command in the terminal (or on the "command line" — these are effectively the same thing). this article provides an introduction to the terminal, the essenti...

Accessibility Features in Firefox
thml community contributions the real reason behind firefox's success is the great community of volunteers and organizations that realize they have something to benefit from a browser open to utilizing their ideas and hard work. contributions come in many forms. the mozilla firefox community welcomes bug reports, ideas, documentation, answering questions in the support forums -- and nearly any kind of community involvement resulting in a browser built for a broader audience of users and developers. here are a couple of success stories from businesses who contributed accessibility code because they needed an accessible web browser which supported their software: contributes accessible web applications (dhtml and ajax) ibm realized it needed a way to enable accessibility for ever more pow...

Accessibility information for UI designers and developers
spacing to at least 0.16 times the font size this does not mean that your page needs to offer controls to make such changes, merely that if someone does these things in a custom stylesheet, they should not break the interface. forms in forms, provide labels for all controls. this includes form elements like inputs and select boxes, but also buttons. for form elements, it should be clear what kind of input is expected. placeholders are best avoided for this, as they are often too low in contrast. it is more helpful to describe what an input element is for in text just above or underneath the input. error recovery when you detect users provide unexpected input, explain what is wrong and, if possible, how to correct it. this is specifically important in these cases: the user input is ab...

CSUN Firefox Materials
b page community contributions the real reason behind firefox's success is the great community of volunteers and organizations that realize they have something to benefit from a browser open to utilizing their ideas and hard work. contributions come in many forms. the mozilla firefox community welcomes bug reports, ideas, documentation, answering questions in the support forums -- and nearly any kind of community involvement resulting in a browser built for a broader audience of users and developers. here are a couple of success stories from businesses who contributed accessibility code because they needed an accessible web browser which supported their software: ibm contributes accessible web applications (dhtml and ajax) ibm realized it needed a way to enable accessibility for ever more pow...

Software accessibility: Where are we today?
cklist whenever using xbl to create a new widget. support msaa and atk via nsiaccessible when developing new controls: mozilla is a great position to provide context so that custom controls can be made accessible. engineers can provide context simply by creating an nsiaccessible for each custom control. the infrastructure to do this is straightforward. other developers no matter what kind of work you do, the basis of accessibility is the need to understand that every user is different. after that, the exact techniques may change depending on the engineering environment. see see also below for information and tools for both web and desktop application developers. ...

Mozilla’s UAAG evaluation report
is available in-process, but not via an out-of-process (com) interface. out-of-process access is needed for it to be truly useful for assistive technology we do support some com interfaces called isimpledomnode, which has a large portion of useful dom read access 6.3 programmatic access to non-html/xml content. (p1) ni still working on active accessibility support for other kinds of content 6.4 programmatic operation. (p1) vg can use keyboard api to control mozilla, by generating keystrokes programmatically when in-process, can use dom to generate events uses active accessibility to provide program access to controls do not support all active accessibility features for programmatic operation (put_accname, put_accvalue not yet supported) ...

Frequently Asked Questions for Lightweight themes
introducing lightweight themes what are lightweight themes? lightweight themes are easy-to-install, easy-to-use skins that change the look of your firefox web browser. there are hundreds of thousands community-designed themes to choose from, with more added every day. start looking here for designs that fit your style. what kind of computers and operating systems do lightweight themes work with? lightweight themes work with any type of computer that has firefox installed. this includes mac, linux, windows, and android platforms. what can lightweight themes do? lightweight themes change the header area of your browser, including the tab text color and the background tab colors. you can easily preview a design and install it without needing to restart. installing lightweight themes ho...

Continuous Integration
heriffs see a build or test has been broken, they are empowered to take one of several actions, including backing out a patch which caused the problem and closing the tree (i.e., preventing any additional commits). results in treeherder are ordered by mercurial pushes. each taskcluster job is represented by a colored label; green means a job has succeeded, while other colors represent different kinds of problems. the label text indicates the job type. for a full list of job types, see the help menu in treeherder's upper-right corner. below is a list of the most common. builds b - normal build jobs; these jobs perform compilation and some compiled-code tests (e.g., 'make check'). be - b2g build jobs for engineering builds; user builds are denoted with b, the same as for desktop and an...

Creating a Firefox sidebar
web publishers can offer visitors a firefox sidebar to encourage their engagement. there are two ways to create a sidebar for firefox users: the social api and an extension. you can choose either depending on your needs and resources. an extension an extension is a kind of add-ons that adds new functionalities to firefox. there is a wide range of extensions available, and some of them provide a sidebar. such kind of sidebar can be a simple web panel or a full-featured extension that is completely integrated with the browser. there are some ways to create an extension: the new sidebar api has been implemented in firefox 29 as part of the add-on sdk. it's the easiest way to create an extension with a sidebar.obsolete since gecko 57 you can also build a restartless extension yourself witho...

Debugging Table Reflow
e data dump shows that no width has yet been assigned to the columns mcolwidths=-1 -1 -1 -1, -1 stands for: #define width_not_set -1 this is followed by a reference to the column frame pointers: col frame cache -> 0=00b93138 1=00b931f0 2=024dd728 3=024dd780 this is followed by the information which width has been set for each column. the index of the column, whether it is anonymous and what kind of constrained has been appliedcolindex=0 isanonymous=0 constraint=0. the following constraint types are known: enoconstraint = 0, epixelconstraint = 1, // pixel width epercentconstraint = 2, // percent width eproportionconstraint = 3, // 1*, 2*, etc. cols attribute assigns 1* e0proportionconstraint = 4 // 0*, means to force to min width after this follo...

Commenting IDL for better documentation
er cookie_not_yummy = 1; /** * the cookie is good but not awesome. */ const integer cookie_sort_of_yummy = 2; /** * the cookie is really, really yummy. */ const integer cookie_extremely_yummy = 3; /** * omg this is the best cookie evar!1!!1. */ const integer cookie_omg_yummy = 4; /** * the cookie monster's name. */ readonly attribute astring name; /** * the cookie monster's favorite kind of cookie. must be one of the * cookie_flavor_* constants. */ attribute integer favoritecookie; /** * a value from 0-100 indicating how hungry the cookie monster is. * 0 means "stuffed to the brim with cookies" and 100 means "i'm so empty of * cookies! feed me now!" */ attribute integer hungerlevel; /** * feeds a cookie to the cookie monster. * @param cookietoeat the nsicookie to eat. ...

Developer guide
e code, and the coding style guide. build instructions how to build firefox, thunderbird, seamonkey, or other mozilla applications. development process overview an overview of the entire mozilla development process. managing multiple profiles when working with prerelease versions of firefox, it's often helpful to have multiple firefox profiles, such as one for each channel, or for different kinds of testing. getting documentation updated how to ensure that documentation is kept up to date as you develop. mozilla modules and module ownership this article provides information about mozilla's modules, what the role of a module owner is, and how module owners are selected. code snippets useful code samples for a wide variety of things you might need to figure out how to do. mozilla de...

Communicating with frame scripts
dsyncmessage() must be json-serializable, so chrome can't return functions. removemessagelistener() to stop listening for messages from content, use the message manager's removemessagelistener() method: // chrome script messagemanager.removemessagelistener("my-addon@me.org:my-e10s-extension-message", listener); chrome to content to send a message from chrome to content, you need to know what kind of message manager you're using. if it's a browser message manager, you can use the message manager's sendasyncmessage method: // chrome script browser.messagemanager.sendasyncmessage("my-addon@me.org:message-from-chrome"); if you have a window or a global message manager, you need to use the broadcastasyncmessage method: // chrome script window.messagemanager.broadcastasyncmessage("my-addon@m...

Message manager overview
cripts" use a frame message manager to load these frame scripts into the content process use the frame message manager api to communicate with the frame script some older articles on multiprocess firefox and the message manager might refer to "content scripts" instead of "frame scripts". this usage is deprecated because the add-on sdk uses "content script" to refer to a similar but different kind of script. so fundamentally, frame message managers enable chrome code to: load a script into a frame (essentially, a single browser tab) in the content process. these scripts are called "frame scripts". communicate with frame scripts using message-passing apis there are various types of frame message managers, as depicted in this diagram: this diagram shows the setup when there are 2 ...

Performance
thing twice under the same id. better: // addon.js function onunload() { services.mm.removedelayedframescript("resources://my-addon/framescript.js"); services.ppmm.removedelayedprocessscript("resources://my-addon/processcript.js"); services.mm.broadcastasyncmessage("my-addon:unload"); services.ppmm.broadcastasyncmessage("my-addon:unload"); } in the frame/process scripts: remove all kinds of listeners remove observer notifications remove custom categories and services nuke sandboxes unload jsms restore content dom states where necessary, e.g. remove interactive ui elements that would be inert with the addon ...

Process scripts
ocessscript(). if you do, you must call removedelayedprocessscript() when your extension is disabled or removed the message-passing apis are the same: sendasyncmessage() is available in both directions, while sendsyncmessage() is available from content to chrome only process scripts are system-privileged, and have access to the components object. however, process scripts are subject to the same kinds of limitations as frame scripts (for example, no file system access). process scripts stay loaded until their host process is closed. the environment for process scripts is similar to that for frame scripts. however, you don't get access to web content or dom events from a process script. retrieving the content frame message manager for a content window when an observer notification in a pr...

Message manager overview
there are three different subtypes of frame message manager: the global message manager, the window message manager, and the browser message manager. all three enable chrome code to: load a script into a frame in the content the content process using a loadframescript() function. these scripts are called "frame scripts". communicate with frame scripts using addmessagelistener() ...

Performance best practices for Firefox front-end engineers
be responsive to the user. you might want to consider using a worker if you need to do some computation that can be done off of the main thread. if you need more elevated privileges than a standard worker allows, consider using a chromeworker, which is a firefox-only api which lets you create workers with more elevated privileges. use requestidlecallback() if you simply cannot avoid doing some kind of long job on the main thread, try to break it up into smaller pieces that you can run when the browser has a free moment to spare, and the user isn't doing anything. you can do that using requestidlecallback() and the cooperative scheduling of background tasks api, and doing it only when we have a free second where presumably the user isn’t doing something. see also the blog post collective ...

Security best practices for Firefox front-end engineers
uses of innerhtml and similar dom apis. the linter makes an exception for code that uses string literals that are hard coded in the source code, assuming benevolent developers. developers are able to avoid tripping the rule by using escaping functions in combination with template strings, for example: bar.innerhtml = escapehtml`<a href='${url}'>about</a>`; in system-privileged chrome code, any kind of remaining scripts will still be removed by our sanitizer. appendix list of disallowed dom apis innerhtml outerhtml insertadjacenthtml() createcontextualfragment() document.write() document.writeln() please take a look at the repository for an updated list ...

Embedding the editor
do stack, and typing state. the implementation of the editing session would be responsible for swapping out the editor's state on focus changes etc. more than one editor per window current composer clients in the mozilla codebase all assume that there is only one <editor> tag per window. they all need to be able to deal with multiple editors. fixing this would require js changes of the following kind: standardize the way that clients get at the editorshell (or its replacement, post-embedding work) from the window. ensure that focus changes between editors update the window's notion of the "current" editor. if we continue to use window.editorshell, then this needs to be updated on focus changes. ensure that each editor is properly constructed on window setup, and torn down on window des...

How to Report a Hung Firefox
e the approximate amount of time you waited before forcing a crash (below) in the bug report. if you suspect a hang (as opposed to slow performance), wait one minute on an idle system before getting the stack trace. the crash report link for a hang, obtained by following the steps below. submit a crash report for a hung firefox the easiest way to help the firefox stability team to debug these kinds of hangs is to make the hung firefox crash and submit a crash report. then file a bug report with the crash report id. the steps to induce a crash are slightly different on each platform: windows on windows, the stability team has written a utility which will inject a crash into firefox which will trigger the crash reporter: download crashfirefox.exe here (source code). running this tool will ...

IPDL Best Practices
chance that an ipdl function could be called after the protocol itself has been destroyed, or before it has been created? don't let it happen - that is a guaranteed crash right there. use a flag and the generated actordestroy function to control when ipdl functions can be called; see phttpchannelparent/child for an example. ...

JavaScript-DOM Prototypes in Mozilla
that are inherited by real classes, but are not real classes. a few examples of class constructor names would be htmlimageelement, htmldocument, element, nodelist, and two examples of class prototype names would be node and characterdata. this registration is done with the nsscriptnamespacemanager, which is in charge of keeping track of what names are registered in the global namespace, and what kinds of names those names are (i.e. class constructor name, class prototype name). when a class constructor name is registered (nsglobalnamestruct::etypeclassconstructor), the nsscriptnamespacemanager is given a dom class info id (a 32 bit id that identifies class info defined in nsdomclassinfo). when a class prototype name is registered (nsglobalnamestruct::etypeclassproto), the nsscriptnamespaceman...

Addon
api consumers should take care to verify the existence of these methods or properties before relying on them. ...

AddonManager
ager object is the global api used to access information about add-ons installed in the application and to manipulate them. the majority of the methods are asynchronous meaning that results are delivered through callbacks passed to the method. the callbacks will be called just once but that may be before or after the method returns. one of the forces of the addonmanager is that it deals with any kind (type) of add-on in a generic manner. to do so many methods of the addonmanager take the add-on types as parameters. the existing add-on types are defined in xpiprovider.jsm and are, at this time, the following: extension, theme, locale, multipackage, dictionary and experiment. to import the addonmanager object in the add-on sdk, use: const { addonmanager } = require("resource://gre/modules/add...

InstallListener
void onnewinstall( in addoninstall install ) parameters install the addoninstall representing the install ondownloadstarted() called when downloading begins for an add-on install. 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 instal...

CustomizableUI.jsm
ms for which wrapper.forwindow(win) will return null. nb: will throw if called too early (before placements have been fetched) or if the area is not currently known to customizableui. parameters aarea the id of the area whose widgets you want to obtain. return value an array containing the widget wrappers and/or null values for the widget ids placed in an area. getareatype() check what kind of area (toolbar or menu panel) an area is. this is useful if you have a widget that needs to behave differently depending on its location. note that widget wrappers have a convenience getter property (areatype) for this purpose. parameters aarea the id of the area whose type you want to know return value type_toolbar or type_menu_panel depending on the area, null if the area is unknown. ...

WebRequest.jsm
browser. method string the http method used (get, post, etc). responseheaders array of http headers. the http response headers that were received. this is only included if you set "responseheaders" in the opt_extrainfospec argument. statuscode number http response code. types resource types the resource type string identifies the kind of resource being fetched. it's used in two places: filtering requests by type, and as the type property of the argument passed to the listener. the following types are supported: "main_frame" "sub_frame" "stylesheet" "script" "image" "object" "xmlhttprequest" http headers https headers are represented as objects with two pr...

Webapps.jsm
ls.import("resource://gre/modules/webapps.jsm"); // exported symbol is domapplicationregistry method overview init: function() loadcurrentregistry: function() notifyappsregistrystart: function notifyappsregistrystart() notifyappsregistryready: function notifyappsregistryready() sanitizeredirects: function sanitizeredirects(asource) _savewidgetsfullpath: function(amanifest, adestapp) appkind: function(aapp, amanifest) updatepermissionsforapp: function(aid, aispreinstalled) updateofflinecacheforapp: function(aid) installpreinstalledapp: function installpreinstalledapp(aid) removeifhttpsduplicate: function(aid) installsystemapps: function() loadandupdateapps: function() updatedatastore: function(aid, aorigin, amanifesturl, amanifest) _registersystemmessagesforentrypoint: functi...

Application Translation with Mercurial
nd files already have been translated and later also to see which new strings have already been tested in the product as being a good translation for the functionality behind the translated strings and that the translated texts fit into the available, the translation progress should be tracked. this can be done in a text editor or word processor or any other tool in which you can attach different kind of states to the individual texts to translate. the firefox extension scrapbook is used in this guide. install it into your default firefox profile (you will have more than one profile when following this guide). getting the current texts in english and your locale obtaining the english texts with the source code get the source code by downloading the following file: firefox desktop or fire...

Localization content best practices
shouldn't make assumptions as to what those structures will be: instead, let locales/localizers decide. when in doubt, ask the localizers. date and time formats for example, you shouldn't hard code date formats into applications: %a, %b %e // resulting in wednesday, may 20 this is fine in english, but in italian results in "mercoledì, mag 20", which sounds unnatural. every time you use this kind of structure, you should have a localizable string behind it, and let localizers decide the best order for their language. units another example is localizing percentages or units. some locales use a space between the number and the % symbol, some don't, some use a non-breaking space. splitting splitting sentences into several keys often inadvertently presumes a grammar, a sentence structure,...

Localizing extension metadata on addons.mozilla.org
e add-on's default locale (selected in step 1). the values you provide here are used as fallback values if someone requests a language that doesn't exist. step 4 allows you to translate any of the above fields into any other language amo supports. remember, all fields are optional when localizing. any field that is blank will just show up in the default locale. getting translation help you are kindly advised not to use any automatic online translation, which can bring unpleasant low-quality output to users. always prefer a qualified human translation. amo doesn't directly provide translation assistance to extension authors, but there are a couple services that can help: babelzilla.org babelzilla.org is a community dedicated to the localization of extensions for moz family apps. they are ...

Mozilla Port Blocking
son for the change, a deep understanding of the security risk involved and be able to justify it. things to do allow user preference to override default port blocking. currently you need to add preferences to either user.js or all.js. see bug 85601. per protocol port blocking/enabling preferences. better user interface allow the user to decide if the blocking is really required. some kind of way to manage the ports which are blocked. more information nsioservice.cpp gbadportlist bug 83401 vulnerability note vu#476267 dougt@netscape.com original document information author(s): doug turner last updated date: august 15, 2007 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creati...

GC and CC logs
serenv["moz_cc_log_directory"] = os.environ["moz_upload_dir"] browserenv["moz_cc_log_shutdown"] = "1" analyzing gc and cc logs there are numerous scripts that analyze gc and cc logs on github. to find out why an object is being kept alive, the relevant scripts are find_roots.py and parse_cc_graph.py (which is called by find_roots.py). calling find_roots.py on a cc log with a specific object or kind of object will produce paths from rooting objects to the specified objects. most big leaks include an nsglobalwindow, so that's a good class to try if you don't have any better idea. to fix a leak, the next step is to figure out why the rooting object is alive. for a c++ object, you need to figure out where the missing references are from. for a js object, you need to figure out why the js objec...

Leak-hunting strategies and tips
a string could be a very large leak, but the object graphs are small and easy to identify using gc-based leak detection.) what leak tools do we have? tool finds platforms requires leak tools for large object graphs leak gauge windows, documents, and docshells only all platforms any build gc and cc logs js objects, dom objects, many other kinds of objects all platforms any build leak tools for medium-size object graphs bloatview, refcount tracing and balancing objects that implement nsisupports or use moz_count_{ctor,dtor} all tier 1 platforms debug build (or build opt with --enable-logrefcnt) leaksoup (part of tracemalloc) all objects? (or allocations?) all tier 1 platforms build with...

Leak Gauge
it has two parts: (a) instrumentation in gecko that produces a log file, and (b) a script to post-process the log file. getting a log file to get a log file, run the browser with the following environment variables set. nspr_log_modules=domleak:5,documentleak:5,nsdocshellleak:5,nodeinfomanagerleak:5 nspr_log_file=nspr.log # or any other filename of your choice this will overwrite any existing file called nspr.log. the browser will run with negligible slowdown. you must exit the browser before post-processing the log file or the results will be unreliable. ...

Refcount tracing and balancing
at support this). refcount balancing is a follow-up step that analyzes the resulting log to help a developer figure out where refcounting went wrong. how to build for refcount tracing build with --enable-debug or --enable-logrefcnt. how to run with refcount tracing on there are several environment variables that can be used. first, you select one of three environment variables to choose what kind of logging you want. you almost certainly want xpcom_mem_refcnt_log. note: due to an issue with the sandbox on windows (bug 1345568), refcount logging currently requires the moz_disable_content_sandbox environment variable to be set. xpcom_mem_refcnt_log setting this environment variable enables refcount tracing. if you set this environment variable to the name of a file, the log will be ...

Scroll-linked effects
at use scrolling effects without listening for scroll events in javascript will not get this warning. see the asynchronous scrolling in firefox blog post for some more examples of effects that can be implemented using css to avoid jank. future improvements going forward, we would like to support more effects in the compositor. in order to do so, we need you (yes, you!) to tell us more about the kinds of scroll-linked effects you are trying to implement, so that we can find good ways to support them in the compositor. currently there are a few proposals for apis that would allow such effects, and they all have their advantages and disadvantages. the proposals currently under consideration are: web animations: a new api for precisely controlling web animations in javascript, with an additio...

TimerFirings logging
r::timeouthandler -991946880[7f46c365ba00]: [6775] iface timer (one_shot 200 ms): 7f46964d7f80 -1340643584[7f46c365ec00]: [6775] obs timer (slack 1000 ms): 7f46a95a0200 each line has the following information. the first two values identify the thread. this is not especially useful. the next value is the process id (pid). this is useful in a multi-process scenario. next is the timer kind, one of fn (function), iface (interface) or obs (observer), which are the three kinds of timers that gecko supports. then comes the function kind, one of one_shot (a single-use timer), slack or precise (repeating timers of differing precision). then comes the timer period, measured in milliseconds. finally there is the identifying information for the timer. function timers have an informative ...

about:memory
e to view the contents of this file within about:memory in their own firefox instance. if you are using a communication channel where only text can be sent, such as a comment thread on a website, click on the "measure..." button. this will cause a tree-like structure to be generated text within about:memory. this structure is just text, so you can copy and paste some or all of this text into any kind of text buffer. (you don't need to take a screenshot.) this text contains fewer measurements than a memory reports file, but is often good enough to diagnose problems. don't click "measure..." repeatedly, because that will cause the memory usage of about:memory itself to rise, due to it discarding and regenerating large numbers of dom nodes. note that in both cases the generated data contains p...

A brief guide to Mozilla preferences
f/services-sync.js - default preferences for firefox sync, also oddly misplaced browser/app/profile/channel-prefs.js - a file indicating the user's update channel. this is kept separate from other preferences because it can affect how updates are applied. browser/app/profile/firefox.js - defaults specific to firefox browser/app/profile/firefox-branding.js - defaults specific to the specific kind of firefox being installed (nightly, aurora, beta, release) browser/defaults/preferences/firefox-l10n.js - defaults specific to the installed language of firefox. none of the other preference files contain locale-specific preferences. config. file a configuration file, usually with .cfg extension, may be called from a default pref file via the general.config.filename preference. this fi...

Firefox Sync
an index for all technical documentation related to sync. it is not designed for use by end-users, but instead for people who wish to understand the details of how sync is implemented or wish to interact with it. general the always prolific richard newman has written a couple of notes about bookmark syncing (first, second) and has a blog where he talks about the various challenges syncing this kind of data. servers documentation for the various servers, including information on how to host your own. android searchfox has links to the main sync code and the storage layer. there are also some notes in a google document (that we really must move to its own wiki page) there's also information available to help debug and diagnose android sync issues. ios there is some in-tree documentatio...

Optimizing Applications For NSPR
bility to perform scheduling during i/o. still, there is no enforceable mechanism to guarantee thread scheduling fairness. calendar time facilities are limited on macintosh. one can only determine the immediate setting of daylight savings time, not what it would be at some arbitrary time in the past or the future. initialization of nspr may fail if the host is not connected to a network of some kind. win-16 http://www.sybase.com/products/languages/watccpl.html the win-16 port is unique in the nspr world in that it uses the watcom development environment. this environment does bring along some of its own special trappings. win16 uses co-operative non-preemptive dispatching for its own processes. this means that when the application using nspr is dispatched, a thread within that applicat...

I/O Functions
ccesses. memory-mapped i/o functions are currently implemented for unix, linux, mac os x, and win32 only. pr_createfilemap pr_memmap pr_memunmap pr_closefilemap anonymous pipe function pr_createpipe polling functions this section describes two of the most important polling functions provided by nspr: pr_poll pr_getconnectstatus pollable events a pollable event is a special kind of file descriptor. the only i/o operation you can perform on a pollable event is to poll it with the pr_poll_read flag. you cannot read from or write to a pollable event. the purpose of a pollable event is to combine event waiting with i/o waiting in a single pr_poll call. pollable events are implemented using a pipe or a pair of tcp sockets connected via the loopback address, therefore setting...

PRFileInfo
...

PRFileInfo64
...

PRFileType
...

PR_Poll
socket objects. a count of the number of ready descriptors is returned unless a timeout occurs, in which case zero is returned. the in_flags field of the prpolldesc data structure should be set to the i/o events (readable, writable, exception, or some combination) that the caller is interested in. on successful return, the out_flags field of the prpolldesc data structure is set to indicate what kind of i/o is ready on the respective descriptor. pr_poll uses the out_flags fields as scratch variables during the call. if pr_poll returns 0 or -1, the out_flags fields do not contain meaningful values and must not be used. the prpolldesc structure is defined as follows: struct prpolldesc { prfiledesc* fd; print16 in_flags; print16 out_flags; }; typedef struct prpolldesc prpolldesc; the ...

PR_Shutdown
possible values include the following: pr_shutdown_rcv. further receives will be disallowed. pr_shutdown_send. further sends will be disallowed. ...

An overview of NSS Internals
email and some instant messaging implementations, a dbm library that implements the classic database storage, and finally a core nss library for the big set of “everything else”. newer generations of the database use the sqlite database to allow concurrent access by multiple applications. all of the above are provided as shared libraries. the crmf library, which is used to produce certain kinds of certificate requests, is available as a library for static linking only. when dealing with certificates (x.509), file formats such as pkcs#12 (certificates and keys), pkcs#7 (signed data), and message formats as cms, we should mention asn.1, which is a syntax for storing structured data in a very efficient (small sized) presentation. it was originally developed for telecommunication system...

nss tech note3
or ssl server certs or other intermediate ssl ca certs. certusageemailsigner ......... used to verify s/mime email signatures certusageemailrecipient ...... used to encrypt s/mime emails. certusageobjectsigner ........ used to verify signatures on files of executable code, e.g. jar files. certusagestatusresponder ..... used by an ocsp responder certusageverifyca ............ a ca of any kind. each cert has a "type" and a "key usage", each of which may contain one or more valid values. each of the above seccertusages translates into a required set of cert type and key usage for the certificate itself, and into another set of required cert type and key usage for all the ca certs in the cert chain. to determine if a cert is valid for a given cert usage, it must have the the cert type...

Notes on TLS - SSL 3.0 Intolerant Servers
the ssl 3.0 and tls (aka ssl 3.1) specs both contain a provision -- the same provision -- for detecting "version rollback attacks". it is designed to permit a server to detect a man-in-the-middle that is altering the ssl client hello (connection) requests as they pass from the client to the server, altering them by changing the protocol version number to a lower version number. this feature was kind of meaningless until tls (ssl 3.1) came along because there was no version higher than 3.0 from which to be rolled back. tls is now available and used, and products that have implemented the roll-back detection incorrectly are not interoperable with tls/ssl spec-compliant clients. normally the servers which have this problem are not equipped to deal with the tls protocol, but instead of rolling b...

gtstd.html
kcs #11 modules, and the default netscape security databases. a pkcs #11 module (also called a cryptographic module) manages cryptographic services such as encryption and decryption via the pkcs #11 interface. pkcs #11 modules can be thought of as drivers for cryptographic devices that can be implemented in either hardware or software. netscape provides a built-in pkcs #11 module with nss. other kinds of pkcs #11 modules include the netscape fortezza module, used by the government, and the litronic pkcs #11 module for smart card readers. figure 2.1 illustrates the relationships between nspr, ssl, pkcs #11, and the available cryptographic modules. ssl is built on top of nspr, which handles sockets, threads, and related low-level os operations. on any given server or client, one or more pkcs #...

Creating JavaScript jstest reftests
t needs to use shell-specific features, like gc(), either: make the test silently pass if those features aren't present; or make it a jit-test (so that it never runs in the browser); or at the top of the test, add the comment // skip-if(!xulruntime.shell), so that it only runs in the shell. it is easy to make a test silently pass; anyone who has written js code for the web has written this kind of if-statement: if (typeof gc === 'function') { var arr = []; arr[10000] = 'item'; gc(); asserteq(arr[10000], 'item', 'gc must not wipe out sparse array elements'); } else { print('test skipped: no gc function'); } reportcompare(0, 0, 'ok'); handling abnormal test terminations some tests can terminate abnormally even though the test has technically passed. earlier we disc...

SpiderMonkey Internals
e js api. most are jsfastnatives. most string methods are customized to accept a primitive string as the this argument. (otherwise, spidermonkey converts primitive values to objects before invoking their methods, per ecma 262-3 §11.2.1.) error handling spidermonkey has two interdependent error-handling systems: javascript exceptions (which are not implemented with, or even compatible with, any kind of native c/c++ exception handling) and error reporting. in general, both functions inside spidermonkey and jsapi callback functions signal errors by calling js_reporterror or one of its variants, or js_setpendingexception, and returning js_false or null. public apis the public c/c++ interface, called the jsapi, is in most places a thin (but source-compatible across versions) layer over the imp...

Introduction to the JavaScript shell
t which the javascript shell was built. note: clear() with no parameters really clears everything. this includes all these built-in functions. clone(function, [scope]) clones the specified function object. if scope isn't specified, the new object's parent is the same as the original object's. otherwise, the new object is placed in the scope of the object specified by scope. countheap([start[, kind]]) added in spidermonkey 1.8 count the number of live gc things in the heap, or things reachable from start when it is given and is not null. kind is either 'all' (default) to count all things or one of 'object', 'double', 'string', 'function', 'qname', 'namespace', 'xml' to count only things of that kind. dumpheap([filename[, start[, tofind[, maxdepth[, toignore]]]]]) added in spidermonkey 1.

JIT Optimization Outcomes
o many properties are defined on the object, or if delete is used to remove one of the object's properties. singleton one of the types present in the typeset was a singleton type, preventing the optimization from being enabled. notsingleton optimization failed because the object containing the property did not have a 'singleton' type. singleton types are assigned to objects that are "one of a kind", such as global objects, literal objects declared in the global scope, and top-level function objects. notfixedslot the property being accessed is not stored at a known location in the object. this can occur if one of the expected types of objects to be used in this operation has unknown properties, or if different instances of the object store the property at different locations (for example,...

JS::PersistentRooted
the js object, then the c++ object containing the persistentrooted will not be destructed, and the whole blob of objects will not be freed, even if there are no references to them from the outside. in the context of firefox, this is a severe restriction: almost everything in firefox is owned by some js object or another, so using persistentrooted in such objects would introduce leaks. for these kinds of edges, heap<t> or tenuredheap<t> would be better types. it's up to the implementor of the type containing heap<t> or tenuredheap<t> members to make sure their referents get marked when the object itself is marked. js::persistentrooted<t> may be automatically coerced to a js::handle&lt;t&gt; and js::mutablehandle&lt;t&gt;. before spidermonkey 38, persistentrooted<t> itself cannot be a global...

JSNewResolveOp
th only jsclass_new_resolve and no jsclass_new_resolve_gets_start, the hook can assume *objp is null on entry. this is not good practice, but enough existing hook implementations count on it that we can't break compatibility by passing the starting object in *objp without a new jsclass flag. flags the flags argument is the logical or of zero or more of the following flags. the flags describe what kind of property access triggered the resolve callback. (the same flags are used in js_lookuppropertywithflags.) jsresolve_qualified obsolete since jsapi 20 the property access uses the . or [] operator: obj.id or obj[id], not id. jsresolve_assigning obsolete since jsapi 31 the property appears on the left-hand side of an assignment. jsresolve_detecting obsolete since jsapi 20 ...

JS_CheckAccess
write, etc.) vp jsval * out parameter. on success, *vp receives the property's stored value. attrsp unsigned int * out parameter. on success, *attrsp receives the property attributes. description js_checkaccess determines whether the property of obj given by id can be accessed by the code currently running in the context cx. the mode parameter specifies what kind of access to check for. it is one of the following values: value description jsacc_proto check for permission to read to obj's prototype. (this is redundant with passing the string id "__proto__" as id.) jsacc_parent check for permission to read obj's parent. (this is redundant with passing the string id "__parent__" as id.) jsacc_import check for ...

JS_SetNativeStackQuota
scription js_setnativestackquota sets the size of the native stack that should not be exceeded. to disable stack size checking, pass 0. spidermonkey allows for a distinction between system code (such as gcs, which may incidentally be triggered by script but are not strictly performed on behalf of such script), trusted script (as determined by js_settrustedprincipals), and untrusted script. each kind of code may have a different stack quota, allowing embedders to keep higher-priority machinery running in the face of scripted stack exhaustion by something else. the stack quotas for each kind of code should be monotonically descending, and may be specified with this function. if 0 is passed for a given kind of code, it defaults to the value of the next-highest-priority kind. this function may...

JS_SetOptions
nce only, in the same scope object used for compilation. the caller may not modify objects on the scope chain between compilation and execution. this enables compile-time scope chain resolution of consts (a performance optimization). mxr id search for jsoption_compile_n_go jsoption_atline //@line number ["filename"] option supported for the xul preprocessor and kindred beasts. mxr id search for jsoption_atline jsoption_xml obsolete since jsapi 15 ecmascript for xml (e4x) support: parse <!-- --> as a token, not backward compatible with the comment-hiding hack used in html script tags. mxr id search for jsoption_xml jsoption_allow_xml added in spidermonkey 15 if this is off, e4x syntax isn't supported ...

JS_TracerInit
ype description trc jstracer * the tracer to be initialized. cx jscontext * the context in which to perform tracing. callback jstracecallback a callback, described below, which the tracing apis will call each time a pointer is found from one gc thing to another. callback syntax typedef void (*jstracecallback)(jstracer *trc, void *thing, uint32 kind); name type description trc jstracer * the tracer visiting obj. thing void * a gc thing. kind uint32 one of the constants jstrace_object, jstrace_double, jstrace_string; or a tag denoting an internal implementation-specific traversal kind. in the latter case, the only operations the callback may perform on thing are to call js_tracechil...

JSAPI reference
ple, these apis support very smooth integration between the js garbage collector and other garbage collectors.) struct jstracer added in spidermonkey 1.8 js_tracechildren added in spidermonkey 1.8 js_traceruntime added in spidermonkey 1.8 jsval_is_traceable added in spidermonkey 1.8 obsolete since jsapi 31 jsval_to_traceable added in spidermonkey 1.8 obsolete since jsapi 31 jsval_trace_kind added in spidermonkey 1.8 obsolete since jsapi 31 js_tracer_init added in spidermonkey 1.8 obsolete since jsapi 12 js_tracerinit added in spidermonkey 12 obsolete since jsapi 31 js_calltracer added in spidermonkey 1.8 obsolete since jsapi 22 js_set_tracing_details added in spidermonkey 1.8 obsolete since jsapi 26 js_set_tracing_index added in spidermonkey 1.8 obsolete since jsapi 26 js_set_...

Split object
d use a with statement to inject that window into its scope chain, gaining access to that window's privileges. (note: with does add an object to the scope chain, but it's a special with wrapper object that is skipped, or something, during the search described here. this security feature is not peculiar to split objects. ...and yet, there is special code in jsobj.h with a comment about fixing some kind of interaction between with an split objects. write that down, it'll be on the test.) split objects were the solution. the inner window object is different for each page a browser window visits. it serves as the "globals" object and provides the jsprincipals for scripts on that page. access to inner window properties is fast. the outer window object is the object returned by window.open. it re...

Web Replay
n about how a recording/replaying process affects the debugger, and options for future improvements. debugger changes from the perspective of a devtools server, debugging a recording/replaying process is very similar to debugging a live process. when execution is paused, the debugger js object and its various child objects can be used to inspect the execution state in the same way for a either kind of process. here are the main differences: explicit commands must be sent to the debugger to control execution. the replayresumebackward() and replayresumeforward() members may be called to resume execution, and the replaypause() member may be called to pause execution at the next opportunity. a child process can only pause at breakpoints and at snapshot points (currently these only happen ...

Exploitable crashes
ause the browser to crash, but they do so in a predictable way, so they are not exploitable. most crashes fall into this category. check the length of the stack trace. if it's over 300 functions long, it's likely to be a too-much-recursion crash. like null dereferences, these crashes are not exploitable. any other crash where firefox tries to use memory it does not have access to indicates some kind of memory safety bug. these crashes can often be exploited to run arbitrary code, but you can't be as certain as in the case where you see a bogus address at the top of the stack in step 1. finding exploitable crashes exploitable crashes are most often discovered through normal testing and usage, when developers recognize a crash stack in gdb or submitted to a bug as exploitable. additionally, mo...

Secure Development Guidelines
bbv: stack overflow example: void foo(char *bar) { char c[12]; strcpy(c, bar); } int mai...

Task graph
after a change to the gecko source code is pushed to version-control, jobs for that change appear on treeherder. how does this work? a "decision task" is created to decide what to do with the push. the decision task creates a lot of additional tasks. these tasks include build and test tasks, along with lots of other kinds of tasks to build docker images, build toolchains, perform analyses, check syntax, and so on. these tasks are arranged in a "task graph", with some tasks (e.g., tests) depending on others (builds). once its prerequisite tasks complete, a dependent task begins. the result of each task is sent to treeherder where developers and sheriffs can track the status of the push. the outputs from each task, log files, firefox installers, and so on, appear attached to each ...

Gecko object attributes
are "polite", "assertive", and "rude", which is a suggestion for the policy when interrupting the user for changes to this region. please see the aria states and properties module for more information. additional information may be provide by the object attributes atomic and relevant. applied to: any role exposed in aria: aria-live relevant space delimited string with keywords describing what kinds of changes in the subtree are informational, as opposed to presentational. if not specified, the default should be considered "additions text", which indicates that newly created objects and changes to text and text equivalents should be considered relevant, and that the hiding or removal of items is not. please see the aria states and properties module for more information. exposed in aria: ar...

Gecko Roles
r represents a toolbar, which is a grouping of controls (push buttons or toggle buttons) that provides easy access to frequently used features. role_statusbar represents a status bar, which is an area at the bottom of a window that displays information about the current operation, state of the application, or selected object. the status bar has multiple fields, which display different kinds of information. role_table represents a table that contains rows and columns of cells, and optionally, row headers and column headers. role_columnheader represents a column header, providing a visual label for a column in a table. role_rowheader represents a row header, which provides a visual label for a table row. role_column represents a column of cells within ...

Gecko states
rsed the object is a hyperlink that has been visited (previously clicked) by a user. state_multiselectable supports multiple selection state_extselectable supports extended selection state_required indicates that user interaction is required. state_important isn;t used. state_invalid indicates a validation failure. ...

Embedded Dialog API
rm to the chromeflags parameter of nsiwindowcreator::createchromewindow. this flag requests the presence or absence of particular features in the window surrounding the browser; features such as a toolbar or menubar. the nsiwebbrowserchrome::chrome_openas_chrome flag deserves special mention. a content window (the chrome flag is 0) is a browser window. the application should respond with whatever kind of window it normally uses to contain an embedded instance of gecko. a chrome window (the chrome flag is 1) should contain only an embedded instance of gecko. this is the kind of window used by gecko to display xul dialogs. advanced windowing api embedding applications concerned with ensuring that dialogs posed by gecko are consistent in appearance and behaviour with dialogs posed directly by the...

Mork
ically their representative ascii values. tables a table is set of rows, potentially with a meta-row. the table id is specified using the mid at the beginning of the table. furthermore, the scope of the mid also serves as the default scope of rows defined within the table. the meta-row of the table (different from the meta-row of a row) contains a few things you might care about. the first is the kind column (k), where the mid is typically column-scoped (:c). next is the status column (s), which is defined as a single digit that is the priority (which appears to be unused), a 'u' if it is unique (i.e., the only table of its kind), and a 'v' if it is verbose (which also appears to be unused). the presence of a row or rowreference in the meta-table indicates that said row is the meta-row of the ...

Building the WebLock UI
to the addsite api we defined in the earlier part of the tutorial. <separator class="thin"/> <hbox align="center"> <textbox id="url.input" flex="1"/> <button label="add this url" oncommand="addthissite();"/> </hbox> this snippet introduces a couple of new general layout widgets in xul. the separator that appears at the top of this snippet creates a little divider between widgets like the kind you see in menus that divide sets of functionality available there. the parent of the textbox that users enter an url into is something called an <hbox/>, which is a layout widget - often invisible - that controls the way its child elements are rendered. in this case the <hbox/> centers the textbox and the button children, and it orients them horizontally (in contrast to the <vbox/>, which orient...

Observer Notifications
data is a string form of the origin (for use in security checks), eg "http://developer.mozilla.org". document-element-inserted document null sent immediately after the root element of a document has been created, but before executing any script on it. user-interaction-active nsidomwindow null sent once every 5000ms while this chrome document sees some kind of user activity (for example, keyboard or mouse events), and at the exact moment of the state transition from idle to active. user-interaction-inactive nsidomwindow null sent when the chrome document has seen no user activity for a while. the notification is not repeated during a continuous inactivity period. windows these topics indicate points of interest...

NS_Alloc
« xpcom api reference summary infallibly allocates a block of memory using the xpcom memory manager. #include "nsxpcom.h" void* ns_alloc( prsize asize ); parameters asize [in] the size in bytes of the block to allocate. return values this function returns a pointer to the allocated block of memory, which is suitably aligned for any kind of variable, or null if the allocation failed. remarks this function provides a convenient way to access the xpcom memory manager. it is equivalent to calling alloc on the nsimemory instance returned from ns_getmemorymanager. history this function was finalized for mozilla 1.8. see bug 267767 for details. see also ns_free, nsimemory, ns_getmemorymanager ...

NS_Realloc
memory to reallocate. this pointer must have been previously allocated by the xpcom memory manager, or this parameter may be null in which case this function behaves like ns_alloc. asize [in] the size in bytes of the block to allocate, or zero if the given block is to be freed. return values this function returns a pointer to the allocated block of memory, which is suitably aligned for any kind of variable, or null if the allocation failed. remarks this function provides a convenient way to access the xpcom memory manager. it is equivalent to calling realloc on the nsimemory instance returned from ns_getmemorymanager. history this function was finalized for mozilla 1.8. see bug 267767 for details. see also nsimemory, ns_getmemorymanager ...

IAccessibleHyperlink
that implements iaccessibletext. startindex() and endindex() are indices with respect to the text exposed by iaccessibletext. this interface provides access to a single object which can have multiple actions. an example is an image map which is an image with multiple links each of which is associated with a separate non-overlapping area of the image. this interface could also be applied to other kinds of objects with multiple actions such as "smart tags" which are objects, typically strings, which have multiple actions such as "activate uri", "bookmark uri", end so on. an interesting use case is an image map where each area is associated with multiple actions, for example an image map of smart tags. in this case you would have to implement two levels of accessible hyperlinks. the first level ...

IAccessibleTable
1.0 66 introduced gecko 1.9 inherits from: iunknown last changed in gecko 1.9 (firefox 3) typically all accessible objects that represent cells or cell-clusters of a table will be at the same time children of the table. in this case iaccessible2.indexinparent() will return the child index which then can be used when calling rowindex() and columnindex(). however, in some cases that kind of implementation will not be possible. when the table cells are not direct children of a table, the object representing the cell can define a "table-cell-index" object attribute identifying the 0 based table cell index. this object attribute is obtained by parsing the attribute string returned by iaccessible2.attributes(). the "table-cell-index" attribute can be used just like a child index of t...

nsIAccessibleRole
ouping of controls (push buttons or toggle buttons) that provides easy access to frequently used features. it is used for xul:toolbar, role="toolbar". role_statusbar 23 represents a status bar, which is an area at the bottom of a window that displays information about the current operation, state of the application, or selected object. the status bar has multiple fields, which display different kinds of information. it is used for xul:statusbar. role_table 24 represents a table that contains rows and columns of cells, and optionally, row headers and column headers. it is used for html:table, role="grid". also refer to the following roles: role_columnheader, role_rowheader, role_column, role_row, role_cell. role_columnheader 25 represents a column header, providing a visual label for a co...

nsIAccessibleStates
state_required state_alert_low state_important state_alert_medium currently unused. state_invalid state_alert_high indicates a validation failure. state_checkable state_marqueed extended state constants extended state flags (for now non-msaa, for java and gnome/atk support) constant value description ext_state_supports_autocompletion 0x00000001 for editable areas that have any kind of auto completion. ext_state_defunct 0x00000002 object no longer exists. ext_state_selectable_text 0x00000004 for text which is selectable, object must implement nsiaccessibletext. ext_state_editable 0x00000008 implements nsiaccessibleeditabletext. ext_state_active 0x00000010 this window is currently the active window. ext_state_modal 0x00000020 must do something with control before le...

nsIAppShellService
in long ainitialheight, in nsiappshell aappshell ); parameters aparent the parent window. can be null. aurl the contents of the new window. ashowwindow obsolete since gecko 1.8 the window remains invisible if pr_false. aloaddefaultpage obsolete since gecko 1.8 controls whether the window should try to load a default content page on its own. achromemask chrome flags affecting the kind of os border given to the window. (see nsibrowserwindow for bit/flag definitions). ainitialwidth width, in pixels, of the window. width of window at creation. can be overridden by the "width" tag in the xul. set to ns_sizetocontent to force the window to wrap to its contents. ainitialheight height, in pixels, of the window. height of window at creation. can be overridden by the "height" tag i...

nsIConsoleService
pecify the exact location of an error. acolumnnumber is used to draw the arrow pointing to the problem character. aflags — one of flags declared in nsiscripterror. at the time of writing, possible values are: nsiscripterror.errorflag = 0 nsiscripterror.warningflag = 1 nsiscripterror.exceptionflag = 2 and nsiscripterror.strictflag = 4. acategory — a string indicating what kind of code caused the error message. there are quite a few category strings and they do not currently seem to be listed in a single place. hopefully, they will all eventually be listed in nsiscripterror.idl. see also error console (deprecated) web console browser console nsiconsolemessage ...

nsIContentPrefService2
"example.com", or as full urls, like "http://example.com/foo/bar". in the latter case the api extracts the full domain from the url, so if you specify "http://foo.bar.example.com/baz", the domain is taken to be "foo.bar.example.com", not "example.com". private-browsing context parameters many methods also accept a "context" parameter. this parameter relates to private browsing and determines the kind of storage that a method uses, either the usual permanent storage or temporary storage set() aside for private browsing sessions. pass null to unconditionally use permanent storage. pass an nsiloadcontext to use storage appropriate to the context's useprivatebrowsing attribute: if useprivatebrowsing is true, temporary private-browsing storage is used, and otherwise permanent storage is used. a co...

nsIMemoryMultiReporter
is will trigger any needed computation work. note: this differs from the behavior of nsimemoryreporter, which lets all fields except amount be accessed without triggering computation. attributes attribute type description explicitnonheap print64 the sum of all of this multi-reporter's measurements that have a path that starts with "explicit" and are of the kind kind_nonheap. note: this is a hack that makes nsimemoryreportermanager.explicit more efficient. this is important; multi-reporters can special-case this operation so it's much faster than gathering all the reports, filtering out the unneeded ones, and adding up the rest. method overview void collectreports(in nsimemorymultireportercallback callback, in nsisupports cl...

nsIMsgDBHdr
of the database, although it is not saved until the database is committed. in clear, if you want to do a persistent change to a message header, such as marking it as read, or replied to, or whatever, you must do it through its corresponding nsimsgfolder (msghdr.folder) or nsimsgdatabase (msghdr.folder.msgdatabase). it is also mandatory to set msghdr.folder.msgdatabase = null after performing this kind of operations to prevent leaking. don't even think about using orflags and/or andflags. method overview astring getproperty(in string propertyname); void setproperty(in string propertyname, in astring propertystr); void setstringproperty(in string propertyname, in string propertyvalue); string getstringproperty(in string propertyname); unsigned long ...

nsINavHistoryContainerResultNode
toolkit/components/places/public/nsinavhistoryservice.idlscriptable a foundation for the interfaces that provide a description of a query result on the places service that describes a container (which is any kind of grouping, including bookmark folders). 1.0 66 introduced gecko 1.9 inherits from: nsinavhistoryresultnode last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview nsinavhistoryresultnode findnodebydetails(in autf8string auristring, in prtime atime, in long long aitemid, in boolean arecursive); nsinavhistoryresultnode getchild(in unsigned long aindex); unsigned long getchildindex(in nsinavhistoryresultnode anode); attributes attribute type description childcount unsigned long the number of child n...

nsINavHistoryResultNode
.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 folder), this is the index into that folder at which this node resides. these indices start at 0 and increase in the order at which the nodes appear in the bookmark folder. for items that are not in a bookmark folder, this value is -1. read only. dateadded prtime if the node is an item (bookmark, folder, or separator), this va...

nsIPlacesView
the nsiplacesview interface provides a view-agnostic way to access information about a places view. for example, the representation of selection differs between trees, menus, and other such lists. controllers should not be concerned with these details; controller code should not be required to decode the meaning of a selection depending on what kind of view produced the selection. rather, each view is responsible for translating its own selection format into one the controller can understand. views do this, and other things, by implementing the nsiplacesview interface. note: nsiplacesview does not exist in idl at the moment. it's currently implemented directly on each of the built-in places views. method overview nsinavhistoryresultnode[] getdragableselection(); n...

nsIRequest
load_normal 0 no special load flags. load_background 1 << 0 do not deliver status notifications to the nsiprogresseventsink, or keep this load from completing the nsiloadgroup it may belong to. the following flags control the flow of data into the cache. constant value description inhibit_caching 1 << 7 this flag prevents caching of any kind. it does not, however, prevent cached content from being used to satisfy this request. inhibit_persistent_caching 1 << 8 this flag prevents caching on disk (or other persistent media), which may be needed to preserve privacy. for https, this flag is set automatically. the following flags control what happens when the cache contains data that could perhaps satisfy this reques...

nsIScriptError2
ible for providing that line. you may pass null if you are lazy; that will prevent showing the source line in javascript console. linenumber the number of the line where the error occurred. columnnumber the column number where the error occurred. this is used to draw an arrow pointing to the problem character. flags one of the script error flag constants. category a string indicating what kind of code caused the message. there are quite a few category strings and they don't seem to be listed in a single place. see categories for a partial list. innerwindowid the id of the inner window associated with the error. prior to gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.6), this was the outer window id. ...

nsIScriptableUnescapeHTML
1.0 66 introduced gecko 1.8 obsolete gecko 14.0 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) note: as of firefox 14, this interface is obsolete (but still available for compatibility with legacy extensions) and all its functionality is available with more configuration options via the nsiparserutils interface. ...

nsISessionStore
nsions, those that overlay browser.xul, the appropriate window object for nsisessionstore is the global object 'window'. for javascript running in windows other than the one you want to use in nsisessionstore, you need a nsidomwindow object containing browser.xul. this will be the outermost or root nsidomwindow in a nsixulwindow (the window seen by users as a moveable frame on the display). this kind of domwindow object can be obtained from other nsidomwindow objects (like the sidebar window object) by applying the 'mainwindow' statement from working_with_windows_in_chrome_code. this outermost or root window can also be obtained from the list returned by nsiwindowmediator; see example #3 in working_with_windows_in_chrome_code. it can also be obtained from an nsixulwindow using if (xul_win.do...

nsITimer
processing for last firing the callback completes and when the next firing occurs, but note that this is not guaranteed: the timer can fire at any time. this is the preferable repeating type for most situations. type_repeating_precise 2 type_repeating_precise is just a synonym for type_repeating_precise_can_skip. they used to be distinct, but the old type_repeating_precise kind was similar to type_repeating_precise_can_skip while also being less useful. so the distinction was removed. type_repeating_precise_can_skip 3 this repeating timer aims to have constant period between firings. the processing time for each timer callback should not influence the timer period. however this timer type guarantees that it will not queue up new events to fire the c...

nsIWebBrowser
rding decoded image data and throttling the refresh driver. in firefox, this corresponds to the visible tab. defaults to true. for optimal performance, set it to false when appropriate. parenturicontentlistener nsiuricontentlistener uri content listener parent. the embedder may set this property to their own implementation if they intend to override or prevent how certain kinds of content are loaded. note: if this attribute is set to an object that implements nsisupportsweakreference, the implementation should get the nsiweakreference and hold that. otherwise, the implementation should not refcount this interface; it should assume that a non null value is always valid. in that case, the embedder should explicitly set this value back to null if the parent content li...

nsIXULTemplateBuilder
are allowed to be children of the <template> node. the contents of the query are processed by a separate component called a query processor. this query processor is expected to use this query to generate results when asked by the template builder. the template builder then generates output for each result based on the <rule> elements. this allows the query processor to be specific to a particular kind of input data or query syntax, while the template builder remains independent of the kind of data being used. due to this, the query processor will be supplied with the datasource and query which the template builder handles in an opaque way, while the query processor handles these more specifically. results implement the nsixultemplateresult interface and may be identified by an id which must be...

XPCOM primitive
a value of a primitive type. all xpcom primitives are scriptable, and they all implement an xpcom interface from the table below. primitives are rarely useful. the main use case is to store primitive values in a data structure that can only store xpcom objects, such as nsiarray. also, certain apis, such as nsitransferable.settransferdata(), require primitives. ...

Setting HTTP request headers
thod takes is important. it takes 3 parameters (as we've shown in the example code above). for the "http-on-modify-request" topic, the first parameter (named subject in the code above) will be the nsihttpchannel. however, it is passed to us as an nsisupports. so we need to change the nsisupports into a nsihttpchannel which is what the queryinterface call does. and yes, converting objects from one kind to another is very ugly, and lacks (what is usually called) syntactic sugar. the second line of code in the if block should already be familiar to you. it is the same code we used before, earlier in this article, to add the http request header. the name of this object -- httprequestobserver -- isn't important. we could have named it anything we liked. registering after we've created the observer,...

Reference Manual
above. // seems unlikely, you say? you're more likely to see it in a form like this nscomptr<nsifoo> foo( do_queryinterface(alist->elementat(i)) ); // |elementat|, like all good getters, |addrefs| it's result // which would be dropped on the floor, after querying it for the needed // interface bugzilla bug 8221 is specifically about finding and fixing this particular kind of leak. nscomptr helpers nscomptr<t> = do_queryreferent( nsiweakreference* ), nscomptr<t> = do_queryreferent( nsiweakreference*, nsresult* ) do_queryreferent exists to facilitate weak references based on nsiweakreference. an nsiweakreference is an xpcom object that acts as a proxy for another object. the nsiweakreference and this other object have a special relationship. they know about each o...

Working with Multiple Versions of Interfaces
is when i first built the lizard. to get these four files to co-exist together peacefully i had to resort to some preprocessor magic and an ugly hack. maybe the ugly hack can be replaced by even more preprocessor magic, but not today. lets do the magic first, then describe the ugly hack. ...

wrappedJSObject
wrappedjsobject is a property sometimes available on xpconnect wrappers. when available, it lets you access the javascript object hidden by the wrapper. there are two kinds of xpconnect wrappers that support the wrappedjsobject property: xpcnativewrappers which are used to protect the chrome code working with content objects. see xpcnativewrapper for detailed documentation. regular xpconnect wrappers which you can encounter, for example, when using xpcom components implemented in js. this article focuses on the latter kind of wrappers, which hide any properties or methods on the component that are not part of the supported interfaces as declared in xpidl. the rest of this article demonstrates what xpconnect wrappers do and how wrappedjsobject can be used to bypass them. exampl...

XPIDL Syntax
literal = octal_literal / decimal_literal / hex_literal / floating_literal literal /= string_literal / char_literal literal /= "true" / "false" ; in regex: /"[^"\n]*["\n]/. yes, newline terminates. string_literal = 1*(%x22 *(any char except %x22 or %x0a) (%x22 / %x0a)) ; same as above, but s/"/'/g char_literal = 1*(%x27 *(a...

Xray vision
d code. so when chrome code accesses content objects, it sees them with xray vision: // chrome code var transfer = gbrowser.contentwindow.confirm("transfer all my money?"); // calls the native implementation note that using window.confirm() would be a terrible way to implement a security policy, and is only shown here to illustrate how xray vision works. waiving xray vision xray vision is a kind of security heuristic, designed to make most common operations on untrusted objects simple and safe. however, there are some operations for which they are too restrictive: for example, if you need to see expandos on dom objects. in cases like this you can waive xray protection, but then you can no longer rely on any properties or functions being, or doing, what you expect. any of them, even sette...

The Valgrind Test Job
ors in future runs. for example, we have a small number of deliberate but inconsequential memory leaks in the codebase that have corresponding suppressions. but generally errors should be fixed rather than suppressed. when running locally, you may see errors that do not occur on the test machines. errors in system libraries can generally be ignored, because they are out of our control and the kind of thing we suppress on the test machines. errors in mozilla code should probably be reported in bugs! if you need help or experience problems if you need help with the valgrind test job, please contact nicholas nethercote or gary kwong. julian seward can also help with valgrind issues. alternatively, bugs relating to the test job can be filed in the "testing" product, under the "general" co...

Gloda examples
nt there doesn't appear to be any way of going directly from an email address to email addresses that it involves. instead you need to do two queries, first to get the "identity" object for an email address and then to get the messages. ...

Index
n on how to develop these. 42 mailbox mailnews the mailbox protocol is used to read messages from a local folder berkeley mailbox. it consists of nsmailboxservice, nsmailboxurl, and nsmailboxprotocol. this may seem like a lot of infrastructure just to read messages from a flat file, but it allows us to do it asynchronously, and to have reading local messages fit into the same kind of mechanisms that reading nntp and imap messages do - running urls, getting onstart/stoprunningurl notifications when the url starts/stops, etc. 43 mailnews and mail code review requirements this document describes the process for reviewing patches to the mozilla/mailnews and mozilla/mail directories. thunderbird and seamonkey are the primary users of the code in mozilla/m...

MailNews Protocols
url. these implement nsimsgprotocol, inherit from nsmsgprotocol, and implement their own protocol-specific interface (nsiimapprotocol, nsipop3protocol, nsinntpprotocol) in addition, in mailnews/db/msgdb/public, we have protocol-specific msg db classes (and in the case of news, a nsinewsdatabase interface), so that we can use polymorphism when msg db operations need to be specialized for different kinds of folders. the message search code also has protocol-specific code to handle searching on the server, or local mailbox. the search code also knows what the different search capabilities of the various protocols are. ...

Mailbox
the mailbox protocol is used to read messages from a local folder berkeley mailbox. it consists of nsmailboxservice, nsmailboxurl, and nsmailboxprotocol. this may seem like a lot of infrastructure just to read messages from a flat file, but it allows us to do it asynchronously, and to have reading local messages fit into the same kind of mechanisms that reading nntp and imap messages do - running urls, getting onstart/stoprunningurl notifications when the url starts/stops, etc. the mailbox protocol is also used to regenerate a summary file, in conjunction with nsmsgmailboxparser ...

CType
all data types declared using the js-ctypes api are represented by ctype objects. these objects have assorted methods and properties that let you create objects of these types, find out information about them, and so forth. the specific properties and methods on each object vary depending on the data type represented. there are several kinds of types: primitive types these are typical unstructured data, such as the predefined types listed in predefined data types. big integer types the int64 and uint64 types provide access to 64-bit integer values, which javascript doesn't currently support. pointertype these represent pointers to data in memory. functiontype these represent callable c functions. structtype these represent c structures. arraytype these represent c arrays. met...

js-ctypes reference
n(). the library object is used mostly to declare native functions provided by the library so that js-ctypes knows how to call them. see library.declare() for instructions on how to declare these functions. once you have finished working with a library, call library.close(). calling conventions see abi. types and data to use js-ctypes effectively, it is important to understand the different kinds of objects that the module provides. there are three major categories: types these represent a type in c, and are thus represented by ctype objects. these objects have two main purposes. first, they provide a concrete representation of different data types, allowing the programmer to describe the arguments and return type of a native function (see library.declare()). second, they serve as con...

Mozilla
zip file used to install packages, utilizing the xpinstall technology. xpi modules (so called " bundles") are employed to install a wide variety of software, including plugins, extensions, themes, and thunderbird dictionaries. zombie compartments this page tells you how to detect and avoid zombie compartments, which are a particular kind of memory leak. they can be caused by bugs in firefox itself, or by bugs in firefox add-ons. ...

Step through code - Firefox Developer Tools
skip the return value from a function, returning execution to the caller split console when paused, you can press the esc key to open and close the split console to gain more insight into errors and variables: pause on breakpoints overlay since firefox 70, when your code is paused on a breakpoint an overlay appears on the viewport of the tab you are debugging. this lets you know what kind of breakpoint the code is paused on (breakpoint, event breakpoint, etc.), and also provides a step button and a play button. the thinking here is that if you've got your devtools open in a separate window, as many people do, it can be easier to have the buttons available right there to move the code forward while you are looking at the result. if you want to turn this feature off, since firefox ...

Debugger.Environment - Firefox Developer Tools
imized-out environments. when true, getvariable returns an ordinary javascript object whose optimizedout property is true on all bindings, and setvariable throws a referenceerror. function properties of the debugger.environment prototype object the methods described below may only be called with a this value referring to a debugger.environment instance; they may not be used as methods of other kinds of objects. names() return an array of strings giving the names of the identifiers bound by this environment. the result does not include the names of identifiers bound by enclosing environments. getvariable(name) return the value of the variable bound toname in this environment, or undefined if this environment does not bindname.name must be a string that is a valid ecmascript identifie...

Debugger.Frame - Firefox Developer Tools
on value reported to the next handler. this handler is not called on "debugger" frames. it is also not called when unwinding a frame due to an over-recursion or out-of-memory exception. function properties of the debugger.frame prototype object the functions described below may only be called with a this value referring to a debugger.frame instance; they may not be used as methods of other kinds of objects. eval(code, [options]) evaluatecode in the execution context of this frame, and return a completion value describing how it completed.code is a string. if this frame’s environment property is null or type property is wasmcall, throw a typeerror. all extant handler methods, breakpoints, and so on remain active during the call. this function follows the invocation function conve...

Debugger.Object - Firefox Developer Tools
t allocation site tracking was enabled when this debugger.object’s referent was allocated, return the javascript execution stack captured at the time of the allocation. otherwise, return null. function properties of the debugger.object prototype the functions described below may only be called with a this value referring to a debugger.object instance; they may not be used as methods of other kinds of objects. the descriptions use “referent” to mean “the referent of this debugger.object instance”. unless otherwise specified, these methods are not invocation functions; if a call would cause debuggee code to run (say, because it gets or sets an accessor property whose handler is debuggee code, or because the referent is a proxy whose traps are debuggee code), the call throws a debug...

Debugger.Script - Firefox Developer Tools
firefox). if the instance refers to webassembly code, throw a typeerror. format if the instance refers to a jsscript, "js". if the instance refers to webassembly code, "wasm". function properties of the debugger.script prototype object the functions described below may only be called with a this value referring to a debugger.script instance; they may not be used as methods of other kinds of objects. getalloffsets() if the instance refers to a jsscript, return an arrayl describing the relationship between bytecode instruction offsets and source code positions in this script.l is sparse, and indexed by source line number. if a source line numberline has no code, thenl has noline property. if there is code forline, then l[line] is an array of offsets of byte code instructions...

Debugger.Object - Firefox Developer Tools
global object might look like this: { "type":"jsm", "uri":"resource:://gre/modules/xpcomutils.jsm" } firefox provides [debuggerhostannotationsforfirefox annotations] for its host objects. function properties of the debugger.object prototype the functions described below may only be called with a this value referring to a debugger.object instance; they may not be used as methods of other kinds of objects. the descriptions use "referent" to mean "the referent of this debugger.object instance". unless otherwise specified, these methods are not invocation functions; if a call would cause debuggee code to run (say, because it gets or sets an accessor property whose handler is debuggee code, or because the referent is a proxy whose traps are debuggee code), the call throws a debugger.debu...

Index - Firefox Developer Tools
tro, javascript, tools mozilla’s javascript engine, spidermonkey, provides a debugging interface named debugger which lets javascript code observe and manipulate the execution of other javascript code. both firefox’s built-in developer tools and the firebug add-on use debugger to implement their javascript debuggers. however, debugger is quite general, and can be used to implement other kinds of tools like tracers, coverage analysis, patch-and-continue, and so on. 18 debugger when called as a constructor, the debugger object creates a new debugger instance. 19 debugger.environment a debugger.environment instance represents a lexical environment, associating names with variables. each debugger.frame instance representing a debuggee frame has...

Call Tree - Firefox Developer Tools
s 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. ...

Intensive JavaScript - Firefox Developer Tools
d", make a recording: press the "start animations" button start recording a performance profile press "do pointless computations!" two or three times stop recording the profile exactly what you see will vary from one machine to another, but it will be something like this: the top half of this is the waterfall overview. it gives us a compressed view of the waterfall, which tells us what kinds of operations the browser is doing during the recording. the pink says that we are mostly performing css calculations and possibly reflow: this is the css animation that's running throughout the profile. then there are three solid blocks of orange, representing javascript execution, one for each time we pressed the button. the bottom half, which is correlated with the timeline summary in time, ...

Animation() - Web APIs
e animation() constructor of the web animations api returns a new animation object instance. syntax var animation = new animation([effect][, timeline]); parameters effect optional the target effect, as an object based on the animationeffectreadonly interface, to assign to the animation. although in the future other effects such as sequenceeffects or groupeffects might be possible, the only kind of effect currently available is keyframeeffect. this can be null (which is the default) to indicate that there should be no effect applied. timeline optional specifies the timeline with which to associate the animation, as an object of a type based on the animationtimeline interface. currently the only timeline type available is documenttimeline, but in the future there my be timelines associa...

Animation - Web APIs
itly want an animations to be retained. animation.replacestate to return the replace state of the animation. this will be active if the animation has been removed, or persisted if persist() has been invoked. accessibility concerns blinking and flashing animation can be problematic for people with cognitive concerns such as attention deficit hyperactivity disorder (adhd). additionally, certain kinds of motion can be a trigger for vestibular disorders, epilepsy, and migraine, and scotopic sensitivity. consider providing a mechanism for pausing or disabling animation, as well as using the reduced motion media query to create a complimentary experience for users who have expressed a preference for no animated experiences. designing safer web animation for motion sensitivity · an a list ap...

AudioParam - Web APIs
the web audio api's audioparam interface represents an audio-related parameter, usually a parameter of an audionode (such as gainnode.gain). an audioparam can be set to a specific value or a change in value, and can be scheduled to happen at a specific time and following a specific pattern. there are two kinds of audioparam, a-rate and k-rate parameters: an a-rate audioparam takes the current audio parameter value for each sample frame of the audio signal. a k-rate audioparam uses the same initial audio parameter value for the whole block processed, that is 128 sample frames. in other words, the same value applies to every frame in the audio as it's processed by the node. each audionode defines which of its parameters are a-rate or k-rate in the spec. each audioparam has a list of eve...

BiquadFilterNode.type - Web APIs
syntax var audioctx = new audiocontext(); var biquadfilter = audioctx.createbiquadfilter(); biquadfilter.type = 'lowpass'; value a string (enum) representing a biquadfiltertype. type values and their meaning type description frequency q gain lowpass standard second-order resonant lowpass filter with 12db/octave rolloff. frequencies below the cutoff pass through; frequencies above it are attenuated. the cutoff frequency. indicates how peaked the frequency is around the cutoff. ...

BroadcastChannel.postMessage() - Web APIs
the message is transmitted as a message event targeted at each broadcastchannel bound to the channel. note: this feature is available in web workers. ...

Broadcast Channel API - Web APIs
l name, the underlying channel is created. // connection to a broadcast channel const bc = new broadcastchannel('test_channel'); sending a message it is enough to call the postmessage() method on the created broadcastchannel object, which takes any object as an argument. an example string message: // example of sending of a very simple message bc.postmessage('this is a test message.'); any kind of object can be sent, not just a domstring. the api doesn't associate any semantics to messages, so it is up to the code to know what kind of messages to expect and what to do with them. receiving a message when a message is posted, a message event is dispatched to each broadcastchannel object connected to this channel. a function can be run for this event with the onmessage event handler: /...

CDATASection - Web APIs
the cdatasection interface represents a cdata section that can be used within xml to include extended portions of unescaped text. the symbols < and & don’t need escaping as they normally do when inside a cdata section. in xml, a cdata section looks like: <![cdata[ ... ]]> for example: <foo>here is a cdata section: <![cdata[ < > & ]]> with all kinds of unescaped text.</foo> the only sequence which is not allowed within a cdata section is the closing sequence of a cdata section itself, ]]>: <![cdata[ ]]> will cause an error ]]> note that cdata sections should not be used within html; they only work in xml. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display:...

CSSRule - Web APIs
ule interface specifies integer constants that can be used in conjunction with a cssrule's type property to discern the rule type (and therefore, which specialized interface it implements). the relationships between these constants and the interfaces are: type value rule-specific interface comments and examples cssrule.style_rule 1 cssstylerule the most common kind of rule: selector { prop1: val1; prop2: val2; } cssrule.import_rule 3 cssimportrule an @import rule. (until the documentation is completed, see the interface definition in the mozilla source code: nsidomcssimportrule.) cssrule.media_rule 4 cssmediarule cssrule.font_face_rule 5 cssfontfacerule cssrule.page_rule 6 csspagerul...

Managing screen orientation - Web APIs
tionchange", function () { console.log("the orientation of the screen is: " + screen.orientation); }); preventing orientation change any web application can lock the screen to suits its own needs. the screen is locked using the screen.lockorientation() method and unlocked using the screen.unlockorientation(). the screen.lockorientation() accepts a string (or series of strings) to define the kind of lock to apply. accepted values are: portrait-primary, portrait-secondary, landscape-primary, landscape-secondary, portrait, landscape (see screen.lockorientation to know more about each of those values). screen.lockorientation('landscape'); note: a screen lock is web application dependent. if application a is locked to landscape and application b is locked to portrait, switching from appli...

CacheStorage.has() - Web APIs
ion(boolean) { // true: your cache exists! }); parameters cachename a domstring representing the name of the cache object you are looking for in the cachestorage. return value a promise that resolves to true if the cache exists or false if not. examples the following example first checks whether a cache called 'v1' exists. if so, we add a list of assets to it. if not then we run some kind of cache set-up function. caches.has('v1').then(function(hascache) { if (!hascache) { somecachesetupfunction(); } else { caches.open('v1').then(function(cache) { return cache.addall(myassets); }); } }).catch(function() { // handle exception here. }); specifications specification status comment service workersthe definition of 'cachestorage: has...

CanvasRenderingContext2D.fillStyle - Web APIs
10, 100, 100); result creating multiple fill colors using loops in this example, we use two for loops to draw a grid of rectangles, each having a different fill color. to achieve this, we use the two variables i and j to generate a unique rgb color for each square, and only modify the red and green values. (the blue channel has a fixed value.) by modifying the channels, you can generate all kinds of palettes. <canvas id="canvas" width="150" height="150"></canvas> const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); for (let i = 0; i < 6; i++) { for (let j = 0; j < 6; j++) { ctx.fillstyle = `rgb( ${math.floor(255 - 42.5 * i)}, ${math.floor(255 - 42.5 * j)}, 0)`; ctx.fillrect(j * 25, i * 25, 25, 25); } } the resul...

Applying styles and colors - Web APIs
again use two for loops to draw a grid of rectangles, each in a different color. the resulting image should look something like the screenshot. there is nothing too spectacular happening here. we use the two variables i and j to generate a unique rgb color for each square, and only modify the red and green values. the blue channel has a fixed value. by modifying the channels, you can generate all kinds of palettes. by increasing the steps, you can achieve something that looks like the color palettes photoshop uses. function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); for (var i = 0; i < 6; i++) { for (var j = 0; j < 6; j++) { ctx.fillstyle = 'rgb(' + math.floor(255 - 42.5 * i) + ', ' + math.floor(255 - 42.5 * j) + ', 0)'; c...

Clipboard.read() - Web APIs
r.permissions.query() to find out if we have (or if the user will be prompted to allow) "clipboard-read" access, this example fetches the data currently on the clipboard. if it's not a png image, an error message is presented. otherwise, an image element referred to using the variable imgelem has its source replaced with the clipboard's contents. // first, ask the permissions api if we have some kind of access to // the "clipboard-read" feature. navigator.permissions.query({name: "clipboard-read"}).then(result => { // if permission to read the clipboard is granted or if the user will // be prompted to allow it, we proceed. if (result.state == "granted" || result.state == "prompt") { navigator.clipboard.read().then(data => { for (let i=0; i<data.items.length; i++) { i...

console - Web APIs
ext to the console the most frequently-used feature of the console is logging of text and other data. there are four categories of output you can generate, using the console.log(), console.info(), console.warn(), and console.error() methods respectively. each of these results in output styled differently in the log, and you can use the filtering controls provided by your browser to only view the kinds of output that interest you. there are two ways to use each of the output methods; you can simply pass in a list of objects whose string representations get concatenated into one string, then output to the console, or you can pass in a string containing zero or more substitution strings followed by a list of objects to replace them. outputting a single object the simplest way to use the loggi...

Constraint validation API - Web APIs
like required and pattern to set basic constraints. however, you may want to impose more complex constraints, or to provide clearer reporting of validation failures than the defaults. this can be done using the constraint validation api. note: client-side constraint validation doesn't remove the need for validation on the server side. even though client-side validation can prevent many common kinds of invalid values, invalid ones can still be sent by older browsers or by attackers trying to trick your web application. therefore, you need to also validate input values on the server side, in a way that is consistent with what is done on the client side. client side validation is a tool for giving quick feedback to the user. you should not rely on it to completely sanitize data received by th...

CrashReportBody - Web APIs
specifications specification status comment reporting apithe definition of 'crashreportbody' in that specification. editor's draft ...

DOMImplementation.hasFeature() - Web APIs
the latest version of the spec settled to force this method to always return true, where the functionality was accurate and in use. syntax const flag = document.implementation.hasfeature(feature, version); parameters feature a domstring representing the feature name. ...

Document - Web APIs
depending on the document's type (e.g. html, xml, svg, …), a larger api is available: html documents, served with the "text/html" content type, also implement the htmldocument interface, whereas xml and svg documents implement the xmldocument interface. constructor document() creates a new document object. properties this interface also inherits from the node and eventtarge...

Using the W3C DOM Level 1 Core - Web APIs
the w3c's dom level 1 core is an api for manipulating the dom trees of html and xml documents (among other tree-like types of documents). due to the ubiquity of the dom, this api is supported in all major browsers, including mozilla firefox and microsoft internet explorer, and serves as a base for scripting on the web. what is a dom tree? a dom tree is a kind of tree whose nodes represent an html or xml document's contents. each html or xml document has a unique dom tree representation. for example, the following document <html> <head> <title>my document</title> </head> <body> <h1>header</h1> <p>paragraph</p> </body> </html> has a dom tree that looks like this: (note that, although the above tree is similar to the above document's dom tree, it's not identical, as the actual dom ...

Element - Web APIs
more specific classes inherit from element. for example, the htmlelement interface is the base interface for html elements, while the svgelement interface is the basis for all svg elements. most functionality is specified further down the class hierarchy. languages outside the realm of the web platform, like xul through the xulelement interface, also implement element. ...

ElementTraversal - Web APIs
the elementtraversal interface used to define methods that allowed access from one node to another in the document tree. it proved useless, as very few types of node were able to implement all its methods and properties. it has been split into two interfaces, containing the useful methods and properties for each kind of nodes: childnode parentnode as it was a pure interface, with no object of this type, this change has no effect on the web. specifications specification status comment domthe definition of 'childnode' in that specification. living standard splitted the elementtraversal interface in parentnode and childnode element traversal specificationthe definition of 'elementtraversal' in that specification. obsolete initial definition...

Event.cancelable - Web APIs
the cancelable read-only property of the event interface indicates whether the event can be canceled, and therefore prevented as if the event never happened. if the event is not cancelable, then its cancelable property will be false and the event listener cannot stop the event from occurring. event listeners that handle multiple kinds of events may want to check cancelable before invoking their preventdefault() methods. most browser-native events that can be canceled are the ones that result from the user interacting with the page. canceling the click, scroll, or beforeunload events would prevent the user from clicking on something, scrolling the page, or navigating away from the page, respectively. custom events created by other javascript code control if they can be canceled when they ar...

EventTarget.addEventListener() - Web APIs
that not all browsers have supported historically. see safely detecting option support for details. other notes why use addeventlistener()? addeventlistener() is the way to register an event listener as specified in w3c dom. the benefits are as follows: it allows adding more than a single handler for an event. this is particularly useful for ajax libraries, javascript modules, or any other kind of code that needs to work well with other libraries/extensions. it gives you finer-grained control of the phase when the listener is activated (capturing vs. bubbling). it works on any dom element, not just html elements. the alternative, older way to register event listeners, is described below. adding a listener during event dispatch if an eventlistener is added to an eventtarget while i...

ExtendableEvent - Web APIs
y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">extendableevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: this interface is only available when the global scope is a serviceworkerglobalscope. it is not available when it is a window, or the scope of another kind of worker. constructor extendableevent() creates a new extendableevent object. properties doesn't implement any specific properties, but inherits properties from its parent, event. methods inherits methods from its parent, event. extendableevent.waituntil() extends the lifetime of the event. it is intended to be called in the install eventhandler for the installing worker and on...

Using Fetch - Web APIs
fetch provides a better alternative that can be easily used by other technologies such as service workers. ...

Fetch API - Web APIs
the new api provides a more powerful and flexible feature set. concepts and usage fetch provides a generic definition of request and response objects (and other things involved with network requests). this will allow them to be used wherever they are needed in the future, whether it’s for service workers, cache api, and other similar things that handle or modify requests and responses, or any kind of use case that might require you to generate your responses programmatically (that is, the use of computer program or personal programming instructions). it also defines related concepts such as cors and the http origin header semantics, supplanting their separate definitions elsewhere. for making a request and fetching a resource, use the windoworworkerglobalscope.fetch() method. it is imple...

File - Web APIs
the file interface provides information about files and allows javascript in a web page to access their content. file objects are generally retrieved from a filelist object returned as a result of a user selecting files using the <input> element, from a drag and drop operation's datatransfer object, or from the mozgetasfile() api on an htmlcanvaselement. a file object is a specific kind of a blob, and can be used in any context that a blob can. in particular, filereader, url.createobjecturl(), createimagebitmap(), and xmlhttprequest.send() accept both blobs and files. see using files from web applications for more information and examples. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: midd...

FileSystemEntrySync - Web APIs
the root directory, prepended with a '/'. isdirectory readonly boolean true if filesystementrysync is a directory. isfile readonly boolean true if the filesystementrysync is a file. name readonly domstring the name of the entry, excluding the path leading to it. methods getmetadata() look up metadata about this entry. [ todo: specify what kind of metadata ] metadata getmetada () raises (fileexception); parameter none returns metadata exceptions this method can raise a fileexception with the following codes: exception description not_found_err the entry does not exist. invalid_state_err the filesystemsync is no longer valid for some reason besides being deleted. moveto() mo...

FileSystemFileEntry.file() - Web APIs
esscallback a callback function which is called when the file has been created successfully; the file is passed into the callback as the only parameter. errorcallback optional if provided, this must be a method which is called when an error occurs while trying to create the file. this callback receives as input a fileerror object describing the error. editor's note: we need to find out what kinds of errors can occur and document them. return value undefined. example this example establishes a method, readfile(), reads a text file and calls a specified callback function with the received text (in a string object) once the read is completed. if an error occurs, a specified (optional) error callback is called. function readfile(entry, successcallback, errorcallback) { entry.file(fun...

Guide to the Fullscreen API - Web APIs
ntering or exiting fullscreen mode, but if the document has a non null fullscreenelement, you know you're in fullscreen mode. when a fullscreen request fails it's not guaranteed that you'll be able to switch into fullscreen mode. for example, <iframe> elements have the allowfullscreen attribute in order to opt-in to allowing their content to be displayed in fullscreen mode. in addition, certain kinds of content, such as windowed plug-ins, cannot be presented in fullscreen mode. attempting to put an element which can't be displayed in fullscreen mode (or the parent or descendant of such an element) won't work. instead, the element which requested fullscreen will receive a mozfullscreenerror event. when a fullscreen request fails, firefox will log an error message to the web console explaining...

GlobalEventHandlers.onerror - Web APIs
the onerror property of the globaleventhandlers mixin is an eventhandler that processes error events. error events are fired at various targets for different kinds of errors: when a javascript runtime error (including syntax errors and exceptions thrown within handlers) occurs, an error event using interface errorevent is fired at window and window.onerror() is invoked (as well as handlers attached by window.addeventlistener (not only capturing)). when a resource (such as an <img> or <script>) fails to load, an error event using interface event is fired at the element that initiated the load, and the onerror() handler on the element is invoked. these error events do not bubble up to window, but (at least in firefox) can be handled with a window.addeventlistener configured with usecapture...

GlobalEventHandlers.onpointerdown - Web APIs
= "touching"; break; default: action = "interacting with"; break; } targetbox.innerhtml = "<strong>thanks for " + action + " me!</strong>"; evt.preventdefault(); } this simply uses onpointerdown to establish the function handledown() as the event handler for pointer down events. the handledown() function, in turn, looks at the value of pointertype to determine what kind of pointing device was used, then uses that information to customize a string to replace the contents of the target box. then the event's preventdefault() method is called to ensure that the mousedown event isn't triggered, potentially causing events to be handled twice if we had a handler for those events in case pointer event support is missing. we also have a handler for pointerup events: t...

HTMLElement: change event - Web APIs
the change event is fired for <input>, <select>, and <textarea> elements when an alteration to the element's value is committed by the user. unlike the input event, the change event is not necessarily fired for each alteration to an element's value. ...

HTMLMediaElement.setSinkId() - Web APIs
nction() { ... }) returns a promise that resolves to undefined. parameters sinkid the mediadeviceinfo.deviceid of the audio output device. exceptions exception explanation domexception no permission to use the requested device examples const devices = await navigator.mediadevices.enumeratedevices(); const audiodevices = devices.filter(device => device.kind === 'audiooutput'); const audio = document.createelement('audio'); await audio.setsinkid(audiodevices[0].deviceid); console.log('audio is being played on ' + audio.sinkid); specifications specification status comment audio output devices apithe definition of 'sinkid' in that specification. candidate recommendation initial definition. older versions of this spec we...

HTMLOListElement - Web APIs
tmlelement. htmlolistelement.reversed is a boolean value reflecting the reversed and defining if the numbering is descending, that is its value is true, or ascending (false). htmlolistelement.start is a long value reflecting the start and defining the value of the first number of the first element of the list. htmlolistelement.type is a domstring value reflecting the type and defining the kind of marker to be used to display. it can have the following values: '1' meaning that decimal numbers are used: 1, 2, 3, 4, 5, … 'a' meaning that the lowercase latin alphabet is used: a, b, c, d, e, … 'a' meaning that the uppercase latin alphabet is used: a, b, c, d, e, … 'i' meaning that the lowercase latin numerals are used: i, ii, iii, iv, v, … 'i' meaning that the uppercase...

HTMLTrackElement - Web APIs
ht="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltrackelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement. htmltrackelement.kind is a domstring that reflects the kind html attribute, indicating how the text track is meant to be used. possible values are: subtitles, captions, descriptions, chapters, or metadata. htmltrackelement.src is a domstring that reflects the src html attribute, indicating the address of the text track data. htmltrackelement.srclang is a domstring that reflects the srclang html attribute, indicat...

HTMLUListElement - Web APIs
x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlulistelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement. htmlulistelement.type is a domstring value reflecting the type and defining the kind of marker to be used to display. the values are browser dependent and have never been standardized. htmlulistelement.compact is a boolean indicating that spacing between list items should be reduced. this property reflects the compact attribute only, it doesn't consider the line-height css property used for that behavior in modern pages. methods no specific method; inherits methods from it...

Using microtasks in JavaScript with queueMicrotask() - Web APIs
having both situations handle the setting of data and firing of the load event within a microtask (using queuemicrotask() in the if clause and using the promises used by fetch() in the else clause). batching operations you can also use microtasks to collect multiple requests from various sources into a single batch, avoiding the possible overhead involved with multiple calls to handle the same kind of work. the snippet below creates a function that batches multiple messages into an array, using a microtask to send them as a single object when the context exits. const messagequeue = []; let sendmessage = message => { messagequeue.push(message); if (messagequeue.length === 1) { queuemicrotask(() => { const json = json.stringify(messagequeue); messagequeue.length = 0; ...

File drag and drop - Web APIs
nored. function drophandler(ev) { console.log('file(s) dropped'); // prevent default behavior (prevent file from being opened) ev.preventdefault(); if (ev.datatransfer.items) { // use datatransferitemlist interface to access the file(s) for (var i = 0; i < ev.datatransfer.items.length; i++) { // if dropped items aren't files, reject them if (ev.datatransfer.items[i].kind === 'file') { var file = ev.datatransfer.items[i].getasfile(); console.log('... file[' + i + '].name = ' + file.name); } } } else { // use datatransfer interface to access the file(s) for (var i = 0; i < ev.datatransfer.files.length; i++) { console.log('... file[' + i + '].name = ' + ev.datatransfer.files[i].name); } } } prevent the browser's defau...

HTML Drag and Drop API - Web APIs
nsfer interfaces should be the only ones needed to add html drag and drop capabilities to an application. (firefox supports some gecko-specific extensions to the datatransfer object, but those extensions will only work on firefox.) each datatransfer object contains an items property, which is a list of datatransferitem objects. a datatransferitem object represents a single drag item, each with a kind property (either string or file) and a type property for the data item's mime type. the datatransferitem object also has methods to get the drag item's data. the datatransferitemlist object is a list of datatransferitem objects. the list object has methods to add a drag item to the list, remove a drag item from the list, and clear the list of all drag items. a key difference between the datatra...

IDBIndex - Web APIs
you use this interface to retrieve data. you can retrieve records in an object store through the primary key or by using an index. an index lets you look up records in an object store using properties of the values in the object stores records other than the primary key the index is a persistent key-value storage where the value part of its records is the key part of a record in the referenced object store. ...

Browser storage limits and eviction criteria - Web APIs
the process by which the browser works out how much space to allocate to web data storage and what to delete when that limit is reached is not simple, and differs between browsers. this article describes how browsers determine what local content to purge and when in order to free up needed local storage space. note: the information below should be fairly accurate for most modern browsers, but browser specifics are called out where known. opera and chrome should behave the same in all cases. opera mini (still presto-based, server-side rendering) doesn't store any data on the client. ...

KeyboardEvent - Web APIs
note: keyboardevent events just indicate what interaction the user had with a key on the keyboard at a low level, providing no contextual meaning to that interaction. when you need to handle text input, use the input event instead. ...

MediaDevices.enumerateDevices() - Web APIs
enumeratedevices(). it simply outputs a list of the device ids, with their labels if available. if (!navigator.mediadevices || !navigator.mediadevices.enumeratedevices) { console.log("enumeratedevices() not supported."); return; } // list cameras and microphones. ...

MediaDevices.getUserMedia() - Web APIs
situations in which getusermedia() is not permitted to be called: a document loaded into a sandboxed <iframe> element cannot call getusermedia() unless the <iframe> has its sandbox attribute set to allow-same-origin. a document loaded using a data:// or blob:// url which has no origin (such as when one of these urls is typed by the user into the address bar) cannot call getusermedia(). these kinds of urls loaded from javascript code inherit the script's permissions. any other situation in which there is no origin, such as when the srcdoc attribute is used to specify the contents of a frame. examples width and height this example gives a preference for camera resolution, and assigns the resulting mediastream object to a video element. // prefer camera resolution nearest to 1280x720. ...

MediaError.code - Web APIs
the read-only property mediaerror.code returns a numeric value which represents the kind of error that occurred on a media element. to get a text string with specific diagnostic information, see mediaerror.message. syntax var myerror = mediaerror.code; value a numeric value indicating the general type of error which occurred. the possible values are described below, in media error code constants. media error code constants name value description media_err_aborted 1 the fetching of the associated resource was aborted by the user's request. media_err_network 2 some kind of network error occurred which prevented the media from being successfully fetched, despite having previously been available. media_err_decode 3 despite havi...

MediaSession.setPositionState() - Web APIs
this can be particularly useful if your code implements a player for type of media not directly supported by the browser. call this method on the navigator object's mediasession object. ...

MediaSource.endOfStream() - Web APIs
media streams. for example, you might have a function that handles media chunk requests, separate from other network requests. when you make an xmlhttprequest call for a media chunk, and onabort or onerror triggers, you might want to call endofstream('network'), display a descriptive message in the ui, and maybe retry the network request immediately or wait until the network is back up (via some kind of polling.) decode: terminates playback and signals that a decoding error has occured. this can be used to indicate that a parsing error has occured while fetching media data; maybe the data is corrupt, or is encoded using a codec that the browser doesn't know how to decode. return value undefined exceptions exception explanation invalidstateerror mediasour...

MediaStream: addtrack event - Web APIs
the addtrack event is fired when a new mediastreamtrack object has been added to a mediastream. bubbles no cancelable no interface mediastreamtrackevent event handler property onaddtrack examples using addeventlistener(): let stream = new mediastream(); stream.addeventlistener('addtrack', (event) => { console.log(`new ${event.track.kind} track added`); }); using the onaddtrack event handler property: let stream = new mediastream(); stream.onaddtrack = (event) => { console.log(`new ${event.track.kind} track added`); }; specifications specification status media capture and streamsthe definition of 'addtrack' in that specification. candidate recommendation ...

MediaStream.getTracks() - Web APIs
syntax var mediastreamtracks = mediastream.gettracks() parameters none. return value an array of mediastreamtrack objects. ...

MediaStream.getVideoTracks() - Web APIs
the getvideotracks() method of the mediastream interface returns a sequence of mediastreamtrack objects representing the video tracks in this stream. syntax var mediastreamtracks[] = mediastream.getvideotracks(); parameters none. return value an array of mediastreamtrack objects, one for each video track contained in the media stream. video tracks are those tracks whose kind property is video. the array is empty if the stream contains no video tracks. note: the order of the tracks is not defined by the specification, and may not be the same from one call to getvideotracks() to another. early versions of this api included a special videostreamtrack interface which was used as the type for each entry in the list of video streams; however, this has since been merged into the main media...

MediaStream: removetrack event - Web APIs
removetrack event is fired when a new mediastreamtrack object has been removed from a mediastream. bubbles no cancelable no interface mediastreamtrackevent event handler property onremovetrack examples using addeventlistener(): let stream = new mediastream(); stream.addeventlistener('removetrack', (event) => { console.log(`${event.track.kind} track removed`); }); using the onremovetrack event handler property: let stream = new mediastream(); stream.onremovetrack = (event) => { console.log(`${event.track.kind} track removed`); }; specifications specification status media capture and streamsthe definition of 'removetrack' in that specification. candidate recommendation ...

MediaStreamConstraints.audio - Web APIs
to learn more about how constraints work, see capabilities, constraints, and settings. ...

MediaStreamConstraints.video - Web APIs
to learn more about how constraints work, see capabilities, constraints, and settings. ...

MediaStreamConstraints - Web APIs
to learn more about how constraints work, see capabilities, constraints, and settings. properties some combination—but not necessarily all—of the following properties will exist on the object. track constraints audio either a boolean (which indicates whether or not an audio track is requested) or a mediatrackconstraints object providing the constraints which must be met by the audio track included in the returned mediastream. ...

MediaStreamTrack.onunmute - Web APIs
lled when the unmute event is received. such an event is sent when the track is again able to send data. when the onunmute event handler is called, the track's muted flag is false. syntax track.onunmute = unmutehandler; value unmutehandler is a function which is called when the mediastreamtrack receives the unmute event. the event handler receives as input a single parameter: an event whose kind is "unmute". example this example creates an unmute event handler which changes the state of a visual indicator to display the emoji character representing a "speaker" icon. mytrack.onunmute = function(evt) { playstateicon.innerhtml = "&#x1f508;"; }; specifications specification status comment media capture and streamsthe definition of 'mediastreamtrack.onunmut...

MediaStreamTrack - Web APIs
tring containing a unique identifier (guid) for the track; it is generated by the browser. mediastreamtrack.isolated read only returns a boolean value which is true if the track is isolated; that is, the track cannot be accessed by the document that owns the mediastreamtrack. this happens when the peeridentity property is set, or if the track comes from a cross-origin source. mediastreamtrack.kind read only returns a domstring set to "audio" if the track is an audio track and to "video", if it is a video track. it doesn't change if the track is deassociated from its source. mediastreamtrack.label read only returns a domstring containing a user agent-assigned label that identifies the track source, as in "internal microphone". the string may be left empty and is empty as long as no sou...

MediaStreamTrackAudioSourceNode() - Web APIs
reamtrack the mediastreamtrack from which to take audio data for this node's output. return value a new mediastreamtrackaudiosourcenode object representing the audio node whose media is obtained from the specified media track. exceptions notsupportederror the specified context is not an audiocontext. invalidstateerror the specified mediastreamtrack isn't an audio track (that is, its kind property isn't audio. example this example uses getusermedia() to obtain access to the user's camera, then creates a new mediastreamaudiosourcenode from the first audio track provided by the device. let audioctx = new (window.audiocontext || window.webkitaudiocontext)(); if (navigator.mediadevices.getusermedia) { navigator.mediadevices.getusermedia ( { audio: true, video: f...

MediaStream Image Capture API - Web APIs
supported or not. if(!capabilities.zoom) { return; } track.applyconstraints({ advanced : [{ zoom: zoom.value }] }); finally, pass the mediastreamtrack object to the imagecapture() constructor. though a mediastream holds several types of tracks and provides multiple methods for retrieving them, the imagecapture constructor will throw a domexception of type notsupportederror if mediastreamtrack.kind is not "video". let imagecapture = new imagecapture(track); interfaces imagecapture an interface for capturing images from a photographic device referenced through a valid mediastreamtrack. photocapabilities provides available configuration options for an attached photographic device. retrieve a photocapabilities object by calling imagecapture.getphotocapabilities(). specifications ...

MediaStream Recording API - Web APIs
et, enumeratedevices() is used to examine the available input devices, locate those which are audio input devices, and create <option> elements that are then added to a <select> element representing an input source picker. navigator.mediadevices.enumeratedevices() .then(function(devices) { devices.foreach(function(device) { let menu = document.getelementbyid("inputdevices"); if (device.kind == "audioinput") { let item = document.createelement("option"); item.innerhtml = device.label; item.value = device.deviceid; menu.appendchild(item); } }); }); code similar to this can be used to let the user restrict the set of devices they wish to use. for more information to learn more about using the mediastream recording api, see using the mediastream recordin...

MediaTrackConstraints.deviceId - Web APIs
more acceptable, ideal, and/or exact (mandatory) device ids which are acceptable as the source of media content. device ids are unique for a given origin, and are guaranteed to be the same across browsing sessions on the same origin. however, the value of the deviceid is determined by the source of the track's content, and there's no particular format mandated by the specification (although some kind of guid is recommended). that means that a given track will only return one value for the deviceid when you call getcapabilities(). because of this, there's no use for the device id when calling mediastreamtrack.applyconstraints(), since there is only one possible value; however, you can record a deviceid and use it to ensure that you get the same source for multiple calls to getusermedia(). a...

MediaTrackConstraints.groupId - Web APIs
hare a group id. this makes it possible to use the group id to ensure that the audio and input devices are on the same headset by retrieving the group id of the input device and specifying it when asking for an output device, perhaps. however, the value of the groupid is determined by the source of the track's content, and there's no particular format mandated by the specification (although some kind of guid is recommended). that means that a given track will only return one value for the groupid when you call getcapabilities(), and keep in mind that this value will change for each browsing session. because of this, there's no use for the group id when calling mediastreamtrack.applyconstraints(), since there is only one possible value, and you can't use it to ensure the same group is used ac...

Media Source API - Web APIs
passed into an htmlmediaelement via a mediasource object. sourcebufferlist a simple container list for multiple sourcebuffer objects. videoplaybackquality contains information about the quality of video being played by a <video> element, such as number of dropped or corrupted frames. returned by the htmlvideoelement.getvideoplaybackquality() method. trackdefault provides a sourcebuffer with kind, label, and language information for tracks that do not contain this information in the initialization segments of a media chunk. trackdefaultlist a simple container list for multiple trackdefault objects. extensions to other interfaces url.createobjecturl() creates an object url pointing to a mediasource object that can then be specified as the src value of an html media element to play ...

Media Capture and Streams API (Media Stream) - Web APIs
o a consumer. it can be a media elements, like <audio> or <video>, the webrtc rtcpeerconnection api or a web audio api mediastreamaudiosourcenode. interfaces in these reference articles, you'll find the fundamental information you'll need to know about each of the interfaces that make up the media capture and streams api. ...

Metadata.modificationTime - Web APIs
the read-only modificationtime property of the metadata interface is a date object which specifies the date and time the file system entry (or the data referenced by the entry) was last modified.a file system entry is considered to have been modified if the metadata or the contents of the referenced file (or directory, or whatever other kind of file system entry might exist on the platform in use) has changed. syntax var modificationtime = metadata.modificationtime; value a date timestamp indicating when the file system entry was last changed. example this example tries to get a particular working file at tmp/workfile.json. once that file has been found, its metadata is obtained and the file's modification timestamp year is compared to the current year. if it was last modified in a ye...

MouseEvent.buttons - Web APIs
a given number (see below). if more than one button is pressed, the button values are added together to produce a new number. for example, if the secondary (2) and auxilary (4) buttons are pressed simultaneously, the value is 6 (i.e., 2 + 4). note: do not confuse this property with the mouseevent.button property. the mouseevent.buttons property indicates the state of buttons pressed during any kind of mouse event, while the mouseevent.button property only guarantees the correct value for mouse events caused by pressing or releasing one or multiple buttons. syntax var buttonspressed = instanceofmouseevent.buttons return value a number representing one or more buttons. for more than one button pressed simultaneously, the values are combined (e.g., 3 is primary + secondary). 0 : no b...

Using Navigation Timing - Web APIs
ck_forward: output += "history"; break; default: output += "unknown"; break; } output += "<br/>redirects: " + performance.navigation.redirectcount; document.queryselector(".output").innerhtml = output; }, false); this amends the previous example by looking at the contents of the performance.navigation object. performance.navigation.type indicates what kind of load operation took place: a navigation, a reload, or a shift through the browser's history. we also obtain the number of redirects that were incurred during the navigation from performance.navigation.redirectcount. this information is output to the screen just like the page load time was previously: by inserting it into the element with class "output". html <div class="output"> </div> css...

Navigator.requestMediaKeySystemAccess() - Web APIs
s a mediakeysystemaccess object to your fulfillment handler function. the fulfillment handler receives as input just one parameter: mediakeysystemaccess a mediakeysystemaccess object representing the media key system configuration described by keysystem and supportedconfigurations exceptions in case of an error, the returned promise is rejected with a domexception whose name indicates what kind of error occurred. notsupportederror either the specified keysystem isn't supported by the platform or the browser, or none of the configurations specified by supportedconfigurations can be satisfied (if, for example, none of the codecs specified in contenttype are available). typeerror either keysystem is an empty string or the supportedconfigurations array is empty. specifications ...

Navigator.share() - Web APIs
b share test (see the source code) there is a button which, when clicked, invokes the web share api to share mdn's url. the javascript looks like this: const sharedata = { title: 'mdn', text: 'learn web development on mdn!', url: 'https://developer.mozilla.org', } const btn = document.queryselector('button'); const resultpara = document.queryselector('.result'); // must be triggered some kind of "user activation" btn.addeventlistener('click', async () => { try { await navigator.share(sharedata) resultpara.textcontent = 'mdn shared successfully' } catch(err) { resultpara.textcontent = 'error: ' + err } }); sharing files to share files, first test for and call navigator.canshare(). then include an array of files in the call to navigator.share(): notice: that the sa...

NavigatorID.appVersion - Web APIs
6/6.1"), but you should be aware of how easy it is to change the user agent string and "spoof" other browsers, platforms, or user agents, and also how cavalier the browser vendor themselves are with these properties. the window.navigator.appversion, window.navigator.appname and window.navigator.useragent properties have been used in "browser sniffing" code: scripts that attempt to find out what kind of browser you are using and adjust pages accordingly. this lead to the current situation, where browsers had to return fake values from these properties in order not to be locked out of some websites. specifications specification status comment html living standardthe definition of 'navigatorid.appversion' in that specification. living standard initial definit...

Node.nodeType - Web APIs
syntax var type = node.nodetype; returns an integer which specifies the type of the node. possible values are listed in node type constants. constants node type constants constant value description node.element_node 1 an element node like <p> or <div>. node.text_node 3 the actual text inside an element or attr. node.cdata_section_node 4 a cdatasection, such as <!cdata[[ … ]]>. ...

Using the Payment Request API - Web APIs
for demo purposes: intropanel.style.display = 'none'; legacypanel.style.display = 'block'; } }); }); note: see our recommending a payment app when user has no apps demo for the full code. showing additional user interface after successful payments if the merchant desires to collect additional information not part of the api (e.g., ad...

Proximity Events - Web APIs
yevent for any change, and a userproximityevent event in the case of a more rough change. this event can be captured at the window object level by using the addeventlistener method (using the deviceproximity or userproximity event name) or by attaching an event handler to the window.ondeviceproximity or window.onuserproximity properties. once captured, the event object gives access to different kinds of information: the deviceproximityevent event provides an exact match for the distance between the device and the object through its value property. it also provides the closest and farthest distance the device is able to detect something through its min and max properties. the userproximityevent event provides a rough approximation of the distance, expressed through a boolean. the userprox...

RTCConfiguration.iceTransportPolicy - Web APIs
value, all, is used. syntax let rtcconfiguration = { icetransportpolicy: policy }; rtcconfiguration.icetransportpolicy = policy; let policy = rtcconfiguration.icetransportpolicy; value a domstring which indicates what ice candidate policy the ice agent should use during the negotiation process, per the jsep standard. the permitted values are: all the ice agent is permitted to use any kind of candidate, including both local and relay candidates. the agent—or the browser itself—may still perform some form of ip filtering on the incoming candidates for reasons including privacy and security, as well as to simply limit the number of candidates. this is the default. relay the ice agent only considers media relay candidates when evaluating candidates. this includes, for example,...

RTCIceCandidate.protocol - Web APIs
didate a-line, if it's formatted properly. syntax var protocol = rtcicecandidate.protocol; value a domstring which indicates what network protocol the candidate uses, udp or tcp. these values are defined by the enumerated type rtciceprotocol: tcp the candidate, if selected, would use tcp as the transport protocol for its data. the tcptype property provides additional information about the kind of tcp candidate represented by the object. udp the candidate will use the udp transport protocol for its data. this is the preferred protocol for media interactions because of its better performance profile. note: if protocol is null — and protocol is supported by the user agent — passing the candidate to addicecandidate() will fail, throwing an operationerror exception. usage notes ...

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
icecandidatepairstats 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. ...

RTCIceCandidateStats.protocol - Web APIs
ol property specifies the protocol the specified candidate would use for communication with the remote peer. syntax protocol = rtcicecandidatestats.protocol; value the value is one of the members of the rtciceprotocol enumerated string type: tcp the candidate, if selected, would use tcp as the transport protocol for its data. the tcptype property provides additional information about the kind of tcp candidate represented by the object. udp the candidate will use the udp transport protocol for its data. this is the preferred protocol for media interactions because of its better performance profile. specifications specification status comment identifiers for webrtc's statistics apithe definition of 'rtcicecandidatestats.protocol' in that specification. ...

RTCIceCandidateStats - Web APIs
des those properties in addition to the ones below. address optional a string containing the address of the candidate. this value may be an ipv4 address, an ipv6 address, or a fully-qualified domain name. this property was previously named ip and only accepted ip addresses. candidatetype optional a string matching one of the values in the rtcicecandidatetype enumerated type, indicating what kind of candidate the object provides statistics for. deleted optional a boolean value indicating whether or not the candidate has been released or deleted; the default value is false. for local candidates, it's value is true if the candidate has been deleted or released. for host candidates, true means that any network resources (usually a network socket) associated with the candidate have already ...

RTCIceProtocol - Web APIs
the webrtc api's rtciceprotocol enumerated type provides a set of domstring values representing the names of the transport protocols ice candidates can use. these strings are taken directly from the candidate a-line in sdp. values tcp the candidate, if selected, would use tcp as the transport protocol for its data. the tcptype property provides additional information about the kind of tcp candidate represented by the object. udp the candidate will use the udp transport protocol for its data. this is the preferred protocol for media interactions because of its better performance profile. usage notes the rtciceprotocol type is used by the protocol property of rtcicecandidate objects. specifications specification status comment webrtc 1.0: real-time communicat...

RTCIceServer - Web APIs
server (such as a stun or turn server). objects of this type are provided in the configuration of an rtcpeerconnection, in the iceservers array. properties credential optional the credential to use when logging into the server. this is only used if the rtciceserver represents a turn server. credentialtype optional if the rtciceserver represents a turn server, this attribute specifies what kind of credential is to be used when connecting. this must be one of the values defined by the rtcicecredentialtype enum. the default is password. urls this required property is either a single domstring or an array of domstrings, each specifying a url which can be used to connect to the server. username optional if the rtciceserver is a turn server, then this is the username to use during the au...

RTCPeerConnection.createDataChannel() - Web APIs
this can be useful for back-channel content such as images, file transfer, text chat, game update packets, and so forth. if the new data channel is the first one added to the connection, renegotiation is started by delivering a negotiationneeded event. syntax datachannel = rtcpeerconnection.createdatachannel(label[, options]); parameters label a human-readable name for the channel. this string may not be longer than 65,535 bytes. ...

RTCPeerConnection - Web APIs
attached to the session, codecs and options supported by the browser, and any ice candidates already gathered. ...

RTCRtpEncodingParameters.scaleResolutionDownBy - Web APIs
syntax rtpencodingparameters.scaleresolutiondownby = scalingfactor; rtpencodingparameters = { scaleresolutiondownby: scalingfactor }; value a double-precison floating-point number specifying the amount by which to reduce the size of the video during encoding. the default value, 1.0, means that the video will be encoded at its original size. ...

RTCRtpReceiver - Web APIs
endencies. rtcrtpreceiver.getsynchronizationsources() returns an array including one rtcrtpsynchronizationsource instance for each unique ssrc (synchronization source) identifier received by the current rtcrtpreceiver in the last ten seconds. static methods rtcrtpreceiver.getcapabilities() returns the most optimistic view of the capabilities of the system for receiving media of the given kind. specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpreceiver' in that specification. candidate recommendation initial definition. ...

RTCRtpSender.getCapabilities() static function - Web APIs
the static function rtcrtpsender.getcapabilities() returns an rtcrtpcapabilities object describing the codecs and capabilities supported by the rtcrtpsender. you can, similarly, obtain the capabilities of rtcrtpreceivers by calling the static function rtcrtpreceiver.getcapabilities(). syntax let rtpcapabilities = rtcrtpsender.getcapabilities(kind); parameters kind a domstring indicating the type of media for which you wish to get the sender's capability to receive. all browsers support the primary media kinds: audio and video. return value an rtcrtpcapabilities object stating what capabilities the browser has for sending the specified media kind over an rtcpeerconnection. if the browser doesn't have any support for the given media kind, the returned value is null. description as ...

RTCRtpSender - Web APIs
nder.replacetrack() attempts to replace the track currently being sent by the rtcrtpsender with another track, without performing renegotiation. this method can be used, for example, to toggle between the front- and rear-facing cameras on a device. static methods rtcrtpsender.getcapabilities() returns an rtcrtpcapabilities object describing the system's capabilities for sending a specified kind of media data. specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpsender' in that specification. candidate recommendation ...

Screen Capture API - Web APIs
traint mediatrackconstraints.logicalsurface. dictionaries the following dictionaries are defined by the screen capture api. cursorcaptureconstraint an enumerated string type used to provide the value for the cursor property for the settings and constraints. the possible values are always, motion, and never. displaycapturesurfacetype an enumerated string type which is used to identify the kind of display surface to capture. this type is used for the displaysurface property in the constraints and settings objects, and has the possible values application, browser, monitor, and window. feature policy validation user agents that support feature policy (either using http's feature-policy header or the <iframe> attribute allow) can specify a desire to use the screen capture api using the ...

Sensor APIs - Web APIs
the sensor apis are a set of interfaces built to a common design that expose device sensors in a consistent way to the web platform. sensor apis concepts and usage although the generic sensor api specification defines a sensor interface, as a web developer you will never use it. instead you'll use one of its subclasses to retrieve specific kinds of sensor data. for example, the accelerometer interface returns the acceleration of the device along all three axes at the time it is read. sensors may or may not correspond exactly to a physical device sensor. for example, the gyroscope interface corresponds exactly to a physical device interface. alternatively, the absoluteorientationsensor interface provides information that is algorithmically agregated from two or more device sensors. these ...

Using server-sent events - Web APIs
event: usermessage data: {"username": "bobby", "time": "02:34:11", "text": "hi everyone."} ...

SharedWorker - Web APIs
they implement an interface different than dedicated workers and have a different global scope, sharedworkerglobalscope. note: if sharedworker can be accessed from several browsing contexts, all those browsing contexts must share the exact same origin (same protocol, host and port). constructors sharedworker() creates a shared web worker that executes the script at the specified url. properties inherits properties from its parent, eventtarget, and implements properties from abstractworker. ...

SourceBuffer.trackDefaults - Web APIs
syntax var mytrackdefaults = sourcebuffer.trackdefaults; sourcebuffer.trackdefaults = mytrackdefaultlist; value a trackdefaultlist object. exceptions the following exceptions may be thrown when setting a new value for this property. exception explanation invalidstateerror one or more of the sourcebuffer objects in mediasource.sourcebuffers are being updated (i.e. ...

SourceBuffer - Web APIs
can be appended in any order, or they have to be kept in a strict sequence. sourcebuffer.texttracks read only a list of the text tracks currently contained inside the sourcebuffer. sourcebuffer.timestampoffset controls the offset applied to timestamps inside media segments that are subsequently appended to the sourcebuffer. sourcebuffer.trackdefaults specifies the default values to use if kind, label, and/or language information is not available in the initialization segment of the media to be appended to the sourcebuffer. sourcebuffer.updating read only a boolean indicating whether the sourcebuffer is currently being updated — i.e. whether an sourcebuffer.appendbuffer(), sourcebuffer.appendstream(), or sourcebuffer.remove() operation is currently in progress. sourcebuffer.videot...

Storage API - Web APIs
om for other things. note: this feature is available in web workers. site storage—the data stored for a web site which is managed by the storage standard—includes: indexeddb databases cache api data service worker registrations web storage api data managed using window.localstorage history state information saved using history.pushstate() application caches notification data other kinds of site-accessible, site-specific data that may be maintained site storage units the site storage system described by the storage standard and interacted with using the storage api consists of a single site storage unit for each origin. in essence, every web site or web application has its own storage unit into which its data gets placed. the diagram below shows a site storage pool with three...

Using the Storage Access API - Web APIs
rst-party cookie jar document.cookie = "foo=bar"; // set a cookie localstorage.setitem("username", "john"); // access a localstorage entry }).catch(_ => { // error obtaining storage access. }); note that access requests are automatically denied unless the embedded content is currently processing a user gesture such as a tap or click — so this code needs to be run inside some kind of user gesture-based event handler, for example: btn.addeventlistener('click', () => { // run code here }); ...

Using readable streams - Web APIs
function readstream() { const reader = stream.getreader(); let charsreceived = 0; // read() returns a promise that resolves // when a value has been received reader.re...

Streams API - Web APIs
eceive over a network down into small chunks, then processing it bit by bit. this is something browsers do anyway when receiving assets to be shown on webpages — videos buffer and more is gradually available to play, and sometimes you'll see images display gradually as more is loaded. but this has never been available to javascript before. previously, if we wanted to process a resource of some kind (be it a video, or a text file, etc.), we'd have to download the entire file, wait for it to be deserialized into a suitable format, then process the whole lot after it is fully received. with streams being available to javascript, this all changes — you can now start processing raw data with javascript bit by bit as soon as it is available on the client-side, without needing to generate a buf...

SubmitEvent.submitter - Web APIs
that was invoked to cause the form to be submitted. syntax let submitter = submitevent.submitter; value an element, indicating the element that sent the submit event to the form. while this is often an <input> element whose type or a <button> 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 ...

TextTrack - Web APIs
ead only a domstring which identifies the track, if it has one. if it doesn't have an id, then this value is an empty string (""). if the texttrack is associated with a <track> element, then the track's id matches the element's id. texttrack.inbandmetadatatrackdispatchtype read only returns a domstring which indicates the track's in-band metadata track dispatch type. needs details texttrack.kind read only returns a domstring indicating what kind of text track the texttrack describes. the value must be one of those in the texttrackkind enum. texttrack.label read only a human-readable domstring which contains the text track's label, if one is present; otherwise, this is an empty string (""), in which case a custom label may need to be generated by your code using other attributes of t...

TouchEvent - Web APIs
ents is sent is browser-specific, and may also vary depending on the capability of the user's hardware. you must not rely on a specific granularity of these events. touchcancel sent when a touch point has been disrupted in some way. there are several possible reasons why this might happen (and the exact reasons will vary from device to device, as well as browser to browser): an event of some kind occurred that canceled the touch; this might happen if a modal alert pops up during the interaction. the touch point has left the document window and moved into the browser's ui area, a plug-in, or other external content. the user has placed more touch points on the screen than can be supported, in which case the earliest touch in the touchlist gets canceled. using with addeventlistener() and...

Using Touch Events - Web APIs
nt. for the touchmove event, it is a list of the touch points that have changed since the last event. for the touchend event, it is a list of the touch points that have been removed from the surface (that is, the set of touch points corresponding to fingers no longer touching the surface). together, these interfaces define a relatively low-level set of features, yet they support many kinds of touch-based interaction, including the familiar multi-touch gestures such as multi-finger swipe, rotation, pinch and zoom. from interfaces to gestures an application may consider different factors when defining the semantics of a gesture. for instance, the distance a touch point traveled from its starting location to its location when the touch ended. another potential factor is time; for e...

VideoTrack - Web APIs
r track is active will make that other track inactive. id read only a domstring which uniquely identifies the track within the media. this id can be used to locate a specific track within a video track list by calling videotracklist.gettrackbyid(). the id can also be used as the fragment part of the url if the media supports seeking by media fragment per the media fragments uri specification. kind read only a domstring specifying the category into which the track falls. for example, the main video track would have a kind of "main". label read only a domstring providing a human-readable label for the track. for example, a track whose kind is "sign" might have a label of "a sign-language interpretation". this string is empty if no label is provided. language read only a domstring spe...

WEBGL_debug_shaders - Web APIs
webgl extensions are available using the webglrenderingcontext.getextension() method. for more information, see also using extensions in the webgl tutorial. ...

WebGL2RenderingContext.beginQuery() - Web APIs
syntax void gl.beginquery(target, query); parameters target a glenum specifying the target of the query. possible values: gl.any_samples_passed: specifies an occlusion query: these queries detect whether an object is visible (whether the scoped drawing commands pass the depth test and if so, how many samples pass). gl.any_samples_passed_conservative: same as above above, but less accurate and faster version. ...

WebGL2RenderingContext - Web APIs
webgl2renderingcontext.bindbufferrange() binds a range of a given webglbuffer to a given binding point (target) at a given index. webgl2renderingcontext.getuniformindices() retrieves the indices of a number of uniforms within a webglprogram. webgl2renderingcontext.getactiveuniforms() retrieves information about active uniforms within a webglprogram. webgl2renderingcontext.getuniformblockindex() retrieves the index of a uniform block within a webglprogram. webgl2renderingcontext.getactiveuniformblockparameter() retrieves information about an active uniform block within a webglprogram. webgl2renderingcontext.getactiveuniformblockname() retrieves the name of the active uniform block at a given index within a webglprogram. webgl2renderingcontext.uniformblockbinding() assigns bind...

WebGLQuery - Web APIs
disjoint timer queries are available with the ext_disjoint_timer_query extension only. ...

WebGL constants - Web APIs
0x00000100 passed to clear to clear the current depth buffer. stencil_buffer_bit 0x00000400 passed to clear to clear the current stencil buffer. color_buffer_bit 0x00004000 passed to clear to clear the current color buffer. rendering primitives constants passed to webglrenderingcontext.drawelements() or webglrenderingcontext.drawarrays() to specify what kind of primitive to render. constant name value description points 0x0000 passed to drawelements or drawarrays to draw single points. lines 0x0001 passed to drawelements or drawarrays to draw lines. each vertex connects to the one after it. line_loop 0x0002 passed to drawelements or drawarrays to draw lines. each set of two vertices is ...

WebRTC connectivity - Web APIs
n, will create an offer. they will then send this offer to peer b using the chosen signal channel. peer b will receive the offer from the signal channel and create an answer. they will then send this back to peer a along the signal channel. session descriptions the configuration of an endpoint on a webrtc connection is called a session description. the description includes information about the kind of media being sent, its format, the transfer protocol being used, the endpoint's ip address and port, and other information needed to describe a media transfer endpoint. this information is exchanged and stored using session description protocol (sdp); if you want details on the format of sdp data, you can find it in rfc 2327. when a user starts a webrtc call to another user, a special descript...

Lifetime of a WebRTC session - Web APIs
for icecandidate events, which handles sending those candidates to the other peer over the signaling channel. each peer establishes a handler for track event, which is received when the remote peer adds a track to the stream. this code should connect the tracks to its consumer, such as a <video> element. the caller creates and shares with the receiving peer a unique identifier or token of some kind so that the call between them can be identified by the code on the signaling server. the exact contents and form of this identifier is up to you. each peer connects to an agreed-upon signaling server, such as a websocket server they both know how to exchange messages with. each peer tells the signaling server that they want to join the same webrtc session (identified by the token established in...

Signaling and video calling - Web APIs
built a mechanism for exchanging messages, we need a protocol defining how those messages will look. this can be done in a number of ways; what's demonstrated here is just one possible way to structure signaling messages. this example's server uses stringified json objects to communicate with its clients. this means our signaling messages will be in json format, with contents which specify what kind of messages they are as well as any additional information needed in order to handle the messages properly. exchanging session descriptions when starting the signaling process, an offer is created by the user initiating the call. this offer includes a session description, in sdp format, and needs to be delivered to the receiving user, which we'll call the callee. the callee responds to the offe...

Using WebRTC data channels - Web APIs
once you've established a webrtc peer connection using the rtcpeerconnection interface, you're able to send and receive media data between the two peers on the connection. but there's a lot more you can do with webrtc. in this guide, we'll examine how to add a data channel to a peer connection, which can then be used to securely exchange arbitrary data; that is, any kind of data we wish, in any format we choose. since all webrtc components are required to use encryption, any data transmitted on an rtcdatachannel is automatically secured using datagram transport layer security (dtls). see security below for more information. creating a data channel the underlying data transport used by the rtcdatachannel can be created in one of two ways: let webrtc create the transport and announce ...

Inputs and input sources - Web APIs
a full webxr experience isn't just about showing the user a wholly virtual scene or augmenting reality by adding to or altering the world around them. in order to make an experience that's fulfilling and engaging, the user needs to be able to interact with it. to that end, webxr provides support for a variety of kinds of input devices. in this guide, we'll look at how to use webxr's input device management features to determine what input sources are available and how to then monitor those sources for inputs in order to handle user interactivity with your virtual or augmented environment. inputs in webxr fundamentally, inputs in webxr fall into two basic categories: targeting and actions. targeting is the specification of a point in space by the user's input. this may involve the user s...

Lighting a WebXR setting - Web APIs
in shading a scene, and comes into play in terms of how different types of light source behave. the reflected light ray's color may, of course, be altered in intensity and/or hue due 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...

WebXR performance guide - Web APIs
u typically have a number of working variables through which various vectors, matrices, and quaternions pass over time. it makes sense, then, to have a limited set of these objects, simply replacing their contents with the new information each time you need to use them. they can be thought of as being similar to the registers in a microprocessor: a limited set of memory storage slots for specific kinds of data or use cases. while an individual vector or matrix doesn't occupy an inordinate amount of memory, the sheer number of vectors and matrices and other structures that are used to build each frame of a 3d scene means the memory management becomes a problem eventually if you keep allocating and de-allocating memory objects. consider the following function drawscene(gl, view, programinfo, ...

WebXR permissions and security - Web APIs
. understanding of the user's intent may be either implicit or explicit. note: additional requirements may be put into effect due to the specific features requested by the options object when calling requestsession(). user intent user intent is the concept of whether or not an action being performed by code is being performed because of something the user intends to do or not. there are two kinds of user intent: implicit and explicit. explicit user intent (explicit user consent) is granted when the user has specifically and expressly been asked for permission to perform an action. implicit user intent (implicit user consent) is assumed if either of the following scenarios is the case: the user has interacted with the document in some way which has in turn caused your request to occu...

Rendering and the WebXR frame animation callback - Web APIs
r system. this uses interfaces inherited from the gamepad api but you interact with them through webxr. the third and final type of input is the traditional non-xr input device such as keyboards, mice, trackpads, touch screens, and non-xr gamepads and joysticks. orientation and position information that can be collected from the xr hardware directly is applied automatically. thus it's the other kinds of input that you need to handle yourself: pointing device target and button presses gamepad inputs non-xr input device inputs to learn more about how to handle user inputs while presenting a scene using webxr, see the article inputs and input sources. updating object positions most (though not all) scenes include some form of animation, in which things move and react to one another in ...

Controlling multiple parameters with ConstantSourceNode - Web APIs
the solution is simple, and it involves using an audio node type which, at first glance, doesn't look all that useful: constantsourcenode. the technique this is actually a really easy way to do something that sounds like it might be hard to do. you simply need to create a constantsourcenode and connect it to all of the au...

Migrating from webkitAudioContext - Web APIs
rce(); // some time later... var isfinished = (src.playbackstate == src.finished_state); // new audiocontext code: var src = context.createbuffersource(); function endedhandler(event) { isfinished = true; } var isfinished = false; src.onended = endedhandler; the exact same changes have been applied to both audiobuffersourcenode and oscillatornode, so you can apply the same techniques to both kinds of nodes. removal of audiocontext.activesourcecount the activesourcecount attribute has been removed from audiocontext. if you need to count the number of playing source nodes, you can maintain the count by handling the ended event on the source nodes, as shown above. code using the activesourcecount attribute of the audiocontext, like this snippet: var src0 = context.createbuffersource()...

Web audio spatialization basics - Web APIs
es accordingly, panning as it moves to the left or right of the room, or becoming quieter as it is moved away from the user or is rotated so the speakers are facing away from them, etc. this is done by setting the different properties of the pannernode object instance in relation to that movement, to emulate spacialization. note: the experience is much better if you use headphones, or have some kind of surround sound system to plug your computer into. creating an audio listener so let's begin! the baseaudiocontext (the interface the audiocontext is extended from) has a listener property that returns an audiolistener object. this represents the listener of the scene, usually your user. you can define where they are in space and in which direction they are facing. they remain static. the pa...

Web Audio API - Web APIs
createmediastreamtracksource() method to create the node, you specify which track to use. this provides more control than mediastreamaudiosourcenode. defining audio effects filters interfaces for defining effects that you want to apply to your audio sources. biquadfilternode the biquadfilternode interface represents a simple low-order filter. it is an audionode that can represent different kinds of filters, tone control devices, or graphic equalizers. a biquadfilternode always has exactly one input and one output. convolvernode the convolvernode interface is an audionode that performs a linear convolution on a given audiobuffer, and is often used to achieve a reverb effect. delaynode the delaynode interface represents a delay-line; an audionode audio-processing module that causes a ...

Attestation and Assertion - Web APIs
ator's response if the `attestation` parameter in `navigator.credentials.create()` is set to `none` the purpose of attestation is to cryptographically prove that a newly generated key pair came from a specific device. this provides a root of trust for a newly generated key pair as well as being able to identify the attributes of a device being used (how the private key is protected; if / what kind of biometric is being used; whether a device has been certified; etc.). it should be noted that while attestation provides the capability for a root of trust, validating the root of trust is frequently not necessary. when registering an authenticator for a new account, typically a trust on first use (tofu) model applies; and when adding an authenticator to an existing account, a user has alre...

Using the Web Speech API - Web APIs
volves receiving synthesising text contained within an app to speech, and playing it out of a device's speaker or audio output connection. the web speech api has a main controller interface for this — speechsynthesis — plus a number of closely-related interfaces for representing text to be synthesised (known as utterances), voices to be used for the utterance, etc. again, most oses have some kind of speech synthesis system, which will be used by the api for this task as available. demo to show simple usage of web speech synthesis, we've provided a demo called speak easy synthesis. this includes a set of form controls for entering text to be synthesised, and setting the pitch, rate, and voice to use when the text is uttered. after you have entered your text, you can press enter/return to...

Web Workers API - Web APIs
js-ctypes in your worker. see chromeworker for more details. audio workers provide the ability for direct scripted audio processing to be done inside a web worker context. note: as per the web workers spec, worker error events should not bubble (see bug 1188141. this has been implemented in firefox 42. web worker interfaces abstractworker abstracts properties and methods common to all kind of workers (i.e. worker or sharedworker). worker represents a running worker thread, allowing you to pass messages to the running worker code. workerlocation defines the absolute location of the script executed by the worker. sharedworker represents a specific kind of worker that can be accessed from several browsing contexts, being several windows, iframes or even workers. workerglobalsco...

Window.updateCommands() - Web APIs
whether we are in bold right now). notes this enables or disables items (setting or clearing the "disabled" attribute on the command node as appropriate), or ensures that the command state reflects the state of the selection by setting current state information in the "state" attribute of the xul command nodes. specification dom level 0. not part of specification. ...

Worklet - Web APIs
evelopers access to low-level parts of the rendering pipeline. with worklets, you can run javascript and webassembly code to do graphics rendering or audio processing where high performance is required. worklet types worklets are restricted to specific use cases; they cannot be used for arbitrary computations like web workers. the worklet interface abstracts properties and methods common to all kind of worklets, and cannot be created directly. instead, you can use one of the following classes: name description location specification paintworklet for programmatically generating an image where a css property expects a file. access this interface through css.paintworklet. chrome: main thread gecko: paint thread css painting api audi...

XRReferenceSpace: reset event - Web APIs
iewer has regained tracking, and that their new position represents a correction from the previously emulated values. this is typically the desired behavior if your site or app doesn't simulate motion through the space by expressly changing the position and/or orientation of the viewer (rather than the user's physical movements being used by the xr device to introduce movement). however, if that kind of "teleportation" is being used, you actually want to avoid jumping the user's position after tracking recovery, this can introduce additional and potentially jarring jumping. instead of allowing this to happen, you can integrate the emulatedposition into the teleportation offset calculated prior to calling getoffsetreferencespace() to create a new reference space whose updated effective origin ...

XRSession: select event - Web APIs
bubbles yes cancelable no interface xrinputsourceevent event handler property onselect for details on how the selectstart, select, and selectend events work, and how you should react to them, see primary actions in inputs and input sources. ...

XRSession: selectend event - Web APIs
is case, a single function is used to handle all three events, allowing them to share certain code that's the same regardless of which of the three events is received. only after completing those tasks does the onselectionevent() function below dispatch the action out to a specialized function to handle things. after checking to ensure that the received event is a tracked-pointer event (the only kind we handle here), the target ray's pose is obtained using getpose(). if the target ray pose was fetched successfully, the code then uses the value of event property type to route control to an appropriate function to handle the event which arrived: for selectstart events, a mybegintracking() function is called with the target ray pose's matrix. the mybegintracking() function would presumably s...

XRSession: selectstart event - Web APIs
is case, a single function is used to handle all three events, allowing them to share certain code that's the same regardless of which of the three events is received. only after completing those tasks does the onselectionevent() function below dispatch the action out to a specialized function to handle things. after checking to ensure that the received event is a tracked-pointer event (the only kind we handle here), the target ray's pose is obtained using getpose(). if the target ray pose was fetched successfully, the code then uses the value of event property type to route control to an appropriate function to handle the event which arrived: for selectstart events, a mybegintracking() function is called with the target ray pose's matrix. the mybegintracking() function would presumably s...

XRSession: squeeze event - Web APIs
the webxr event squeeze is sent to an xrsession when one of the session's input sources has completed a primary squeeze action. examples of comon kinds of primary action are users pressing triggers or buttons, tapping a touchpad, speaking a command, or performing a recognizable gesture when using a video tracking system or handheld controller with an accelerometer. bubbles yes cancelable no interface xrinputsourceevent event handler property onsqueeze for details on how the squeezestart, squeeze, and squeezeend events work, and how you should react to them, see primary squeeze actions in inputs and input sources. examples the following example uses addeventlistener() to set up a handler for the squeeze event. the handler fetches the ...

XRSession: squeezeend event - Web APIs
this case, a single function is used to handle all three events, allowing them to share certain code that's the same regardless of which of the three events is received. only after completing those tasks does the onsqueezeevent() function below dispatch the action out to a specialized function to handle things. after checking to ensure that the received event is a tracked-pointer event (the only kind we handle here), the target ray's pose is obtained using getpose(). if the target ray pose was fetched successfully, the code then uses the value of event property type to route control to an appropriate function to handle the event which arrived: for squeezestart events, a mybegintracking() function is called with the target ray pose's matrix. the mybegintracking() function would presumably ...

XRSession: squeezestart event - Web APIs
this case, a single function is used to handle all three events, allowing them to share certain code that's the same regardless of which of the three events is received. only after completing those tasks does the onsqueezeevent() function below dispatch the action out to a specialized function to handle things. after checking to ensure that the received event is a tracked-pointer event (the only kind we handle here), the target ray's pose is obtained using getpose(). if the target ray pose was fetched successfully, the code then uses the value of event property type to route control to an appropriate function to handle the event which arrived: for squeezestart events, a mybegintracking() function is called with the target ray pose's matrix. the mybegintracking() function would presumably ...

XRSessionMode - Web APIs
values immersive-ar the session's output will be given exclusive access to the immersive device, but the rendered content will be blended with the real-world environment. the session's environmentblendmode indicates the method to be used to blend the content together. important: the immersive-ar mode is defined by the webxr augmented reality module, which is not yet stable and should not be used other than for testing and experimentation. ...

XRWebGLLayerInit.framebufferScaleFactor - Web APIs
ce display resolution. for example, a value of 1.0 indicates that the frame buffer should be the same resolution as the actual display, while a value of 0.5 indicates that the frame buffer should be half the resolution of the display. a value of 2.0, on the other hand, creates a frame buffer whose resolution is double that of the actual display buffer. there are valid use cases for all of these kinds of scaling. see managing rendering quality in webxr performance guide for more information. you can determine the scaling factor that you would need to apply to match the default frame buffer resolution by using the xrwebgllayer.getnativeframebufferscalefactor() static function. syntax let layerinit = { framebufferscalefactor: scalefactor }; let gllayer = new xrwebgllayer(xrsession, gl, lay...

Resources - Web APIs
...

ARIA Screen Reader Implementors Guide - Accessibility
event for an atomic region is added to the queue remove an earlier event for the same region. it is probably desirable to have at least a tiny timeout before presenting atomic region changes, in order to avoid presenting the region twice for two changes that occur quickly one after the other. include labels when presenting changes: if the change occurs in something with a semantic label of some kind, speak the label. this is particularly important for changes in data cells, where the column and row headers provide important contextual information. ideas for settings and heuristics allow for a different voice (in text-to-speech) or other varying presentational characteristics to set live changes apart. when no wai-aria markup is present, automatically present some changes unless the user ...

ARIA: textbox role - Accessibility
ion is that the control is a single line text box, and enter or return submits the form. aria-placeholder attribute represents a hint (word or phrase) to the user about what to enter into the text field. the hint should be a sample value or a brief description of the expected format.this information should not be used as a substitute for a label: a label is focusable, permanent, indicates what kind of information is expected, and increases the hit area for setting focus on the control, whereas placeholder text is only temporary hint about the expected value, which if implemented incorrectly can decrease accessibility. the placeholder should be visible when the control's value is the empty string such as when the control first receives focus and when users remove a previously-entered value. ...

Web applications and ARIA FAQ - Accessibility
ogress bar, and the aria-valuenow describes the current state of it. along with placing them directly in the markup, aria attributes can be added to the element and updated dynamically using javascript code like this: // find the progress bar <div> in the dom. var progressbar = document.getelementbyid("percent-loaded"); // set its aria roles and states, so that assistive technologies know what kind of widget it is. progressbar.setattribute("role", "progressbar"); progressbar.setattribute("aria-valuemin", 0); progressbar.setattribute("aria-valuemax", 100); // create a function that can be called at any time to update the value of the progress bar. function updateprogress(percentcomplete) { progressbar.setattribute("aria-valuenow", percentcomplete); } will adding aria change my page style...

Accessibility and Spacial Patterns - Accessibility
t. the phenomenon seems to be especially problematic for symbol/background combinations that differ only in the blue channel." distance between stripes photosensitive seizures may be caused by static images as well as animation. the mechanism for this is poorly understood, but is believed to be linked to "gamma oscillations" set up in the brain. these oscillations in the brain are a different kind of response than other kinds of neurological responses believed to cause photosensitive seizures. stripes and patterns are typical of the kinds of images that create problems, and stripes have been studied most closely. there's the potential for causing harm if there are more than five light-dark pairs of stripes in any orientation. they can be parallel, radial, curved or straight, and may be...

An overview of accessible web applications and widgets - Accessibility
most javascript libraries offer a library of client-side widgets that mimic the behavior of familiar desktop interfaces. sliders, menu bars, file list views, and more can be built with a combination of javascript, css, and html. since the html4 specification doesn't provide built-in tags that semantically describe these kinds of widgets, developers typically resort to using generic elements such as <div> and <span>. while this results in a widget that looks like its desktop counterpart, there usually isn't enough semantic information in the markup to be usable by an assistive technology. the problem dynamic content on a web page can be particularly problematic for users who, for whatever reason, are unable to view the screen. stock tickers, live twitter feed updates, progress indicat...

Cognitive accessibility - Accessibility
stions to help simplify it. pronunciation there are multiple techniques that can help teach people how to pronounce words: provide the pronunciation immediately following the word. link to a list of pronunciations. provide a glossary with pronunciation. use the <ruby> element to illustrate how a word is pronounced. providing guidance on how to pronounce words helps many different kinds of people, including those who prefer to read aloud, non-native language speakers, and people who may unfamiliar with the meaning of a term in context. another solution is to use glyphs or diacritical marks to illustrate pronunciation. however, if this technique is used, there must be a mechanism to turn it off. further, it is helpful to link to a guide to the marks being used, as their meaning...

Keyboard - Accessibility
e trouble operating a pointing device such as a mouse or trackball, or whose mouse is not working at the moment, or who simply prefer to use a keyboard for input whenever possible. focusable elements should have interactive semantics if an element can be focused using the keyboard, then it should be interactive; that is, the user should be able to do something to it and produce a change of some kind (for example, activating a link or changing an option). note: one important exception to this rule is if the element has role="document" applied to it, inside an interactive context (such as role="application"). in such a case, focusing the nested document is the only way of returning assistive technology to a non-interactive state (often called "browse mode"). most interactive elements are f...

::placeholder - CSS: Cascading Style Sheets
that apply to the ::first-line pseudo-element can be used in a rule using ::placeholder in its selector. note: in most browsers, the appearance of placeholder text is a translucent or light gray color by default. syntax ::placeholder accessibility concerns color contrast contrast ratio placeholder text typically has a lighter color treatment to indicate that it is a suggestion for what kind of input will be valid, and is not actual input of any kind. it is important to ensure that the contrast ratio between the color of the placeholder text and the background of the input is high enough that people experiencing low vision conditions will be able to read it while also making sure there is enough of a difference between the placeholder text and input text color that users do not mist...

speak-as - CSS: Cascading Style Sheets
counter representation as normal and would read it out letter by letter. if the user agent doesn't know how to read out a partiular counter symbol, the user agent might read it out as if the value of speak-as was numbers. <counter-style-name> the name of another counter style, specified as a <custom-ident>. if included, the counter will be spoken out in the form specified in that counter style, kind of like specifying the fallback descriptor. if the specified style does not exist, speak-as defaults to auto. accessibility concerns assistive technology support is very limited for the speak-as property. do not rely on it to convey information critical to understanding the page's purpose. let's talk about speech css | css tricks formal definition related at-rule@counter-styleinitial value...

Using CSS animations - CSS: Cascading Style Sheets
" + event.elapsedtime; break; case "animationend": l.innerhtml = "ended: elapsed time is " + event.elapsedtime; break; case "animationiteration": l.innerhtml = "new loop started at time " + event.elapsedtime; break; } document.getelementbyid("output").appendchild(l); } this code, too, is very simple. it simply looks at the event.type to determine which kind of animation event occurred, then adds an appropriate note to the <ul> (unordered list) we’re using to log these events. the output, when all is said and done, looks something like this: started: elapsed time is 0 new loop started at time 3.01200008392334 new loop started at time 6.00600004196167 ended: elapsed time is 9.234000205993652 note that the times are very close to, but not ex...

Ordering Flex Items - CSS: Cascading Style Sheets
er in which they appear visually. it does not change the sequential navigation order of the items. therefore if a user is tabbing between the items, they could find themselves jumping around your layout in a very confusing way. by tabbing around any of the live examples on this page, you can see how order is potentially creating a strange experience for anyone not using a pointing device of some kind. to read more about this disconnect of visual order and logical order and some of the potential problems it raises for accessibility, see the following resources. flexbox and the keyboard navigation disconnect html source order vs css display order the responsive order conflict for keyboard focus use cases for order there are sometimes places where the fact that the logical and therefore ...

Introduction to formatting contexts - CSS: Cascading Style Sheets
element will not be applied. vertical padding and borders will be applied but may overlap content above and below as, in the inline formatting context, the line boxes will not be pushed apart by padding and borders. other formatting contexts this guide covers flow layout and is therefore not referring to other possible formatting contexts. as such, it is useful to understand that creating any kind of formatting context will change the way elements inside that formatting context behave. this behavior is always described in the specification and also here on mdn. summary in this guide, we have looked in more detail at the block and inline formatting contexts and the important subject of creating a block formatting context (bfc). in the next guide, we will find out how normal flow interacts...

Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
a better choice. box alignment the feature of flexbox that was most exciting to many of us was that it gave us proper alignment control for the first time. it made it easy to center a box on the page. flex items can stretch to the height of the flex container, meaning that equal height columns were possible. these were things we have wanted to do for a very long time, and have come up with all kinds of hacks to accomplish, at least visually. the alignment properties from the flexbox specification have been added to a new specification called box alignment level 3. this means that they can be used in other specifications, including grid layout. in the future, they may well apply to other layout methods as well. in a later guide in this series, i’ll be taking a proper look at box alignmen...

Basic concepts of Logical Properties and Values - CSS: Cascading Style Sheets
ock or inline dimension at once. an example would be margin-block, which is a shorthand setting for margin-block-start and margin-block-end. note: the css working group are currently trying to decide what to do about the four-value shorthands for logical properties, for example the equivalents to setting four physical properties at once, like margins with the margin property. we would need some kind of modifier if we were to reuse margin for flow-relative properties. if you would like to read the suggestions or comment on them the relevant github issue is #1282. testing for browser support you can test for support of logical properties and values using feature queries. for example you could set a width, test for inline-size and, if it is supported, set the width to auto and the inline-siz...

Stacking context example 3 - CSS: Cascading Style Sheets
z-index stacking context example 3 this last example shows problems that arise when mixing several positioned elements in a multi-level html hierarchy and when z-indexes are assigned using class selectors. let's take as an example a three-level hierarchical menu made from several positioned divs. second-level and third-level divs appear when hovering or clicking on their parents. usually this kind of menu is script-generated either client-side or server-side, so style rules are assigned with a class selector instead of the id selector. if the three menu levels partially overlap, then managing stacking could become a problem. the first-level menu is only relatively positioned, so no stacking context is created. the second-level menu is absolutely positioned inside the parent element. i...

Using the :target pseudo-class in selectors - CSS: Cascading Style Sheets
developer.mozilla.org/en/docs/using_the_:target_selector#example contains the fragment identifier #example. in html, identifiers are found as the values of either id or name attributes, since the two share the same namespace. thus, the example url would point to the heading "example" in this document. suppose you wish to style any h2 element that is the target of a url, but do not want any other kind of element to get a target style. this is simple enough: h2:target { font-weight: bold; } it's also possible to create styles that are specific to a particular fragment of the document. this is done using the same identifying value that is found in the uri. thus, to add a border to the #example fragment, we would write: #example:target { border: 1px solid black; } targeting all elements if t...

Using CSS transitions - CSS: Cascading Style Sheets
tion had been running at the time the event fired. this value isn't affected by the value of transition-delay. as usual, you can use the addeventlistener() method to monitor for this event: el.addeventlistener("transitionend", updatetransition, true); you detect the beginning of a transition using transitionrun (fires before any delay) and transitionstart (fires after any delay), in the same kind of fashion: el.addeventlistener("transitionrun", signalstart, true); el.addeventlistener("transitionstart", signalstart, true); note: the transitionend event doesn't fire if the transition is aborted before the transition is completed because either the element is made display: none or the animating property's value is changed. specifications specification status comment ...

CSS data types - CSS: Cascading Style Sheets
in formal syntax, data types are denoted by a keyword placed between the inequality signs "<" and ">". ...

Using Media Queries for Accessibility - CSS: Cascading Style Sheets
media queries can also be used to help users with disabilities understand your website better. reduced motion blinking and flashing animation can be problematic for people with cognitive concerns such as attention deficit hyperactivity disorder (adhd). additionally, certain kinds of motion can be a trigger for vestibular disorders, epilepsy, and migraine and scotopic sensitivity. also, this method of switching animation off according to the user's preference can also benefit users with low battery or low-end phones or computers. syntax no-preference indicates that the user has made no preference known to the system. reduce indicates that user has notified the system that they prefer an interface that minimizes the amount of movement or animation, preferably to the point where...

Scaling of SVG backgrounds - CSS: Cascading Style Sheets
s. if none of the above cases are met, the image is rendered at the same size as the background area. it's worth noting that the sizing algorithm only cares about the image's dimensions and proportions, or lack thereof. an svg image with fixed dimensions will be treated just like a raster image of the same size. source image examples before diving in to look at the results of using different kinds of source images and seeing how they look when used with background-size, it would be helpful to look at a few example source images that have different dimensions and sizing settings. in each case, we show what the source image looks like rendered in a 150x150 box, and provide a link to the svg source. dimensionless and proportionless this image is both dimensionless and proportionless. it d...

CSS Tutorials - CSS: Cascading Style Sheets
sing multiple backgrounds backgrounds are fundamental for nice styling: css allows you to set several of them on each box. this tutorial explains how they interact and how to achieve nice effects. scaling background images css allows you to resize images used as an element's background. this tutorial describes how to achieve this in a simple way. media queries the size of the screens, or the kind of devices like touchscreens or printed sheets vary greatly nowadays. media queries are the fundamental building blocks in achieving web sites that render everywhere in their best quality. understanding z-index controlling superposition of boxes is a basic feature that is very quickly needed by web developers. though not that difficult, it requires a basic knowledge of css. intermediate-level...

animation - CSS: Cascading Style Sheets
lue must be one of those available in animation-fill-mode. <single-animation-play-state> determines whether the animation is playing or not. the value must be one of those available in animation-play-state. accessibility concerns blinking and flashing animation can be problematic for people with cognitive concerns such as attention deficit hyperactivity disorder (adhd). additionally, certain kinds of motion can be a trigger for vestibular disorders, epilepsy, and migraine and scotopic sensitivity. consider providing a mechanism for pausing or disabling animation, as well as using the reduced motion media query to create a complimentary experience for users who have expressed a preference for no animated experiences. designing safer web animation for motion sensitivity · an a list apa...

break-after - CSS: Cascading Style Sheets
mn; } article { column-width: 200px; gap: 20px; } result specifications specification status comment css fragmentation module level 3the definition of 'break-after' in that specification. candidate recommendation adds the recto and verso keywords. changes the media type of this property from paged to visual. defines the breaking algorithm with different kinds of breaks. css regions module level 1the definition of 'break-after' in that specification. working draft extends the property to handle region breaks. adds the avoid-region and region keywords. css multi-column layout modulethe definition of 'break-after' in that specification. working draft initial definition. extends the css 2.1 page-break-after property to handl...

break-before - CSS: Cascading Style Sheets
5; } article { column-width: 200px; gap: 20px; } result specifications specification status comment css fragmentation module level 3the definition of 'break-before' in that specification. candidate recommendation adds the recto and verso keywords. changes the media type of this property from paged to visual. defines the breaking algorithm with different kinds of breaks. css regions module level 1the definition of 'break-before' in that specification. working draft extends the property to handle region breaks. adds the avoid-region and region keywords. css multi-column layout modulethe definition of 'break-before' in that specification. working draft initial definition. extends the css 2.1 page-break-before property to ha...

conic-gradient() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. ...

font-variant-caps - CSS: Cascading Style Sheets
(such as punctuation marks) to better match the capitalized characters around them. however, small capital glyphs are never synthesized for caseless characters. language-specific rules this property accounts for language-specific case mapping rules. for example: in turkic languages, such as turkish (tr), azerbaijani (az), crimean tatar (crh), volga tatar (tt), and bashkir (ba), there are two kinds of i (one with the dot, one without) and two case pairings: i/İ and ı/i. in german (de), the ß may become ẞ (u+1e9e) in uppercase. in greek (el), vowels lose their accent when the whole word is in uppercase (ά/Α), except for the disjunctive eta (ή/Ή). also, diphthongs with an accent on the first vowel lose the accent and gain a diacritic on the second vowel (άι/ΑΪ). syntax /* k...

font-variant-ligatures - CSS: Cascading Style Sheets
l values */ font-variant-ligatures: inherit; font-variant-ligatures: initial; font-variant-ligatures: unset; the font-variant-ligatures property is specified as one of the keyword values listed below. values normal this keyword leads to the activation of the usual ligatures and contextual forms needed for correct rendering. the ligatures and forms activated depend on the font, language and kind of script. this is the default value. none this keyword specifies that all ligatures and contextual forms are disabled, even common ones. <common-lig-values> these values control the most common ligatures, like for fi, ffi, th or similar. they correspond to the opentype values liga and clig. two values are possible: common-ligatures activating these ligatures. note that the keyword normal...

linear-gradient() - 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. ...

radial-gradient() - 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. ...

repeating-conic-gradient() - CSS: Cascading Style Sheets
transition. if omitted, the midpoint of the color transition is the midpoint between two color stops. note: rendering of color stops in css gradients follows the same rules as color stops in svg gradients. description example repeating conic gradients include starbursts. the result of the repeating-conic-gradient() function is an object of the <gradient> data type, which is a special kind of <image>. if neither the first nor the last color stops include include a a color stop angle greater than 0deg or less than 360 degrees respectively, the conic-gradient will not repeat. as with any gradient, a repeating-conic gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. its concrete size will match the size of the element it applies t...

repeating-linear-gradient() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. ...

repeating-radial-gradient() - CSS: Cascading Style Sheets
ng-radial-gradient() css function creates an image consisting of repeating gradients that radiate from an origin. it is similar to radial-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container, similar to repeating-linear-gradient() . the function's result is an object of the <gradient> data type, which is a special kind of <image>. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. with each repetition, the positions of the color stops are shifted by a multiple of the dimensions of the basic radial gradient (the distance between the last ...

text-decoration-line - 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. when setting multiple line-decoration properties at once, it may be more convenient to use the text-decoration shorthand property instead. ...

text-decoration - CSS: Cascading Style Sheets
e emphasized words". constituent properties this property is a shorthand for the following css properties: text-decoration-color text-decoration-line text-decoration-style text-decoration-thickness syntax the text-decoration property is specified as one or more space-separated values representing the various longhand text-decoration properties. values text-decoration-line sets the kind of decoration used, such as underline or line-through. text-decoration-color sets the color of the decoration. text-decoration-style sets the style of the line used for the decoration, such as solid, wavy, or dashed. text-decoration-thickness sets the thickness of the line used for the decoration. formal definition initial valueas each of the properties of the shorthand:text-decoration-c...

text-transform - CSS: Cascading Style Sheets
itory. 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 text-transform property takes into account language-specific case mapping rules such as the following: in turkic languages, like turkish (tr), azerbaijani (az), crimean tatar (crh), volga tatar (tt), and bashkir (ba), there are two kinds of i, with and without the dot, and two case pairings: i/İ and ı/i. in german (de), the ß becomes ss in uppercase. in dutch (nl), the ij digraph becomes ij, even with text-transform: capitalize, which only puts the first letter of a word in uppercase. in greek (el), vowels lose their accent when the whole word is in uppercase (ά/Α), except for the disjunctive eta (ή/Ή). ...

transition-timing-function - CSS: Cascading Style Sheets
what actions are expected, to show relationships within the user interface, and to inform users as to what actions have occurred. animations can help reduce cognitive load, prevent change blindness, and establish better recall in spatial relationships. however, some animations can be problematic for people with cognitive concerns such as attention deficit hyperactivity disorder (adhd) and certain kinds of motion can be a trigger for vestibular disorders, epilepsy, and migraine and scotopic sensitivity. consider providing a mechanism for pausing or disabling animation, as well as using the reduced motion media query to create a complimentary experience for users who have expressed a preference for no animated experiences. formal definition initial valueeaseapplies toall elements, ::before an...

will-change - CSS: Cascading Style Sheets
important: will-change is intended to be used as a last resort, in order to try to deal with existing performance problems. it should not be used to anticipate performance problems. ...

Getting Started - Developer guides
2.10 time: 312.12 time: 312.14 time: 312.15 once the text file is loaded, we split() the items into an array at each newline character (\n — basically where each line break is in the text file), and then print the complete list of timestamps, and the last timestamp, onto the page. this is repeated every 5 seconds, using a setinterval() call. the idea would be that a server-side script of some kind would continually update the text file with new timestamps, and our xhr code would be used to report the latest timestamp on the client-side. <!doctype html> <html> <head> <meta charset="utf-8"> <title>xhr log time</title> <style> </style> </head> <body> <p id="writedata" class="data">off-line</p> <p id="laststamp">no data yet</p> <script> const fulldata ...

Ajax - Developer guides
text. the response property will contain the entity body according to responsetype, as an arraybuffer, blob, document, json, or string. this article will show some ajax i/o techniques. xml the extensible markup language (xml) is a w3c-recommended general-purpose markup language for creating special-purpose markup languages. it is a simplified subset of sgml, capable of describing many different kinds of data. its primary purpose is to facilitate the sharing of data across different systems, particularly systems connected via the internet. parsing and serializing xml how to parse an xml document from a string, a file or via javascript and how to serialize xml documents to strings, javascript object trees (jxon) or files. xpath xpath stands for xml path language, it uses a non-xml syntax t...

Adding captions and subtitles to HTML5 video - Developer guides
ally have our subtitles in three different languages — english, german, and spanish — so we will reference all three of the relevant vtt files by adding <track> elements inside our html5 <video> element: <video id="video" controls preload="metadata"> <source src="video/sintel-short.mp4" type="video/mp4"> <source src="video/sintel-short.webm" type="video/webm"> <track label="english" kind="subtitles" srclang="en" src="captions/vtt/sintel-en.vtt" default> <track label="deutsch" kind="subtitles" srclang="de" src="captions/vtt/sintel-de.vtt"> <track label="español" kind="subtitles" srclang="es" src="captions/vtt/sintel-es.vtt"> </video> as you can see, each <track> element has the following attributes set: kind is given a value of subtitles, indicating the type of content ...

Audio and Video Delivery - Developer guides
ers. for further info see cross browser audio basics (html5 audio in detail) html video <video controls width="640" height="480" poster="initialimage.png" autoplay muted> <source src="videofile.mp4" type="video/mp4"> <!-- fallback for browsers that don't support mp4 --> <source src="videofile.webm" type="video/webm"> <!-- specifying subtitle files --> <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="english"> <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="norwegian"> <!-- fallback for browsers that don't support video tag --> <a href="videofile.mp4">download video</a> </video> the code above creates a video player of dimensions 640x480 pixels, displaying a poster image until the video is played. we instruct the video to autoplay but...

Audio and video manipulation - Developer guides
signify the environment in which the impulse was created (for example, an echo created by clapping your hands in a tunnel). example var convolver = context.createconvolver(); convolver.buffer = this.impulseresponsebuffer; // connect the graph. source.connect(convolver); convolver.connect(context.destination); see this codepen for an applied (but very, very silly; like, little kids will giggle kind of silly) example. spatial audio we can also position audio using a panner node. a panner node—pannernode—lets us define a source cone as well as positional and directional elements, all in 3d space as defined using 3d cartesian coordinates. example var panner = context.createpanner(); panner.coneoutergain = 0.2; panner.coneouterangle = 120; panner.coneinnerangle = 0; panner.connect(cont...

DOM onevent handlers - Developer guides
r. note that the event parameter actually contains the error message as a string. when the event handler is invoked, the this keyword inside the handler is set to the dom element on which the handler is registered. for more details, see the this keyword documentation. the return value from the handler determines if the event is canceled. the specific handling of the return value depends on the kind of event; for details, see "the event handler processing algorithm" in the html specification. when the event handler is invoked tbd (non-capturing listener) terminology the term event handler may refer to: any function or object that is registered to be notified of events or more specifically, to the mechanism of registering event listeners via on… attributes in html or properties in...

Event developer guide - Developer guides
attern and a summary of the types of incidents which are defined and reacted to by modern web browsers. the custom events page describes how the event code design pattern can be used in custom code to define new event types emitted by user objects, register listener functions to handle those events, and trigger the events in user code. the remaining pages describe how to use events of different kinds defined by web browsers. unfortunately, these events have been defined piece by piece as web browsers have evolved so that there is no satisfying systematic characterization of the events built-in or defined by modern web browsers. the device on which the web browser is running can trigger events, for example due to a change in its position and orientation in the real world, as discussed partia...

HTML attribute reference - HTML: Hypertext Markup Language
the element or its contents. the attribute can be used with form controls (such as the value of textarea elements), or in elements in an editing host (e.g., using contenteditable attribute). ismap <img> indicates that the image is part of a server-side image map. itemprop global attribute keytype <keygen> specifies the type of key generated. kind <track> specifies the kind of text track. label <optgroup>, <option>, <track> specifies a user-readable title of the element. lang global attribute defines the language used in the element. language <script> defines the script language used in the element. loading <img>, <iframe> indicates if the element should be loaded lazily (...

<area> - HTML: Hypertext Markup Language
ole link when href attribute is present, otherwise no corresponding role permitted aria roles no role permitted dom interface htmlareaelement attributes this element's attributes include the global attributes. alt a text string alternative to display on browsers that do not display images. the text should be phrased so that it presents the user with the same kind of choice as the image would offer when displayed without the alternative text. this attribute is required only if the href attribute is used. coords a set of values specifying the coordinates of the hot-spot region. the number and meaning of the values depend upon the value specified for the shape attribute. rect or rectangle: the value is two x,y pairs: left, top, right, bottom. ci...

<aside>: The Aside element - HTML: Hypertext Markup Language
ntent. note that an <aside> element must not be a descendant of an <address> element. implicit aria role complementary permitted aria roles feed, none, note, presentation, region, search dom interface htmlelement attributes this element only includes the global attributes. usage notes do not use the <aside> element to tag parenthesized text, as this kind of text is considered part of the main flow. examples using <aside> this example uses <aside> to mark up a paragraph in an article. the paragraph is only indirectly related to the main article content: <article> <p> the disney movie <cite>the little mermaid</cite> was first released to theatres in 1989. </p> <aside> <p> the movie earned $87 million during its initial ...

<command>: The HTML Command element - HTML: Hypertext Markup Language
icates that the command is not available. icon gives a picture which represents the command. label the name of the command as shown to the user. radiogroup this attribute gives the name of the group of commands, with a type of radio, that will be toggled when the command itself is toggled. this attribute must be omitted unless the type attribute is radio. type this attribute indicates the kind of command. this can be one of three values. command or empty which is the default state and indicates that this is a normal command. checkbox indicates that the command can be toggled using a checkbox. radio indicates that the command can be toggled using a radio button. examples <command type="command" label="save" icon="icons/save.png" onclick="save()"> ...

<div>: The Content Division element - HTML: Hypertext Markup Language
s the global attributes. note: the align attribute is obsolete; do not use it anymore. instead, you should use css properties or techniques such as css grid or css flexbox to align and position <div> elements on the page. usage notes the <div> element should be used only when no other semantic element (such as <article> or <nav>) is appropriate. examples a simple example <div> <p>any kind of content here. such as &lt;p&gt;, &lt;table&gt;. you name it!</p> </div> the result looks like this: a styled example this example creates a shadowed box by applying a style to the <div> using css. note the use of the class attribute on the <div> to apply the style named "shadowbox" to the element. html <div class="shadowbox"> <p>here's a very interesting note displayed in a lovel...

<input type="color"> - HTML: Hypertext Markup Language
though css colors has more formats, e.g. color names, functional notations and a hexadecimal format with an alpha channel. the element's presentation may vary substantially from one browser and/or platform to another—it might be a simple textual input that automatically validates to ensure that the color information is entered in the proper format, or a platform-standard color picker, or some kind of custom color picker window. 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. value a 7-character domstring specifying a <color> in lower-case hexadecimal notation events change and input ...