Bundling multiple binary components
s created. if the component uses only "frozen" xpcom interfaces, there is a good chance the same binary component will work with different versions of gecko (version 1.8 and 1.9, for example). the more likely case is that the component uses "unfrozen" interfaces and those interfaces can change between gecko versions. this can create a difficult situation for extension developers trying to support multiple gecko versions (firefox 2 and 3, for example). possible solutions this article covers two possible ways to make binary components support multiple version of gecko: dynamic method loading stub loader dynamic method loading the idea with this approach is to figure out all the methods imported from gecko and dynamically load the methods. create small wrappers for calling the methods, as yo...

Reason: Multiple CORS header 'Access-Control-Allow-Origin' not allowed - HTTP
this isn't allowed. if you have access to the server you can change your implementation to echo back an origin in the access-control-allow-origin header. ...

Index - Web APIs
r the web, there are a large number of web apis available. below is a list of all the apis and interfaces (object types) that you may be able to use while developing your web app or site. ...
...cts multiple times, if they share the same vertex data, primitive count and type. 3 angle_instanced_arrays.drawarraysinstancedangle() angle_instanced_arrays, api, method, reference, webgl, webgl extension the angle_instanced_arrays.drawarraysinstancedangle() method of the webgl api renders primitives from array data like the gl.drawarrays() method. in addition, it can execute multiple instances of the range of elements. 4 angle_instanced_arrays.drawelementsinstancedangle() angle_instanced_arrays, api, method, reference, webgl, webgl extension the angle_instanced_arrays.drawelementsinstancedangle() method of the webgl api renders primitives from array data like the gl.drawelements() method. ...
...d. in addition, it can execute multiple instances of the range of elements. 4 angle_instanced_arrays.drawelementsinstancedangle() angle_instanced_arrays, api, method, reference, webgl, webgl extension the angle_instanced_arrays.drawelementsinstancedangle() method of the webgl api renders primitives from array data like the gl.drawelements() method. in addition, it can execute multiple instances of a set of elements. ...
...And 29 more matches

Index - Archive of obsolete content
firefox 3.6, this is no longer permitted. components added in this way are invisible to users and cannot be managed through the firefox add-ons manager. what's worse, though, is that these components don't have a mechanism for specifying the versions of firefox with which they are compatible, leading to poor integration and instability as users upgrade their firefox installations. ...
...ers and cannot be managed through the firefox add-ons manager. what's worse, though, is that these components don't have a mechanism for specifying the versions of firefox with which they are compatible, leading to poor integration and instability as users upgrade their firefox installations. 254 multiple item extension packaging add-ons, obsolete, toolkit api, install. rdf a multiple item package provides the ability to package multiple installable bundles which can then be downloaded and installed by a user, or provided pre-packaged with an application or by an external program. every multiple item package must provide an install.rdf file (not old-style install.js!) and has the same requirements as an extension except as noted below. 255 offering a context menu fo...
... api, add-ons, bookmarks, extensions, method, non-standard, reference, webextensions, import imports bookmarks from an html bookmark file. 312 adding preferences to an extension add-ons, extensions, preferences system, xul this article takes the creating a dynamic status bar extension sample to the next level, adding a popup menu that lets you quickly switch between multiple stocks to watch. it also adds a preference dialog that lets you switch to a stock other than one of the ones included in the popup menu. 313 an interview with douglas bowman of wired news web development, web standards one of the web's oldest news sites, wired news draws between 20 and 25 million page views every month. on october 11, 2002, wired launched a brand-new site des...
...And 24 more matches

Index
are developed by the mozilla.org projects traditionally used its own implementation of security protocols and cryptographic algorithms, originally called netscape security services, nowadays called network security services (nss). nss is a library written in the c programming language. it's free and open source software, and many other software projects have decided to use it. in order to support multiple operating systems (os), it is based on a cross platform portability layer, called the netscape portable runtime (nspr), which provides cross platform application programming interfaces (apis) for os specific apis like file system access, memory management, network communication, and multithreaded programming. nss offers lots of functionality; we'll walk through the list of modules, design prin...
...orm cryptographic operations, nss conforms to a standard called pkcs#11. (note that it's important to look at the number 11, as there are other pkcs standards with different numbers that define quite different topics.) a software or hardware module conforming to the pkcs#11 standard implements an interface of c calls, which allow querying the characteristics and offered services of the module. multiple elements of nss's own modules have been implemented with this interface, and nss makes use of this interface when talking to those modules. this strategy allows nss to work with many hardware devices (e.g., to speed up the calculations required for cryptographic operations, or to access smartcards that securely protect a secret key) and software modules (e.g., to allow to load such modules as a p...
...he init function, and nss is designed to do the rest. it will detect and open an existing database, or it can create a new one. alternatively, should you decide that you don't want to work with any persistent recording of certificates, you may initialize nss in a no-database mode. usually, nss will flush all data to disk as soon as new data has been added to permanent storage. storage consists of multiple files: a key database file, which contains your secret keys, and a certificate database file which contains the public portion of your own certificates, the certificates of peers or cas, and a list of trust decisions (such as to not trust a built-in ca, or to explicitly trust other cas). examples for the database files are key3.db and cert8.db, where the numbers are file version numbers. a third ...
...And 23 more matches

<input type="email"> - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the input value is automatically validated to ensure that it's either empty or a properly-formatted e-mail address (or list of addresses) before the form can be submitted. ...
...priate to visually denote whether the current value of the field is a valid e-mail address or not. on browsers that don't support inputs of type email, a email input falls back to being a standard text input. value a domstring representing an e-mail address, or empty events change and input supported common attributes autocomplete, list, maxlength, minlength, multiple, name,pattern, placeholder, readonly, required, size, and type idl attributes list and value methods select() value the <input> element's value attribute contains a domstring which is automatically validated as conforming to e-mail syntax. more specifically, there are three possible value formats that will pass validation: an empty string ("") indicating that th...
... value or that the value was removed. a single properly-formed e-mail address. this doesn't necessarily mean the e-mail address exists, but it is at least formatted correctly. in simple terms, this means username@domain or username@domain.tld. there's more to it than that, of course; see validation for a regular expression that matches the e-mail address validation algorithm. if and only if the multiple attribute is specified, the value can be a list of properly-formed comma-separated e-mail addresses. any trailing and leading whitespace is removed from each address in the list. see validation for details on how e-mail addresses are validated to ensure that they're formatted properly. additional attributes in addition to the attributes that operate on all <input> elements regardless of their...
...And 12 more matches

Index
found 1275 pages: # page tags and summary 1 xpcom add-ons, extensions, landing, mozilla, xpcom xpcom is a cross platform component object model, similar to microsoft com. it has multiple language bindings, allowing xpcom components to be used and implemented in javascript, java, and python in addition to c++. 2 accessing the windows registry using xpcom add-ons, code snippets, extensions, needsclassification, windows registry when implementing windows-specific functionality, it is often useful to access the windows registry for information about the environment or other installed programs. to this end, there exist xpcom interfaces to read and write registry data. this article will show you how to use the available interfaces in seve...
...ng the in-memory datasource rdf no summary! 4 binary compatibility xpcom if mozilla decides to upgrade to a compiler that does not have the same abi as the current version, any built component may fail. it is a possiblity that is introduced when upgrading to a new compiler without recompiling everything. effectively, it is a different platform. 5 bundling multiple binary components binary xpcom components are sometimes required to implement low-level features for extensions. since binary components are linked against a single gecko sdk, a dependency to a particular version of gecko is created. if the component uses only "frozen" xpcom interfaces, there is a good chance the same binary component will work with different versions of gecko (version...
...s created. if the component uses only "frozen" xpcom interfaces, there is a good chance the same binary component will work with different versions of gecko (version 1.8 and 1.9, for example). the more likely case is that the component uses "unfrozen" interfaces and those interfaces can change between gecko versions. this can create a difficult situation for extension developers trying to support multiple gecko versions (firefox 2 and 3, for example). 6 creating a python xpcom component guide, needshelp, pyxpcom, xpcom, xpcom:language bindings creating applications with mozilla already provides a tutorial for making a simple javascript or c++ component (implementing the nsisimple interface). here is how to make the same component in python using pyxpcom. 7 fun with ...
...And 11 more matches

Index - Archive of obsolete content
width xul attributes, xul reference no summary! 198 mode no summary! 199 modifiers xul attributes, xul reference no summary! 200 mousethrough xul attributes, xul reference no summary! 201 movetoclick no summary! 202 multiline xul attributes, xul reference no summary! 203 multiple xul attributes, xul reference no summary! 204 name xul attributes, xul reference no summary! 205 negate xul attributes, xul reference no summary! 206 newlines xul attributes, xul reference no summary! 207 next xul attributes, xul reference no summary! 208 noautofocus xul attributes, xul re...
...ace. to use this technique, place a template attribute on the root element set to the id of a template. 922 attribute substitution xul, xul_template_guide the effect will be that the ?name part of the attribute will be replaced by the value of the variable ?name. for instance, if the value of ?name is 'jake', then the attribute value will be 'my name is jake'. you can include multiple variables in one attribute if desired: 923 bindings xul, xul_template_guide we can add more triples to the previous example to show more information. for example, a description could be added to a photo. to do this all we need to do is add the necessary data to the rdf datasource and add another <triple> element to the template's statements.</triple> 924 building h...
...element. it is expected that there will be a template inside the element. the template builder loads the datasource, performs a query on the datasource and generates content based on the results in combination with the template. the type of datasource is specified with the querytype attribute. the type affects how the datasource is used as well as the syntax for specifying queries. 930 multiple queries xul, xul_template_guide no summary! 931 multiple rule example xul, xul_template_guide no summary! 932 multiple rules xul, xul_template_guide no summary! 933 namespaces xml namespaces can be used in xul templates by binding the namespace uri and prefix to the template element. for example using the following xml doc...
...And 9 more matches

Index - MDN Web Docs Glossary: Definitions of Web-related terms
control protocol) and subsequently the first version of the internet protocol or tcp/ip suite, making arpanet a prominent part of the nascent internet. arpanet was closed in early 1990. 23 array array, codingscripting, glossary, javascript, programming an array is an ordered collection of data (either primitive or object depending upon the language). arrays are used to store multiple values in a single variable. this is compared to a variable that can store only one value. 24 asynchronous glossary, web, webmechanics, asynchronous the term asynchronous refers to or multiple related things happening without waiting for the previous one to complete). 25 attribute codingscripting, glossary, html an attribute extends an element, changing i...
...appening without waiting for the previous one to complete). 25 attribute codingscripting, glossary, html an attribute extends an element, changing its behavior or providing metadata. 26 bandwidth glossary, infrastructure bandwidth is the measure of how much information can pass through a data connection in a given amount of time. it is usually measured in multiples of bits-per-second (bps), for example megabits-per-second (mbps) or gigabits-per-second (gbps). 27 base64 advanced, base64, javascript, typed arrays, uri, url, unicode problem, atob(), btoa() base64 is a group of similar binary-to-text encoding schemes that represent binary data in an ascii string format by translating it into a radix-64 representation. the term base64 origi...
...ossary, infrastructure caldav (calendaring extensions to webdav) is a protocol standardized by the ietf and used to remotely access calendar data from a server. 62 call stack call stack, codingscripting, glossary, javascript a call stack is a mechanism for an interpreter (like the javascript interpreter in a web browser) to keep track 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 cano...
...And 9 more matches

Choosing the right approach - Learn web development
nd in old-style apis, involves a function being passed into another function as a parameter, which is then invoked when an asynchronous operation has been completed, so that the callback can in turn do something with the result. this is the precursor to promises; it's not as efficient or flexible. use only when necessary. useful for... ...
...unction being passed into another function as a parameter, which is then invoked when an asynchronous operation has been completed, so that the callback can in turn do something with the result. this is the precursor to promises; it's not as efficient or flexible. use only when necessary. useful for... ...
...e particular api. refer to the reference documentation for the api you're using for more specific support info. further information introducing asynchronous javascript, in particular async callbacks settimeout() settimeout() is a method that allows you to run a function after an arbitrary amount of time has passed. useful for... single delayed operation repeating operation multiple sequential operations multiple simultaneous operations yes yes (recursive timeouts) yes (nested timeouts) no code example here the browser will wait two seconds before executing the anonymous function, then will display the alert message (see it running live, and see the source code): let mygreeting = settimeout(function() { alert('hello, mr. universe!'); }, 2000) ...
...And 9 more matches

An overview of NSS Internals
are developed by the mozilla.org projects traditionally used its own implementation of security protocols and cryptographic algorithms, originally called netscape security services, nowadays called network security services (nss). nss is a library written in the c programming language. it's free and open source software, and many other software projects have decided to use it. in order to support multiple operating systems (os), it is based on a cross platform portability layer, called the netscape portable runtime (nspr), which provides cross platform application programming interfaces (apis) for os specific apis like file system access, memory management, network communication, and multithreaded programming. nss offers lots of functionality; we'll walk through the list of modules, design prin...
...orm cryptographic operations, nss conforms to a standard called pkcs#11. (note that it's important to look at the number 11, as there are other pkcs standards with different numbers that define quite different topics.) a software or hardware module conforming to the pkcs#11 standard implements an interface of c calls, which allow querying the characteristics and offered services of the module. multiple elements of nss's own modules have been implemented with this interface, and nss makes use of this interface when talking to those modules. this strategy allows nss to work with many hardware devices (e.g., to speed up the calculations required for cryptographic operations, or to access smartcards that securely protect a secret key) and software modules (e.g., to allow to load such modules as a p...
...he init function, and nss is designed to do the rest. it will detect and open an existing database, or it can create a new one. alternatively, should you decide that you don't want to work with any persistent recording of certificates, you may initialize nss in a no-database mode. usually, nss will flush all data to disk as soon as new data has been added to permanent storage. storage consists of multiple files: a key database file, which contains your secret keys, and a certificate database file which contains the public portion of your own certificates, the certificates of peers or cas, and a list of trust decisions (such as to not trust a built-in ca, or to explicitly trust other cas). examples for the database files are key3.db and cert8.db, where the numbers are file version numbers. a third ...
...And 9 more matches

<select>: The HTML Select element - HTML: Hypertext Markup Language
ave a value attribute containing the data value to submit to the server when that option is selected. if no value attribute is included, the value defaults to the text contained inside the element. you can include a selected attribute on an <option> element to make it selected by default when the page first loads. the <select> element has some unique attributes you can use to control it, such as multiple to specify whether multiple options can be selected, and size to specify how many options should be shown at once. it also accepts most of the general form input attributes such as required, disabled, autofocus, etc. you can further nest <option> elements inside <optgroup> elements to create separate groups of options inside the dropdown. for further examples, see the native form widgets: drop-...
...lement to associate the <select> with (its form owner). the value of this attribute must be the id of a <form> in the same document. (if this attribute is not set, the <select> is associated with its ancestor <form> element, if any.) this attribute lets you associate <select> elements to <form>s anywhere in the document, not just inside a <form>. it can also override an ancestor <form> element. multiple this boolean attribute indicates that multiple options can be selected in the list. if it is not specified, then only one option can be selected at a time. when multiple is specified, most browsers will show a scrolling list box instead of a single line dropdown. name this attribute is used to specify the name of the control. required a boolean attribute indicating that an option with a non-...
...browsers are not required to present a select element as a scrolled list box. the default value is 0. ...
...And 9 more matches

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
lex="1" align="end" pack="end"> <button label="happy"/> <button label="sad"/> </box> listing 2: how align and pack respond to orient figure 2: output from listing 2 flex elements ordinarily have fixed height and width. the flex attribute indicates that an element should be expanded to take up all of a window's height or width. flex takes a positive integer as a value, which is a growth multiple on the axis of the parent element's orient attribute. for example, flex="1" indicates that the element should extend to fill that axis; if there are two elements with flex="1" in a row, they are adjusted to be of equal size. you can assign flex="2" (or higher values) as a size multiplier for elements. in listing 4, the second label will be displayed twice as big as the first (figure 3). <hbox> ...
...box, elements will ordinarily be laid out following their order of appearance in the source code (laid out left to right or top to bottom). use the ordinal attribute to alter their order. the ordinal attribute takes positive integer values, which are used to order the box’s layout—in the example in listing 5, the buttons would be laid out in the order button3, button2, button1 (figure 4). if multiple elements have the same ordinal value, they will be laid out in the same relative order they appear in the source code. the default value for ordinal is 1. <vbox> <button label="button1" ordinal="3"/> <button label="button2" ordinal="2"/> <button label="button3" ordinal="1"/> </vbox> listing 5: changing order with ordinal figure 4: output of listing 5 box size you can set the size of...
...upopup> </menu> </menupopup> </menu> </menubar> listing 9: a menu definition figure 6: output from listing 9 each item in a menu is marked up with the menuitem tag. use the menuseparator element to insert a separator bar that groups items together. both menu and menuitem elements take the label attribute to set their labels. insert menu elements into a menubar element to create multiple menus. you can easily create hierarchical menus by inserting menupopup and menu elements. you can even display icons in menus by adding class="menuitem-iconic" to a menuitem element, along with a src attribute that gives an image uri. figure 7 shows an example of how this is displayed. figure 7: menu items with icons executing commands when selecting menu items much like dynamic html, event...
...And 7 more matches

Using media queries - CSS: Cascading Style Sheets
with the media= attribute. to test and monitor media states using the window.matchmedia() and mediaquerylist.addlistener() javascript methods. note: the examples on this page use css's @media for illustrative purposes, but the basic syntax remains the same for all types of media queries. syntax a media query is composed of an optional media type and any number of media feature expressions. multiple queries can be combined in various ways by using logical operators. media queries are case-insensitive. a media query computes to true when the media type (if specified) matches the device on which a document is being displayed and all media feature expressions compute as true. queries involving unknown media types are always false. note: a style sheet with a media query attached to its <link>...
...ng (i.e. javascript) is available added in media queries level 5. update how frequently the output device can modify the appearance of content added in media queries level 4. width width of the viewport including width of scrollbar logical operators the logical operators not, and, and only can be used to compose a complex media query. you can also combine multiple media queries into a single rule by separating them with commas. and the and operator is used for combining multiple media features together into a single media query, requiring each chained feature to return true in order for the query to be true. it is also used for joining media features with media types. not the not operator is used to negate a media query, returning true if the query wou...
...only if an entire query matches, and is useful for preventing older browsers from applying selected styles. when not using only, older browsers would interpret the query screen and (max-width: 500px) simply as screen, ignoring the remainder of the query, and applying its styles on all screens. if you use the only operator, you must also specify a media type. , (comma) commas are used to combine multiple media queries into a single rule. each query in a comma-separated list is treated separately from the others. thus, if any of the queries in a list is true, the entire media statement returns true. in other words, lists behave like a logical or operator. targeting media types media types describe the general category of a given device. although websites are commonly designed with screens in min...
...And 6 more matches

<input type="file"> - HTML: Hypertext Markup Language
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 domstring representing the path to the selected file. ...
...javascript can access the other files through the input's files property. ...
...javascript can access the other files through the input's files property. ...
...And 6 more matches

Install Manifests - Archive of obsolete content
ble with firefox 3.5 should specify a maxversion of 3.5.*, so that they are automatically compatible with security and stability updates. for firefox 3.0, a maxversion of 3.0.* should be used. extensions compatible only with firefox or thunderbird 2 should specify a maxversion of 2.0.0.*. the install manifest must specify at least one of these objects, and may specify more if the add-on targets multiple applications that support the add-on manager (e.g. firefox and thunderbird). examples <em:targetapplication> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <!--firefox--> <em:minversion>1.5</em:minversion> <em:maxversion>3.0.*</em:maxversion> </description> </em:targetapplication> gecko 1.9 based applications allow you to use the special targetapplication i...
...</description> </em:targetapplication> gecko 1.9 based applications allow you to use the special targetapplication id toolkit@mozilla.org to say that the add-on is compatible with any toolkit app with a toolkit version matching the minversion and maxversion. type an integer value representing the type of add-on. 2 extensions 4 themes 8 locale 32 multiple item package 64 spell check dictionary 128 telemetry experiment 256 webextension experiment examples <em:type>2</em:type> this property was added for firefox 1.5, and is only required for add-on types other than extensions and themes. firefox 2 and previous supported a value of 16 to represent plug-ins. in firefox 3 this has been removed. version a ...
...bouturl>chrome://myext/content/about.xul</em:abouturl> bootstrap a boolean value that tells the application whether the extension is boot-strappable. at the moment this only works for add-ons with em:type="2". the default value is false. for more information, see bootstrapped extensions. contributor the name(s) of additional contributors. you may specify more than one of this value to specify multiple contributors. examples <em:contributor>john doe</em:contributor> <em:contributor>john doe</em:contributor> <em:contributor>jane doe</em:contributor> <em:contributor>elvis presley</em:contributor> creator the name of the creator/principal developer - intended for display in the user interface. examples <em:creator>john doe</em:creator> or <em:creator>coolextension team</em:creator> descr...
...And 5 more matches

Advanced styling effects - Learn web development
e second length value is the vertical offset — the distance downwards that the shadow is offset from the original box (or upwards, if the value is negative). the third length value is the blur radius — the amount of blurring applied to the shadow. the color value is the base color of the shadow. you can use any length and color units that would make sense to do so to define these values. ...
...t — the distance downwards that the shadow is offset from the original box (or upwards, if the value is negative). the third length value is the blur radius — the amount of blurring applied to the shadow. the color value is the base color of the shadow. you can use any length and color units that would make sense to do so to define these values. ...
...egative). the third length value is the blur radius — the amount of blurring applied to the shadow. the color value is the base color of the shadow. you can use any length and color units that would make sense to do so to define these values. ...
...And 4 more matches

Index - Learn web development
in this article we'll explore fundamental concepts behind functions such as basic syntax, how to invoke and define them, scope, and parameters. 93 image gallery assessment, beginner, codingscripting, conditionals, event handler, javascript, learn, loops, events, l10n:priority now that we've looked at the fundamental building blocks of javascript, we'll test your knowle...
...uss some important concepts surrounding events, and look at how they work in browsers. this won't be an exhaustive study; just what you need to know at this stage. 95 looping code article, beginner, codingscripting, do, guide, javascript, learn, loop, break, continue, for, l10n:priority, while programming languages are very useful for rapidly completing repetitive tasks, from multiple basic calculations to just about any other situation where you've got a lot of similar items of work to complete. here we'll look at the loop structures available in javascript that handle such needs. 96 making decisions in your code — conditionals article, beginner, codingscripting, conditionals, javascript, learn, switch, conditions, else, if, l10n:priority, ternary in an...
... css, codingscripting, debugging, landing, style, topic, length, specificity cascading stylesheets — or css — is the first technology you should start learning after html. while html is used to define the structure and semantics of your content, css is used to style it and lay it out. for example, you can use css to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. 103 css building blocks beginner, css, learn, building blocks this module carries on where css first steps left off — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, its time to dive a bit deeper. this module looks at the cascade and inheritance, all the se...
...And 4 more matches

Configuring Build Options
s, /mozilla-central/mozconfig or /comm-central/mozconfig). create a blank mozconfig file: echo "# my first mozilla config" > mozconfig if your mozconfig isn't in your source directory, you can also use the mozconfig environment variable to specify the path to your mozconfig. the path you specify must be an absolute path or else client.mk will not find it. this is useful if you choose to have multiple mozconfig files for different applications or configurations (see below for a full example). note that in the export example below the filename was not mozconfig. regardless of the name of the actual file you use, we refer to this file as the mozconfig file in the examples below. setting the mozconfig path: export mozconfig=$home/mozilla/mozconfig-firefox calling the file .mozconfig (with a ...
...dd_options are passed to client.mk. the most important of these is moz_objdir, which controls where your application gets built (also known as the object directory). options prefixed with ac_add_options are passed to configure, and affect the build process. building with an objdir this means that the source code and object files are not intermingled in your directory system and you can build multiple applications (e.g., firefox and thunderbird) from the same source tree. if you do not specify a moz_objdir, it will be automatically set to @topsrcdir@/obj-@config_guess@. if you need to re-run configure, the easiest way to do it is using ./mach configure; running configure manually is strongly discouraged. adding the following line to your mozconfig allows you to change the objdir: mk_add_opt...
...if you need to re-run configure, the easiest way to do it is using ./mach configure; running configure manually is strongly discouraged. adding the following line to your mozconfig allows you to change the objdir: mk_add_options moz_objdir=@topsrcdir@/obj-@config_guess@ it is a good idea to have your objdir name start with obj so that mercurial ignores it. sometimes it can be useful to build multiple versions of the source (such as with and without diagnostic asserts). to avoid the time it takes to do a full rebuild, you can create multiple mozconfig files which specify different objdirs. for example, a mozconfig-dbg: mk_add_options moz_objdir=@topsrcdir@/obj-ff-dbg ac_add_options --enable-debug and a mozconfig-rel-opt: mk_add_options moz_objdir=@topsrcdir@/obj-ff-rel-opt ac_add_options --...
...And 4 more matches

RTCConfiguration - Web APIs
if this value isn't included in the dictionary, "balanced" is assumed. certificates optional an array of objects of type rtccertificate which are used by the connection for authentication. if this property isn't specified, a set of certificates is generated automatically for each rtcpeerconnection instance. although only one certificate is used by a given connection, providing certificates for multiple algorithms may improve the odds of successfully connecting in some circumstances. see using certificates below for additional information. this configuration option cannot be changed after it is first specified; once the certificates have been set, this property is ignored in future calls to rtcpeerconnection.setconfiguration(). icecandidatepoolsize optional an unsigned 16-bit integer value ...
...h as a stun or turn server. peeridentity optional a domstring which specifies the target peer identity for the rtcpeerconnection. if this value is set (it defaults to null), the rtcpeerconnection will not connect to a remote peer unless it can successfully authenticate with the given name. ...
...all browser implementations are bundle-aware. if the remote endpoint is bundle-aware, all media tracks and data channels are bundled onto a single transport at the completion of negotiation, regardless of policy used, and any superfluous transports that were created initially are closed at that point. ...
...And 4 more matches

page-mod - Archive of obsolete content
the "main.js" code. its event handler sends the getelements message to the content script, and then adds a listener to the gotelement message. the content script receives the getelements message, retrieves all elements of that type, and for each element sends a gotelement message containing the element's innerhtml. the "main.js" code receives each gotelement message and logs the contents. if multiple documents that match the page-mod's include pattern are loaded, then each document is loaded into its own execution context with its own copy of the content scripts. in this case the listener assigned to onattach is called once for each loaded document, and the add-on code will have a separate worker for each document. to learn much more about communicating with content scripts, see the guide to...
...de: "*.mozilla.org", contentscript: 'window.alert("matched!");' }); you can specify a set of urls using a regular expression. the pattern must match the entire url, not just a subset, and has global, ignorecase, and multiline disabled. var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: /.*developer.*/, contentscript: 'window.alert("matched!");' }); to specify multiple patterns, pass an array of match patterns: var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: ["*.foo.org", "*.bar.com"], contentscript: 'window.alert("matched!");' }); see the match-pattern module for a detailed description of match pattern syntax. optional options: name: contentscriptfile type: string,array this option specifies one or more content scripts to attach to ...
...-mod"); pagemod.pagemod({ include: "*", contentscriptfile: data.url("my-script.js") }); from firefox 34, you can use "./my-script.js" as an alias for the resource:// url pointing to the script in your "data" directory. so you can rewrite the code above like this: var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*", contentscriptfile: "./my-script.js" }); to attach multiple scripts, pass an array of urls. var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*", contentscriptfile: [data.url("jquery.min.js"), data.url("my-script.js")] }); content scripts specified using this option are loaded before those specified by the contentscript option. name: contentscript type: string,array ...
...And 3 more matches

Choosing Standards Compliance Over Proprietary Practices - Archive of obsolete content
ions have standard procedures at every level? following standards is certainly not a new organizational phenomenon; organizations require their employees to follow common rules, or a common set of standards all the time. memos, time cards, and accounting procedures are all standardized across groups. in the development world, there is a need for standards because applications are designed across multiple development groups. many organizations publish internal development standards and practices. for example, an organization may decide that c++, java, and javascript will be the primary coding languages. they may require that each project be comprised of marketing requirements documents, product requirements documents, functional requirements documents, quality assurance test plans, and certificati...
...led co-pilot that allowed the xerox development organization to quickly and easily debug issues. however, what xerox neglected to understand was that regardless of how powerful pilot and co-pilot was, the star workstation could not evolve with the times because it was proprietary. xerox was bound to a unique hardware platform and to a closed development operating system. and xerox chose to bypass multiple opportunities to port the code to other platforms, and to provide open-source code. consequently, xerox eventually had to shut down the production of their workstation development because of escalating manufacturing and developing costs and slowed sales. xerox’s biggest asset in the beginning became its weapon of destruction. they settled on a proprietary environment, and missed the opportunit...
..., function, view, and process information consistently as they transition from one device to the next. a significant drawback in allowing divergence across applications is that information must be replicated, altered, or massaged to be processed across the divergent applications. this also creates issues in regard to authoring tools for these various applications. for example, let us say we have multiple application offerings that can be used to browse the web. each of these applications has followed their own development and support standards. they each may support some or part of the international standards, but not fully. what authoring tool should we use? would it be fiscally prudent to develop proprietary authoring tools for each application? what would the market adoption rate be for the su...
...And 3 more matches

Chrome registration
see bug 323455. resource aliases can be created using the resource instruction: resource aliasname uri/to/files/ [flags] this will create a mapping for resource://<aliasname>/ uris to the path given. note: there are no security restrictions preventing web content from including content at resource: uris, so take care what you make visible there. manifest flags manifest lines can have multiple, space-delimited flags added at the end of the registration line. these flags mark special attributes of chrome in that package, or limit the conditions under which the line is used. application extensions may install into multiple applications. there may be chrome registration lines which only apply to one particular application. the flag application=app-id indicates that the instruction sh...
...tributes of chrome in that package, or limit the conditions under which the line is used. application extensions may install into multiple applications. there may be chrome registration lines which only apply to one particular application. the flag application=app-id indicates that the instruction should only be applied if the extension is installed into the application identified by app-id. multiple application flags may be included on a single line, in which case the line is applied if any of the flags match. this example shows how a different overlay can be used for different applications: overlay chrome://browser/content/browser.xul chrome://myaddon/content/ffoverlay.xul application={ec8030f7-c20a-464f-9b0e-13a3a9e97384} overlay chrome://messenger/content/mailwindowoverlay.xul chrome://...
.../content/ffoverlay.xul application={ec8030f7-c20a-464f-9b0e-13a3a9e97384} overlay chrome://messenger/content/mailwindowoverlay.xul chrome://myaddon/content/tboverlay.xul application={3550f703-e582-4d05-9a08-453d09bdfdc6} overlay chrome://songbird/content/xul/layoutbaseoverlay.xul chrome://myaddon/content/sboverlay.xul application=songbird@songbirdnest.com appversion extensions may install into multiple versions of an application. there may be chrome registration lines which only apply to a particular application version. the flag appversion=version appversion<version appversion<=version appversion>version appversion>=version indicates that the instruction should only be applied if the extension is installed into the application version identified. multiple appversion flags may be included on...
...And 3 more matches

Command line options
you can also control how mozilla applications open, which components open initially, and what the components do when they open. this page describes the commonly used options and how to use them. you can open the command line interface by pressing shift + f2. syntax rules but first, let's describe the syntax rules that apply for all options. command parameters containing spaces must be enclosed in quotes, such as "joel user". ...
...ve. command parameters, except profile names, are case insensitive. blank spaces ( ) separate commands and parameters. each message option follows the syntax field=value, for example: to=foo@nowhere.net subject=cool page attachment=www.mozilla.org attachment='file:///c:/test.txt' body=check this page or also in thunderbird 52 and newer: body=c:\path\to\file.txt separate multiple message options by comma (,), for example: "to=foo@nowhere.net,subject=cool page" . comma separators must not follow or precede spaces ( ). to assign multiple values to a field, enclose the values in single quotes ('), for example: "to='foo@nowhere.net,foo@foo.de',subject=cool page" . using command line options command line options follow the command to start the application. if the option co...
...command line options follow the command to start the application. if the option contains arguments, enter the argument after the option. some options have abbreviations, for example, "-editor" can be abbreviated as "-edit" (available abbreviations are described in the text below). in some cases, option arguments must be enclosed in quotation marks (this is noted in the option descriptions below). multiple command line options can be specified. in general, the syntax is as follows: application -option -option "argument" -option argument examples the following examples show the use of the "-profilemanager" command, which will open the profile manager prior to starting firefox or thunderbird: windows select run from windows start menu. enter the following command: firefox -profilemanager mac...
...And 3 more matches

Using files from web applications - Web APIs
files. this selection can be done by either using an html <input type="file"> element or by drag and drop. if you want to use the dom file api from extensions or other browser chrome code, you can; however, note there are some additional features to be aware of. see using the dom file api in chrome code for details. accessing selected file(s) consider this html: <input type="file" id="input" multiple> the file api makes it possible to access a filelist containing file objects representing the files selected by the user. the multiple attribute on the input element allows the user to select multiple files. accessing the first selected file using a classical dom selector: const selectedfile = document.getelementbyid('input').files[0]; accessing selected file(s) on a change event it is also...
...integer. type the mime type of the file as a read-only string or "" if the type couldn't be determined. ...
... total size: <span id="filesize">0</span> </div> <div><input type="submit" value="send file"></div> </form> <script> function updatesize() { let nbytes = 0, ofiles = this.files, nfiles = ofiles.length; for (let nfileid = 0; nfileid < nfiles; nfileid++) { nbytes += ofiles[nfileid].size; } let soutput = nbytes + " bytes"; // optional code for multiples approximation const amultiples = ["kib", "mib", "gib", "tib", "pib", "eib", "zib", "yib"]; for (nmultiple = 0, napprox = nbytes / 1024; napprox > 1; napprox /= 1024, nmultiple++) { soutput = napprox.tofixed(3) + " " + amultiples[nmultiple] + " (" + nbytes + " bytes)"; } // end of optional code document.getelementbyid("filenum").innerhtml = nfiles; document.getelemen...
...And 3 more matches

Layout using named grid lines - CSS: Cascading Style Sheets
verything else about line-based placement still works in the same way and you can mix named lines and line numbers. naming lines is useful when creating a responsive design where you redefine the grid, rather than then needing to redefine the content position by changing the line number in your media queries, you can ensure that the line is always named the same in your definitions. giving lines multiple names you may want to give a line more than one name, perhaps it denotes the sidebar-end and the main-start for example. to do this add the names inside the square brackets with whitespace between them [sidebar-end main-start]. you can then refer to that line by either of the names. implicit grid areas from named lines when naming the lines, i mentioned that you can name these anything you lik...
...r</div> <div class="overlay">overlay</div> </div> given that we have this ability to position create lines from named areas and areas from named lines it is worth taking a little bit of time to plan your naming strategy when starting out creating your grid layout. by selecting names that will make sense to you and your team you will help everyone to use the layouts you create more easily. ...
... in this next example i am creating a grid with twelve equal width columns. before defining the 1fr size of the column track i am also defining a line name of [col-start]. ...
...And 3 more matches

<input type="checkbox"> - HTML: Hypertext Markup Language
you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. note: radio buttons are similar to checkboxes, but with an important distinction — radio buttons are grouped into a set in which only one radio button can be selected at a time, whereas checkboxes allow you to turn single values on and off. where multiple controls exist, radio buttons allow one to be selected out of them all, whereas checkboxes allow multiple values to be selected. value a domstring representing the value of the checkbox. events change and input supported common attributes checked idl attributes checked, indeterminate and value methods select() value a domstring...
...oss page loads. use the autocomplete attribute to control this feature. indeterminate if the indeterminate attribute is present on the <input> element defining a checkbox, the checkbox's value is neither true nor false, but is instead indeterminate, meaning that it's state cannot be determined or stated in pure binary terms. this may happen, for instance, if the state of the checkbox depends on multiple other checkboxes, and those checkboxes have different values. essentially, then, the indeterminate attribute adds a third possible state to the checkbox: "i don't know." in this state, the browser may draw the checkbox in grey or with a different mark inside the checkbox. for instance, browsers on macos may draw the checkbox with a hyphen "-" inside to indicate an unexpected state. value the v...
...hecked are submitted to the server, and the reported value is the value of the value attribute. if the value is not otherwise specified, it is the string on by default. this is demonstrated in the section value above. using checkbox inputs we already covered the most basic use of checkboxes above. let's now look at the other common checkbox-related features and techniques you'll need. ...
...And 3 more matches

<input type="number"> - HTML: Hypertext Markup Language
els for each <input>. this is where placeholders come in. a placeholder is a value most commonly used to provide a hint as to the format the input should take value. it is displayed inside the edit box when the element's value is "". once data is entered into the box, the placeholder disappears; if the box is emptied, the placeholder reappears. here, we have an number input with the placeholder "multiple of 10". note how the placeholder disappears and reappears as you manipulate the contents of the edit field. <input type="number" placeholder="multiple of 10"> controlling step size by default, the up and down buttons provided for you to step the number up and down will step the value up and down by 1. you can change this by providing a step attribute, which takes as its value a number specif...
...edit field. <input type="number" placeholder="multiple of 10"> controlling step size by default, the up and down buttons provided for you to step the number up and down will step the value up and down by 1. you can change this by providing a step attribute, which takes as its value a number specifying the step amount. our above example contains a placeholder saying that the value should be a multiple of 10, so it makes sense to add a step value of 10: <input type="number" placeholder="multiple of 10" step="10"> in this example, you should find that the up and down step arrows will increase and decrease the value by 10 each time, not 1. you can still manually enter a number that's not a multiple of 10, but it will be considered invalid. specifying minimum and maximum values you can use t...
...you can still manually enter a number outside these bounds, but it will be considered invalid. ...
...And 3 more matches

Image file type and format guide - Web media technologies
e: you should typically avoid using bmp for web site content, as it's not a generally-accepted use of the format. bmp theoretically supports a variety of internal data representations. the simplest, and most commonly used, form of bmp file is an uncompressed raster image, with each pixel occupying 3 bytes representing its red, green, and blue components, and each row padded with 0x00 bytes to a multiple of 4 bytes wide. while other data representations are defined in the specification, they are not widely used and often completely unimplemented. these features include: support for different bit depths, indexed color, alpha channels, and different pixel orders (by default, bmp is written from bottom-left corner toward the right and top, rather than from the top-left corner toward the right and b...
...ed by html, along with xbm. each pixel in a gif is represented by a single 8-bit value serving as an index into a palette of 24-bit colors (8 bits each of red, green, and blue). the length of a color table is always a power of 2 (that is, each palette has 2, 4, 8, 16, 32, 64, or 256 entries). to simulate more than 255 or 256 colors, dithering is generally used. it is technically possible to tile multiple image blocks, each with its own color palette, to create truecolor images, but in practice this is rarely done. pixels are opaque, unless a specific color index is designated as transparent, in which case pixels colored that value are entirely transparent. gif supports simple animation, in which following an initial full-size frame, a series of images reflecting the parts of the image that chan...
... format was designed by microsoft for desktop icons of windows systems. however, early versions of internet explorer introduced the ability for a web site to provide a ico file named favicon.ico in a web site's root directory to specify a favicon — an icon to be displayed in the favorites menu, and other places where an iconic representation of the site would be useful. an ico file can contain multiple icons, and begins with a directory listing details about each. following the directory comes the data for the icons. each icon's data can be either a bmp image without the file header, or a complete png image (including the file header). if you use ico files, you should use the bmp format, as support for png inside ico files wasn't added until windows vista and may not be well supported. ico fi...
...And 3 more matches

Web video codec guide - Web media technologies
bandwidth than the main profile (which is used for standard definition digital tv in some regions) or the high profile (used for blu-ray disc video). most of the profiles use 8-bit color components and 4:2:0 chroma subsampling; the high 10 profile adds support for 10-bit color, and advanced forms of high 10 add 4:2:2 and 4:4:4 chroma subsampling. avc also has special features such as support for multiple views of the same scene (multiview video coding), which allows, among other things, the production of stereoscopic video. avc is a proprietary format, however, and numerous patents are owned by multiple parties regarding its technologies. commercial use of avc media requires a license, though the mpeg la patent pool does not require license fees for streaming internet video in avc format as long...
... container support 3gp, mp4, webm rtp / webrtc compatible yes supporting/maintaining organization mpeg / itu specification https://mpeg.chiariglione.org/standards/mpeg-4/advanced-video-coding https://www.itu.int/rec/t-rec-h.264 licensing proprietary with numerous patents. commercial use requires a license. note that multiple patent pools may apply. [1] firefox support for avc is dependent upon the operating system's built-in or preinstalled codecs for avc and its container in order to avoid patent concerns. h.263 itu's h.263 codec was designed primarily for use in low-bandwidth situations. in particular, its focus is for video conferencing on pstn (public switched telephone networks), rtsp, and sip (ip-based...
... h.263 support no no no[1] no no no container support 3gp, mp4, quicktime rtp / webrtc compatible no supporting/maintaining organization itu specification https://www.itu.int/rec/t-rec-h.263/ licensing proprietary; appropriate license or licenses are required. note that multiple patent pools may apply. [1] while firefox does not generally support h.263, the openmax platform implementation (used for the boot to gecko project upon which firefox os was based) did support h.263 in 3gp files. [2] version 1 of h.263 specifies a set of picture sizes which are supported. later versions may support additional resolutions. hevc (h.265) the high efficiency video coding (h...
...And 3 more matches

Layout System Overview - Archive of obsolete content
on, where the width of the presentation is constrained by the dimensions of the printed output (paper) and the height of each page is fixed. this paged presentation presents several challenges not present in the galley presentation, namely how to break up elements that are larger than a single page, and how to handle changes to page dimensions. ...
...(note: it is unclear if this is really a benefit - it may have been better to use a copy of the content model for each presentation, and to remove the complexity of managing separate presentations - analysis is needed here). ...
...ons to be supported simultaneously from the same content model. in other words, the same html or xml document could be viewed as a normal galley presentation in a browser window, while simultaneously being presented in a paged presentation to a printer, or even an aural presentation to a speech-synthesizer. to date the only real use of this multiple presentation ability is seen in printing, where multiple presentations are managed, all connected to the same content model. (note: it is unclear if this is really a benefit - it may have been better to use a copy of the content model for each presentation, and to remove the complexity of managing separate presentations - analysis is needed here). the idea of supporting a non-visual presentation is interesting. layout's support for aural presentations ...
...And 2 more matches

richlistbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] this element is used to create a list of listitems (richlistitems), similar to a listbox, but is designed to be used when the items do not contain simple text content. note: in versions of firefox prior to firefox 3, rich list boxes support only single selection. firefox 3 introduced multiple selection to rich list boxes. attributes disabled, disablekeynavigation, preference, seltype, suppressonselect, tabindex, value properties accessibletype, currentindex, currentitem, disabled, disablekeynavigation, itemcount, scrollboxobject, selectedcount, selectedindex, selecteditem, selecteditems, seltype, suppressonselect, tabindex, value methods additemtoselection, appenditem, clearselection...
...you can click on any richlistitem element and use the keyboard to move the selection around. attributes disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond t...
...ping more letters with select more specific items. this feature may be disabled by setting this attribute to true. preference type: id connects the element to a corresponding preference. this attribute only has any effect when used inside a prefwindow. more information is available in the preferences system article. seltype type: one of the values below used to indicate whether multiple selection is allowed. single only one row may be selected at a time. (default in listbox and richlistbox.) multiple multiple rows may be selected at once. (default in tree.) for trees, you can also use the following values: cell individual cells can be selected text rows are selected; however, the selection highlight appears only over the text of the primary column.
...And 2 more matches

Flexbox - Learn web development
ting 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, flexbox makes a lot of layout tasks much easier. let's dig in! introducing a simple example in this article we are going to get you to work through a series of exercises to help you understand how flexbox works. to get started, you should make a local copy of the first...
... of the elements you want to affect. in this case we want to lay out the <article> elements, so we set this on the <section>: section { display: flex; } this causes the <section> element to become a flex container, and its children to become flex items. the result of this should be something like so: so, this single declaration gives us everything we need — incredible, right? we have our multiple column layout with equal sized columns, and the columns are all the same height. this is because the default values given to flex items (the children of the flex container) are set up to solve common problems such as this. to be clear, let's reiterate what is happening here. the element we've given a display value of flex to is acting like a block-level element in terms of how it interacts wit...
...u want to follow along with this example): here we see that the children are indeed breaking out of their container. one way in which you can fix this is to add the following declaration to your <section> rule: flex-wrap: wrap; also, add the following declaration to your <article> rule: flex: 200px; try this now; you'll see that the layout looks much better with this included: we now have multiple rows — as many flexbox children are fitted onto each row as makes sense, and any overflow is moved down to the next line. the flex: 200px declaration set on the articles means that each will be at least 200px wide; we'll discuss this property in more detail later on. you might also notice that the last few children on the last row are each made wider so that the entire row is still filled. but...
...And 2 more matches

Fundamental text and font styling - Learn web development
fonts that are intended to emulate handwriting, with flowing, connected strokes. my big red elephant fantasy fonts that are intended to be decorative. my big red elephant font stacks since you can't guarantee the availability of the fonts you want to use on your webpages (even a web font could fail for some reason), you can supply a font stack so that the browser has multiple fonts it can choose from. this simply involves a font-family value consisting of multiple font names separated by commas, e.g. p { font-family: "trebuchet ms", verdana, sans-serif; } in such a case, the browser starts at the beginning of the list and looks to see if that font is available on the machine. if it is, it applies that font to the selected elements. if not, it moves on to the next ...
...text-decoration: sets/unsets text decorations on fonts (you'll mainly use this to unset the default underline on links when styling them.) available values are: none: unsets any text decorations already present. underline: underlines the text. overline: gives the text an overline. line-through: puts a strikethrough over the text. you should note that text-decoration can accept multiple values at once, if you want to add multiple decorations simultaneously, for example text-decoration: underline overline. also note that text-decoration is a shorthand property for text-decoration-line, text-decoration-style, and text-decoration-color. you can use combinations of these property values to create interesting effects, for example text-decoration: line-through red wavy. let's look a...
...except that it moves the shadow up/down, not left/right. this value has to be included. the blur radius — a higher value means the shadow is dispersed more widely. if this value is not included, it defaults to 0, which means no blur. this can take most available css length and size units. the base color of the shadow, which can take any css color unit. if not included, it defaults to black. ...
...And 2 more matches

Web fonts - Learn web development
you can then use the font family name specified inside @font-face to apply your custom font to anything you like, as normal: html { font-family: "myfont", "bitstream vera serif", serif; } the syntax does get a bit more complex than this; we'll go into more detail below. there are two important things to bear in mind about web fonts: browsers support different font formats, so you'll need multiple font formats for decent cross-browser support. for example, most modern browsers support woff/woff2 (web open font format versions 1 and 2), the most efficient format around, but older versions of ie only support eot (embedded open type) fonts, and you might need to include an svg version of the font to support older versions of iphone and android browsers. we'll show you below how to generate th...
...r the paragraphs. when you find each font, press on the download button, and save the file inside the same directory as the html and css files you saved earlier. it doesn't matter whether they are ttf (true type fonts) or otf (open type fonts). in each case, unzip the font package (web fonts are usually distributed in zip files containing the font file(s) and licensing information). you may find multiple font files in the package — some fonts are distributed as a family with different variants available, for example thin, medium, bold, italic, thin italic, etc. for this example, we just want you to concern yourself with a single font file for each choice. note: under the "find fonts" section in the right-hand column, you can click on the different tags and classifications to filter the displa...
...led "yes, the fonts i'm uploading are legally eligible for web embedding." click download your kit. after the generator has finished processing, you should get a zip file to download — save it in the same directory as your html and css. implementing the code in your demo at this point, unzip the webfont kit you just generated. inside the unzipped directory you'll see three useful items: multiple versions of each font: (for example .ttf, .woff, .woff2, etc.; the exact fonts provided will be updated over time as browser support requirements change). as mentioned above, multiple fonts are needed for cross browser support — this is fontsquirrel's way of making sure you've got everything you need. a demo html file for each font — load these in your browser to see what the font will look ...
...And 2 more matches

How to structure a web form - Learn web development
e first widget, "fruit juice size medium" for the second, and "fruit juice size large" for the third. the use case in this example is one of the most important. each time you have a set of radio buttons, you should nest them inside a <fieldset> element. there are other use cases, and in general the <fieldset> element can also be used to section a form. ideally, long forms should be spread across multiple pages, but if a form is getting long and must be on a single page, putting the different related sections inside different fieldsets improves usability. because of its influence over assistive technology, the <fieldset> element is one of the key elements for building accessible forms; however it is your responsibility not to abuse it. if possible, each time you build a form, try to listen to how...
...te of the taste_cherry checkbox: <form> <p> <input type="checkbox" id="taste_1" name="taste_cherry" value="cherry"> <label for="taste_1">i like cherry</label> </p> <p> <input type="checkbox" id="taste_2" name="taste_banana" value="banana"> <label for="taste_2">i like banana</label> </p> </form> note: you can find this example in checkbox-label.html (see it live also). multiple labels strictly speaking, you can put multiple labels on a single widget, but this is not a good idea as some assistive technologies can have trouble handling them. in the case of multiple labels, you should nest a widget and its labels inside a single <label> element. let's consider this example: <p>required fields are followed by <abbr title="required">*</abbr>.</p> <!-- so this: --> <div> ...
...titles being read aloud depend on the screen reader's settings, so it is more reliable to also include the aria-label attribute, which is always read by screen readers. the above variants increase in effectiveness as you go through them: in the first example, the label is not read out at all with the input — you just get "edit text blank", plus the actual labels are read out separately. the multiple <label> elements confuse the screenreader. in the second example, things are a bit clearer — the label read out along with the input is "name star name edit text required", and the labels are still read out separately. things are still a bit confusing, but it's a bit better this time because the <input> has a label associated with it. the third example is best — the actual label is read out...
...And 2 more matches

Other form controls - Learn web development
e" name="simple"> <option value="banana">big, beautiful yellow banana</option> <option value="cherry">succulent, juicy cherry</option> <option value="lemon">sharp, powerful lemon</option> </select> by default, the height of the select box is enough to display a single value. the optional size attribute provides control over how many options are visible when the select does not have focus. ...
...culent, juicy cherry</option> <option value="lemon">sharp, powerful lemon</option> </select> by default, the height of the select box is enough to display a single value. the optional size attribute provides control over how many options are visible when the select does not have focus. multiple choice select box by default, a select box only lets the user select a single value. ...
...ribute provides control over how many options are visible when the select does not have focus. multiple choice select box by default, a select box only lets the user select a single value. by adding the multiple attribute to the <select> element, you can allow users to select several values, by using the default mechanism provided by the operating system (e.g. holding down cmd/ctrl and clicking multiple values on desktop). ...
...And 2 more matches

Creating hyperlinks - Learn web development
hyperlinks are really important — they are what makes the web a web. this article shows the syntax required to make a link, and discusses link best practices. prerequisites: basic html familiarity, as covered in getting started with html. html text formatting, as covered in html text fundamentals. objective: to learn how to implement a hyperlink effectively, and link multiple files together. what is a hyperlink? hyperlinks are one of the most exciting innovations the web has to offer. they've been a feature of the web since the beginning, and are what makes the web a web. hyperlinks allow us to link documents to other documents or resources, link to specific parts of documents, or make apps available at a web address. almost any web content can be converted to...
...g else that lives on the web. if the web browser doesn't know how to display or handle the file, it will ask you if you want to open the file (in which case the duty of opening or handling the file is passed to a suitable native app on the device) or download the file (in which case you can try to deal with it later on). for example, the bbc homepage contains a many links that point not only to multiple news stories, but also different areas of the site (navigation functionality), login/registration pages (user tools), and more. anatomy of a link a basic link is created by wrapping the text or other content, see block level links, inside an <a> element and using the href attribute, also known as a hypertext reference, or target, that contains the web address. <p>i'm creating a link to <a hr...
...nt directories: if you wanted to include a hyperlink inside projects/index.html pointing to pdfs/project-brief.pdf, you'd have to go up a directory level, then back down into the pdf directory. to go up a directory, use two dots — .. — so the url you would use is ../pdfs/project-brief.pdf: <p>a link to my <a href="../pdfs/project-brief.pdf">project brief</a>.</p> note: you can combine multiple instances of these features into complex urls, if needed, for example: ../../../complex/path/to/my/file.html. document fragments it's possible to link to a specific part of an html document, known as a document fragment, rather than just to the top of the document. to do this you first have to assign an id attribute to the element you want to link to. it normally makes sense to link to a speci...
...And 2 more matches

General asynchronous programming concepts - Learn web development
w-colored cursor (or "beachball" as it is often called). this cursor is how the operating system says "the current program you're using has had to stop and wait for something to finish up, and it's taking so long that i was worried you'd wonder what was going on." this is a frustrating experience and isn't a good use of computer processing power — especially in an era in which computers have multiple processor cores available. there's no sense sitting there waiting for something when you could let the other task chug along on another processor core and let you know when it's done. this lets you get other work done in the meantime, which is the basis of asynchronous programming. it is up to the programming environment you are using (web browsers, in the case of web development) to provide you ...
... speaking, is single-threaded. at this point, we need to introduce the concept of threads. threads a thread is basically a single process that a program can use to complete tasks. each thread can only do a single task at once: task a --> task b --> task c each task will be run sequentially; a task has to complete before the next one can be started. ...
...ded. at this point, we need to introduce the concept of threads. threads a thread is basically a single process that a program can use to complete tasks. each thread can only do a single task at once: task a --> task b --> task c each task will be run sequentially; a task has to complete before the next one can be started. as we said earlier, many computers now have multiple cores, so can do multiple things at once. programming languages that can support multiple threads can use multiple cores to complete multiple tasks simultaneously: thread 1: task a --> task b thread 2: task c --> task d javascript is single-threaded javascript is traditionally single-threaded. even with multiple cores, you could only get it to run tasks on a single thread, called the main thread. our example from above...
...And 2 more matches

Graceful asynchronous programming with Promises - Learn web development
improvements with promises promises make situations like the above much easier to write, parse, and run. if we represented the above pseudo-code using asynchronous promises instead, we'd end up with something like this: choosetoppings() .then(function(toppings) { return placeorder(toppings); }) .then(function(order) { return...
...za(pizza); }) .catch(failurecallback); this is much better — it is easier to see what is going on, we only need a single .catch() block to handle all the errors, it doesn't block the main thread (so we can keep playing video games while we wait for the pizza to be ready to collect), and each operation is guaranteed to wait for previous operations to complete before running. we're able to chain multiple asynchronous actions to occur one after another this way because each .then() block returns a new promise that resolves when the .then() block is done running. clever, right? using arrow functions, you can simplify the code even further: choosetoppings() .then(toppings => placeorder(toppings) ) .then(order => collectorder(order) ) .then(pizza => eatpizza(pizza) ) .catch(failurecallback); ...
...fulfilled. it is passed the returned response object as a parameter. note: the way that a .then() block works is similar to when you add an event listener to an object using addeventlistener(). it doesn't run until an event occurs (when the promise fulfills). the most notable difference is that a .then() will only run once for each time it is used, whereas an event listener could be invoked multiple times. we immediately run the blob() method on this response to ensure that the response body is fully downloaded, and when it is available transform it into a blob object that we can do something with. the result of this is returned like so: response => response.blob() which is shorthand for function(response) { return response.blob(); } unfortunately, we need to do slightly ...
...And 2 more matches

Introduction to events - Learn web development
these — they are considered bad practice. it might seem easy to use an event handler attribute if you are doing something really quick, but they quickly become unmanageable and inefficient. for a start, it is not a good idea to mix up your html and your javascript, as it becomes hard to parse — keeping your javascript separate is best practice; if it is in a separate file you can apply it to multiple html documents. even in a single file, inline event handlers are not a good idea. one button is ok, but what if you had 100 buttons? you'd have to add 100 attributes to the file; it would quickly turn into a maintenance nightmare. with javascript, you could easily add an event handler function to all the buttons on the page no matter how many there were, using something like this: const buttons...
... btn.removeeventlistener('click', bgchange); this isn't significant for simple, small programs, but for larger, more complex programs it can improve efficiency to clean up old unused event handlers. plus, this allows you to have the same button performing different actions in different circumstances — all you have to do is add or remove event handlers as appropriate. second, you can register multiple handlers for the same listener. the following two handlers wouldn't both be applied: myelement.onclick = functiona; myelement.onclick = functionb; the second line overwrites the value of onclick set by the first line. this would work, however: myelement.addeventlistener('click', functiona); myelement.addeventlistener('click', functionb); both functions would now run when the element is select...
... learning. dom level 2 events (addeventlistener(), etc.) are more powerful, but can also become complex and are less well supported (supported as far back as internet explorer 9). you should also experiment with these, and try to use them where possible. the main advantages of the third mechanism are that you can remove event handler code if needed, using removeeventlistener(), and you can add multiple listeners of the same type to elements if required. for example, you can call addeventlistener('click', function() { ... }) on an element multiple times, with different functions specified in the second argument. this is impossible with event handler properties because any subsequent attempts to set a property will overwrite earlier ones, e.g.: element.onclick = function1; element.onclick = func...
...And 2 more matches

Setting up your own test automation environment - Learn web development
tically open up! google should automatically be loaded in a tab, "webdriver" should be entered in the search box, and the search button will be clicked. webdriver will then wait for 2 seconds; the document title is then accessed, and if it is "webdriver - google search", we will return a message to claim the test is passed. webdriver will then close down the firefox instance and stop. testing in multiple browsers at once there is also nothing to stop you running the test on multiple browsers simultaneously. let's try this! create another new file inside your project directory called google_test_multiple.js. you can feel free to change the references to some of the other browsers we added, remove them, etc., depending on what browsers you have available to test on your operating system. you'll...
... so here we've done the test as before, except that this time we've wrapped it inside a fu...
...ight get an error message along the lines of "could not create a session: you must enable the 'allow remote automation' option in safari's develop menu to control safari via webdriver." if you get this, follow the given instruction and try again. so here we've done the test as before, except that this time we've wrapped it inside a function, searchtest(). we've created new browser instances for multiple browsers, then passed each one to the function so the test is performed on all three browsers! fun huh? let's move on, look at the basics of webdriver syntax, in a bit more detail. webdriver syntax crash course let's have a look at a few key features of the webdriver syntax. for more complete details, you should consult the selenium-webdriver javascript api reference for a detailed reference, ...
...And 2 more matches

Firefox
with broad compatibility, the latest in web technologies, and powerful development tools, firefox is a great choice for both web developers and end users. firefox is an open source project; much of the code is contributed by our huge community of volunteers. here you can learn about how to contribute to the firefox project and you will also find links to information about the construction of firefox add-ons, using the developer tools in firefox, and other topics. ...
...is the new tab page, which includes a "top sites" section showing sites you visit that firefox thinks you're likely to want to visit again, as well as potentially some sites that have been pinned to always appear in that space. linux compatibility matrixthe following table lists the available library versions for the mozilla.org-distributed firefox builds dependencies, and/or to build firefox.multiple firefox profilesa profile in firefox is the collection of settings, customizations, add-ons, and other personalizations that a user has made or installed into their copy of firefox. you can find details about profiles on mozilla's end-user support site.performance best practices for firefox front-end engineersthis guide will help firefox developers working on front-end code produce code which is ...
... ...
...And 2 more matches

Embedding the editor
oxobject for each <editor> tag, and allows javascript to access properties of this box object (such as the nsieditorshell). the <editor> tag is simply a <iframe> on which an editor is created; in all other respects, it behaves like a xul <iframe>. the problem with this ownership model is that there can be only one editor per <editor> tag, yet the document loaded in the <iframe> may itself contain multiple <iframe>s (consider a frameset document, or a document itself containing an <html:iframe>). currently, composer does not deal gracefully with such documents. one editor per window limitation the current composer window xul/c++ architecture has grown up with the assumption that there can be just one <editor> tag per window. at window construction time, we get the editorshell from the <editor> elem...
...y native ui. editor needs to call through one or more interfaces when communicating with the ui. embedding objectives editor requires design changes such that the embedding applications above can be fulfilled, and these changes will need to address the current problems. briefly, the embedding objectives are: <editor> should get you a working editor in a xul application should be able to have multiple <editor>s per xul window should be able to embed an editable content frame in a native application embedders should be able to supply their own chrome (toolbars etc). meeting these objectives will also solve the following existing composer problems: composer should handle frameset documents composer should handle documents with <iframe>s. composer shouldn't rely on certain xul documen...
...ent which is editable, and which may embody more than one editor. this interface will be called nsi????. high-level ui and emebedding code should deal with this editing session interface, without knowledge of the underlying editors. the editing session will forward commands to the individual editors depending on focus, and mediate undo/redo between them. alternative solution: rather than having multiple editors in this scenario, we could have a single editor, which is capable of saving and restoring state such that it can be transferred between the various subdocuments being edited. that state would have to include the document, undo 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 edi...
...And 2 more matches

DeferredTask.jsm
to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/deferredtask.jsm"); use this, for instance, if you write data to a file and you expect that you may have to rewrite data very soon afterwards. ...
...ool ispending(); return value returns true if pending, false otherwise. start obsolete since gecko 28 start (or postpone) task. void start(); flush obsolete since gecko 28 perform any postponed task immediately. void flush(); cancel obsolete since gecko 28 cancel any pending task. void cancel(); arm request the execution of the task after the delay specified on construction. multiple calls don't introduce further delays. if the task is running, the delay will start when the current execution finishes. the task will always be executed on a different tick of the event loop, even if the delay specified on construction is zero. multiple "arm" calls within the same tick of the event loop are guaranteed to result in a single execution of the task. by design, this method doesn't p...
...ely, and the returned promise resolves when the new execution terminates. if the task is not running and the timer is not armed, the method returns a resolved promise. promise finalize(); example firefox 28 note this section describes about deferredtask.jsm in firefox 28.0 or higher. set up a function or an asynchronous task whose execution can be triggered after a defined delay. ...
...And 2 more matches

DMD
on your dmd report while your working directory is $objdir/dist/bin. this will allow the local libraries to be found and used. if you invoke dmd.py without arguments you will get output appropriate for the mode in which dmd was invoked. "dark matter" mode output for "dark matter" mode, dmd.py's output describes how the live heap blocks are covered by memory reports. this output is broken into multiple sections. "invocation". this tells you how dmd was invoked, i.e. what options were used. "twice-reported stack trace records". this tells you which heap blocks were reported twice or more. the presence of any such records indicates bugs in one or more memory reporters. "unreported stack trace records". this tells you which heap blocks were not reported, which indicate where additional memory...
...m/html/nshtmldocument.cpp:3710) #08: nsidocument::docaddsizeofincludingthis(nswindowsizes*) const (/home/njn/moz/mi5/dom/base/nsdocument.cpp:12820) } } the choice of whether to record an allocation stack trace for all blocks is controlled by an option (see below). "live" mode output for "live" mode, dmd.py's output describes what live heap blocks are present. this output is broken into multiple sections. "invocation". this tells you how dmd was invoked, i.e. what options were used. "live stack trace records". this tells you which heap blocks were present. "summary": gives measurements of the total heap. the individual records are similar to those output in "dark matter" mode. "cumulative" mode output for "cumulative" mode, dmd.py's output describes how the live heap blocks are ...
... invoked, i.e. what options were used. "live stack trace records". this tells you which heap blocks were present. "summary": gives measurements of the total heap. the individual records are similar to those output in "dark matter" mode. "cumulative" mode output for "cumulative" mode, dmd.py's output describes how the live heap blocks are covered by memory reports. this output is broken into multiple sections. "invocation". this tells you how dmd was invoked, i.e. what options were used. "cumulative stack trace records". this tells you which heap blocks were allocated during the session. "summary": gives measurements of the total (cumulative) heap. the individual records are similar to those output in "dark matter" mode. "scan" mode output for "scan" mode, the output of dmd.py is the...
...And 2 more matches

AsyncTestUtils extended framework
ke synthetic set definitions. look at the section on synthetic message sets above to understand how to specify these. create a single folder with messages in it let [folder, set1, set2, ...] = make_folder_with_sets([asynsetdef1, asynsetdef2, ...]); yield wait_for_message_injection(); this creates a folder with an automatically generated name and adds one or more sets of messages to it. if multiple sets are specified, their messages will be interleaved. example: let [folder, messageset] = make_folder_with_sets([{count: 3}]); this creates a new folder with a set of three messages in it and saves the folder handle into 'folder' and the message set into 'messageset'. another example: let [foobarfolder, fooset, barset] = make_folder_with_sets([{count: 3, subject: "foo"}, {count: 3, subject: ...
...der_with_sets([{count: 3, subject: "foo"}, {count: 3, subject: "bar"}]); this creates a folder with two message sets in it. three of the messages will have the subject "foo" and three will have the subject "bar". because the message sets are interleaved, if you read the subject lines in the order they were added (or in date order), you would read "foo", "bar", "foo", "bar", "foo", "bar". create multiple folders with a set of messages distributed across the folders let [[folder1, folder2, ...], set1, set2, ...] = make_folders_with_sets(afoldercount, [asynsetdef1, asynsetdef2, ...]); yield wait_for_message_injection(); like make_folder_with_sets but multiple folders are created and the messages are spread across the folders. you would only want to do this when you are testing logic that could b...
...f messages distributed across the folders let [[folder1, folder2, ...], set1, set2, ...] = make_folders_with_sets(afoldercount, [asynsetdef1, asynsetdef2, ...]); yield wait_for_message_injection(); like make_folder_with_sets but multiple folders are created and the messages are spread across the folders. you would only want to do this when you are testing logic that could be impacted by having multiple folders. ...
...And 2 more matches

NSS tools : certutil
ates be created in the key database. this document discusses certificate and key database management. for information on the security module database management, see the modutil manpage. options and arguments running certutil always requires one and only one command option to specify the type of certificate operation. each option may take arguments, anywhere from none to multiple arguments. the command option -h will list all the command options available and their relevant arguments. command options -a add an existing certificate to a certificate database. the certificate database should already exist; if one is not present, this command option will initialize one by default. -b run a series of commands fr...
...r single cert, print binary der encoding of extension oid. -e check a certificate's signature during the process of validating a certificate. --email email-address specify the email address of a certificate to list. used with the -l command option. --extgeneric oid:critical-flag:filename[,oid:critical-flag:filename]... add one or multiple extensions that certutil cannot encode yet, by loading their encodings from external files. · oid (example): 1.2.3.4 · critical-flag: critical or not-critical · filename: full path to a file containing an encoded extension -f password-file specify a file that will automatically supply the password to include in a certificate...
...ocess. certutil prompts for the certificate constraint extension to select. x.509 certificate extensions are described in rfc 5280. -3 add an authority key id extension to a certificate that is being created or added to a database. this extension supports the identification of a particular certificate, from among multiple certificates associated with one subject name, as the correct issuer of a certificate. the certificate database tool will prompt you to select the authority key id extension. x.509 certificate extensions are described in rfc 5280. -4 add a crl distribution point extension to a certificate that is being created or added to a...
...And 2 more matches

Rhino scopes and contexts
e as well as a place to find standard objects like function and object. it's important to understand that a scope is independent of the context that created it. you can create a scope using one context and then evaluate a script using that scope and another context (either by exiting the current context and entering another, or by executing on a different thread). you can even execute scripts on multiple threads simultaneously in the same scope. rhino guarantees that accesses to properties of javascript objects are atomic across threads, but doesn't make any more guarantees for scripts executing in the same scope at the same time. if two scripts use the same scope simultaneously, the scripts are responsible for coordinating any accesses to shared variables. a top-level scope is created by callin...
...by calling context.initstandardobjects to create all the standard objects: scriptableobject scope = cx.initstandardobjects(); the easiest way to embed rhino is just to create a new scope this way whenever you need one. however, initstandardobjects is an expensive method to call and it allocates a fair amount of memory. we'll see below that there are ways to share a scope created this way among multiple scopes and threads. name lookup so how are scopes used to look up names? in general, variables are looked up by starting at the current variable object (which is different depending on what code is being executed in the program), traversing its prototype chain, and then traversing the parent chain. in the diagram below, the order in which the six objects are traversed is indicated. order of l...
...statement x = v + a; is executed, the scope chain is traversed looking for a 'x' property. when none is found, a new property 'x' is created in the top-level scope. sharing scopes javascript is a language that uses delegation rather than traditional class-based inheritance. ...
...And 2 more matches

mozIStorageConnection
the connection failed to open, or it has been closed. read only. databasefile nsifile the current database nsifile. null if the database connection refers to an in-memory database. read only. lasterror long the last sqlite error code that occurred. read only. note: this is not reliable if you are using asynchronous statements or if you are using the connection on multiple threads. lasterrorstring autf8string the english error string reported by the sqlite library for the last sqlite operation. read only. note: this is not reliable if you are using asynchronous statements or if you are using the connection on multiple threads. lastinsertrowid long long the row id from the last sql insert operation. read only. note: this i...
... schemaversion long the schema version of the database. this should not be used until the database is ready. the version will be reported as 0 if it is not set. ...
... or if the method was called on a thread other than the one that opened the connection. committransaction() this method commits the current transaction. void committransaction(); parameters none. createaggregatefunction() this method creates a new aggregate function that can be used in sql. see mozistorageaggregatefunction for sample code and more details. if you use your connection on multiple threads, your function needs to be threadsafe, or it should only be called on one thread. void createaggregatefunction( in autf8string afunctionname, in long anumarguments, in mozistorageaggregatefunction afunction ); parameters afunctionname the name of the aggregate function to create, as seen in sql. anumarguments the number of arguments the function takes. pass -1 for vari...
...And 2 more matches

nsIFilePicker
ory nsilocalfile the directory that the file picker dialog should initially display. this should be set this before calling open() or show() to specify a starting point. file nsilocalfile the currently selected file or directory. read only. files nsisimpleenumerator an enumerator of the currently selected files. read only. note: only works with modeopenmultiple mode. fileurl nsiuri the uri of the currently selected file or directory. read only. filterindex long the (0-based) index of the filter which is currently selected in the file picker dialog. set this to choose a particular filter to be selected by default. constants mode constants these constants are used to specify the type of file picker to create when cal...
...cker dialog. set this to choose a particular filter to be selected by default. constants mode constants these constants are used to specify the type of file picker to create when calling init(). constant value description modeopen 0 load a file. modesave 1 save a file. modegetfolder 2 select a folder/directory. modeopenmultiple 3 load multiple files. return value constants these values are returned by show() or passed as an argument to open()'s callback, indicating the result of the file picker activity. constant value description returnok 0 the file picker dialog was closed by the user hitting 'ok' returncancel 1 the file picker dialog was closed by the user h...
...bm, *.wmv and *.xvid filters for file extensions. methods appendfilter() appends a custom file extension filter to the dialog. the filter appended first will be used to display the nsifilepicker dialog, the user may then select another from the list. void appendfilter( in astring title, in astring filter ); parameters title the title of the filter. filter the filter string. multiple extensions may be included, separated by a semicolon and a space. example some example filter strings: "*.ics" "*.txt; *.doc; *.rtf" appendfilters() appends a list of file extension filters, from the predefined list, to the dialog. void appendfilters( in long filtermask ); parameters note: if appendfilters is the first (or only) call to set the file filters the filter with the sma...
...And 2 more matches

Storage
this example uses the numbered placeholder indexed by zero for a parameter to be bound later (described in binding parameters). note: numerical indexes for parameters are always one less than the number you write in the sql. the use of numerical indexes for parameters is strongly discouraged in javascript where named parameters are much easier to use. ...
...if you neglect to bind a value to a parameter, it will be interpreted as null. you should never try to construct sql statements on the fly with values inserted in them. ...
...1"), getter_addrefs(statement)); ns_ensure_success(rv, rv); rv = statement->bindint32parameter(0, 1234); ns_ensure_success(rv, rv); note: numerical indexes for parameters are always one less than the number you write in the sql. the use of numerical indexes for parameters is strongly discouraged in javascript where named parameters are much easier to use. binding multiple sets of parameters starting in gecko 1.9.2 (firefox 3.6), there's a new, more convenient way to bind multiple sets of parameters at once prior to executing your statement asynchronously. this api is only available for asynchronous execution. let stmt = dbconn.createstatement("insert into table_name (value) values(:value)"); let params = stmt.newbindingparamsarray(); for (let i = 0; i < 10; i+...
...And 2 more matches

XPCOM
interfaces in xpcom are defined in a dialect of idl called xpidl. xpcom itself provides a set of core components and classes, e.g. file and memory management, threads, basic data structures (strings, arrays, variants), etc. the majority of xpcom components are not part of this core set and are provided by other parts of the platform (e.g. gecko or necko) or by an application or even by an extension. ...
...eady_addrefed in association with nscomptr allows you to assign in a pointer without addrefing it.binary compatibilityif mozilla decides to upgrade to a compiler that does not have the same abi as the current version, any built component may fail. it is a possiblity that is introduced when upgrading to a new compiler without recompiling everything. effectively, it is a different platform.bundling multiple binary componentsbinary xpcom components are sometimes required to implement low-level features for extensions. since binary components are linked against a single gecko sdk, a dependency to a particular version of gecko is created. if the component uses only "frozen" xpcom interfaces, there is a good chance the same binary component will work with different versions of gecko (version 1.8 and 1.9...
...s created. if the component uses only "frozen" xpcom interfaces, there is a good chance the same binary component will work with different versions of gecko (version 1.8 and 1.9, for example). the more likely case is that the component uses "unfrozen" interfaces and those interfaces can change between gecko versions. this can create a difficult situation for extension developers trying to support multiple gecko versions (firefox 2 and 3, for example).creating a python xpcom componentcreating applications with mozilla already provides a tutorial for making a simple javascript or c++ component (implementing the nsisimple interface). here is how to make the same component in python using pyxpcom.fun with xbl and xpconnectgenerating guidsguids are used in mozilla programming for identifying several ty...
...And 2 more matches

Zombie compartments
leak. 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. viewing live compartments if you want to see a list of live compartments, type "about:memory" into the address bar and click on the measure button. in the results, you'll find a js-main-runtime-compartments tree (whcih yo...
..., 0x7f10f1250000) compartment(atoms) js-compartment(about:home) js-compartment(about:blank) compartment([system principal], resource://gre/modules/addons/xpiprovider.jsm) when looking at user compartments there are a couple of things to be aware of. first, many sites utilize scripts from other sites to provide advertisements, "like" and "+1" buttons, twitter feeds, etc. so it's common for multiple compartments to be created for a single web page. for example, if i open www.techcrunch.com the following compartments are created. compartment(http://techcrunch.com/) compartment(http://www.facebook.com/plugins/like.php?...) compartment(https://plusone.google.com/_/+1/fastbutton?...) compartment(http://platform.twitter.com/widgets/...utton.html?...) compartment(http://cdn.at.atwola.com/_...
...o, there's a good chance you're seeing a zombie compartment. follow these steps to make a more conclusive diagnosis. restart the browser. open the page that you think might cause a zombie compartment. open about:memory in another tab to confirm that the relevant compartment is present. close the first page. minimize memory usage and remeasure in about:memory. it might be worth refreshing multiple times just to be sure. if the compartment is still present in about:memory, that's very suspicious. you could try waiting 20 minutes or so, then reload about:memory again. some zombie compartments stick around for a limited time before disappearing, others are immortal, and it's useful to know which is which. if you see any `ghost-windows` (at the bottom of about:memory) that is also suspicio...
...And 2 more matches

Mozilla
options are used to specify various startup options for mozilla applications.this page describes the commonly used options and how to use them. you can open the command line interface by pressing shift + f2. continuous integration when you push a commit to mozilla-central or a related repository, it initiates a large chain of builds and tests across multiple types of infrastructure. this document will help you understand all the pieces that comprise mozilla's continuous integration systems. cookies in mozilla suggestions as to needed documentation can be directed to mike connor. cookies preferences in mozilla these preferences apply to most mozilla products (including fi...
...or its public channels, the irc server was shut down. git moved here: https://firefox-source-docs.mozilla.org/contributing/contribution_quickref.html hacking with bonsai bonsai was originally created to solve the problem of tree instability. the original navigator code base had large sections that were shared across multiple platforms. many times, code checked in would compile or run on a handful of platforms. also, with as many as 100 engineers, it was very difficult to determine what happened in the tree that caused the instability. bonsai was created to solve these problems. how mozilla determines mime types all data handling in mozilla is based on the mim...
... ipdl, short for "ipc (inter-process communication) protocol definition language", is a mozilla-specific language allowing c++ code to pass messages between processes or threads in an organized and secure way. all messages for multi-process plugins and tabs in firefox are declared in the ipdl language. javascript code modules javascript code modules let multiple privileged javascript scopes share code. for example, a module could be used by firefox itself as well as by extensions, in order to avoid code duplication. javascript libraries from mozilla projects in addition to firefox and other applications, mozilla developers have created a number of useful javascript libraries you can use in your projects. documentation for these librar...
...And 2 more matches

Plug-in Basics - Plugins
ko looks for plugin modules on different systems, see how gecko finds plug-ins. when the user opens a page that contains embedded data of a media type that invokes a plug-in, the browser responds with the following sequence of actions: check for a plug-in with a matching mime type load the plug-in code into memory initialize the plug-in create a new instance of the plug-in gecko can load multiple instances of the same plug-in on a single page, or in several open windows at the same time. if you are browsing a page that has several embedded realaudio clips, for example, the browser will create as many instances of the realplayer plug-in as are needed (though of course playing several realaudio files at the same time would seldom be a good idea). when the user leaves the page or closes the ...
... when the plug-in software is loaded and unloaded. these functions are exported from the plug-in dll and accessed with a system table lookup, which means that they are not related to any particular plug-in instance. again, see initialization and destruction for more information about initializing and destructing. the browser calls the plug-in api function npp_new when the instance is created. multiple instances of the same plug-in can exist (a) if there are multiple embedded objects on a single page, or (b) if several browser windows are open and each displays the same data type. a plug-in instance is deleted when a user leaves the instance's page or closes its window; gecko calls the function npp_destroy to inform the plug-in that the instance is being deleted. when the last instance of a p...
...lib64/ --> for 64 bit libs plug-ins within toolkit bundles. to find out which plug-ins are currently installed visit about:plugins. gecko displays a page listing all installed plug-ins and the mime types they handle, as well as optional descriptive information supplied by the plug-in. on windows, installed plug-ins are automatically configured to handle the mime types that they support. ...
...And 2 more matches

FileList - Web APIs
cted with the <input type="file"> element. it's also used for a list of files dropped into web content when using the drag and drop api; see the datatransfer object for details on this usage. note: prior to gecko 1.9.2, the input element only supported a single file being selected at a time, meaning that the filelist would contain only one file. starting with gecko 1.9.2, if the input element's multiple attribute is true, the filelist may contain multiple files. using the file list all <input> element nodes have a files attribute of type filelist on them which allows access to the items in this list. for example, if the html includes the following file input: <input id="fileitem" type="file"> the following line of code fetches the first file in the node's file list as a file object: var f...
...presenting the file at the specified index in the file list. file item( index ); parameters index the zero-based index of the file to retrieve from the list. return value the file representing the requested file. ...
...multiple> var fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (similar to nodelist) var files = fileinput.files; var file; // loop through files for (var i = 0; i < files.length; i++) { // get item file = files.item(i); //or file = files[i]; alert(file.name); } here is a complete example. ...
...And 2 more matches

In depth: Microtasks and the JavaScript runtime environment - Web APIs
n the program that should be run and other information critical to that context's operation. by using the contexts and the context stack in this manner, many of the fundamentals of how a program operates can be managed, including local and global variables, function calls and returns, and so forth. a special note about recursive functions—that is, functions which call themselves, possibly over multiple levels of depth or recursion: each recursive call to the function creates a new execution context. this allows the javascript runtime to track the levels of recursion and the return of results through that recursion, but it also means that each time a function recurses, more memory is needed to create the new context. run, javascript, run to run javascript code, the runtime engine maintains a s...
.... run, javascript, run to run javascript code, the runtime engine maintains a set of agents in which to execute javascript code. each agent is made up of a set of execution contexts, the execution context stack, a main thread, a set for any additional threads that may be created to handle workers, a task queue, and a microtask queue. other than the main thread—which some browsers share across multiple agents—each component of an agent is unique to that agent. here we look at how the runtime functions in slightly more detail. event loops each agent is driven by an event loop, which collects any user and other events, enqueuing tasks to handle each callback. it then runs any pending javascript tasks, then any pending microtasks, then performs any needed rendering and painting before loop...
...to this as described elsewhere in this article xxxx ????). worker event loop a worker event loop is one which drives a worker; this includes all forms of workers, including basic web workers, shared workers, and service workers. workers are kept in one or more agents that are separate from the "main" code; the browser may use a single event loop for all of the workers of a given type or may use multiple event loops to handle them. worklet event loop a worklet event loop is the event loop used to drive agents which run the code for the workelets for a given agent. this includes worklets of type worklet, audioworklet, and paintworklet. several windows loaded from the same origin may be running on the same event loop, each queueing tasks onto the event loop so that their tasks take turns with t...
...And 2 more matches

Basic concepts - Web APIs
its database. the object store can optionally have a key generator and a key path. if the object store has a key path, it is using in-line keys; otherwise, it is using out-of-line keys. for the reference documentation on object store, see idbobjectstore. version when a database is first created, its version is the integer 1. each database has one version at a time; a database can't exist in multiple versions at once. the only way to change the version is by opening it with a greater version than the current one. this will start a versionchange transaction and fire an upgradeneeded event. the only place where the schema of the database can be updated is inside the handler of that event. note: this definition describes the most recent specification, which is only implemented in up-to-date bro...
...ent. the only place where the schema of the database can be updated is inside the handler of that event. note: this definition describes the most recent specification, which is only implemented in up-to-date browsers. old browsers implemented the now deprecated and removed idbdatabase.setversion() method. database connection an operation created by opening a database. a given database can have multiple connections at the same time. transaction an atomic set of data-access and data-modification operations on a particular database. it is how you interact with the data in a database. in fact, any reading or changing of data in the database must happen in a transaction. a database connection can have several active transactions associated with it at a time, so long as the writing transactions...
...ta value by which stored values are organized and retrieved in the object store. the object store can derive the key from one of three sources: a key generator, a key path, or an explicitly specified value. the key must be of a data type that has a number that is greater than the one before it. each record in an object store must have a key that is unique within the same store, so you cannot have multiple records with the same key in a given object store. a key can be one of the following types: string, date, float, a binary blob, and array. for arrays, the key can range from an empty value to infinity. and you can include an array within an array. alternatively, you can also look up records in an object store using the index. key generator a mechanism for producing new keys in an ordered ...
...And 2 more matches

Key Values - Web APIs
this key generated the value "unidentified". ime and composition keys keys used when using an input method editor (ime) to input text which can't readily be entered by simple keypresses, such as text in languages such as those which have more graphemes than there are character entry keys on the keyboard. common examples include chinese, japanese, korean, and hindi. ...
... some keys are common across multiple languages, while others exist only on keyboards targeting specific languages. in addition, not all keyboards have all of these keys. common ime keys keyboardevent.key value description virtual keycode windows mac linux android "allcandidates" the all candidates key, which starts multi-candidate mode, in which multiple candidates are displayed for the ongoing input. gdk_key_multiplecandidate (0xff3d qt::key_multiplecandidate (0x0100113d) "alphanumeric" the alphanumeric key. vk_oem_attn (0xf0) gdk_key_eisu_shift (0xff2f) gdk_key_eisu_toggle (0xff30) qt::key_eisu_shift (0x0100112f) qt::key_eisu_toggle (0x01001130) "codeinput" the code input key,...
...by examining the keyboardevent's associated compositionupdate event's data property. see dead keycodes for linux below "finalmode" the final (final mode) key is used on some asian keyboards to enter final mode when using imes. vk_final (0x18) "groupfirst" switches to the first character group on an iso/iec 9995 keyboard. each key may have multiple groups of characters, each in its own column. pressing this key instructs the device to interpret keypresses as coming from the first column on subsequent keystrokes. gdk_key_iso_first_group (0xfe0c) "grouplast" switches to the last character group on an iso/iec 9995 keyboard. gdk_key_iso_last_group (0xfe0e) "groupnext" [4] switches to the nex...
...And 2 more matches

Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
ed by either the webgl or the webxr api that represents the viewer that you can simply rotate and move around to automatically change what's seen on the screen. in this guide we show how use webgl to simulate camera movements without having a camera to move. these techniques can be used in any webgl (or webxr) project. animating 3d graphics is an area of software development that brings together multiple disciplines in computer science, mathematics, art, graphic design, kinematics, anatomy, physiology, physics, and cinematography. since we don't have a real camera, we imagine one, reproducing the effect of having a camera, without actually having the ability to move the user around the scene. there are a few articles about the fundamental math, geometry, and other concepts behind webgl and webxr...
...lerate 2d graphics drawing, the camera is typically placed directly above the center of 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 heads...
... the camera view, you can get the model view matrix—the transform matrix needed to move the world to simulate the desired camera position—like this: let viewmatrix = view.transform.inverse.matrix; if the library you're using accepts an xrrigidtransform object directly, you can instead get view.transform.inverse, rather than pulling out just the array representing the view matrix. composing multiple transforms if your camera needs to be performing multiple transforms simultaneously, such as zooming and panning at the same time, you can multiply the transform matrices together to compose them into a single matrix that applies both changes at once. see multiplying two matrices in the article matrix math for the web for a clear but readable function that does this or use your preferred matrix ...
...And 2 more matches

Cognitive accessibility - Accessibility
p define overall organization of page content. they help facilitate navigation through page content sections, and provide a mechanism to aid comprehension. examples of headings include chapters, sections and subsections of content, and so on. headings are more obvious navigational aids compared to other methods to identify page content sections (borders, whitespace, horizontal rules, etc.). multiple ways to find content different users prefer different methods of finding information, so it is important to provide multiple ways for users to locate content on your site. providing more than one way to navigate your site can help people find information faster. some users may prefer a table of contents, site map, or search functionality rather than reading and traversing through several pag...
... or search functionality rather than reading and traversing through several pages to find what they need. others may prefer to explore the site in a sequential manner, moving from page to page in order to best understand the site's layout, content, and concepts. ability to bypass blocks of content providing a mechanism, such as a skiplink, to bypass blocks of content that are repeated on multiple web pages. focus order makes sense the order of focus for interactive elements should make sense. to achieve this, the dom order should match the visual order, which in turn should match the tabbing order. if the tab order jumps around, especially in a way that does not match the visual order when navigating with a keyboard, users can become disoriented. focused elements should be visib...
...que you can use is providing accompanying visuals to help explain ideas, events, and processes. there are tools that can rate the level of your content. for example, this document has an average grade level of about 11. this means it should be easily understood by a native english speaker aged 16 to 17. some tools can even provide suggestions 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...
...And 2 more matches

Using CSS gradients - CSS: Cascading Style Sheets
o cyan, being fully cyan for 15% of the gradient, and so on. in the second example, the second color stop for each color is at the same location as the first color stop for the adjacent color, creating a striped effect. in both examples, the gradient is written twice: the first is the css images level 3 method of repeating the color for each stop and the second example is the css images level 4 multiple color stop method of including two color-stop-lengths in a linear-color-stop declaration. controlling the progression of a gradient by default, a gradient evenly progresses between the colors of two adjacent color stops, with the midpoint between those two color stops being the midpoint color value. you can control the interpolation, or progression, between two color stops by including a colo...
...the backgrounds are stacked from top to bottom, with the first specified being on top. <div class="layered-image"></div> div { width: 300px; height: 150px; } .layered-image { background: linear-gradient(to right, transparent, mistyrose), url("https://mdn.mozillademos.org/files/15525/critters.png"); } stacked gradients you ca...
...uses repeating-linear-gradient() to create a gradient that progresses repeatedly in a straight line. the colors get cycled over again as the gradient repeats. in this case the gradient line is 10px long. <div class="repeating-linear"></div> div { width: 120px; height: 120px; } .repeating-linear { background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px); } multiple repeating linear gradients similar to regular linear and radial gradients, you can include multiple gradients, one on top of the other. this only makes sense if the gradients are partially transparent allowing subsequent gradients to show through the transparent areas, or if you include different background-sizes, optionally with different background-position property values, for each gradient i...
...And 2 more matches

background-position - CSS: Cascading Style Sheets
ub.com/mdn/interactive-examples and send us a pull request. ...
...*/ .examplethree { background-image: url("https://mdn.mozillademos.org/files/11987/startransparent.gif"), url("https://mdn.mozillademos.org/files/7693/catfront.png"); background-position: 0px 0px, right 3em bottom 2em; } result specifi...
... url("https://mdn.mozillademos.org/files/7693/catfront.png"); background-position: 0px 0px, right 3em bottom 2em; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'background-position' in that specification. candidate recommendation adds support for multiple backgrounds and the four-value syntax. modifies the percentage definition to match implementations. css level 2 (revision 1)the definition of 'background-position' in that specification. recommendation allows for keyword values and <length> and <percentage> values to be mixed. css level 1the definition of 'background-position' in that specification. recommendation in...
...And 2 more matches

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
t validation when supported. displays a numeric keypad in some devices with dynamic keypads. <input type="number" name="number"/> html5 password a single-line text field whose value is obscured. will alert user if site is not secure. <input type="password" name="password"/> radio a radio button, allowing a single value to be selected out of multiple choices with the same name value. <input type="radio" name="radio"/> range a control for entering a number whose exact value is not important. displays as a range widget defaulting to the middle value. used in conjunction min and max to define the range of acceptable values. <input type="range" name="range" min="0" max="25"/> html5 reset a bu...
...submitted with the form as part of a name/value pair. pattern password, text, tel pattern the value must match to be valid placeholder password, search, tel, text, url text that appears in the form control when it has no value set readonly almost ...
...datalist> of autocomplete options max numeric types maximum value maxlength password, search, tel, text, url maximum length (number of characters) of value min numeric types minimum value minlength password, search, tel, text, url minimum length (number of characters) of value multiple email, file boolean. whether to allow multiple values name all name of the form control. submitted with the form as part of a name/value pair. pattern password, text, tel pattern the value must match to be valid placeholder password, search, tel, text, url text that appears in the form control when it has no value set readonly almost all boolean. the value is not editable re...
...And 2 more matches

Loops and iteration - JavaScript
ows an expression of any degree of complexity. this expression can also declare variables. the conditionexpression expression is evaluated. if the value of conditionexpression is true, the loop statements execute. if the value of condition is false, the for loop terminates. (if the condition expression is omitted entirely, the condition is assumed to be true.) the statement executes. to execute multiple statements, use a block statement ({ ... }) to group those statements. if present, the update expression incrementexpression is executed. control returns to step 2. example in the example below, the function contains a for statement that counts the number of selected options in a scrolling list (a <select> element that allows multiple selections). the for statement declares the variable i an...
...for statement declares the variable i and initializes it to 0. it checks that i is less than the number of options in the <select> element, performs the succeeding if statement, and increments i by after each pass through the loop. ...
...ent declares the variable i and initializes it to 0. it checks that i is less than the number of options in the <select> element, performs the succeeding if statement, and increments i by after each pass through the loop. ...
...And 2 more matches

x - SVG: Scalable Vector Graphics
perty meaning this attribute can also be used as a css property for <svg>. text for <text>, if it contain a single value, x defines the x coordinate on where the content text position must be placed. the content text position is usualy a point on the baseline of the first line of text. the exact content text position is influenced by some properties like text-anchor, or direction. if there are multiple values, x defines the x coordinate of each individual glyph from the text. if there are less values than glyphes, the remaining glyphes are placed in the continuity of the last positioned glyph. if there are more values than glyphes, extra values are ignored. value list of (<length> | <percentage>) default value 0 animatable yes example html,body,svg ...
... for <tref>, if it contain a single value, x defines the x coordinate on where the content text position must be placed. the content text posi...
... 2px; } tref warning: as of svg2 <tref> is deprecated and shouldn't be used. for <tref>, if it contain a single value, x defines the x coordinate on where the content text position must be placed. the content text position is usualy a point on the baseline of the first line of text. the exact content text position is influenced by some properties like text-anchor, or direction. if there are multiple values, x defines the x coordinate of each individual glyph from the text. if there are less values than glyphes, the remaining glyphes are placed in the continuity of the last positioned glyph. if there are more values than glyphes, extra values are ignored. value list of (<length> | <percentage>) default value 0 animatable yes tspan for <tspan>, if i...
...And 2 more matches

y - SVG: Scalable Vector Graphics
perty meaning this attribute can also be used as a css property for <svg>. text for <text>, if it contain a single value, y defines the y coordinate on where the content text position must be placed. the content text position is usualy a point on the baseline of the first line of text. the exact content text position is influenced by some properties like text-anchor, or direction. if there are multiple values, y defines the y coordinate of each individual glyph from the text. if there are less values than glyphes, the remaining glyphes are placed in the continuity of the last positioned glyph. if there are more values than glyphes, extra values are ignored. value list of (<length> | <percentage>) default value 0 animatable yes example html,body,svg ...
... for <tref>, if it contain a single value, y defines the y coordinate on where the content text position must be placed. the content text positi...
... 2px; } tref warning: as of svg2 <tref> is deprecated and shouldn't be used. for <tref>, if it contain a single value, y defines the y coordinate on where the content text position must be placed. the content text position is usualy a point on the baseline of the first line of text. the exact content text position is influenced by some properties like text-anchor, or direction. if there are multiple values, y defines the y coordinate of each individual glyph from the text. if there are less values than glyphes, the remaining glyphes are placed in the continuity of the last positioned glyph. if there are more values than glyphes, extra values are ignored. value list of (<length> | <percentage>) default value 0 animatable yes tspan for <tspan>, if i...
...And 2 more matches

Understanding WebAssembly text format - WebAssembly
t) .then(obj => { obj.instance.exports.logit(); }); note: you can find this example on github as logger.html (see it live also). declaring globals in webassembly webassembly has the ability to create global variable instances, accessible from both javascript and importable/exportable across one or more webassembly.module instances. this is very useful, as it allows dynamic linking of multiple modules. in webassembly text format, it looks something like this (see global.wat in our github repo; also see global.html for a live javascript example): (module (global $g (import "js" "global") (mut i32)) (func (export "getglobal") (result i32) (global.get $g)) (func (export "incglobal") (global.set $g (i32.add (global.get $g) (i32.const 1)))) ) this loo...
...o tell the program a function returning an i32 is expected. if the callee doesn’t have a matching signature (say an f32 is returned instead), a webassembly.runtimeerror is thrown. so what links the call_indirect to the table we are calling? the answer is that there is only one table allowed right now per module instance, and that is what call_indirect is implicitly calling. ...
...ences, the table object can be mutated from javascript using the grow(), get() and set() methods. and webassembly code is itself able to manipulate tables using instructions added as part of reference types, such as table.get and table.set. because tables are mutable, they can be used to implement sophisticated load-time and run-time dynamic linking schemes. when a program is dynamically linked, multiple instances share the same memory and table. this is symmetric to a native application where multiple compiled .dlls share a single process’s address space. to see this in action, we’ll create a single import object containing a memory object and a table object, and pass this same import object to multiple instantiate() calls. our .wat examples look like so: shared0.wat: (module (import "...
...And 2 more matches

places/bookmarks - Archive of obsolete content
e `group` won't be // present here. console.log(saves[0].title); // "ran" console.log(saves[2].group.title); // "guitars" }); searching for bookmarks bookmarks can be queried with the search() function, which accepts a query object or an array of query objects, as well as a query options object. ...
...roperties are and'd together within a single query object, but are or'd together across multiple query objects. let { search, unsorted } = require("sdk/places/bookmarks"); // simple query with one object search( { query: "firefox" }, { sort: "title" } ).on("end", function (results) { // results matching any bookmark that has "firefox" // in its url, title or tag, sorted by title }); // multiple queries are or'd together search( [{ query: "firefox" }, { group: unsorted, tags: ["mozilla"] }], { sort: "title" } ).on("end", function (results) { // our first query is the same as the simple query above; // all of those results are also returned here. since multiple // queries are or'd together, we also get bookmarks that // match the second query. the second query's properties /...
... // `mybookmark` is a child of `mygroup`. `mygroup` will // also have a `data` event called for it. }).on("end", function (items, inputitems) { // the `end` event returns all items that are explicitly // saved. so `mygroup` will not be in this array, // but `mybookmark` will be. ...
...termine overall settings such as sort order and how many objects should be returned. parameters queries : object|array an object representing a query, or an array of objects representing queries. each query object can take several properties, which are queried against the bookmarks database. each property is and'd together, meaning that bookmarks must match each property within a query object. multiple query objects are then or'd together. options : object optional options: name type count number the number of bookmark items to return. if left undefined, no limit is set. sort string a string specifying how the results should be sorted. possible options are 'title', 'date', 'url', 'visitcount', 'dateadded' and 'lastmodified'. ...

The Essentials of an Extension - Archive of obsolete content
m:creator> <em:homepageurl>https://developer.mozilla.org/docs/xul_school</em:homepageurl> this is the data that is displayed before and after the extension is installed, that you can see in the add-ons manager. there are many other tags that can be added, for contributors and translators. the full specification of the install.rdf file has all the details. since extensions can be translated to multiple languages, it is often necessary to translate the extension's description, or even its name. a localized description and name can be added with the following code: <em:localized> <description> <em:locale>es-es</em:locale> <em:name>xul school hola mundo</em:name> <em:description>bienvenido a xul school!</em:description> </description> </em:localized> the es-es locale string i...
...nversion> <em:maxversion>10.*</em:maxversion> </description> </em:targetapplication> this node specifies the target application and target versions for the extension, specifically firefox, from version 4 up to version 10. the uuid is firefox's unique id. other mozilla and mozilla-based applications such as thunderbird and seamonkey have their own. you can have an extension that works on multiple applications and versions. for example, if you create a firefox extension, it would normally take little effort to port it to seamonkey, which has very similar features and ui. the min and max version specify the version range in which the extension can be installed. here's more about the version format. if the application or version range don't match, you won't be allowed to install the extensi...
...s spaced to look like a table, but that is not necessary. the parser ignores repeated spaces. the first word in a line tells firefox what it is that is being declared (content, skin, locale, or others mentioned later on). the second is the package name, which we will explain shortly. skin and locale packages have a third value to specify what locale or what skin they are extending. there can be multiple skin and locale entries relating to different skins and locales. the most common case is having one skin entry for the global skin, classic/1.0, and multiple locale entries, one for each translation. finally, the location is specified. there are some additional options that can be included in the entries of a chrome.manifest file. they are documented in the chrome registration page. notably, we ...
...y complicates the work of localizers, and grammar rules on different languages may change the ordering of the sentence entirely. for this reason it's better to use parameters in the properties: xulschoolhello.search.label = found %s words matching the search query! then you use getformattedstring instead of getstring in order to get the localized string. thanks to this we don't need to have multiple properties, and life is easier for translators. you can read more about it on the text formatting section of the xul tutorial. also have a look at the plurals and localization article, that covers a localization feature in firefox that allows you to further refine this last example to handle different types of plural forms that are also language-dependent. skin styling xul is very similar to st...

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
internet explorer, also support pre-w3c apis and have never added extensive support for the w3c-compliant ones. before i go into the differences between mozilla and internet explorer, i'll cover some basic ways you can make a web application extensible in order to add new browser support later. since different browsers sometimes use different apis for the same functionality, you can often find multiple if() else() blocks throughout the code to differentiate between the browsers. the following code shows blocks designated for internet explorer: . . . var elm; if (ns4) elm = document.layers["myid"]; else if (ie4) elm = document.all["myid"] the above code isn't extensible, so if you want it to support a new browser, you must update these blocks throughout the web application. the easiest...
...ws blocks designated for internet explorer: . . . var elm; if (ns4) elm = document.layers["myid"]; else if (ie4) elm = document.all["myid"] the above code isn't extensible, so if you want it to support a new browser, you must update these blocks throughout the web application. the easiest way to eliminate the need to recode for a new browser is to abstract out functionality. rather than multiple if() else() blocks, you increase efficiency by taking common tasks and abstracting them out into their own functions. not only does this make the code easier to read, it simplifies adding support for new clients: var elm = getelmbyid("myid"); function getelmbyid(aid){ var element = null; if (ismozilla || isie5) element = document.getelementbyid(aid); else if (isnetscape4) element...
...rnet explorer event model, // so get window.event. var myevent = aevent ? aevent : window.event; } function onpageload(){ document.getelementbyid("mydiv").onclick = handleevent; } </script> mozilla fully supports the w3c standard way of attaching listeners to dom nodes. you use the addeventlistener() and removeeventlistener() methods, and have the benefit of being able to set multiple listeners for the same event type. both methods require three parameters: the event type, a function reference, and a boolean denoting whether the listener should catch events in their capture phase. if the boolean is set to false, it will only catch bubbling events. w3c events have three phases: capturing, at target, and bubbling. every event object has an eventphase attribute indicating the pha...
...aevent is null, it is the internet explorer event model, // so get window.event. var myevent = aevent ? aevent : window.event; } function onpageload() { var element = document.getelementbyid("mydiv"); element.addeventlistener("click", handleevent, false); } </script> one advantage of addeventlistener() and removeeventlistener() over setting properties is that you can have multiple event listeners for the same event, each calling another function. thus, to remove an event listener requires all three parameters be the same as the ones you use when adding the listener. mozilla does not support internet explorer's method of converting <script> tags into event handlers, which extends <script> with for and event attributes (see table 5). it also does not support the attachevent...

Tree Selection - Archive of obsolete content
« previousnext » the section will describe how to get and set the selected items in a tree. getting the selected tree items each item in a tree (that corresponds to treeitem element, if using content tree view) may be selected individually. if you add the seltype attribute to the tree, set to the value single, the user may only select one row at a time. otherwise, the user may select multiple rows, which will not necessarily be contiguous. the tree provides a number of functions which can be used to determine whether an item is selected. handling the select event first, let's see how we can determine when an item is selected. the onselect() event handler may be added to the tree element. when the user selects an item from the tree, the event handler is called. the user may also change th...
...ill be the first top-level item. the next item at index 1 will be its first child. the second child will be at index 2 and the second parent item will be at position 3 and so on. in the image, there are eight rows displayed, of which two are selected. the first selected row has an index of 4 and the second has an index of 7. the rows that are not displayed are not included in the index count. multiple selection for trees that allow multiple selection, getting the list of selected rows is a bit more complicated. the tree's view has a selection property which holds information about the selected rows. this selection will be an nsitreeselection object. the view doesn't need to implement this object itself, the tree will assign a selection object to the view's selection property when the view is a...
...ement this object itself, the tree will assign a selection object to the view's selection property when the view is attached to a tree. from the tree, you can get the selection using the tree's view property and then retrieve the view's selection property. you can use the methods of the selection object to retrieve the set of selected items or modify the selection. because the selected items in a multiple selection tree are not necessarily contiguous, you can retrieve each block of contigous selections using the getrangecount() and getrangeat() functions. the first function returns the number of selection ranges there are. if only one value is selected, this value will be 1. you would then write a loop for the number of ranges, calling getrangeat() to get the actual indices of the start and end of...
....view.selection.select(5); note that you should not just change the tree's currentindex property to change the selection. instead, you should use the selection's select function as in the example above. you can select all rows with the selectall() function. note that rows nested inside containers that are not open will not be selected. naturally, this will only have any effect for trees that use multiple selection. there is also a clearselection() function to clear the selection, and an invertselection function to reverse the selection, that is, deselect all selected rows and select all unselected rows. to select specific rows, use the rangedselect() function which selects all rows in between two indices. here is an example which selects rows between index 2 and 7. note that rows 2 and 7 will als...

listbox - Archive of obsolete content
there are numerous methods which allow the items in the listbox to be retrieved and modified. you may specify the number of rows to display in the list using the rows attribute. additional rows can be viewed using a scroll bar. a listbox is expected to contain listitem elements. ...
...he preferences system article. rows type: integer the number of rows to display in the element. if the element contains more than this number of rows, a scrollbar will appear which the user can use to scroll to the other rows. to get the actual number of rows in the element, use the getrowcount method. seltype type: one of the values below used to indicate whether multiple selection is allowed. single only one row may be selected at a time. (default in listbox and richlistbox.) multiple multiple rows may be selected at once. (default in tree.) for trees, you can also use the following values: cell individual cells can be selected text rows are selected; however, the selection highlight appears only over the text of the primary column.
... type: integer a value indicating the type of accessibility object for the element. currentindex type: integer set to the index of the currently focused item in the list. if no item is focused, the value will be -1. (or, on some platforms, typeof(listboxcurrentindex) will be undefined) in a single selection list, the current index will always be the same as the selected index. in a multiple selection list, the currently focused row may be modified by the user without changing the selection by pressing the control key and pressing the cursor keys to navigate. currentitem type: listitem element returns the currently focused item in the list box, which is only useful in a multiple selection list box. disabled type: boolean gets and sets the value of the dis...
...x ) return type: element returns the element that is at the specified index. getnumberofvisiblerows() return type: integer returns the number of rows that are currently visible to the user. getrowcount() return type: integer returns the total number of rows in the element, regardless of how many rows are displayed. getselecteditem( index ) return type: element when multiple items are selected, you can retrieve each selected item using this method. the argument index specifies the index in the list of the selected items, not the row number of the item. the item index is zero-based, thus this example will return the first selected item: getselecteditem(0). insertitemat( index, label, value ) return type: element this method creates a new item and...

Object.prototype.__noSuchMethod__ - Archive of obsolete content
ly set to a non-function, the javascript engine will revert to throwing typeerrors. ...
...rrors. examples simple test of __nosuchmethod__ var o = { __nosuchmethod__: function(id, args) { console.log(id, '(' + args.join(', ') + ')'); } }; o.foo(1, 2, 3); o.bar(4, 5); o.baz(); // output // foo (1, 2, 3) // bar (4, 5) // baz () using __nosuchmethod__ to simulate multiple inheritance an example of code that implements a primitive form of multiple inheritance is shown below. ...
...{ __nosuchmethod__: function(id, args) { console.log(id, '(' + args.join(', ') + ')'); } }; o.foo(1, 2, 3); o.bar(4, 5); o.baz(); // output // foo (1, 2, 3) // bar (4, 5) // baz () using __nosuchmethod__ to simulate multiple inheritance an example of code that implements a primitive form of multiple inheritance is shown below. ...
... // example base class 1 function namedthing(name) { this.name = name; } namedthing.prototype = { getna...

Domain sharding - MDN Web Docs Glossary: Definitions of Web-related terms
the problem with domain sharding, in terms of performance, is the cost of extra dns lookups for each domain and the overhead of establishing each tcp connection. ...
... the problem with domain sharding, in terms of performance, is the cost of extra dns lookups for each domain and the overhead of establishing each tcp connection. ...
... the problem with domain sharding, in terms of performance, is the cost of extra dns lookups for each domain and the overhead of establishing each tcp connection. ...
...vascript, css, images and other media files that need to be downloaded. as browsers limit the number of active connections per domain, serving all the required resources from a single domain could be slow as assets need to be downloaded sequentially. with domain sharding, the required downloads are served from more than one domain, enabling the browser to simultaneously download needed resources. multiple domains, however, is an anti-pattern, as dns lookups slow initial load times. http2 supports unlimited concurrent requests making domain sharding an obsolete requirement when http/2 is enabled. see also transport layer security (tls) dns http/2 ...

Organizing your CSS - Learn web development
2 { background-color: black; color: white; } css doesn't mind which one you use. we personally find it is more readable to have each property and value pair on a new line. comment your css adding comments to your css will help any future developer work with your css file, but will also help you when you come back to the project after a break. /* this is a css comment it can be broken onto multiple lines. */ a good tip is to add a block of comments between logical sections in your stylesheet too, to help locate different sections quickly when scanning through, or even give you something to search for to jump right into that part of the css. if you use a string which won't appear in the code you can jump from section to section by searching for it — below we have used ||. /* || general s...
... a <p>, you would have to add another selector to these rules or create a whole new ruleset. instead, you could use the selector .box to apply your rule to any element that has the class box: .box { border: 1px solid #ccc; } there will be times when making something more specific makes sense, however this will generally be an exception rather than usual practice. ...
...c makes sense, however this will generally be an exception rather than usual practice. break large stylesheets into multiple smaller ones in particular in cases where you have very different styles for distinct parts of the site, you might want to have a stylesheet that includes all the global rules and then smaller ones that include the specific rules needed for those sections. you can link to multiple stylesheets from one page, and the normal rules of the cascade apply, with rules in stylesheets linked later coming after rules in stylesheets linked earlier. for example, we might have an online store as part of the site, with a lot of css used only for styling the product listings and forms needed for the store. it would make sense to have those things in a different stylesheet, only linked to...
...ets linked later coming after rules in stylesheets linked earlier. for example, we might have an online store as part of the site, with a lot of css used only for styling the product listings and forms needed for the store. it would make sense to have those things in a different stylesheet, only linked to on store pages. this can make it easier to keep your css organised, and also means that if multiple people are working on the css you will have fewer situations where two people need to work on the same stylesheet at once, leading to conflicts in source control. other tools that can help css itself doesn't have much in the way of in-built organisation, therefore you need to do the work to create consistency and rules around how you write css. the web community has also developed various tools...

Responsive design - Learn web development
for the user's needs. for example, the following media query tests to see if the current web page is being displayed as screen media (therefore not a printed document) and the viewport is at least 800 pixels wide. the css for the .container selector will only be applied if these two things are true. @media screen and (min-width: 800px) { .container { margin: 1em 2em; } } you can add multiple media queries within a stylesheet, tweaking your whole layout or parts of it to best suit the various screen sizes. the points at which a media query is introduced, and the layout changed, are known as breakpoints. a common approach when using media queries is to create a simple single-column layout for narrow-screen devices (e.g mobile phones), then check for larger screens and implement a mult...
...t-based flexible grid. the following example demonstrates a simple responsive design using media queries and a flexible grid. on narrow screens the layout displays the boxes stacked on top of one another: on wider screens they move to two columns: note: you can find the live example and source code for this example on github. modern layout technologies modern layout methods such as multiple-column layout, flexbox, and grid are responsive by default. they all assume that you are trying to create a flexible grid and give you easier ways to do so. multicol the oldest of these layout methods is multicol — when you specify a column-count, this indicates how many columns you want your content to be split into. the browser then works out the size of these, a size that will change accor...
...a landscape image on desktop. or, acknowledging the smaller size of an image on mobile you might want to show a different image altogether, one which is more easily understood at a small screen size. these things can't be achieved by simply scaling down an image. responsive images, using the <picture> element and the <img> srcset and sizes attributes solve both of these problems. you can provide multiple sizes along with "hints" (meta data that describes the screen size and resolution the image is best suited for), and the browser will choose the most appropriate image for each device, ensuring that a user will download an image size appropriate for the device they are using. you can also art direct images used at different sizes, thus providing a different crop or completely different image to ...
...therefore worth checking the age of any materials you are referencing. ...

CSS FAQ - Learn web development
recommended to use classes as much as possible, and to use ids only when absolutely necessary for specific uses (like to connect label and form elements or for styling elements that must be semantically unique): using classes makes your styling extensible — even if you only have one element to style with a particular ruleset now, you might want to add more later. classes allow you to style multiple elements, therefore they can lead to shorter stylesheets, rather than having to write out the same styling information in multiple rules that use id selectors. shorter stylesheets are more performant. class selectors have lower specificity than id selectors, so are easier to override if needed. note: see selectors for more information. how do i restore the default value of a property? init...
...id value for a css property. it resets it to its default value, which is defined in the css specification of the given property. /* heading default color is black */ h1 { color: red; } h1 { color: initial; } how do i derive one style from another? css does not exactly allow one style to be defined in terms of another. (see eric meyer's note about the working group's stance). however, assigning multiple classes to a single element can provide the same effect, and css variables now provide a way to define style information in one place that can be reused in multiple places. how do i assign multiple classes to an element? html elements can be assigned multiple classes by listing the classes in the class attribute, with a blank space to separate them. <style type="text/css"> .news { background: ...
...side body, at any hierarchy level, including the .stockup class. so font-weight: bold; applied to the .corpname class is overridden by font-weight: normal; applied to all elements in the body. the use of the * selector should be minimized as it is a slow selector, especially when not used as the first element of a selector. its use should be avoided as much as possible. specificity in css when multiple rules apply to a certain element, the rule chosen depends on its style specificity. inline style (in html style attributes) has the highest specificity and will override any selectors, followed by id selectors, then class selectors, and eventually element selectors. the text color of the below <div> will therefore be red. div { color: black; } #orange { color: orange; } .green { color: green; } ...
...has the highest specificity and will override any selectors, followed by id selectors, then class selectors, and eventually element selectors. the text color of the below <div> will therefore be red. div { color: black; } #orange { color: orange; } .green { color: green; } <div id="orange" class="green" style="color: red;">this is red</div> the rules are more complicated when the selector has multiple parts. more detailed information about how selector specificity is calculated can be found in the css 2.1 specification chapter 6.4.3. what do the -moz-*, -ms-*, -webkit-*, -o-* and -khtml-* properties do? these properties, called prefixed properties, are extensions to the css standard. they allow use of experimental and non-standard features in browsers without polluting the regular namespace,...

Responsive images - Learn web development
t vector graphics). this is called the resolution switching problem. conversely, it is unnecessary to display a large image on a screen significantly smaller than the size it was meant for. doing so can waste bandwidth; in particular, mobile users don't want to waste bandwidth by downloading a large image intended for desktop, when a small image would do for their device. ideally, you would have multiple resolutions available and serve the appropriate size depending upon the device accessing the data on the website. to make things more complicated, some devices have high resolution screens that need larger images than you might expect to display nicely. this is essentially the same problem, but in a slightly different context. you might think that vector images would solve these problems, and t...
...wport" content="width=device-width">: this forces mobile browsers to adopt their real viewport width for loading web pages (some mobile browsers lie about their viewport width, and instead load pages at a larger viewport width then shrink the loaded page down, which is not very helpful for responsive images or design). ...
...ecide which image is shown — the first one that returns true will be displayed. in this case, if the viewport width is 799px wide or less, the first <source> element's image will be displayed. if the viewport width is 800px or more, it'll be the second one. the srcset attributes contain the path to the image to display. just as we saw with <img> above, <source> can take a srcset attribute with multiple images referenced, as well as a sizes attribute. so, you could offer multiple images via a <picture> element, but then also offer multiple resolutions of each one. realistically, you probably won't want to do this kind of thing very often. in all cases, you must provide an <img> element, with src and alt, right before </picture>, otherwise no images will appear. this provides a default case that...
...ml as a starting point, if you like). find a nice wide screen landscape image with some kind of detail contained in it somewhere. create a web-sized version of it using a graphics editor, then crop it to show a smaller part that zooms in on the detail, and create a second image (about 480px wide is good for this). use the <picture> element to implement an art direction picture switcher! create multiple image files of different sizes, each showing the same picture. use srcset/size to create a resolution switcher example, either to serve the same size image at different resolutions, or different image sizes at different viewport widths. test your skills! you've reached the end of this article, but can you remember the most important information? you can find a detailed assessment that tests t...

Video and audio content - Learn web development
page doesn't support the <video> element, allowing us to provide a fallback for older browsers. this can be anything you like; in this case, we've provided a direct link to the video file, so the user can at least access it some way regardless of what browser they are using. the embedded video will look something like this: you can try the example live here (see also the source code.) using multiple source formats to improve compatibility there's a problem with the above example, which you may have noticed already if you've tried to access the live link above with an older browser like internet explorer or even an older version of safari. the video won't play, because different browsers support different video (and audio) formats. fortunately, there are things you can do to help prevent thi...
... mp3 until 2017, and h.264 is encumbered by patents through at least 2027. because of those patents, browsers that wish to implement support for those codecs must pay typically enormous license fees. in addition, some people simply prefer to avoid restricted software and prefer to use only open formats. due to these legal and preferential reasons, web developers find themselves having to support multiple formats to capture their entire audience. the codecs described in the previous section exist to compress video and audio into manageable files, since raw audio and video are both exceedingly large. each web browser supports an assortment of codecs, like vorbis or h.264, which are used to convert the compressed audio and video into binary data and back. each codec offers its own advantages and d...
...itive and negative features affecting your decisions about which to use. things become slightly more complicated because not only does each browser support a different set of container file formats, they also each support a different selection of codecs. in order to maximize the likelihood that your web site or app will work on a user's browser, you may need to provide each media file you use in multiple formats. if your site and the user's browser don't share a media format in common, your media simply won't play. due to the intricacies of ensuring your app's media is viewable across every combination of browsers, platforms, and devices you wish to reach, choosing the best combination of codecs and container can be a complicated task. see choosing the right container in media container formats ...
... the media content. wouldn't it be nice to be able to provide these people with a transcript of the words being spoken in the audio/video? well, thanks to html video, you can. to do so we use the webvtt file format and the <track> element. note: "transcribe" means "to write down spoken words as text." the resulting text is a "transcript." webvtt is a format for writing text files containing multiple strings of text along with metadata such as the time in the video at which each text string should be displayed, and even limited styling/positioning information. these text strings are called cues, and there are several kinds of cues which are used for different purposes. the most common cues are: subtitles translations of foreign material, for people who don't understand the words spoken in...

Making decisions in your code — conditionals - Learn web development
a real example to understand this syntax better, let's consider a real example. imagine a child being asked for help with a chore by their mother or father. the parent might say "hey sweetheart! if you help me by going and doing the shopping, i'll give you some extra allowance so you can afford that toy you wanted." in javascript, we could represent this like so: let sho...
...h, or the park, and get an ice cream.'; } else if (temperature >= 86) { para.textcontent = 'it is ' + temperature + ' degrees outside — really hot! if you want to go outside, make sure to put some sunscreen on.'; } } even though the code all works together, each if...else statement works completely independently of the other one. logical operators: and, or and not if you want to test multiple conditions without writing nested if...else statements, logical operators can help you. when used in conditions, the first two do the following: && — and; allows you to chain together two or more expressions so that all of them have to individually evaluate to true for the whole expression to return true. || — or; allows you to chain together two or more expressions so that one or more of...
...de of each or operator: if (x === 5 || x === 7 || x === 10 ||x === 20) { // run my code } switch statements if...else statements do the job of enabling conditional code well, but they are not without their downsides. they are mainly good for cases where you've got a couple of choices, and each one requires a reasonable amount of code to be run, and/or the conditions are complex (for example, multiple logical operators). for cases where you just want to set a variable to a certain choice of value or print out a particular statement depending on a condition, the syntax can be a bit cumbersome, especially if you've got a large number of choices. in such a case, switch statements are your friend — they take a single expression/value as an input, and then look through a number of choices until ...
...red in the choice variable. this will be the <select> element value after the value changes, so "january" for example.) set a variable called days to be equal to the number of days in the selected month. to do this you'll have to look up the number of days in each month of the year. you can ignore leap years for the purposes of this example. hints: you are advised to use logical or to group multiple months together into a single condition; many of them share the same number of days. think about which number of days is the most common, and use that as a default value. if you make a mistake, you can always reset the example with the "reset" button. if you get really stuck, press "show solution" to see a solution. playable code <h2>live output</h2> <div class="output" style="height: 500px...

Storing the information you need — Variables - Learn web development
ll your variable: let myname; let myage; here we're creating two variables called myname and myage. try typing these lines into your web browser's console. after that, try creating a variable (or two) with your own name choices. note: in javascript, all code instructions should end with a semi-colon (;) — your code may work correctly for single lines, but probably won't when you are writing multiple lines of code together. try to get into the habit of including it. you can test whether these values now exist in the execution environment by typing just the variable's name, e.g. myname; myage; they currently have no value; they are empty containers. when you enter the variable names, you should get a value of undefined returned. if they don't exist, you'll get an error message — try typi...
...ge). for a start, if you write a multiline javascript program that declares and initializes a variable, you can actually declare a variable with var after you initialize it and it will still work. for example: myname = 'chris'; function logname() { console.log(myname); } logname(); var myname; note: this won't work when typing individual lines into a javascript console, just when running multiple lines of javascript in a web document. this works because of hoisting — read var hoisting for more detail on the subject. hoisting no longer works with let. if we changed var to let in the above example, it would fail with an error. this is a good thing — declaring a variable after you initialize it results in confusing, harder to understand code. secondly, when you use var, you can decla...
... may cause errors or be hard to understand for an international audience. don't use underscores at the start of variable names — this is used in certain javascript constructs to mean specific things, so may get confusing. don't use numbers at the start of variables. this isn't allowed and causes an error. a safe convention to stick to is so-called "lower camel case", where you stick together multiple words, using lower case for the whole first word and then capitalize subsequent words. we've been using this for our variable names in the article so far. make variable names intuitive, so they describe the data they contain. don't just use single letters/numbers, or big long phrases. variables are case sensitive — so myage is a different variable from myage. one last point: you also need to...
...for example, a simple case would be: let iamalive = true; whereas in reality it would be used more like this: let test = 6 < 3; this is using the "less than" operator (<) to test whether 6 is less than 3. as you might expect, it returns false, because 6 is not less than 3! you will learn a lot more about such operators later on in the course. arrays an array is a single object that contains multiple values enclosed in square brackets and separated by commas. try entering the following lines into your console: let mynamearray = ['chris', 'bob', 'jim']; let mynumberarray = [10, 15, 40]; once these arrays are defined, you can access each value by their location within the array. try these lines: mynamearray[0]; // should return 'chris' mynumberarray[2]; // should return 40 the square bracke...

Accessible Toolkit Checklist
ntly focused widget does not need the enter key events - making keystrokes do the right thing msaa support (default state) links enter key activates link (thus default button no longer shows dark border when link is focused) msaa support, including linked and traversed states, and accessible value that holds destination url text fields - single and multiple line it's probably best to use native widgets for these, otherwise accessibility support will be quite difficult tab should always focus the next item, not insert a tab, unless there's a really good reason and another way to navigate always use system selection color, otherwise screen reader won't read the text make sure the caret is never blinking when focus is not i...
...p toggle a combo box open and closed escape closes combo box if it was open (be careful not to have it cancel entire dialog) up/down arrow key navigation. shift+up and shift+down move and extend the selection. typing letter or several letters to navigate (same letter goes to each item starting with that, different letters go to first item starting with that entire string). multiple selection is possible with ctrl+arrow to move focus without selecting, then space to select item, shift+space to select to current point or control+space to toggle selection of current item shift+f10 or context menu key to bring up context menu for current item. generate a context menu event. on mac os x, ctrl+space is used to bring up the context menu. space bar toggles checkboxes ...
...election, selectable, multiselectable and extselectable states, and statechange events for checkbox children trees when a tree view is tabbed to, select the first item if nothing else is already selected up/down arrow key navigation left arrow to first collapse a branch, then move to parent right arrow to first expand a branch, then move to first child multiple selection is possible with ctrl+arrow to move focus without selecting, then space to select item, shift+space to select to current point or control+space to toggle selection of current item typing letter or several letters to navigate (similar to list support for this) shift+f10 or context menu key to bring up context menu for current item (on os x ctrl+space is used to bring up conte...
.... note, you can use the accessible description to expose the current tree view level and position, such as "l3, 6 of 9" in order to provide ease of access for the user. the "l" and "of" will be parsed out by the assistive technology, so don't localize it. mac os x difference: option+left and option+right should do deep expand/collapse mac os x difference: user should be able to select multiple rows and expand them with one keystroke. after the expansion, the multiple (now discontiguous) selection should remain. ...

Performance best practices for Firefox front-end engineers
) lets you queue up javascript to run right before the style flush occurs. this allows you to put all of your dom writes (most importantly, anything that could change the size or position of things in the dom) just before the style and layout steps of the pipeline, combining all the style and layout calculations into a single batch so it all happens once, in a single frame tick, instead of across multiple frames. see detecting and avoiding synchronous reflow below for more information. this also means that requestanimationframe() is not a good place to put queries for layout or style information. detecting and avoiding synchronous style flushes what are style flushes? when css is applied to a document (html or xul, it doesn’t matter), the browser does calculations to figure out which css sty...
...of styles being applied). it is expected that over time, script will update the dom, requiring us to recalculate styles. normally, the changes to the dom just result in the standard style calculation occurring immediately after the javascript has finished running during the 16ms window, inside the "style" step. that's the ideal scenario. however, it's possible for script to do things that force multiple style calculations (or style flushes) to occur synchronously during the javascript part of the 16 ms window. the more of them there are, the more likely they'll exceed the 16ms frame budget. if that happens, some of them will be postponed until the next frame (or possibly multiple frames, if necessary), this skipping of frames is called jank. generally speaking, you force a synchronous style flu...
...tion caused a style change in the dom without you knowing it. note that given the same changes to the dom of a chrome ui document, a single synchronous uninterruptible reflow is no more computationally expensive than an interruptible reflow triggered by the 16ms tick. it is, however, advantageous to strive for reflow to only occur in the one place (the layout step of the 16ms tick) as opposed to multiple times during the 16ms tick (which has a higher probability of running through the 16ms budget). how do i avoid triggering uninterruptible reflow? here's a list of things that javascript can ask for that can cause uninterruptible reflow, to help you think about the problem. note that some items in the list may be browser-specific or subject to change, and that an item not occurring explicitly in...
...paint flashing for browser chrome by setting nglayout.debug.paint_flashing_chrome to true. you can activate paint flashing for web content by setting nglayout.debug.paint_flashing to true. after enabling these, exercise your function and see what’s painting. see a lot of flashing / colors? that means a lot of painting is going on. the worst case is called over-painting. this is when you draw multiple times over the same space. unless transparency is involved, all but the last painting will be overwritten, becoming unnecessary. if you can find ways to avoid doing this, you can save substantial time. keep in mind that painting occurs on the main thread. remember, too, that the goal is to have as little happen on the main thread as possible. that means that finding and removing (when possible) ...

Investigating leaks using DMD heap scan mode
ild. non-optimized dmd builds will generate better stack traces, but they can be so slow as to be useless. the build is going to be very slow, so you may need to disable some shutdown checks. first, in toolkit/components/terminator/nsterminator.cpp, delete everything in runwatchdog but the call to ns_setcurrentthreadname. this will keep the watch dog from killing the browser when shut down takes multiple minutes. secondly, you may need to comment out the call to moz_crash("nss_shutdown failed"); in xpcom/build/xpcominit.cpp, as this also seems to trigger when shutdown is extremely slow. you need the cycle collector analysis script find_roots.py, which can be downloaded as part of this repo on github. generating logs the next step is to generate a number of log files. you need to get a shutdow...
...hutdown faster. the allowed values here are the same as those returned by xre_getprocesstype(), so adjust as needed. finally, the --dmd option need to be passed in so that dmd will be run. --mode=scan is needed so that when we get a dmd log the entire contents of each block of memory is saved for later analysis. with that command line in hand, you can start firefox. be aware that this may take multiple minutes if you have optimization disabled. once it has started, go through the steps you need to reproduce your leak. if your leak is a ghost window, it can be handy to get an about:memory report and write down the pid of the leaking process. you may want to wait 10 or so seconds after this to make sure as much as possible is cleaned up. next, exit the browser. this will cause a lot of logs to ...
...3662 inner https://www.example.com/ * cc-edges.15873.log: the first part is the file name where it was found. 15873 is the pid of the process that leaked. you'll want to write down the name of the file and the pid. let's call the file $cclog and the pid $pid. * 0x7f0897082c00: this is the address of the leaking window. you'll also want to write that down. let's call this $winaddr. if there are multiple files, you'll end up with one that looks like cc-edges.$pid.log and one or more that look like cc-edges.$pid-$n.log for various values of $n. you want the one with the largest $n, as this was recorded the latest, and so it will contain the least non-garbage. identifying the root in the cycle collector log the next step is to figure out why the cycle collector could not collect the window, using...
...st is being held alive by the very same script element that is causing the window leak! this strongly suggests that there is a cycle of strong references between the script element and the load request. i then added the missing field to the traverse and unlink methods of scriptloadrequest, and confirmed that i couldn’t reproduce the leak. keep in mind that you may need to run block_analyzer.py multiple times. for instance, if the script element was being held alive by some container being held alive by a runnable, we’d first need to figure out that the container was holding the element. if it isn’t possible to figure out what is holding that alive, you’d have to run block_analyzer again. this isn’t too bad, because unlike ref count logging, we have the full state of memory in our existi...

Memory reporting
wing 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 bugs in the past with counter-based reporters. the cost of reporting isn't incurred unless the memory reporter is queried. they provide more information to dmd, which is a tool that helps keep about:memory's "heap-unclassified" number low. see below for more details. sometimes counter-based reporters are unavoidable, particularly when writing memory reporters for third-party code that cannot ...
...zeofincludingthis when it is virtual. d::sizeofincludingthis is identical to b::sizeofincludingthis. you might think that d could just inherit sizeofincludingthis from b. in some cases this works, but there's a lot of c++ subtlety involving the amallocsizeof(this) and whether this actually points to the start of the allocated object or somewhere in its middle. this is doubly true if d features multiple inheritance. and if amallocsizeof is passed a pointer that doesn't point to the start of an object it will give bogus results or even crash. so, if in doubt, define d::sizeofincludingthis and you should be safe. the override annotations say that d's methods override the corresponding methods in b. on supporting compilers it gets expanded to the override keyword. it helps prevent accidentally hav...
... of an object, it might be called sizeoffoo. try to make the names descriptive enough that it's clear what's being measured. sometimes you might want to split the measurements of an object into two or more numbers, e.g. because you want to show them separately in about:memory. in this case it's often clearer to increment the numbers rather than assigning to them, especially if you're measuring multiple entities and summing their measurements. for example: void foobar::addsizeofexcludingthis(nsmallocsizeoffun amallocsizeof, size_t *afoosizeout, size_t* abarsizeout) const { *afoosizeout += ...; *abarsizeout += ...; } alternatively, you could create a struct: struct foobarsizes { size_t mfoo; size_t mbar; foobarsizes() { mozilla::podzero(thi...
...ters for that memory. this helps drive about:memory's heap-unclassified number down. it detects certain defects in existing heap memory reporters: if non-heap memory is reported, or if a heap block is partially reported or double-reported. dmd is absolutely crucial; these things cannot be done without it. that's why the integration of dmd and memory reporters is so important and thus mentioned multiple times above. see the instructions on how to run dmd. ...

NSS functions
questattributes mxr 3.10 and later cert_startcrlentryextensions mxr 3.10 and later cert_startcrlextensions mxr 3.10 and later cert_uncachecrl mxr 3.10 and later cert_verifycertname mxr 3.2 and later cert_verifycacertforusage mxr 3.6 and later cert_verifycert mxr 3.2 and later. ...
...ame mxr 3.2 and later cert_verifycacertforusage mxr 3.6 and later cert_verifycert mxr 3.2 and later. if you need to verify for multiple usages use cert_verifycertificate cert_verifycertificate mxr 3.6 and later cert_verifycertificatenow mxr 3.6 and later cert_verifycertnow mxr 3.2 and later. ...
... mxr 3.2 and later pk11_generaterandomonslot mxr 3.11 and later pk11_getalltokens mxr 3.2 and later pk11_getallslotsforcert mxr 3.12 and later pk11_getbestkeylength mxr 3.2 and later pk11_getbestslot mxr 3.2 and later pk11_getbestslotmultiple mxr 3.2 and later pk11_getbestwrapmechanism mxr 3.2 and later pk11_getblocksize mxr 3.2 and later pk11_getcertfromprivatekey mxr 3.9.3 and later pk11_getcurrentwrapindex mxr 3.2 and later pk11_getdefaultarray mxr 3.8 and later pk11...
...2 and later nss_cmsdecoder_cancel mxr 3.2 and later nss_cmsdecoder_finish mxr 3.2 and later nss_cmsdecoder_start mxr 3.2 and later nss_cmsdecoder_update mxr 3.2 and later nss_cmsdigestcontext_cancel mxr 3.2 and later nss_cmsdigestcontext_finishmultiple mxr 3.2 and later nss_cmsdigestcontext_finishsingle mxr 3.2 and later nss_cmsdigestcontext_startmultiple mxr 3.2 and later nss_cmsdigestcontext_startsingle mxr 3.2 and later nss_cmsdigestcontext_update mxr 3.2 and later nss_cmsdigesteddata_create mxr ...

NSS tools : modutil
n also create certificate, key, and module security database files. the tasks associated with security module database management are part of a process that typically also involves managing key databases and certificate databases. options running modutil always requires one (and only one) option to specify the type of module operation. each option may take arguments, anywhere from none to multiple arguments. options -add modulename add the named pkcs #11 module to the database. use this option with the -libfile, -ciphers, and -mechanisms arguments. -changepw tokenname change the password on the named token. if the token has not been initialized, this option initializes the password. use this option with the -pwfile and -newpwfile arguments. a password is equivalent to a personal i...
...ommand.) modutil -rawlist -dbdir sql:/home/my/sharednssdb name="nss internal pkcs #11 module" parameters="configdir=. certprefix= keyprefix= secmod=secmod.db flags=readonly " nss="trustorder=75 cipherorder=100 slotparams={0x00000001=[slotflags=rsa,rc4,rc2,des,dh,sha1,md5,md2,ssl,tls,aes,random askpw=any timeout=30 ] } flags=internal,critical" setting a default provider for security mechanisms multiple security modules may provide support for the same security mechanisms. it is possible to set a specific security module as the default provider for a specific security mechanism (or, conversely, to prohibit a provider from supplying those mechanisms). modutil -default modulename -mechanisms mechanism-list to set a module as the default provider for mechanisms, use the -default command with ...
...put it in a file that is passed to signtool. sample script for example, the pkcs #11 installer script could be in the file pk11install. if so, the metainfo file for signtool includes a line such as this: + pkcs11_install_script: pk11install the script must define the platform and version number, the module name and file, and any optional information like supported ciphers and mechanisms. multiple platforms can be defined in a single install file. forwardcompatible { irix:6.2:mips sunos:5.5.1:sparc } platforms { winnt::x86 { modulename { "example module" } modulefile { win32/fort32.dll } defaultmechanismflags{0x0001} defaultcipherflags{0x0001} files { win32/setup.exe { executable relativepath { %temp%/setup.exe } } win32/setup.hlp { relativepath { %temp%/setup.hlp } } win32...
...platform. if this attribute is omitted, a default of 777 is assumed. nss database types nss originally used berkeleydb databases to store security information. the last versions of these legacy databases are: o cert8.db for certificates o key3.db for keys o secmod.db for pkcs #11 module information berkeleydb has performance limitations, though, which prevent it from being easily used by multiple applications simultaneously. nss has some flexibility that allows applications to use their own, independent database engine while keeping a shared database and working around the access issues. still, nss requires more flexibility to provide a truly shared security database. in 2009, nss introduced a new set of databases that are sqlite databases rather than berkleydb. these new databases ...

certutil
and managing certificates in the certificate database. this document discusses certificate and key database management. for information security module database management, see the modutil manpages. options and arguments running certutil always requires one (and only one) option to specify the type of certificate operation. each option may take arguments, anywhere from none to multiple arguments. run the command option and -h to see the arguments available for each command option. options options specify an action and are uppercase. -a add an existing certificate to a certificate database. the certificate database should already exist; if one is not present, this option will initialize one by default. -b run a ser...
...te chain verification process. certutil prompts for the certificate constraint extension to select. x.509 certificate extensions are described in rfc 5280. -3 add an authority key id extension to a certificate that is being created or added to a database. this extension supports the identification of a particular certificate, from among multiple certificates associated with one subject name, as the correct issuer of a certificate. the certificate database tool will prompt you to select the authority key id extension. x.509 certificate extensions are described in rfc 5280. -4 add a crl distribution point extension to a certificate that is being created or added to a d...
...eemail member's thawte consulting (pty) ltd. id < 1> rsa 40defeeb522ade11090eacebaaf1196a172127df example domain administrator cert < 2> rsa 1d0b06f44f6c03842f7d4f4a1dc78b3bcd1b85a5 john smith user cert there are ways to narrow the keys listed in the search results: o to return a specific key, use the -n name argument with the name of the key. o if there are multiple security devices loaded, then the -h tokenname argument can search a specific token or all tokens. o if there are multiple key types available, then the -k key-type argument can search a specific type of key, like rsa, dsa, or ecc. listing security modules the devices that can be used to store certificates -- both internal databases and external devices like smart c...
...file. $ certutil -b -i /path/to/batch-file nss database types nss originally used berkeleydb databases to store security information. the last versions of these legacy databases are: o cert8.db for certificates o key3.db for keys o secmod.db for pkcs #11 module information berkeleydb has performance limitations, though, which prevent it from being easily used by multiple applications simultaneously. nss has some flexibility that allows applications to use their own, independent database engine while keeping a shared database and working around the access issues. still, nss requires more flexibility to provide a truly shared security database. in 2009, nss introduced a new set of databases that are sqlite databases rather than berkleydb. these n...

NSS tools : modutil
rtificate, key, and module security database files. the tasks associated with security module database management are part of a process that typically also involves managing key databases and certificate databases. options running modutil always requires one (and only one) option to specify the type of module operation. each option may take arguments, anywhere from none to multiple arguments. options -add modulename add the named pkcs #11 module to the database. use this option with the -libfile, -ciphers, and -mechanisms arguments. -changepw tokenname change the password on the named token. if the token has not been initialized, this option initializes the password. use this option with the -pwfile and -n...
... modutil -rawlist -dbdir sql:/home/my/sharednssdb name="nss internal pkcs #11 module" parameters="configdir=. certprefix= keyprefix= secmod=secmod.db flags=readonly " nss="trustorder=75 cipherorder=100 slotparams={0x00000001=[slotflags=rsa,rc4,rc2,des,dh,sha1,md5,md2,ssl,tls,aes,random askpw=any timeout=30 ] } flags=internal,critical" setting a default provider for security mechanisms multiple security modules may provide support for the same security mechanisms. it is possible to set a specific security module as the default provider for a specific security mechanism (or, conversely, to prohibit a provider from supplying those mechanisms). modutil -default modulename -mechanisms mechanism-list to set a module as the default provider for mechanisms, use the -default c...
... passed to signtool. sample script for example, the pkcs #11 installer script could be in the file pk11install. if so, the metainfo file for signtool includes a line such as this: + pkcs11_install_script: pk11install the script must define the platform and version number, the module name and file, and any optional information like supported ciphers and mechanisms. multiple platforms can be defined in a single install file. forwardcompatible { irix:6.2:mips sunos:5.5.1:sparc } platforms { winnt::x86 { modulename { "example module" } modulefile { win32/fort32.dll } defaultmechanismflags{0x0001} defaultcipherflags{0x0001} files { win32/setup.exe { executable relativepath { %temp%/setup.exe }...
... is omitted, a default of 777 is assumed. nss database types nss originally used berkeleydb databases to store security information. the last versions of these legacy databases are: o cert8.db for certificates o key3.db for keys o secmod.db for pkcs #11 module information berkeleydb has performance limitations, though, which prevent it from being easily used by multiple applications simultaneously. nss has some flexibility that allows applications to use their own, independent database engine while keeping a shared database and working around the access issues. still, nss requires more flexibility to provide a truly shared security database. in 2009, nss introduced a new set of databases that are sqlite databases rather than berkleydb. these n...

JSAPI User Guide
do not need to call js_initclass to make a new instance of that class—otherwise there would be a chicken-and-egg problem making the global object—but you should call js_initclass if you require a constructor function for script authors to call via new, and/or a class prototype object (myclass.prototype) for authors to extend with new properties at run time. in general, if you want to support multiple instances that share behavior, use js_initclass. protoobj = js_initclass(cx, globalobj, nullptr, &my_class, /* native constructor function and min arg count */ myclass, 0, /* prototype object properties and methods -- these will be "inherited" by all instances through d...
...call a global function named "foo" that takes no arguments. */ ok = js_callfunctionname(cx, globalobj, "foo", 0, 0, &rval); jsval argv[2]; /* call a function in obj's scope named "method", passing two arguments. */ argv[0] = . . .; argv[1] = . . .; ok = js_callfunctionname(cx, obj, "method", 2, argv, &rval); jscontext you should never create more than one jscontext per jsruntime. support for multiple jscontexts per jsruntime will be removed in the future. if your application creates multiple runtimes, the application may need to know which runtime a context is associated with. in this case, use js_getruntime. use js_setcontextprivate and js_getcontextprivate to associate application-specific data with a context. initializing built-in and global js objects for a complete list of built-in o...
...ent, the unicode versions take a jschar * argument, usually with a separate argument specifying the length of the string in jschars. compiled scripts the easiest way to run a script is to use js_evaluatescript, which compiles and executes the script in one go. but sometimes an application needs to run a script many times. in this case, it may be faster to compile the script once and execute it multiple times. the jsapi provides a type, jsscript, that represents a compiled script. the life cycle of a jsscript looks like this: the application compiles some javascript code using js_compilescript, js_compileutf8file, or js_compilefilehandle. these functions return a pointer to a new jsscript. the application calls js_executescript (or js_executescriptpart) any number of times. it is safe to...
...provides a type, jsscript, that represents a compiled script. the life cycle of a jsscript looks like this: the application compiles some javascript code using js_compilescript, js_compileutf8file, or js_compilefilehandle. these functions return a pointer to a new jsscript. the application calls js_executescript (or js_executescriptpart) any number of times. it is safe to use a jsscript in multiple different contexts, but only within the jsruntime and global in which it was created. here is some example code using a compiled script: /* * compile a script and execute it repeatedly until an * error occurs. (if this ever returns, it returns false. * if there's no error it just keeps going.) */ jsbool compileandrepeat(jscontext *cx, const char *filename) { jsscript *script; scr...

JS_THREADSAFE
we have recently made major changes to this feature. until recently, sharing objects among threads would mostly work, although scripts could easily make it crash. we have now completely removed that feature. each thread that uses the javascript engine must essentially operate in a totally separate region of memory. ...
...ns that any potentially long-running operation in a native must be bracketed with calls to js_suspendrequest() and js_resumerequest(). jsbool socket_recv(jscontext *cx, unsigned int argc, jsval *vp) { ... rc = js_suspendrequest(cx); read_size = recv(socket, buf, size, flags); js_resumerequest(cx, rc); ... } garbage collection requests help make garbage collection safe when multiple threads are using the jsapi. for each thread that is in a request: almost any call into the jsapi may trigger garbage collection; but garbage collection does not happen at any other time (such as, for example, at the moment before the return value of js_newobject is assigned to a rooted variable). these are actually the same rules that apply to single-threaded jsapi programs. but in multith...
...re likely to crash. this is because in single-threaded programs, a random call into the jsapi is actually pretty unlikely to trigger gc, especially if the calling thread has not been using up a lot of memory. in a multithreaded program, even if the calling thread has been idle, other threads may be active or may call js_gc(). the above rules mean that at any given moment, there can be either (a) multiple threads in active requests, or (b) one thread doing gc and all requests suspended. when one thread calls js_gc or otherwise finds that garbage collection is necessary, it must wait for all other threads that are in requests to pause before garbage collection can occur. to keep this wait time to a minimum, applications must avoid long-running requests. the recommended technique in spidermonkey 1.8...
...s, strings, and so on. sharing native functions and private data among threads in a js_threadsafe build, spidermonkey's internal data structures that represent javascript values are single-thread-only. in a debug build, this is enforced with assertions. however, spidermonkey does not protect the application's data structures. jsnatives and other callback functions can be called concurrently by multiple threads. multiple threads can end up accessing private data or c/c++ global variables at the same time. it is up to the application to practice safe threading. sharing contexts among threads ordinarily, a jscontext is created, used, and destroyed by a single thread. this makes sense, as a context can only be used by one thread at a time. however, there are a few cases where an application might...

Recommended Drag Types - Web APIs
a of two types: text/uri-list, and text/plain. both types should use the link’s url for their data. for example: var dt = event.datatransfer; dt.setdata("text/uri-list", "https://www.mozilla.org"); dt.setdata("text/plain", "https://www.mozilla.org"); as usual, set the text/plain type last, as a fallback for the text/uri-list type. note: the url type is uri-list with an i, not an l. to drag multiple links, separate each link inside the text/uri-list data with a crlf linebreak. lines that begin with a number sign (#) are comments, and should not be considered urls. you can use comments to indicate the purpose of a url, the title associated with a url, or other data. the text/plain fallback for multiple links should include all urls, but no comments. for example, this sample text/uri-list ...
...for convenience, the special type url may be used to refer to the first valid link within data for the text/uri-list type. ...
...ozsetdataat() method to assign the data. similarly, when retrieving the data, you must use the mozgetdataat() method. event.datatransfer.mozsetdataat("application/x-moz-file", file, 0); if possible, include the file url of the file using both the text/uri-list and text/plain types. these types should be added afterward so that the more specific application/x-moz-file type has higher priority. multiple files will be received during a drop as multiple items in the data transfer. see dragging and dropping multiple items for more details about this. the following example shows how to create an area for receiving dropped files: <listbox ondragenter="return checkdrag(event)" ondragover="return checkdrag(event)" ondrop="dodrop(event)"/> <script> function checkdrag(event) { retu...
...ath); var file = cc['@mozilla.org/file/local;1'].createinstance(components.interfaces.nsilocalfile); file.initwithpath(dir.path); file.appendrelativepath(name); console.log("output final path is =" + file.path); // now you can write or copy the file yourself… } } } see also html drag and drop api (overview) drag operations dragging and dropping multiple items html5 living standard: drag and drop ...

Media Source API - Web APIs
f flash, with technologies like flash media server serving video streams using the rtmp protocol. the mse standard with media source extensions (mse), this is changing. mse allows us to replace the usual single track src value fed to media elements with a reference to a mediasource object, which is a container for information like the ready state of the media for being played, and references to multiple sourcebuffer objects that represent the different chunks of media that make up the entire stream. mse gives us finer grained control over how much and how often content is fetched, and some control over memory usage details, such as when buffers are evicted. it lays the groundwork for adaptive bitrate streaming clients (such as those using dash or hls) to be built on its extensible api. creating...
...ith a simple static file server, which is also great for cdns. this is in direct contrast with previous streaming solutions that required expensive licenses for proprietary non-standard client/server protocol implementations. the two most common use cases for dash involve watching content “on demand” or “live.” on demand allows a developer to take their time transcoding the assets into multiple resolutions of various quality. live profile content can introduce latency due to its transcoding and broadcasting, so dash is not suitable for real time communication like webrtc is. it can however support significantly more client connections than webrtc. there are numerous available free and open source tools for transcoding content and preparing it for use with dash, dash file servers, and ...
... open source tools for transcoding content and preparing it for use with dash, dash file servers, and dash client libraries written in javascript. interfaces mediasource represents a media source to be played via an htmlmediaelement object. sourcebuffer represents a chunk of media to be 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 segme...
...out 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 a media stream. htmlmediaelement.seekable when a mediasource object is played by an html media element, this property will return a timeranges object that contains the time ranges that...

Selection - Web APIs
g currently being represented by the selection object, i.e. the currently selected text. notes string representation of a selection calling the selection.tostring() method returns the text contained within the selection, e.g.: var selobj = window.getselection(); window.alert(selobj); note that using a selection object as the argument to window.alert will call the object's tostring method. ...
... selection and input focus selection and input focus (indicated by document.activeelement) have a complex relationship that varies by browser. ...
..., accessed as follows: var selobj = window.getselection(); var range = selobj.getrangeat(0); selobj is a selection object range is a range object as the selection api specification notes, the selection api was initially created by netscape and allowed multiple ranges (for instance, to allow the user to select a column from a <table>). however, browsers other than gecko did not implement multiple ranges, and the specification also requires the selection to always have a single range. selection and input focus selection and input focus (indicated by document.activeelement) have a complex relationship that varies by browser. in cross-browser compatible code, it's better to handle them separately. safari and chrome (unlike firefox) currently focus the element containing selection when mod...
...he focus is the end of the selection that moves. this is not the same as the focused element of the document, as returned by document.activeelement. range a range is a contiguous part of a document. a range can contain entire nodes as well as portions of nodes (such as a portion of a text node). a user will normally only select a single range at a time, but it's possible for a user to select multiple ranges (e.g., by using the control key). a range can be retrieved from a selection as a range object. range objects can also be created via the dom and programmatically added or removed from a selection. specifications specification status comment selection apithe definition of 'selection' in that specification. working draft the selection api specification is bas...

Web Audio API - Web APIs
elementaudiosourcenode the mediaelementaudiosourcenode interface represents an audio source consisting of an html5 <audio> or <video> element. it is an audionode that acts as an audio source. mediastreamaudiosourcenode the mediastreamaudiosourcenode interface represents an audio source consisting of a mediastream (such as a webcam, microphone, or a stream being sent from a remote computer). if multiple audio tracks are present on the stream, the track whose id comes first lexicographically (alphabetically) is used. it is an audionode that acts as an audio source. mediastreamtrackaudiosourcenode a node of type mediastreamtrackaudiosourcenode represents an audio source whose data comes from a mediastreamtrack. when creating the node using the createmediastreamtracksource() method to create the ...
... the delaynode interface represents a delay-line; an audionode audio-processing module that causes a delay between the arrival of an input data and its propagation to the output. dynamicscompressornode the dynamicscompressornode interface provides a compression effect, which lowers the volume of the loudest parts of the signal in order to help prevent clipping and distortion that can occur when multiple sounds are played and multiplexed together at once. gainnode the gainnode interface represents a change in volume. it is an audionode audio-processing module that causes a given gain to be applied to the input data before its propagation to the output. waveshapernode the waveshapernode interface represents a non-linear distorter. it is an audionode that use a curve to apply a waveshaping dist...
...the key...
...the keyboard allows you to switch among the standard waveforms as well as one custom waveform, and you can control t...

ARIA annotations - Accessibility
le="deletion" above). role="comment" — semantically denotes a comment/reaction to some content on the page, or to a previous comment. to provide a semantic association between the document content being annotated and the annotation, an aria-details attribute can be set on the annotated content that contains the id of the annotated element. aria-details has been updated so that it can support multiple ids — this makes sense, for example you can easily envisage having multiple comments relating to the same bit of text. aria annotation roles and objects are currently exposed in: firefox from version 75 onwards, on windows and linux (on macos, we are first waiting for apple to define what safari will expose as apple-dialect attributes to voiceover, and will then follow suit.) chrome from v...
...aningful semantics contained within. ...
...div role="comment" id="thread-1" data-author="chris"> <h3>chris said</h3> <p class="comment-text">i really think this moment could use more cowbell.</p> <p><time datetime="2019-03-30t19:29">march 30 2019, 19:29</time></p> </div> note: if for some reason you can’t use the <mark> element in your application, you could also use <span role="mark"></span>. ...
..." data-author="chris"> <h3>chris said</h3> <p class="comment-text">i really think this moment could use more cowbell.</p> <p><time datetime="2019-03-30t19:29">march 30 2019, 19:29</time></p> </div> note: if for some reason you can’t use the <mark> element in your application, you could also use <span role="mark"></span>. ...

Operable - Accessibility
layout. 2.4.4 link purpose (in context) (a) the purpose/destination of a link can be determined from the link text, or from its surroundings (e.g. the surrounding text). exceptions are where the link purpose is ambiguous to all users (see ambiguous to users in general for a useful explanation of this). see meaningful text labels. ...
...ral for a useful explanation of this). see meaningful text labels. also note that you should minimize instances where multiple copies of the same text are linked to different places. this can cause problems for screenreader users, who will often bring up a list of the links out of context — several links all labelled "click here", "click here", "click here" would be confusing. 2.4.5 multiple navigation mechanisms (aa) you should provide at least two general navigation mechanisms to find pages on your web site, for example navigation menu, breadcrumb trail, site search, site map, list of related links, etc. the only exception to this is where a page is one step in a process, so should only logically have links to the previous and next steps. most of these mechanism...
...igation menu, styling links as buttons. 2.4.6 headings and labels (aa) heading (e.g. <h2>) and <label> elements clearly describe the purpose of the content and form elements they are supposed to be describing. see ui controls, meaningful text labels, the basics of headings and paragraphs, the <label> element. note that you should avoid duplicating headings or labels (e.g. multiple instances of "further information"), unless the structure allows you to differentiate between them easily. 2.4.7 visible focus for focusable elements (aa) when tabbing through focusable elements such as links or form inputs, there should be a visual indicator to show you which element currently has focus. this is usually a dotted or blue outline by default (depending on browser, p...
...are in the site, for example a breadcrumb trail, sitemap or text such as "form page 2 of 10". 2.4.9 link purpose (link only) (aaa) this criterion builds on 2.4.4, stating that to conform to aaa, the purpose/destination of a link should be determinable from the link text alone, even if out of context. see meaningful text labels. also note that you should minimize instances where multiple copies of the same text are linked to different places. this can cause problems for screenreader users, who will often bring up a list of the links out of context — several links all labelled "click here", "click here", "click here" would be confusing. 2.4.10 section headings (aaa) as well as creating a useful document structure, headings should also accurately describe and bre...

Grid template areas - CSS: Cascading Style Sheets
o); grid-template-areas: "hd hd hd hd hd hd hd hd hd" "sd sd sd main main main main main main" ". . . ...
...you can add extra white space in order to keep your columns neatly lined up in the value of grid-template-areas. ...
...you can add extra white space in order to keep your columns neatly lined up in the value of grid-template-areas. you can see that i have done this in order that the hd and ft line up with main. ...
...there is no white space between the full stops it will be counted as one cell. for a complex layout there is a benefit to having the rows and columns neatly aligned. it means that you can actually see, right there in the css, what this layout looks like. spanning multiple cells in our example each of the areas spans multiple grid cells and we achieve this by repeating the name of that grid area multiple times with white space between. you can add extra white space in order to keep your columns neatly lined up in the value of grid-template-areas. you can see that i have done this in order that the hd and ft line up with main. the area that you create by chaining the area names must be rectangular, at this point there is no way to create an l-shaped area. the specification does note that a future...

box-lines - CSS: Cascading Style Sheets
this is a property of the original css flexible box layout module draft, and has been replaced by a newer standard. see flexbox for information about the current standard. the box-lines css property determines whether the box may have a single or multiple lines (rows for horizontally oriented boxes, columns for vertically oriented boxes). /* keyword values */ box-lines: single; box-lines: multiple; /* global values */ box-lines: inherit; box-lines: initial; box-lines: unset; by default a horizontal box will lay out its children in a single row, and a vertical box will lay out its children in a single column. this behavior can be changed using the box-lines property. the default value is single, which means that all elements will be placed in a single row or column, and any elemen...
... box-lines: unset; by default a horizontal box will lay out its children in a single row, and a vertical box will lay out its children in a single column. this behavior can be changed using the box-lines property. the default value is single, which means that all elements will be placed in a single row or column, and any elements that don't fit will simply be considered overflow. if a value of multiple is specified, however, then the box is allowed to expand to multiple lines (that is, multiple rows or columns) in order to accommodate all of its children. the box must attempt to fit its children on as few lines as possible by shrinking all elements down to their minimum widths or heights if necessary. if the children in a horizontal box still do not fit on a line after being reduced to their m...
...e computes flexes independently, so only elements on that line are considered when evaluating box-flex and box-flex-groups. the packing of elements in a line, as specified by the box-pack property, is also computed independently for each line. syntax the box-lines property is specified as one of the keyword values listed below. values single box elements lay out in a single row or column. multiple box elements layout in multiple rows or columns. formal definition initial valuesingleapplies tobox elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax single | multiple examples simple usage example in the original version of the spec, box-lines allowed you to specify that you wanted your flex container's children to wrap onto multiple lines. this was only ...
...inheritednocomputed valueas specifiedanimation typediscrete formal syntax single | multiple examples simple usage example in the original version of the spec, box-lines allowed you to specify that you wanted your flex container's children to wrap onto multiple lines. this was only supported in webkit-based browsers, with a prefix. div { display: box; box-orient: horizontal; box-lines: multiple; } the modern flexbox equivalent is flex-wrap. specifications not part of any standard. ...

text-decoration-line - CSS: Cascading Style Sheets
the text-decoration-line css property sets the kind of decoration that is used on text in an element, such as an underline or overline. 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. ...
...s://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 shorthand property instead. syntax /* single keyword */ text-decoration-line: none; text-decoration-line: underline; text-decoration-line: overline; text-decoration-line: line-through; text-decoration-line: blink; /* multiple keywords */ text-decoration-line: underline overline; /* two decoration lines */ text-decoration-line: overline underline line-through; /* multiple decoration lines */ /* global values */ text-decoration-line: inherit; text-decoration-line: initial; text-decoration-line: unset; the text-decoration-line property is specified as none, or one or more space-separated values from the list below. values none produces no text decoration. underline each line of text has a decorative line beneath it. overline each line of text has a decor...
... ...

itemprop - HTML: Hypertext Markup Language
div> <div id="c"> <p>band: <span itemprop="name">jazz band</span></p> <p>size: <span itemprop="size">12</span> players</p> </div> this gives the same result as the previous example. the first item has two properties, "name", set to "amanda", and "band", set to another item. that second item has two further properties, "name", set to "jazz band", and "size", set to "12". an item can have multiple properties with the same name and different values. ice cream with two flavors <div itemscope> <p>flavors in my favorite ice cream:</p> <ul> <li itemprop="flavor">lemon sorbet</li> <li itemprop="flavor">apricot sorbet</li> </ul> </div> this results in an item with two properties, both with the name "flavor" and having the values "lemon sorbet" and "apricot sorbet". an element introduci...
...d different values. ice cream with two flavors <div itemscope> <p>flavors in my favorite ice cream:</p> <ul> <li itemprop="flavor">lemon sorbet</li> <li itemprop="flavor">apricot sorbet</li> </ul> </div> this results in an item with two properties, both with the name "flavor" and having the values "lemon sorbet" and "apricot sorbet". an element introducing a property can also introduce multiple properties at once, to avoid duplication when some of the properties have the same value. an item with two properties, "favorite-color" and "favorite-fruit", both set to the value "orange" <div itemscope> <span itemprop="favorite-color favorite-fruit">orange</span> </div> note: there is no relationship between the microdata and the content of the document where the microdata is marked ...
...haracters (u+003a colon) and is used as a proprietary item property name (again, one not defined in a public specification). note: the rules above disallow ":" characters in non-url values because otherwise they could not be distinguished from urls. values with "." characters are reserved for future extensions. space characters are disallowed because otherwise the values would be parsed as multiple tokens. values the property value of a name-value pair is as given for the first matching case in the following list: if the element has an itemscope attribute the value is the item created by the element. if the element is a meta element the value is the value of the element's content attribute if the element is an audio, embed, iframe, img, source, track, or video ...
...e value is the element's datetime value otherwise the value is the element's textcontent. if a property's value is a url, the property must be specified using a url property element. the url property elements are the a, area, audio, embed, iframe, img, link, object, source, track, and video elements. name order names are unordered relative to each other, but if a particular name has multiple values, they do have a relative order. in the following example, the "a" property has the values "1" and "2", in that order, but whether the "a" property comes before the "b" property or not is not important <div itemscope> <p itemprop="a">1</p> <p itemprop="a">2</p> <p itemprop="b">test</p> </div> the following is equivalent <div itemscope> <p itemprop="b">test</p> <p itemprop="a">1</p>...

HTML documentation index - HTML: Hypertext Markup Language
racters (as utf-16 code units) the user can enter into an <input> or <textarea>. this must be an integer value 0 or higher. if no minlength is specified, or an invalid value is specified, the input has no minimum length. this value must be less than or equal to the value of maxlength, otherwise the value will never be valid, as it is impossible to meet both criteria. 44 html attribute: multiple attribute, attributes, constraint validation the boolean multiple attribute, if set, means the form control accepts one or more values. valid for the email and file input types and the <select>, the manner by which the user opts for multiple values depends on the form control. 45 html attribute: pattern attribute, attributes, constraint validation api, reference the...
... <input> elements of type datetime-local create input controls that let the user easily enter both a date and a time, including the year, month, and day as well as the time in hours and minutes. 125 <input type="email"> email, forms, html, html forms, input type, reference <input> elements of type email are used to let the user enter and edit an e-mail address, or, if the multiple attribute is specified, a list of e-mail addresses. 126 <input type="file"> directory picker, file, file picker, files, form input, html, html forms, input type, reference, type <input> elements with type="file" let the user choose one or more files from their device storage. once chosen, the files can be uploaded to a server using form submission, or manipulated using javasc...
...ence, web <nextid> is an obsolete html element that served to enable the next web designing tool to generate automatic name labels for its anchors. 164 <nobr>: the non-breaking text element (obsolete) element, html, non-standard, obsolete, reference, web, nobr the non-standard, obsolete html <nobr> element prevents the text it contains from automatically wrapping across multiple lines, potentially resulting in the user having to scroll horizontally to see the entire width of the text. 165 <noembed>: the embed fallback element (obsolete) element, embedded content, embedding, html, non-standard, obsolete, reference, noembed the <noembed> element is an obsolete, non-standard way to provide alternative, or "fallback", content for browsers that do not sup...
...all> element represents side-comments and small print, like copyright and legal text, independent of its styled presentation. by default, it renders text within it one font-size smaller, such as from small to x-small. 193 <source>: the media or image source element element, html, html embedded content, media, reference, web, web performance the html <source> element specifies multiple media resources for the <picture>, the <audio> element, or the <video> element. 194 <spacer> element, html, obsolete, reference, web <spacer> is an obsolete html element which allowed insertion of empty spaces on pages. it was devised by netscape to accomplish the same effect as a single-pixel layout image, which was something web designers used to use to add white spaces to ...

HTTP Messages - HTTP
in http/1.1, and earlier versions of the protocol, these messages were openly sent across the connection. ...
...s have one: requests fetching resources, like get, head, delete, or options, usually don't need one. some requests send data to the server in order to update it: as often the case with post requests (containing html form data). bodies can be broadly divided into two categories: single-resource bodies, consisting of one single file, defined by the two headers: content-type and content-length. multiple-resource bodies, consisting of a multipart body, each containing a different bit of information. this is typically associated with html forms. http responses status line the start line of an http response, called the status line, contains the following information: the protocol version, usually http/1.1. a status code, indicating success or failure of the request. common status codes are ...
...need for corresponding payload (like 201 created or 204 no content) usually don't. bodies can be broadly divided into three categories: single-resource bodies, consisting of a single file of known length, defined by the two headers: content-type and content-length. single-resource bodies, consisting of a single file of unknown length, encoded by chunks with transfer-encoding set to chunked. multiple-resource bodies, consisting of a multipart body, each containing a different section of information. these are relatively rare. http/2 frames http/1.x messages have a few drawbacks for performance: headers, unlike bodies, are uncompressed. headers are often very similar from one message to the next one, yet still repeated across connections. no multiplexing can be done. several connection...
... http frames are now transparent to web developers. this is an additional step in http/2, between http/1.1 messages and the underlying transport protocol. ...

SyntaxError: unterminated string literal - JavaScript
ingle (') or double (") quotes. javascript makes no distinction between single-quoted strings and double-quoted strings. escape sequences work in strings created with either single or double quotes. to fix this error, check if: you have opening and closing quotes (single or double) for your string literal, you have escaped your string literal correctly, your string literal isn't split across multiple lines. examples multiple lines you can't split a string across multiple lines like this in javascript: var longstring = 'this is a very long string which needs to wrap across multiple lines because otherwise my code is unreadable.'; // syntaxerror: unterminated string literal instead, use the + operator, a backslash, or template literals. the + operator v...
...ring = 'this is a very long string which needs to wrap across multiple lines because otherwise my code is unreadable.'; // syntaxerror: unterminated string literal instead, use the + operator, a backslash, or template literals. the + operator variant looks like this: var longstring = 'this is a very long string which needs ' + 'to wrap across multiple lines because ' + 'otherwise my code is unreadable.'; or you can use the backslash character ("\") at the end of each line to indicate that the string will continue on the next line. make sure there is no space or any other character after the backslash (except for a line break), or as an indent; otherwise it will not work. that form looks like this: var longstring = 'this is ...
...y code is unreadable.'; or you can use the backslash character ("\") at the end of each line to indicate that the string will continue on the next line. make sure there is no space or any other character after the backslash (except for a line break), or as an indent; otherwise it will not work. ...
... as an indent; otherwise it will not work. ...

Codecs used by WebRTC - Web media technologies
w-delay applications such as mobile video and videoconferencing, as well as for platforms with lower performing video processing capabilities. our overview of avc and its features can be found in the main video codec guide. special parameter support requirements avc offers a wide array of parameters for controlling optional values. in order to improve reliability of webrtc media sharing across multiple platforms and browsers, it's required that webrtc endpoints that support avc handle certain parameters in specific ways. sometimes this simply means a parameter must (or must not) be supported. sometimes it means requiring a specific value for a parameter, or that a specific set of values be allowed. and sometimes the requirements are more intricate. parameters which are useful but not required ...
...s, though not required. unless signaled otherwise, the pixel aspect ratio is 1:1, indicating that pixels are square. other notes the payload format used for avc in webrtc is described in rfc 6184: rtp payload format for h.264 video. avc implementations for webrtc are required to support the special "filler payload" and "full frame freeze" sei messages; these are used to support switching among multiple input streams seamlessly. supported audio codecs the audio codecs which rfc 7874 mandates that all webrtc-compatible browsers must support are shown in the table below. mandatory audio codecs codec name browser compatibility opus chrome, edge, firefox, safari g.711 pcm (a-law) chrome, firefox, safari g.711 pcm (µ-law) chrome, firefox, safar...
...d its capabilities, and how other apis can support opus, in the corresponding section of our guide to audio codecs used on the web. both the speech and general audio modes should be supported. opus's scalability and flexibility are useful when dealing with audio that may have varying degrees of complexity. its support of in-band stereo signals allows support for stereo without complicating the demultiplexing process. the entire range of bit rates supported by opus (6 kbps to 510 kbps) is supported in webrtc, with the bit rate allowed to be dynamically changed. higher bit rates typically improve quality. bit rate recommendations given a 20 millisecond frame size, the following table shows the recommended bit rates for various forms of media. media type recommended bit rate range ...
...to what a landline telephone sounds like. it is generally used as a least common denominator to ensure that browsers can achieve an audio connection regardless of platforms and browsers, or as a fallback option in general. specifying and configuring codecs getting the supported codecs because a given browser and platform may have different availability among the potential codecs—and may have multiple profiles or levels supported for a given codec—the first step when configuring codecs for an rtcpeerconnection is to get the list of available codecs. to do this, you first have to establish a connection on which to get the list. there are a couple of ways you can do this. the most efficient way is to use the static method rtcrtpsender.getcapabilities() (or the equivalent rtcrtpreceiver.getcap...

dx - SVG: Scalable Vector Graphics
rey">svg</text> <!-- the same text with a shift along the x-axis --> <text dx="50%" x="10%" y="50%">svg</text> </svg> line { stroke: red; stroke-width: .5px; stroke-dasharray: 3px; } altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used. for <altglyph>, if it contains a single value, dx defines a shift along the x-axis for all alternate glyph. if there are multiple values, dx defines a shift along the x-axis for each individual glyph relative to the preceding glyph. if there are less values than glyphs, the remaining glyphs use a value of 0. if there are more values than glyphs, extra values are ignored. value list of <length> default value none animatable yes fedropshadow for <fedropshadow>, dx defines the x off...
... animatable yes glyphref warning: as of svg2 <glyphref> is deprecated and shouldn't be used. for <glyphref>, dx defines the x offset of the glyph, in the font metric system. value <number> default value 0 animatable yes text for <text>, if it contains a single value, dx defines a shift along the x-axis for all glyphs. if there are multiple values, dx defines a shift along the x-axis for each individual glyph relative to the preceding glyph. if there are less values than glyphs, the remaining glyphs use a value of 0. if there are more values than glyphs, extra values are ignored. value list of <length> default value none animatable yes example html,body,svg { height:100% } <svg viewbox...
...20%" x="10%" y="25%">svg</text> <text dx="0 10%" x="10%" y="50%">svg</text> <text dx="0 10% 20%" x="10%" y="75%">svg</text> </svg> line { stroke: red; stroke-width: .5px; stroke-dasharray: 3px; } tref warning: as of svg2 <tref> is deprecated and shouldn't be used. for <tref>, if it contains a single value, dx defines a shift along the x-axis for all glyphs. if there are multiple values, dx defines a shift along the x-axis for each individual glyph relative to the preceding glyph. if there are less values than glyphes, the remaining glyphes use a value of 0. if there are more values than glyphes, extra values are ignored. value list of <length> default value none animatable yes tspan for <tspan>, if it contains a single value, ...
...tive to the preceding glyph. if there are less values than glyphes, the remaining glyphes use a value of 0. if there are more values than glyphes, extra values are ignored. value list of <length> default value none animatable yes tspan for <tspan>, if it contains a single value, dx defines a shift along the x-axis for all alternate glyph. if there are multiple values, dx defines a shift along the x-axis for each individual glyph relative to the preceding glyph. if there are less values than glyphs, the remaining glyphs use a value of 0. if there are more values than glyphs, extra values are ignored. value list of <length> default value none animatable yes specifications specification status co...

dy - SVG: Scalable Vector Graphics
rey">svg</text> <!-- the same text with a shift along the y-axis --> <text dy="50%" x="10%" y="30%">svg</text> </svg> line { stroke: red; stroke-width: .5px; stroke-dasharray: 3px; } altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used. for <altglyph>, if it contains a single value, dy defines a shift along the y-axis for all alternate glyph. if there are multiple values, dy defines a shift along the y-axis for each individual glyph relative to the preceding glyph. if there are less values than glyphes, the remaining glyphes use a value of 0. if there are more values than glyphes, extra values are ignored. value list of <length> default value none animatable yes fedropshadow for <fedropshadow>, dy defines the y ...
... animatable yes glyphref warning: as of svg2 <glyphref> is deprecated and shouldn't be used. for <glyphref>, dy defines the y offset of the glyph, in the font metric system. value <number> default value 0 animatable yes text for <text>, if it contains a single value, dy defines a shift along the y-axis for all glyphs. if there are multiple values, dy defines a shift along the y-axis for each individual glyph relative to the preceding glyph. if there are less values than glyphes, the remaining glyphes use a value of 0. if there are more values than glyphes, extra values are ignored. value list of <length> default value none animatable yes example html,body,svg { height:100% } <svg view...
... <text dy="20" x="10" y="30">svg</text> <text dy="0 10" x="50" y="30">svg</text> <text dy="0 10 20" x="90" y="30">svg</text> </svg> line { stroke: red; stroke-width: .5px; stroke-dasharray: 3px; } tref warning: as of svg2 <tref> is deprecated and shouldn't be used. for <tref>, if it contains a single value, dy defines a shift along the y-axis for all glyphs. if there are multiple values, dy defines a shift along the y-axis for each individual glyph relative to the preceding glyph. if there are less values than glyphes, the remaining glyphes use a value of 0. if there are more values than glyphes, extra values are ignored. value list of <length> default value none animatable yes tspan for <tspan>, if it contains a single value, ...
...tive to the preceding glyph. if there are less values than glyphes, the remaining glyphes use a value of 0. if there are more values than glyphes, extra values are ignored. value list of <length> default value none animatable yes tspan for <tspan>, if it contains a single value, dy defines a shift along the y-axis for all alternate glyph. if there are multiple values, dy defines a shift along the y-axis for each individual glyph relative to the preceding glyph. if there are less values than glyphes, the remaining glyphes use a value of 0. if there are more values than glyphes, extra values are ignored. value list of <length> default value none animatable yes specifications specification status ...

SVG documentation index - SVG: Scalable Vector Graphics
mode for the animation. 38 cap-height deprecated, svg, svg attribute the cap-height attribute defines the height of uppercase glyphs of the font within the font coordinate system. 39 class reference, svg, svg attribute assigns a class name or set of class names to an element. you may assign the same class name or names to any number of elements, however, multiple class names must be separated by whitespace characters. 40 clip svg, svg attribute the clip attribute is a presentation attribute defining the visible region of an element. 41 clip-path svg, svg attribute the clip-path presentation attribute defines or associates a clipping path with the element it is related to. 42 clip-rule svg, svg attri...
... current filter primitive subregion. 79 font-family svg, svg attribute the font-family attribute indicates which font family will be used to render the text, specified as a prioritized list of font family names and/or generic family names. 80 font-size svg, svg attribute the font-size attribute refers to the size of the font from baseline to baseline when multiple lines of text are set solid in a multiline layout environment. 81 font-size-adjust svg, svg attribute the font-size-adjust attribute allows authors to specify an aspect value for an element that will preserve the x-height of the first choice font in a substitute font. 82 font-stretch needsexample, svg, svg attribute the font-stretch attribute indicates th...
...s focusable and to define the relative order of the element for the purposes of sequential focus navigation. 214 tablevalues svg, svg attribute the tablevalues attribute defines a list of numbers defining a lookup table of values for a for a color component transfer function. 215 target svg, svg attribute the target attribute should be used when there are multiple possible targets for the ending resource, such as when the parent document is embedded within an html or xhtml document, or is viewed with a tabbed browser. this attribute specifies the name of the browsing context (e.g., a browser tab or an (x)html iframe or object element) into which a document is to be opened when the link is activated: 216 targetx filters, needsexample, svg, sv...
... svg the svg script element allows to add scripts to an svg document. 364 <set> element, svg, svg animation the svg <set> element provides a simple means of just setting the value of an attribute for a specified duration. 365 <solidcolor> element, experimental, reference, svg the <solidcolor> svg element lets authors define a single color for use in multiple places in an svg document. it is also useful as away of animating a palette colors. 366 <stop> element, reference, svg, svg gradient the svg <stop> element defines a color and its position to use on a gradient. this element is always a child of a <lineargradient> or <radialgradient> element. 367 <style> element, reference, svg the svg <style> element allo...

Using the WebAssembly JavaScript API - WebAssembly
e entire linear memory, which is necessary to faithfully represent c/c++ concepts like pointers. unlike a native c/c++ program, however, where the available memory range spans the entire process, the memory accessible by a particular webassembly instance is confined to one specific — potentially very small — range contained by a webassembly memory object. this allows a single web app to use multiple independent libraries — each of which are using webassembly internally — to have separate memories that are fully isolated from each other. in addition, newer implementations can also create shared memories, which can be transferred between window and worker contexts using postmessage(), and used in multiple places. in javascript, a memory instance can be thought of as a resizable arraybuffe...
...fer (memory.prototype.buffer), not on the memory itself. memory imports work just like function imports, only memory objects are passed as values instead of javascript functions. memory imports are useful for two reasons: they allow javascript to fetch and create the initial contents of memory before or concurrently with module compilation. they allow a single memory object to be imported by multiple module instances, which is a critical building block for implementing dynamic linking in webassembly. note: you can find our complete demo at memory.html (see it live also) . tables a webassembly table is a resizable typed array of references that can be accessed by both javascript and webassembly code. while memory provides a resizable typed array of raw bytes, it is unsafe for references...
... call, then we add an extra set of parentheses on the end to actually invoke the function. note: you can find our complete demo at table.html (see it live also). globals webassembly has the ability to create global variable instances, accessible from both javascript and importable/exportable across one or more webassembly.module instances. this is very useful, as it allows dynamic linking of multiple modules. to create a webassembly global instance from inside your javascript, you use the webassembly.global() constructor, which looks like this: const global = new webassembly.global({value:'i32', mutable:true}, 0); you can see that this takes two parameters: an object that contains two properties describing the global variable: value: its data type, which can be any data type accep...
...city. this provides webassembly with a multitude of advances in terms of architectural efficiency: one module can have n instances, in the same way that one function literal can produce n closure values. one module instance can use 0–1 memory instances, which provide the "address space" of the instance. future versions of webassembly may allow 0–n memory instances per module instance (see multiple tables and memories). one module instance can use 0–1 table instances — this is the "function address space" of the instance, used to implement c function pointers. future versions of webassembly may allow 0–n table instances per module instance. one memory or table instance can be used by 0–n module instances — these instances all share the same address space, allowing dynamic linkin...

cfx - Archive of obsolete content
ecified in binary. binary may be specified as a full path or as a path relative to the current directory. --binary-args=cmdargs pass extra arguments to the binary being executed (for example, firefox). for example, to pass the -jsconsole argument to firefox, which will launch the javascript error console, try the following: cfx run --binary-args -jsconsole to pass multiple arguments, or arguments containing spaces, quote them: cfx run --binary-args '-url "www.mozilla.org" -jsconsole' --extra-packages=extra_packages extra packages to include, specified as a comma-separated list of package names. -g config, --use-config=config pass a set of options by referencing a named configuration. -p profiledir, --profiledir=profiledir ...
...s called "test_mycode.js" or "testmycode.js". see the tutorial on unit testing and the reference documentation for the assert module for details. supported options as with cfx run you can use options to control which host application binary version to use, and to select a profile. you can also control which tests are run: you can test dependent packages, filter the tests by name and run tests multiple times. -b binary, --binary=binary use the host application binary specified in binary. binary may be specified as a full path or as a path relative to the current directory. --binary-args=cmdargs pass extra arguments to the binary being executed (for example, firefox). for example, to pass the -jsconsole argument to firefox, which will launch the javascript erro...
...ecified in binary. binary may be specified as a full path or as a path relative to the current directory. --binary-args=cmdargs pass extra arguments to the binary being executed (for example, firefox). for example, to pass the -jsconsole argument to firefox, which will launch the javascript error console, try the following: cfx run --binary-args -jsconsole to pass multiple arguments, or arguments containing spaces, quote them: cfx run --binary-args '-url "www.mozilla.org" -jsconsole' --dependencies load and run any tests that are included with modules that your package depends on. for example: if your add-on depends on modules from the sdk, then cfx will run the unit tests for the sdk's modules as well as yours. -f filename[:testn...

Extension Packaging - Archive of obsolete content
this way will not be visible to the user. 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 o...
...as a consequence, these packages are no longer accepted by amo. ...
.... ...

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
nt 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 package this is used to include source files used as visual elements in the gui, including style sheets and images. most extensions include only one skin package, but you can include multiple skin packages to allow the gui to change with different themes. chrome url use a file called a “chrome manifest” t...
...ge name, and locale/ and locale/fr-fr/ are the relative paths to the folders containing the source files; en-us and fr-fr indicate that those locale packages are for english and french, respectively. listing 7: additional content for chrome.manifest locale helloworld en-us locale/ locale helloworld fr-fr locale/fr-fr/ replacing text with entity references in xul to make the extension support multiple languages, you will need to separate out all the hard-coded display text in clock.xul and move it to a dtd file. the dtd file is located inside the locale package, and the correct file is picked automatically to match the user’s language preferences. edit clock.xul to match listing 8. add the doctype declaration that references the dtd file, and replace “clock” and “current time” with e...
...e-prefs.js pref("extensions.sessionstore.warnonclear", true); pref("extensions.sessionstore.replacetabs", 2); creating the preference panel create prefs.xul with the contents from listing 26. the prefwindow element is a special root element for creating preference panels, with the prefpane element subordinate to it. you can create an interface similar to firefox’s options window by inserting multiple prefpane elements, which allows users to switch between panels by clicking buttons. the preference element creates a preference value that can be written and read by the preference panel, with the preference name indicated by the name attribute, and the type by the type attribute. furthermore, by matching the preference element’s id to the preference attribute of a checkbox or radiogroup, you c...

JavaScript Object Management - Archive of obsolete content
ance, you could replace a method in any object in the firefox chrome, so that it behaves differently than how it normally does. this should be a last resort option, but it is very useful at times. you usually need only one js file to control a xul window, since the code required is normally not that much. if you have complex behavior that requires too much code, look for ways to divide it into multiple objects and files. you can include as many scripts in a xul window as you need. to initialize your chrome objects, it's usually better to run the initialization code from the "load" event handler for the window. the load event is fired after the dom on the window has loaded completely, but before it's displayed to the user. this allows you to manipulate and possibly change elements in the window...
...ot behaving as expected. this is a fundamental lesson: the chrome is not global, it's window-specific. all of your scripts and objects are replicated for each window, and they work independently from each other. this is an issue that is very easy to overlook, since most firefox users, specially power users, have a single window open at all times. you have to make sure you test your extension with multiple windows open; never assume everything will work the same as with a single window. now, in most cases you'll need to coordinate data in a way that it is consistent for all open firefox windows. there are several ways in which you can do this. preferences is one of them, and they are covered in another section of this tutorial. two other ways are javascript code modules (firefox 3 and above), and ...
... operations anyway, so they are better done in the chrome. as a general guideline, we keep all of our business logic in jsm, available through service objects, and chrome scripts are limited to handle presentation logic. we handle most of our code through static objects, singleton objects that don't require instantiation. but it is sometimes necessary to define classes and be able to create multiple instances. common cases include interacting with a local database or a remote api. data will often be translated into arrays of entities, and those are better represented through classes. one way to define a class is as follows: /** * user class. represents a hello world user (whatever that may be). */ 〈modulenamespace〉.user = function(aname, aurl) { this._name = aname; this._url = a...

XPCOM Objects - Archive of obsolete content
available interfaces. just like in component identifiers, the nsi prefix is just a way of keeping things in order. the ns stands for netscape, mozilla's predecessor. the "i" stands for interface. our interfaces should begin with something like xsihello. an interface is just a definition of a set of attributes and methods that an object implementing it should have. xpcom components can implement multiple interfaces, and they often do. let's look at the preference service as an example of this. we'll look at its documentation in a very old xul site called xul planet. all of its documentation was planned to be migrated to mdc, but it looks like it was never finished and xul planet was discontinued. their xpcom documentation is better in terms of seeing the relationships between components and inter...
...rn the incremented count. */ short increment(); }; the bits about nsisupports are common to most xpcom interface definitions. nsisupports is the base interface for all interfaces, so it should always be included, except for cases where your interface extends another interface. in those cases you just need to replace nsisupports with the interface you're extending. you can also extend from multiple interfaces, by including a comma-separated list of interfaces instead of only one. [scriptable, uuid(bd46f689-6c1d-47d0-bc07-bb52b546b8b5)] the scriptable qualifier says that this component can be accessed from js code. this can also be specified on a per-method basis, which is something you'll see in some of the interfaces in firefox, but it's not likely you'll have to do it in your own co...
..., such as a unique uuid (you have to generate it too and it must be different from the idl uuid), a descriptive name (this isn't used anywhere that we know of), and the contract id, which is the string you use to get a reference to the component. the ";1" at the end of the string is supposed to indicate the version of the component, although it shouldn't change much. it can be useful if there are multiple incompatible versions of the component installed at the same time. the implementation object itself should be easy to understand. the only aspects to take into account are that methods and attributes must have the same names as their idl counterparts, and that the queryinterface method is implemented: queryinterface : function(aiid) { if (!aiid.equals(ci.xsihellocounter) && !aiid.equa...

CSS3 - Archive of obsolete content
on stage. these modules extend and amend the css2.1 specification which build the core of the specification. together with it, they are the current snapshot of the css specification. css backgrounds and borders module level 3 candidate recommendation adds: support, on backgrounds, for any type of <image>, and not only for uri() defined ones. support for multiple background images. the background-repeat space and round values, and for the 2-value syntax of this css property. the background-attachment local value. the css background-origin, background-size, and background-clip properties. support for curved border corners, with the css border-radius, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, and border-...
...n-timing-function properties, as well as the @keyframes at-rule. web animations working draft css text module level 3 working draft extends: the css text-transform property with the value full-width. the css text-align property with the value start, end, start end, and match-parent for a better support of documents with multiple directionalities of text. the css text-align property with a <string> value to align on that character. this is useful to align number on the decimal point. the css word-spacing and letter-spacing properties with range constraints to control flexibility in justification. adds: control on how whitespaces are displayed using the css text-space-collapse and tab-size pr...
... css object model (cssom) working draft css font loading module level 3 working draft css scoping module level 1 working draft css inline layout working draft css images module level 4 working draft extends: the image(...

Index of archived content - Archive of obsolete content
creating a user interface firefox hub walkthrough initialization and cleanup prerequisites walkthrough webextensions for firefox for android listening to events in firefox extensions migrating from internal linkage to frozen linkage migrating raw components to add-ons multiple item extension packaging offering a context menu for form controls overlay extensions firefox addons developer guide appendix: what you should know about open-source software licenses chapter 1: introduction to extensions chapter 2: technologies used in developing extensio...
...ock and line layout cheat sheet content states and the style system disabling interruptible reflow document loading - from load start to finding a handler documentation for bidi mozilla downloading nightly or trunk builds jss build instructions for osx 10.6 layout faq layout system overview multiple firefox profiles repackaging firefox style system overview using microformats firefox sync code snippets javascript client api syncing custom preferences force rtl gre gre registration ...
... creating a skin for firefox uuid contents.rdf install.rdf making sure your theme works with rtl locales theme changes in firefox 2 theme changes in firefox 3 theme changes in firefox 3.5 theme changes in firefox 4 updating an extension to support multiple mozilla applications using firebug and jquery (screencast) using io timeout and interrupt on nt using ssh to connect to cvs using web standards in your web pages developing cross-browser and cross-platform pages references summary of changes using the w3c dom using workers in ext...

Structure of an installable bundle - Archive of obsolete content
eans you can no longer have platform-specific preference files in your bundle. platform-specific subdirectories: gecko 1.9.2.x and earlier note: platform-specific subdirectory support was removed in gecko 2.0. see the section platform-specific files to learn how to use platform-specific files. in some cases a single extension or application may wish to include binary component or plugins for multiple platforms, or theme authors might want to include multiple platform-specific jar files. to facilitate the first case, the extension/app loader has special sub-directories specifically for platform-specific files (starting with toolkit/gecko 1.8, firefox/thunderbird 1.5). the platform string is defined during the toolkit build process to a value unique for the combination of operating system, proc...
...es, the ones loaded later overwrite the earlier ones. ...
...l references for toolkit api structure of an installable bundle: describes the common structure of installable bundles, including extensions, themes, and xulrunner applications extension packaging: specific information about how to package extensions theme packaging: specific information about how to package themes multiple-item extension packaging: specific information about multiple-item extension xpis xul application packaging: specific information about how to package xulrunner applications chrome registration printing in xul apps ...

Creating regular expressions for a microsummary generator - Archive of obsolete content
o the regular expression: ^http://cgi\.ebay\.com/ws/ebayisapi\.dll\?viewitem&item=280018439106 when a caret is the first character of a regular expression, it signifies that the expression must be found at the beginning of the string being matched. now that we've prepended a caret to our regular expression, it will only match urls that look like the example url right from the start. matching multiple urls but this expression still only matches the url for a single auction item page. it won't work with any other auction item. to make it match other items, we have to remove the unique parts of it that match the specific item, leaving behind only those parts which are common to all items. to identify which parts are unique and which are common, let's look at the urls of several other auction i...
... that matches all four example urls. it'll probably match the urls for other auction item pages, too. but to make it more robust, we should accommodate the possibility of variation in the query parameters. a named query parameter is a string of the form <name>=<value>, where <name> and <value> are arbitrary strings. in our url, "item=280018439106" is the only such parameter. but urls can contain multiple named parameters separated by ampersands (&), and the parameters can appear in any order, so even though the "item" parameter seems to be necessary, it might not appear right next to "viewitem". for example, the following is an equally valid url for the same auction item: http://cgi.ebay.com/ws/ebayisapi.dll?viewitem&foo=bar&item=170019463424 to accommodate these variations in query paramete...
...i\.dll\?viewitem&.*item= the period followed by an asterisk matches any combination of characters, including no characters at all, so it works even if "viewitem&" and "item=" are right next to each other (as in our example url) as well as when there are some characters between them. matching another ebay url we now have a regular expression that matches auction item urls, including those with multiple query parameters in any order. but ebay uses a different style of url in some cases (f.e. on its search results page). here's a url for the same item in that different style: http://cgi.ebay.com/mozilla-firefox-logo-1-inch-pin-badge-button-browser_w0qqitemz280018439106qqihz018qqcategoryz2036qqcmdzviewitem to accommodate these urls, we can create a second regular expression that matches them. ...

Drag and Drop JavaScript Wrapper - Archive of obsolete content
vour("text/unicode",txt); } } this might be useful when implementing drag and drop for cells in a tree. you can use the value of a cell, or some resource from an rdf file if the tree is built from a template, as the value of a drag. if you store it as a string, any object that accepts strings dragged onto it can grab the dragged data. ...
...transferdataset(); var tmp = new transferdata(); tmp.adddataforflavour("text/unicode",txt1); transferdata.data.push(tmp); new transferdata(); tmp.adddataforflavour("text/unicode",txt2); transferdata.data.push(tmp); } } you will need to add an observer to each element that can either start a drag action or can accept dropped objects. you can reuse the same observer for multiple elements. for an element that can start a drag, ondragstart is all that is necessary to implement. for an element that can be dropped on, the observer will need to implement at least the getsupportedflavours, ondragover and ondrop functions. some elements may be able to initiate a drag and accept a drop. in this case, the ondragstart function will be necessary as well. the getsupportedflavours fu...
... transfer object has two properties, data which holds the data and flavour which holds the flavour of the data. once you have the data, you can add it to the element is some way. for example, you might set the value of a textbox. var textobserver = { ondrop : function (event, transferdata, session) { event.target.setattribute("value",transferdata.data); } } the flavour system used allows multiple objects of various types to be dragged at once and also allows alternative forms of the data to be dragged. the following table describes some of the flavours you might use. you can also make up your own flavours if necessary. text/unicode text data text/html html data text/x-moz-url a url application/x-moz-file a local file see here for an overview of more data flavours. « prev...

Creating a Help Content Pack - Archive of obsolete content
however, it is recommended you use a space-separated list of uris for nc:datasources instead of separate entries, as separate entries will require a slightly longer time to load. the glossary file the glossary file has the simplest format of all the data sources you'll need because there's only one level of c...
... <rdf:li> <rdf:description nc:panelid="toc" nc:datasources="chrome://help/locale/help-toc.rdf chrome://foo/locale/help/glossary.rdf"/> </rdf:li> each of the different data source types (toc, index, glossary, and search) may be used multiple times (and in the case of platform-specific information, must be used multiple times). however, it is recommended you use a space-separated list of uris for nc:datasources instead of separate entries, as separate entries will require a slightly longer time to load. the glossary file the glossary file has the simplest format of all the data sources you'll need because there's only one level of content. (the index, table of contents, and search data sources are more likely ...
...ndex file is that there is no automatically generated set of top-level letters (e.g., a for accessibility and automation or b for book and border). help documentation may be written in any language, so such automatic splitting is not desirable. you must implement such splitting if you wish to have it. the index data source structurally differs from the glossary in that it is more likely to have multiple levels. a single-level index may be accomplished in exactly the same way as a glossary file, but multiple levels can make it easier to navigate to specific information. let's start with a brief sample rdf file with a single level: <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:nc="http://home.netscape.com/nc-rdf#"> <rdf:description rdf:a...

Actionscript Acceptance Tests - Archive of obsolete content
r the dir.asc_args file. testname.as.avm_args this file specifies additional arguments to pass to the shell when running the test - the user can use the special variable $dir to refer to the current directory. this example passes in another .abc file as an argument to the file being run: -- $dir/file.abc another use would be to pass a specific argument to the shell: -dtimeout this file can have multiple lines with different arguments. when there are multiple lines, the harness will re-run the test for every line passing along the different arguments. there is one special keyword that can be used, uses_swfversion. when that keyword is encountered, the test harness will run the test against all possible -swfversion versions: uses_swfversion is the equivalent of: -swfversion 9 -swfversion 10 -sw...
...s one special keyword that can be used, uses_swfversion. when that keyword is encountered, the test harness will run the test against all possible -swfversion versions: uses_swfversion is the equivalent of: -swfversion 9 -swfversion 10 -swfversion 11 -swfversion 12 ... any additional args on the uses_swfversion line will be passed to each run of the vm. (see bug 587093 for details.) specifying multiple .abcs: if you desire to run a test with multiple .abc files (e.g: avmshell a.abc b.abc testname.abc) there is a special avm_args directive called multiabc that is specified surrounded by two pipe (|) symbols: |multiabc| $dir/testname_support/a.abc $dir/testname_support/b.abc the extra abc files will usually be placed in a _support dir (see additional files below). any avm arguments can be placed...
...ltiabc| $dir/testname_support/a.abc $dir/testname_support/b.abc the extra abc files will usually be placed in a _support dir (see additional files below). any avm arguments can be placed before the |multiabc| directive, or the line can start with the directive. any test arguments (--) must be placed after the multiabc file listings. here is a more complicated example that passes both avm args, multiple abcs and test args: -ojit |multiabc| $dir/testname_support/a.abc -- test_args a dir.avm_args file can also be created with the same contents that will apply to the entire directory. testname.as.avm_args files will take precedence over the dir.avm_args file testname.as.tz if a test is only valid for certain timezones, the timezones can be specified in this support file. below is a sample file tha...

Anonymous Content - Archive of obsolete content
introduction a binding can specify an anonymous content template using the content element. this template describes a content tree that will be generated around the bound element during binding attachment. an element declared in a bound document using a single tag can then be constructed out of multiple child elements, and this implementation is hidden from the bound document. for example, the html file upload control appears in most browsers as a composite widget consisting of a text field and a button. a sample xbl binding for the file widget might look as follows: <binding id="fileupload"> <content> <html:input type="text"/> <html:input type="button"/> </content> </binding> because this content is not visible to its parent element, it is said to be anonymous content. ...
...e bound element is already focused. for example, if the user has already focused the textfield within an html file upload control, then the file upload control is now also focused. if the user then focuses the button inside the file upload control, the focus event generated for the button is stopped before it reaches the file control, since the file control is already focused. because content in multiple scopes can be focused, the css :focus pseudo-element is hierarchical. style rules can be written with the assumption that they will match (in the above example) both the file control and the element focused inside the file control. in other words, an arbitrary chain of elements can be in the :focus state at the same time. mouseover and mouseout events mouseover and mouseout events are retargete...
...es this cascade, since an author-level dom binding could inherit from a user-level binding. if both load sheets, what level do those sheets belong to in the cascade?] sheets are always walked from the innermost scope to the outermost scope. with this ordering a binding that defines a widget can define a default look for the widget that can then be easily overridden by a client of the widget. for multiple bindings attached to the same element, the sheets are walked from the base binding down to the most derived binding. bindings can fine-tune the control of the stylesheet scoping with the inheritstyle attribute, which indicates whether or not author sheets defined at outer scopes affect the anonymous content generated by the binding. for the primary generating binding only, this attribute is chec...

Attribute Substitution - Archive of obsolete content
« previousnext » so far, attribute replacement in an action body has been used to replace an entire attribute with the value of a variable. however, you may also replace only part of attribute's value, or use multiple variables in one attribute. for instance, to include a prefix before a variable value, you can use: <label value="my name is ?name"/> the effect will be that the ?name part of the attribute will be replaced by the value of the variable ?name. for instance, if the value of ?name is 'jake', then the attribute value will be 'my name is jake'. ...
...note that variable names must have a space after them as this is how the end of variable is determined. ...
...so be used to separate a variable with normal text: <label value="?name" class="?gender^german"/> these last two examples have been setting the class attribute on a label. the effect will be that a label will have either the 'malegerman' or 'femalegerman' class. in a stylesheet, you could set properties for each of these classes such that different values appear differently without having to use multiple rules. although not common, you may also wish to insert a question mark or caret into an attribute value. to do this, just use two question marks or two carets in a row. for instance: <label value="what is my name?? my name is ?name"/> in this example, the label might be 'what is my name? my name is jake'. note that a caret only has a special meaning at the end of a variable, thus two in a row a...

Simple Query Syntax - Archive of obsolete content
e the full syntax. the triples to check are specified using attributes on the rule element (thus, a rule element should be used). the namespace of the attribute and the attribute name combine to form the predicate you wish to filter by and the value of the attribute will be the value to filter by. any results that match the criteria are accepted and any that do not match are rejected. you can use multiple attributes to filter by several criteria. in this case, all of the criteria must match for the result to be accepted. for example, to filter for photos with a specific country: <hbox id="photoslist" datasources="template-guide-photos4.rdf" ref="http://www.xulplanet.com/rdf/myphotos" xmlns:r="http://www.xulplanet.com/rdf/"> <template> <rule r:country="http://www.daml.org/2001/09...
...n only needs to set or remove the attribute on the rule as necessary. note that the namespace aware functions (with the suffix ns) need to be used to set or remove attributes with namespaces. this example assumes that the rule has been given an id of 'filterrule'. note that the menulist itself must use the extended syntax since it doesn't iterate over the children of a resource. filtering using multiple tests as mentioned earlier, you can filter by several criteria by using multiple attributes. for instance: <rule id="filterrule" dc:title="obelisk" r:country="http://www.daml.org/2001/09/countries/iso#it"> this rule filters on two criteria which must both match. rules will apply all the attributes as conditions except for the id attribute, as well as some special attributes, which ...
...a by using multiple attributes. for instance: <rule id="filterrule" dc:title="obelisk" r:country="http://www.daml.org/2001/09/countries/iso#it"> this rule filters on two criteria which must both match. rules will apply all the attributes as conditions except for the id attribute, as well as some special attributes, which are ignored. these special attributes are useful when handling multiple rules, which will be the subject of a later topic. « previousnext » ...

Commands - Archive of obsolete content
the controllers property to add your own controllers. you might use this to have a listbox respond to cut, copy and paste operations, for instance. an example of this will be provided later. by default, only textboxes have a controller that does anything. the textbox controller handles clipboard operations, selection, undo and redo as well as some editing operations. note that an element may have multiple controllers, which will all be checked. if the currently focused element does not have a suitable controller, the window is checked next. the window also has a controllers property which you can modify if desired. if the focus is inside a frame, each frame leading to the top-level window is checked as as well. this means that commands will work even if the focus is inside a frame. this works wel...
...en override the default handling of a command with careful placement of the controller. a controller is expected to implement four methods, which are listed below: supportscommand (command) this method should return true if the controller supports a command. if you return false, the command is not handled and command dispatcher will look for another controller. a single controller may support multiple commands. iscommandenabled (command) this method should return true if the command is enabled, or false if it is disabled. corresponding buttons will be disabled automatically. docommand (command) execute the command. this is where you would put the code to handle the command. onevent (event) this method handles an event. example: controller implementation let's assume that we want to im...
...lements the four methods described above. the supportscommand method returns true for the 'cmd_delete' command, which is the name of the command used when the delete menu item is selected. for other commands, false should be returned since the controller does not handle any other commands. if you wanted to handle more commands, check for them here, since you will often use a single controller for multiple related commands. the iscommandenabled method returns true if the command should be enabled. in this case, we check if there is a selected item in the listbox and return true if there is. if there is no selection, false is returned. if you delete all the rows in the example, the delete command will become disabled. you may have to click the listbox to update the menu in this simple example. the ...

Creating an Installer - Archive of obsolete content
g an installer and installing components. these are described step by step below. create a web page from which the user can download the software to be installed. this page will contain an install trigger which is a small piece of script which launches the install. the user is presented with a dialog which indicates the package being installed. it is possible for the install trigger to launch multiple installers. in this case, they will be presented in a list. the user may choose to continue or cancel. if the user chooses to continue, the installer xpi file is downloaded. a progress bar is displayed to the user during this process. the file install.js is extracted from the install archive and executed. this script will call install functions which will indicate which files from the archive s...
...nue or cancel. if the user chooses to continue, the installer xpi file is downloaded. a progress bar is displayed to the user during this process. the file install.js is extracted from the install archive and executed. this script will call install functions which will indicate which files from the archive should be installed. once the script is complete, the new package has been installed. if multiple packages are being installed, their scripts will run in sequence. install triggers as indicated above, the install process is started by an install trigger. this involves the use of the special global object installtrigger. it contains a number of methods which can be used to start an installation. you can use this object in local or remote content, meaning that it is suitable for a download f...
... " + result); } var xpi = new object(); xpi["calendar"] = "calendar.xpi"; installtrigger.install(xpi,donefn); first, we define a callback function donefn() which will be called when the install is complete. you can name the function whatever you like of course. this function has two arguments. the first is the name of the package that was just installed. this is important if you are installing multiple components. the second argument is a result code. if the result is 0, the installation completed successfully. if the result is non-zero, an error occured and the value is an error code. the function donefn() here just displays an alert box to the user. next, we create an array xpi which will hold the name (calendar) and url (calendar.xpi) of the installer. you can add an additional similar such...

Manipulating Lists - Archive of obsolete content
for example the selecteditems property holds a list of the items that are selected, while the selectedcount property holds the number of items selected. typically, you will use these properties to iterate over the list and per...
...m 1 to 3:"/> <textbox id="number"/> <button label="select" oncommand="doselect();"/> </hbox> <radiogroup id="level"> <radio label="excellent"/> <radio label="good"/> <radio label="poor"/> </radiogroup> listboxes also support multiple selection and the functions of the nsidomxulmultiselectcontrolelement interface. this interface provides a number of functions specifically for handling multiple selection. for example the selecteditems property holds a list of the items that are selected, while the selectedcount property holds the number of items selected. typically, you will use these properties to iterate over the list and perform some operation for each item. be careful when iterating over the selected items; if you modify the items in the list while iterating, the list will change an...
...the first selected item is always retrieved as the size of the array will decrease as the items are removed. next, we remove the item using the removeitemat() function. ...

Popup Menus - Archive of obsolete content
element surrounds the three menuitem elements. you will also notice that the id has been set on the menupopup element itself. the popupset element surrounds the entire popup menu declaration. this is a generic container for popups, and is optional. it does not draw on screen but instead is used as a placeholder where you would declare all of your popups. as the name popupset implies, you can put multiple popup declarations inside it. just add additional ones after the first menupopup element. you can have more than one popupset in a file, but usually you will have only one. associating a popup with an element now that we've created the popup, it's time to make the popup appear. to do this we need to associate the popup with an element where it should appear. we do this because we only want the ...
.... the attribute you add depends on which type of popup you want to create. for plain popups, add a popup attribute to the element. for context popups, add a context attribute. finally, for tooltip popups, add a tooltip attribute. the value of the attribute must be set to the id of the menupopup that you want to have appear. this is why you must put the id on the popup. that way it's easy to have multiple menupopups in one file. in the example above, we want to make the popup a context menu. that means that we need to use the context attribute and add it to the element which we want to have the popup associated with. the sample below shows how we might do this: example 1 : source view <popupset> <menupopup id="clipmenu"> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem...
...pup menu will appear. the popup will also appear even if you click on the children of the box, so it will work if you click on the label element also. the context attribute has been used to associate the box with a menupopup with the same id. in this case, the menupopup clipmenu will appear. this way, you can have a number of popups and associate them with different elements. you could associate multiple popups with the same element by putting more attributes of different types on an element. you could also associate the same popup with multiple elements, which is one advantage of using this popup syntax. popups can only be associated with xul elements; they cannot be associated with html elements. tooltips we'll look at a simple way to create tooltips here. there are two ways to create a toolt...

Trees - Archive of obsolete content
rows of text in columns. it can be used with rows either in a flat list or arranged into a hierarchy. a tree also allows the user to rearrange, resize and hide individual columns. some examples of trees include the list of messages in a mail application, or the bookmarks window in mozilla. in some ways, a tree has some similarities with the listbox. both can be used to create tables of data with multiple rows and columns, and both may contain column headers. the tree also supports nested rows, whereas the listbox does not. however, listboxes may contain any type of content, whereas trees may only contain text and images. (using advanced features, progress meters or checkboxes also can be added to the tree) a tree consists of two parts, the set of columns, and the tree body. the set of columns...
...ther 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 flex="1"> <treecols> <treecol id="sender" label="sender" flex="1"/> <treecol id="subject" label="subject" flex="2"/> </treecols> <treechildren> <treeitem> ...
... the treecell element. you can set the text for the cell using the label attribute. the first treecell in a row determines the content that will appear in the first column, the second treecell determines the content that will appear in the second column, and so on. the user can select the treeitems by clicking on them with the mouse, or by highlighting them with the keyboard. the user can select multiple items by holding down the shift or control keys and clicking additional rows. to disable multiple selection, place a seltype attribute on the tree, set to the value single. with this, the user may only select a single row at a time. add a tree to our find files example let's add a tree to the find files window where the results of the search would be displayed. the tree will use a content tree...

tree - Archive of obsolete content
s. hidecolumnpicker type: boolean when set to false, a drop-down will appear in the upper right corner of the tree, which the user may use to show and hide columns. when set to true, the column picker will be hidden. the default value is false. onselect type: script code this event is sent to a tree when a row is selected, or whenever the selection changes. the user can select multiple rows by holding down shift or control and clicking on a row. the onselect event will be sent for each item added to or removed from the selection. rows type: integer the number of rows to display in the element. if the element contains more than this number of rows, a scrollbar will appear which the user can use to scroll to the other rows. to get the actual number of r...
... removed from the selection. rows type: integer the number of rows to display in the element. if the element contains more than this number of rows, a scrollbar will appear which the user can use to scroll to the other rows. to get the actual number of rows in the element, use the getrowcount method. seltype type: one of the values below used to indicate whether multiple selection is allowed. single only one row may be selected at a time. (default in listbox and richlistbox.) multiple multiple rows may be selected at once. (default in tree.) for trees, you can also use the following values: cell individual cells can be selected text rows are selected; however, the selection highlight appears only over the text of the primary column.
...used trees won't show a focus ring, naturally. for unfocused trees, the (undrawn) caret's position can still be obtained by this property. if the caret isn't present for any row (for example, because the tree has never been focused), the value will be -1. you cannot rely on this property to change or determine a tree selection, except for trees with seltype="single". (all trees have seltype="multiple" by default.) to reliably change or determine a selection, instead use the nsitreeselection interface methods available via tree.view.selection. disabled type: boolean gets and sets the value of the disabled attribute. disablekeynavigation type: boolean gets or sets the value of the disablekeynavigation attribute. editingcolumn type: nsitreecolumn the co...

Sharp variables in JavaScript - Archive of obsolete content
warning: sharp variables was a non-standard syntax for creating or serializing cyclic data graphs that used to be supported only by mozilla's spidermonkey js engine. this feature has been removed in bug 566700, firefox 12. form sharp variables have the form of a sharp sign (#) immediately followed by one or more digits. the number represented by the digits serves as the variable's unique identifier, but leading 0s are ignored. scope sharp variables are only in scope in the statement in which they are defined. ...
... // this doesn't do much since the sharp variable is out of scope immediately after a = #2 = {}; // slightly more useful since we retain a reference to the new object to reference the sharp variable, simply append another sharp (#) to the end of the variable name. this acts as a reference to initial variable. you can use this to create objects in a single line of code that would otherwise take multiple lines of code. examples multiple references var a = { foo:#1=[], bar:#1# }; a.foo.push("hello"); a.bar.push("there!"); alert(a.foo[1]); // "there!" you can avoid using sharp variables by breaking the declaration up into multiple lines. var a = { foo:[], bar:undefined }; a.bar = a.foo; a.foo.push("hello"); a.bar.push("there!"); alert(a.foo[1]); // "there!" cyclic references ...
... // 1 a.next.val; // 2 a.next.next.val; // 1 a.next.next == a; // true again, you can eliminate the need for sharp variables by using two lines instead of one for the declaration. ...

Index - Game development
urce code of the demo along with all the other resources on the gamepad api content kit. 30 implementing game control mechanisms controls, desktop, gamepad, games, javascript, laptop, mobile, keyboard, mouse, touch one of html5's main advantages as a game development platform is the ability to run on various platforms and devices. streamlining cross device differences creates multiple challenges, not least when providing appropriate controls for different contexts. in this series of articles we will show you how you can approach building a game that can be played using touchscreen smartphones, mouse and keyboard, and also less common mechanisms such as gamepads. 31 desktop gamepad controls controls, desktop, gamepad api, gamepads, games, javascript, controllers ...
...anvas, games, javascript, static, webgl, tilemap, tiles tilemaps are a very popular technique in 2d game development, consisting of building the game world or level map out of small, regular-shaped images called tiles. this results in performance and memory usage gains — big image files containing entire level maps are not needed, as they are constructed by small images or image fragments multiple times. this set of articles covers the basics of creating tile maps using javascript and canvas (although the same high level techniques could be used in any programming language.) 36 square tilemaps implementation: scrolling maps canvas, games, javascript, atlas, scrolling, spritesheet, tilemap, tiles this article covers how to implement scrolling square tilemaps using the c...
....js deprecated, javascript, asm.js asm.js is a specification defining a subset of javascript that is highly optimizable. this article looks at exactly what is permitted in the asm.js subset, what improvements it confers, where and how you can make use of it, and further resources and examples. 41 tutorials canvas, games, javascript, web, workflows this page contains multiple tutorial series that highlight different workflows for effectively creating different types of web games. 42 2d breakout game using phaser 2d, beginner, canvas, games, javascript, phaser, tutorial in this step-by-step tutorial, we create a simple mobile mdn breakout game written in javascript, using the phaser framework. 43 animations and tweens 2d, animation, ...

Floats - Learn web development
with the advent of flexbox and grid it has now returned to its original purpose, as this article explains. prerequisites: html basics (study introduction to html), and an idea of how css works (study introduction to css.) objective: to learn how to create floated features on webpages, and to use the clear property and other methods of clearing floats. ...
...ing 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 the columns to sit below one another, in the same order as they appear in the source). there are newer, better layout techniques available and so use of floats in this way should be regarded as a legacy technique. in this article we'll just concentrate on the proper uses of floats. a simple float...
... your skills: floats. summary you now know all there is to know about floats in modern web development. ...

Introduction to CSS layout - Learn web development
allow us to take elements contained in a web page and control where they are positioned relative to their default position in normal layout flow, the other elements around them, their parent container, or the main viewport/window. the page layout techniques we'll be covering in more detail in this module are normal flow the display property flexbox grid floats positioning table layout multiple-column layout each technique has its uses, advantages, and disadvantages, and no technique is designed to be used in isolation. by understanding what each method is designed for you will be in a good place to understand which is the best layout tool for each task. normal flow normal flow is how the browser lays out html pages by default when you do nothing to control page layout. let's look a...
...e</div> <div class="box6">six</div> </div> once you have a grid, you can explicitly place your items on it, rather than relying on the auto-placement behavior seen above. in the second example below we have defined the same grid, but this time with three child items. we've set the start and end line of each item using the grid-column and grid-row properties. this causes the items to span multiple tracks. grid example 2 * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; grid-gap: 10px; } .box1 { grid-column: 2 / 4; grid-row: 1; } .box2 { grid-column: 1; ...
... body { max-width: 800px; margin: 0 auto; } .container { column-width: 200px; } summary this article has provided a brief summary of all the layout technologies you should know about. read on for more information on each individual technology! overview: css layout next in this module introduction to css layout normal flow flexbox grid floats positioning multiple-column layout responsive design beginner's guide to media queries legacy layout methods supporting older browsers fundamental layout comprehension assessment ...

How CSS is structured - Learn web development
ures in detail. applying css to html first, let's examine three methods of applying css to a document: with an external stylesheet, with an internal stylesheet, and with inline styles. external stylesheet an external stylesheet contains css in a separate file with a .css extension. this is the most common and useful method of bringing css to a document. you can link a single css file to multiple web pages, styling all of them with the same css stylesheet. in the getting started with css, we linked an external stylesheet to our web page. you reference an external css stylesheet from an html <link> element: <!doctype html> <html> <head> <meta charset="utf-8"> <title>my css experiment</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>hello world!</...
...1>hello world!</h1> <p>this is my first css example</p> </body> </html> in some circumstances, internal stylesheets can be useful. for example, perhaps you're working with a content management system where you are blocked from modifying external css files. but for sites with more than one page, an internal stylesheet becomes a less efficient way of working. to apply uniform css styling to multiple pages using internal stylesheets, you must have an internal stylesheet in every web page that will use the styling. the efficiency penalty carries over to site maintenance too. with css in internal stylesheets, there is the risk that even one simple styling change may require edits to multiple web pages. inline styles inline styles are css declarations that affect a single html element, contain...
... experiment</title> </head> <body> <h1 style="color: blue;background-color: yellow;border: 1px solid black;">hello world!</h1> <p style="color:red;">this is my first css example</p> </body> </html> avoid using css in this way when possible. it is the opposite of a best practice. first, it is the least efficient implementation of css for maintenance. one styling change might require multiple edits within in a single web page. second, inline css also mixes (css) presentational code with html and content, making everything more difficult to read and understand. separating code and content makes maintenance easier for all who work on the the website. there are a few circumstances where inline styles are more common. you might have to resort to using inline styles if your working enviro...

Basic native form controls - Learn web development
is also detailed in the sending form data article). the file picker widget can be used to choose one or more files to send. to create a file picker widget, you use the <input> element with its type attribute set to file. the types of files that are accepted can be constrained using the accept attribute. ...
...file picker widget, you use the <input> element with its type attribute set to file. the types of files that are accepted can be constrained using the accept attribute. in addition, if you want to let the user pick more than one file, you can do so by adding the multiple attribute. example in this example, a file picker is created that requests graphic image files. the user is allowed to select multiple files in this case. ...
... types of files that are accepted can be constrained using the accept attribute. in addition, if you want to let the user pick more than one file, you can do so by adding the multiple attribute. example in this example, a file picker is created that requests graphic image files. the user is allowed to select multiple files in this case. ...

The HTML5 input types - Learn web development
gets. e-mail address field this type of field is set using the value email for the type attribute: <input type="email" id="email" name="email"> when this type is used, the user is required to type a valid email address into the field. any other content causes the browser to display an error when the form is submitted. you can see this in action in the below screenshot. ...
...to type a valid email address into the field. any other content causes the browser to display an error when the form is submitted. you can see this in action in the below screenshot. you can also use the multiple attribute in combination with the email input type to allow several email addresses to be entered in the same input (separated by commas): <input type="email" id="email" name="email" multiple> on some devices — notably, touch devices with dynamic keyboards like smart phones — a different virtual keypad might be presented that is more suitable for entering email addresses, including the @ key. see the firefox for android keyboard screenshot below for an example: note: you can find examples of the basic text input types at basic input examples (see the source code also). this...
...ts show a non-empty search field in firefox 71, safari 13, and chrome 79 on macos, and edge 18 and chrome 79 on windows 10. note that the clear icon only appears if the field has a value, and, apart from safari, it is only displayed when the field is focused. another feature worth noting is that the values of a search field can be automatically saved and re-used to offer auto-completion across multiple pages of the same website; this tends to happen automatically in most modern browsers. phone number field a special field for filling in phone numbers can be created using tel as the value of the type attribute: <input type="tel" id="tel" name="tel"> when accessed via a touch device with a dynamic keyboard, most devices will display a numeric keypad when type="tel" is encountered, meaning thi...

HTML text fundamentals - Learn web development
followed by <h2> elements to represent sub-subheadings—that doesn't make sense and will lead to weird results. of the six heading levels available, you should aim to use no more than three per page, unless you feel it is necessary. documents with many levels (i.e., a deep heading hierarchy) become unwieldy and difficult to navigate. ...
...asions, it is advisable to spread the content over multiple pages if possible. why do we need structure? to answer this question, let's take a look at text-start.html—the starting point of our running example for this article (a nice hummus recipe). you should save a copy of this file on your local machine, as you'll need it for the exercises later on. this document's body currently contains multiple pieces of content—they aren't marked up in any way, but they are separated with linebreaks (enter/return pressed to go onto the next line). however, when you open the document in your browser, you'll see that the text appears as a big chunk! this is because there are no elements to give the content structure, so the browser does not know what is a heading and what is a paragraph. furthermor...
...text the <h1> element is also a semantic element, which gives the text it wraps around the role (or meaning) of "a top level heading on your page." <h1>this is a top level heading</h1> by default, the browser will give it a large font size to make it look like a heading (although you could style it to look like anything you wanted using css). more importantly, its semantic value will be used in multiple ways, for example by search engines and screen readers (as mentioned above). on the other hand, you could make any element look like a top level heading. consider the following: <span style="font-size: 32px; margin: 21px 0; display: block;">is this a top level heading?</span> this is a <span> element. it has no semantics. you use it to wrap content when you want to apply css to it (or do somet...

Functions — reusable blocks of code - Learn web development
in this article we'll explore fundamental concepts behind functions such as basic syntax, how to invoke and define them, scope, and parameters. ...
...re a few times throughout the course, and you'll learn more about and see it in use in the next article. ...
...any parameters. when called, it always returns a random number between 0 and 1: let mynumber = math.random(); the browser's built-in string replace() function however needs two parameters — the substring 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 cho...

Drawing graphics - Learn web development
creating our own canvas that we draw future experiments on to. first make a local copy of our 0_canvas_start.html file, and open it in your text editor. add the following code into it, just below the opening <body> tag: <canvas class="mycanvas"> <p>add suitable fallback here.</p> </canvas> we have added a class to the <canvas> element so it will be easier to select if we have multiple canvases on the page, but we have removed the width and height attributes for now (you could add them back in if you wanted, but we will set them using javascript in a below section). canvases with no explicit width and height default to 300 pixels wide by 150 pixels high. now add the following lines of javascript inside the <script> element: const canvas = document.queryselector('.mycan...
...th and the canvas' width property equal to window.innerwidth (which gives us the viewport width). in the third line we set both a new constant height and the canvas' height property equal to window.innerheight (which gives us the viewport height). so now we have a canvas that fills the entire width and height of the browser window! you'll also see that we are chaining assignments together with multiple equals signs — this is allowed in javascript, and it is a good technique if you want to make multiple variables all equal to the same value. we wanted to make the canvas width and height easily accessible in the width/height variables, as they are useful values to have available for later (for example, if you want to draw something exactly halfway across the width of the canvas). if you s...
...s animation). the image looks like this: it contains six sprites that make up the whole walking sequence — each one is 102 pixels wide and 148 pixels high. to display each sprite cleanly we will have to use drawimage() to chop out a single sprite image from the spritesheet and display only that part, like we did above with the firefox logo. the x coordinate of the slice will have to be a multiple of 102, and the y coordinate will always be 0. the slice size will always be 102 by 148 pixels. now let's insert an empty draw() function at the bottom of the code, ready for filling up with some code: function draw() { }; the rest of the code in this section goes inside draw(). first, add the following line, which clears the canvas to prepare for drawing each frame. notice that w...

Handling text — strings in JavaScript - Learn web development
ext it does something different. let's try an example in our console. let one = 'hello, '; let two = 'how are you?'; let joined = one + two; joined; the result of this is a variable called joined, which contains the value "hello, how are you?". in the last instance, we joined only two strings, but you can join as many as you like, as long as you include a + between each pair. try this: let multiple = one + one + one + one + two; multiple; you can also use a mix of variables and actual strings. try this: let response = one + 'i am fine — ' + two; response; note: when you enter an actual string in your code, enclosed in single or double quotes, it is called a string literal. concatenation in context let's have a look at concatenation being used in action — here's an example f...
...pression results inside them, traditional strings can be fiddly to write: let score = 9; let highestscore = 10; let output = 'i like the song "' + song + '". i gave it a score of ' + (score/highestscore * 100) + '%.'; template literals simplify this enormously: output = `i like the song "${ song }". i gave it a score of ${ score/highestscore * 100 }%.`; there is no more need to open and close multiple string pieces — the whole lot can just be wrapped in a single pair of backticks. when you want to include a variable or expression inside the string, you include it inside a ${ } construct, which is called a placeholder. you can include complex expressions inside template literals, for example: let examscore = 45; let examhighestscore = 70; examreport = `you scored ${ examscore }/${ examhighe...
...ceholders here are pretty simple, only including a simple value in the string. the third one calculates a percentage result and rounds it to the nearest integer. the fourth one includes uses a ternary operator to check whether the score is above a certain mark and print a pass or fail message depending on the result. another point to note is that if you want to split a traditional string over multiple lines, you need to include a newline character, \n: output = 'i like the song "' + song + '".\ni gave it a score of ' + (score/highestscore * 100) + '%.'; template literals respect the line breaks in the source code, so newline characters are no longer needed. this would achieve the same result: output = `i like the song "${ song }". i gave it a score of ${ score/highestscore * 100 }%.`; we w...

Strategies for carrying out testing - Learn web development
browser, the site will be able to downgrade to something less exciting that still provides an acceptable user experience — the core information is still accessible, for example, even if it doesn't look quite as nice. the aim is to build up a chart of browsers/devices you can refer to as you test. you can make this as simple or as complex as you like — for example a common approach is to have multiple grades of support level, something like: a grade: common/modern browsers — known to be capable. test thoroughly and provide full support. b grade: older/less capable browsers — known not to be capable. test, and provide a more basic experience that gives full access to core information and services. c grade: rare/unknown browsers — don't test, but assume they are capable. serve the ful...
..., but it is annoying. after the process has completed, you should have a virtual machine running an operating system inside a window on your host computer. you need to treat this virtual operating system installation just like you would any real installation — for example, as well as installing the browsers you want to test, install an anti-virus program to protect it from viruses. ...
...e a window on your host computer. you need to treat this virtual operating system installation just like you would any real installation — for example, as well as installing the browsers you want to test, install an anti-virus program to protect it from viruses. ...

Introducing a complete toolchain - Learn web development
dds community features such as issue tracking, following project releases and much more. in the next chapter we will push to a github code repository, which will cause a cascade effect that (should) deploy all the software to a home on the web. netlify is a hosting service for static websites (that is, websites that entirely consist of 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 cho...
...ful for purposes like checks that run before a release - i.e. "don't release any code that's not been properly formatted." it can be arduous to run the initial command against each file, and it would be useful to have a single command to do this for us (and the same will go for our linting tools). there's many different ways to solve this problem; here's just a few: using npm scripts to run multiple commands from the command line in one go, such as npm run tidy-code. using special "git hooks" to test if the code is formatted before a commit. using code editor plugins to run prettier commands each time a file is saved. note: what is a git hook? git (not github) provides a system that lets us attach pre- and post- actions to the tasks you perform with git (such as committing your code). a...
...ery important, especially for larger projects. the go to tool for javascript linting is eslint. it's an extremely powerful and versatile tool but can be tricky to configure correctly and you could easily consume many hours trying to get a configuration just right! out of the box, eslint is going to complain that it can't find the configuration file if you run it. the configuration file supports multiple formats but for this project we'll use .eslintrc.json (the leading period means the file is hidden by default). eslint is installed via npm, so as per discussions in chapter 2, you have the choice to install this tool locally or globally. using both is recommended: for projects you intend to share, you should always include eslint as a local dependency so that anyone making their own copy can...

Theme concepts
the heading area background color for your theme. "tab_background_text": the color of the text in the heading area. package your theme and submit it to amo, following these instructions. themes can be submitted to amo for hosting or for self-distribution. static theme approaches there are two approaches you can take to theming the header area of firefox: using a single image or using multiple images. you could combine the two, but it’s easier to treat them separately. single image themes this is the basic or minimal theming option, where you define: a single image, which is anchored to the top right of the header area. a color for the text in the header. the area your header image needs to fill is a maximum of 200 pixels high. the maximum image width is determined by the res...
...ating a very wide image, a better approach is to use a narrower image with a transparent left edge so that it fades to the background color. for example, we could use this image combined with a complementary background color, to create this effect in the header see details about this theme in the themes example weta_fade. obviously, you can still provide a single wide image if you prefer. multiple image themes as an alternative to creating a single image theme, you have the option to use multiple images. these images can be individually anchored to locations within the header, with the option to apply tiling to each image. depending on the effect you want to create you may need to suppress the mandatory "theme_frame": image with an empty or transparent image. you would use an empty or tr...
...l_backgrounds": [ "weta_for_tiling.png"] }, and the images tiling with: "properties": { "additional_backgrounds_alignment": [ "top" ], "additional_backgrounds_tiling": [ "repeat" ] }, full details of how to setup this theme can be found in the themes example weta_tiled. full detais of the alignment and tiling options can be found in the "theme" key description. ...

The Firefox codebase: CSS Guidelines
ys add a space before !important. omit units on 0 values do this: margin: 0; not this: margin: 0px; use expanded syntax it is often harder to understand what the shorthand is doing and the shorthand can also hide some unwanted default values. it is good to privilege expanded syntax to make your intentions explicit. do this: border-color: red; not this: border: red; put multiple selectors on different lines do this: h1, h2, h3 { font-family: sans-serif; text-align: center; } not this: h1, h2, h3 { font-family: sans-serif; text-align: center; } naming standards for class names lower-case-with-dashes is the most common. but camelcase is also used sometimes. try to follow the style of existing or related code. other tips assume ="true" in attribute sel...
...!important along with a comment why it is needed. using css variables adding new variables before adding new css variables, please consider the following questions: is the variable value changed at runtime? (either from javascript or overriden by another css file) if the answer is no, consider using a preprocessor variable or simply inlining the value. is the variable value used multiple times? if the answer is no and the value isn't changed at runtime, then you likely don't need a css variable. is there an alternative to using the variable like inheriting or using the currentcolor keyword? using inheriting or using currentcolor will prevent repetition of the value and it is usually good practice to do so. in general, it's good to first think of how some css could b...
...age, using :root is the most performant way of doing so. reflows and style flushes see performance best practices for firefox front-end engineers for more information about this. misc text aliasing when convenient, avoid setting the opacity property on text as it will cause text to be aliased differently. hdpi support it's recommended to use svg since it keeps the css clean when supporting multiple resolutions. see the svg guidelines for more information on svg usage. however, if only 1x and 2x png assets are available, you can use this @media query to target higher density displays (hdpi): @media (min-resolution: 1.1dppx) ...

Eclipse CDT
the tab of the file that you want to edit, then from the menu bar select "window > new editor". this will open another tab containing the same file. now simply drag that tab to position it beside, above, or below the original. changes you make in one editor will be immediately reflected in the other. note that the search, call hierarchy, and other tabs have a "pin" button that allows you to open multiple tabs of these type. this is useful if you want to keep your existing search results open, for example, and have a new search open in a separate tab rather than overriding the contents of the existing search tab. code assistance note: indexing, by its very nature, is specific to a given compiler configuration. be aware that when eclipse gives results for any of the actions that follow, it will n...
... object directory outside their source directory to explicitly add {objdir}/dist/include to the project's "cdt user setting entries". fixing eclipse bug 381601 would considerably reduce the impact of the "unresolved inclusion" issue. (update 2017-03-28: the option index all header variants has been added in version 8.3.0, as explained in a comment of the mentioned bug. this option allows to have multiple definitions for the same header file, which might fix this issue. update 2017-11-04 by jwatt: ticking the "index all header variants" option caused eclipse to blow through the 12 gb of ram i'd given it while indexing before it ran out of memory and crashed.) there are parser errors it is expected that eclipse will show parser errors even for a known-good copy of the mozilla source. parser error...
...se virtually all mozilla source files include header files (directly or indirectly) that have been copied to or generated in the object directory. without an object directory, the indexer would find that a lot of header files are missing when processing the source files, which would significantly degrade its ability to index the source and provide good code assistance. how can i open eclipse for multiple trees at once? to be able to open more than one workspace at a time, you currently need to launch a separate eclipse process for each workspace. on mac, create a script called something like open-my-workspace.py, give it the following contents, replacing the bold paths as appropriate, and make it executable (chmod a+x open-my-workspace.py): #!/usr/bin/env python import os, subprocess eclipse_a...

PBackground
this article outlines what pbackground is, and how it works. ipdl recap ipdl is a language used to define "protocols" — essentially formalized versions of how two things can communicate. it is similar in some respects to idl and webidl. ...
...this article outlines what pbackground is, and how it works. ipdl recap ipdl is a language used to define "protocols" — essentially formalized versions of how two things can communicate. it is similar in some respects to idl and webidl. ...
...round thread is designed to be responsive (nobody is allowed to do long running computation or file i/o on it) to guarantee better latency than going through the main threads (which can run arbitrary js, gc, etc.) can provide. examples indexeddb was rebuilt on top of pbackground last year. this allows the dom code to generally not worry about what thread (main vs. worker) or process (single vs. multiple) it is running in. instead, it simply turns all of its operations into ipdl calls on a set of pbackground-based actors and the processing, file i/o, etc, can be controlled from the pbackground thread regardless of where the dom calls are being made. the logic is all implemented in actorsparent.cpp and actorschild.cpp in the dom/indexeddb directory. these are not small files (actorsparent.cpp was...

Examples
return os.file.exists(path).then(exists => { console.log(exists ? "you have .mozconfig in " + currentdir : "you don't have .mozconfig in " + currentdir); }); }).then(null, components.utils.reporterror); parallel promise (this example needs more work) so when chaining promises, consequent promises run after the previous promise completes. now what if we want to run multiple promises and then return when all are done? this is accomplished by using promise.all, this feature requires promise.jsm. const {cu} = require("chrome"); const {textdecoder, textencoder, os} = cu.import("resource://gre/modules/osfile.jsm", {}); /* files: an array of file paths */ function readtextfiles(files) { let promises = [], decoder = new textdecoder(); for (let i = 0; i < files.
...to/folder"; let promise = readtextfiles([ os.path.join(folder, "read.me"), os.path.join(folder, "home.html") ]); promise.then( function onsuccess(filescontent) { // filescontent is an array of strings; each string is the content of one file. console.log(filescontent); }, function onfail() { console.error("failed to load all files"); } ); see also the ask.m.o topic: doing multiple promises in function in pareallel, how return when last done? simple example user defined promise function 2 whenever you want to make a function a promise. always wrap that function in a try catch and make that catch return promise.reject(ex) otherwise it will not trigger the rejection function of the promise.then. this way if any error happens it will reject the promise. in the example below ...
..."fulfilled with this value: " + avalue); }, function onreject(areason) { console.log("rejected with this reason: " + areason); }); // unexpected errors should always be reported at the end of a promise chain. newpromise.then(null, components.utils.reporterror); note: more examples for consuming promises are available in the promise object documentation. make user defined promise return after multiple images finish loading (promise.all and promise.defer) this example shows how to use promise.all to wait to create multiple promises with promise.defer() and return at the end of it. components.utils.import("resource://gre/modules/promise.jsm"); var mypromise = myuserdefinedpromise(); mypromise.then( function(asuccessreason) { alert('mypromise was succesful and reason was = "' + asuccessr...

Sqlite.jsm
nction takes an object defining connection options: path (required) the database file to open. this can be an absolute or relative path. if a relative path is given, it is interpreted as relative to the current profile's directory. if the path does not exist, a new sqlite database will be created. the value typically ends with .sqlite. sharedmemorycache (optional) boolean indicating whether multiple connections to the database share the same memory cache. sharing the memory cache likely results in less memory utilization. however, sharing also requires connections to obtain a lock, possibly making database access slower. defaults to true. shrinkmemoryonconnectionidlems (optional) if defined, the connection will attempt to minimize its memory usage after this many milliseconds of connection...
...transaction() { await conn.execute("insert into mytable values (?, ?)", ["foo", "bar"]); let data = await conn.execute("select * from mytable"); if (data.length < 5) { throw new error("we don't have the expected 5 rows to perform the next operation!"); } // ... }); selecting and returning data these examples demonstrate how to access the data that is returned. this example shows multiple rows of a table being returned using the onrow function parameter. let accounts = []; let accountid, username; let statement = "select account_id, username from accounts order by username asc"; try { const result = await conn.executecached(statement, null, function(row, cancel) { accountid = row.getresultbyname("account_id"); username = row.getresultbyname("username"); accoun...
...one row is returned. let row = result[0]; let accountid = row.getresultbyname("lastinsertrowid"); if (callback) { callback(null, accountid); } } catch (err) { if (callback) { callback(err); } } finally { conn.close(); } }); note: the value returned by the last_insert_rowid() is per connection, so you may need to open separate connections when doing multiple inserts from different locations, to be sure the row id that is being returned is from the correct corresponding insert. ...

Creating localizable web applications
word order and sentence structure. note that some strings might be hidden in libraries' code (e.g. error messages), or in javascript libraries and scripts. if you are using pure html instead of gettext to localize your webapp, consider using an additional gettext-like format such as .lang to streamline localizers' work with repeating content. this is useful for strings occurring in the webapp multiple times, like "return to top", "comments", "click to see larger image" etc. might be also helpful for headers and footers, if you're not using templates to display them. in most of the cases though, you should use gettext whenever technically possible (i.e. the server's php has been built with gettext support). localize the date format localizing the date format is as easy as localizing any othe...
...['display_username']); note the single quotes around '%1$s by %2$s'. don't nest gettext calls snippet 1. bad: <?printf(_("<a href=\"%s\">" . _("personas home") . "</a> : how to create personas"), $locale_conf->url('/'));?> snippet 2. good: <?printf("<a href=\"%s\">" . _("personas home") . "</a> : " . ...
...snippet 2 below). snippet 1. bad: echo _("long text\n"); echo _("second part\n"); echo _("third part\n"); snippet 2. still bad (but slightly better than snippet 1): # l10n: long text example, part 1. ...

Gecko Profiler FAQ
rom gathering more samples after the “startup end” marker that you’re interested in, you can call services.profiler.pause(); or you can insert a marker with a special string and then write a script that filters out all samples that were gathered after your marker. to increase the amount of data, you should run your automated gathering procedure many times, and then combine multiple profiles into one. we don’t have a script that combines profiles, but i can help you write one if you’re interested. in the end, you should have one big “before” profile and one big “after” profile. profile comparison is tricky. the only way that i’ve tried before is to use a “difference calltree”: in the regular call tree, each node of the calltree is assigned...
...evious profiling we know that malloc overhead contributes a measurable percentage of overhead to the overall time and then study the change to that workload after replacing the allocator. you do want to think about various characteristics of an allocator which may have an impact on performance. for example, see julian’s great investigation on the impact of cache line sharing across 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 perf...
...dd-on is helpful. how do we know when profiler output is statistically significant (for comparing across runs / across machines)? [mstange] hard to say. prefer to do comparisons by measuring your timings with code instead of by inspecting profiles. always keep in mind that profiler overhead has the potential to skew the results. is it better to profile across multiple platforms, or to focus time on windows (since that's the bulk of our users)? [mstange] in my opinion, as long as you double-check that the problems you find are actually present on windows, it doesn’t matter much what platform you find them on. [ehsan] that being said, we do see a lot of windows-specific issues that you will not find on other platforms, for example somet...

NSS Certificate Download Specification
mats. in all cases the certificates are x509 version 1, 2, or 3. binary formats nss's certificate loader will recognize several binary formats. they are: der encoded certificate: this is a single binary der encoded certificate. pkcs#7 certificate chain: this is a single pkcs#7 signeddata object. the only significant field in the signeddata object is the certificates field, which may contain multiple certificates to be imported together. the contents of the version, digestalgorithms, contentinfo, crls, and signerinfos fields are ignored. netscape certificate sequence: this is another pkcs#7 object format, and like the signeddata format, it allows multiple certificates to be imported together. this format is simpler than the pkcs#7 signeddata object format. it consists of a pkcs#7 contentinfo...
... simpler than the pkcs#7 signeddata object format. it consists of a pkcs#7 contentinfo structure, wrapping a sequence of certificates. the contenttype field oid must be netscape-cert-sequence (see object identifiers). the content field is the following asn.1 structure: certificatesequence ::= sequence of certificate see the section below on certificate chains for more information about how multiple certificates are handled. text formats any of the above binary formats can also be imported in text form. the text form begins with the following line: -----begin certificate----- following this line should be the certificate data, which can be in any of the binary formats described above. this data must be base64 encoded as described by rfc 1113. following the data should be the followin...
...e begin and end lines must say certificate, and not any other word (such as key). the begin and end lines must begin and end with 5 dashes, with no extra leading or trailing white space (excluding the end of line characters). importing certificate chains several of the formats described above can contain several certificates. when nss's certificate decoder encounters one of these collections of multiple certificates they are handled in the following way: the first certificate is processed in a context specific manner, depending upon how it is being imported. for mozilla browsers, this handling will depend upon the mime content-type that is used on the object being downloaded. for nss-based servers it will depend upon the options selected in the server's administration interface. subsequen...

NSS_3.12_release_notes.html
bug 391291: shared database integrity checks not yet implemented. bug 391292: shared database implementation s...
...s to certutil bug 339737: libpkix ocsp checking calls cert_verifycert bug 358785: merge nss_libpkix_branch back to trunk bug 365966: infinite recursive call in vfy_verifydigestdirect bug 382078: pkix default http client returns error when try to get an ocsp response. ...
...rd bug 405966: unknown signature oid 1.3.14.3.2.29 causes sec_error_bad_signature, 3.11 ignores it bug 413010: cert_comparerdn may return a false match bug 417664: false positive crl revocation test on ppc/ppc64 nss_enable_pkix_verify=1 bug 404526: glibc detected free(): invalid pointer bug 300929: certificate policy extensions not supported bug 129303: nss needs to expose interfaces to deal with multiple token sources of certs. bug 217538: softoken databases cannot be shared between multiple processes bug 294531: design new interfaces for certificate path building and verification for libpkix bug 326482: nss ecc performance problems (intel) bug 391296: need an update helper for shared databases bug 395090: remove duplication of pkcs7 code from pkix_pl_httpcertstore.c bug 401026: need to provide a...

NSS API Guidelines
ept of an error stack. when something goes wrong, the call stack unwinds, with routines returning an error indication. each level which flags a problem, adds its own error number to the stack. at the bottom of the stack is the fundamental error, for example: file not found, and on top is an error precisely relating to what you are doing. note: error stacks are vertical, and never horizontal. if multiple things go wrong simultaneously, and you want to report them all, use another mechanism. errors, though not integers, are done as external constants, instead of preprocessor definitions. this is so any additional error doesn't trigger the entire tree to rebuild. likewise, the external references to errors are made in the prototypes files, with the functions which can return them. error stacks a...
... of the service functions it calls, and whether they are thread safe. for now, we should internally document which service functions we call, and how we expect them to behave in a threaded environment. finally, from an api point of view, we should examine functions which have global effects. functions like xxx_setdefaultyyy(); should not operate on global data, particularly if they may be called multiple times, to provide different semantics for different operations. for example, the following should be avoided : sec_setkey(keyforoperation); sec_encrypt(data,length); instead, a context handle should be created, and the sec_setkey() function, above, made on that handle. fortunately most of the existing api has the correct semantics. the exception to this global effects rule may be function...
... callback functions callback functions should all contain an opaque parameter (void *) as their first argument, passed by the original caller. callbacks which are set, like ssl callbacks, should have defaults which provide generally useful semantics. ...

sslfnc.html
returns the function returns one of these values: if successful, secsuccess. if unsuccessful, secfailure. use pr_geterror to obtain error code. description if you are writing an application that will use ssl sockets that handshake as a server, you must call ssl_configserversessionidcache to configure additional session caches for server sessions. if your server application uses multiple processes (instead of or in addition to multiple threads), use ssl_configmpserversidcache instead. you must use one of these functions to create a server cache. this function creates two caches: theserver session id cache (also called the server session cache, or server cache), and theclient-auth certificate cache (also called the client cert cache, or client auth cache). both caches are used on...
...n cache. if a null value is passed, the server default value is used: /tmp (unix) or \\temp (nt). returns the function returns one of these values: if successful, secsuccess. if unsuccessful, secfailure. use pr_geterror to obtain error code. description this function is identical to ssl_configserversessionidcache, except that it is for use with applications that use multiple processes. you must use one or the other of these functions to create a server cache, not both. if your application will use multiple processes (instead of, or in addition to, multiple threads), and all of the processes appear to be on the same server (same ip address and port number), then those processes must share a common ssl session cache. the common parent of all the processes must call t...
...oth. if your application will use multiple processes (instead of, or in addition to, multiple threads), and all of the processes appear to be on the same server (same ip address and port number), then those processes must share a common ssl session cache. the common parent of all the processes must call this function to create the cache before creating the other processes. an application uses multiple processesonly if it uses the unix function fork, or the win32 function createprocess. this is not the same as using multiple threads or multiple processors. note that an ssl server that uses fortezza hardware devices is limited to a single process. it can use multiple threads, and thereby make use of multiple processors, but this must all be done from a single process. this function creates two...

NSS tools : signtool
* 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 same files with an additional digital signature based on a company-generated certificate to indicate that the product is approved for use within the co...
...herwise. the nt version of signtool always requires the use of the -d option to specify where the database files are located. -e extension tells signtool to sign only files with the given extension; for example, use -e".class" to sign only java class files. note that with netscape signing tool version 1.1 and later this option can appear multiple times on one command line, making it possible to specify multiple file types or classes to include. -f commandfile specifies a text file containing netscape signing tool options and arguments in keyword=value format. all options and arguments can be expressed through this file. for more information about the syntax used with this file, s...
...ero) is the default and gives full information. a value of -1 suppresses most messages, but not error messages. -w archive displays the names of signers of any files in the archive. -x directory excludes the specified directory from signing. note that with netscape signing tool version 1.1 and later this option can appear multiple times on one command line, making it possible to specify several particular directories to exclude. -z tells signtool not to store the signing time in the digital signature. this option is useful if you want the expiration date of the signature checked against the current date and time rather than the time the files were signed. -z j...

Shell global objects
d their behavior are experimental: don't depend upon them unless you're willing to update your code if these experimental apis change underneath you. functions available if --fuzzing-safe is not specified clone(fun[, scope]) clone function object. getselfhostedvalue() get a self-hosted value by its name. note that these values don't get cached, so repeatedly getting the same value creates multiple distinct clones. line2pc([fun,] line) map line number to pc. pc2line(fun[, pc]) map pc to line number. nestedshell(shellargs...) execute the given code in a new js shell process, passing this nested shell the arguments passed to nestedshell. argv[0] of the nested shell will be argv[0] of the current shell (which is assumed to be the actual path to the shell. arguments[0] (of the call to nes...
... promise created by makefakepromise(). this doesn't have any observable effects outside of firing any onpromisesettled hooks set on debugger instances that are observing the given promise's global as a debuggee. functions available only if js_gc_zeal is defined gczeal(level, [n]) specifies how zealous the garbage collector should be. some of these modes can be set simultaneously, by passing multiple level options, e.g. "2;4" will activate both modes 2 and 4. modes can be specified by name or number. values: 0: (none) normal amount of collection (resets all modes) 1: (poke) collect when roots are added or removed 2: (alloc) collect when every n allocations (default: 100) 3: (framegc) collect when the window paints (browser only) 4: (verifierpre) verify pre write barrie...
...rameverifierpre) verify pre write barriers between paints 6: (stackrooting) verify stack rooting 7: (generationalgc) collect the nursery every n nursery allocations 8: (incrementalrootsthenfinish) incremental gc in two slices: 1) mark roots 2) finish collection 9: (incrementalmarkallthenfinish) incremental gc in two slices: 1) mark all 2) new marking and finish 10: (incrementalmultipleslices) incremental gc in multiple slices 11: (incrementalmarkingvalidator) verify incremental marking 12: (elementsbarrier) always use the individual element post-write barrier, regardless of elements size 13: (checkhashtablesonminorgc) check internal hashtables on minor gc 14: (compact) perform a shrinking collection every n allocations 15: (checkheapaftergc) walk the heap ...

Mozilla internal string guide
eaders 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::encoding. additonally, on windows the are some rare cases (e.g. drag&drop) where it's necessary to call a system api with data encoded in the windows locale-dependent legacy encoding instead of utf-16. in those rare cases, use multibyt...
...sually requires converting it to an 8-bit string, because that's what printf expects. ...
...f the future string length caused by a sequence of appends (excluding appends that convert between utf-16 and utf-8 in either direction) in order to avoid multiple allocations during the sequence of appends. however, the other allocation-avoidance features of xpcom strings interact badly with setcapacity() making it something of a footgun. setcapacity() is appropriate to use before a sequence of multiple operations from the following list (without operations that are not on the list between the setcapacity() call and operations from the list): append() appendascii() appendliteral() appendprintf() appendint() appendfloat() lossyappendutf16toascii() appendasciitoutf16() do not call setcapacity() if the subsequent operations on the string do not meet the criteria above. operations that u...

XPCOM Stream Guide
case. seekable streams some streams are "seekable": they let you specify where in the stream you are reading from (instead of requiring it be from the beginning). they can also report their current position in the file. seekable streams implement the nsiseekablestream interface. the following stream types are known to implement nsiseekablestream: nsstorageinputstream nsstringinputstream nsmultiplexinputstream nspipeinputstream nsfileinputstream nsbufferedinputstream nsfileoutputstream nsbufferedoutputstream complex stream types several stream types leverage primitive stream types to do specialized work. these work by taking the input from another stream, and providing a stream interface to access that underlying stream's data. complex input stream types type purpose ...
...fferedoutputstream complex stream types several stream types leverage primitive stream types to do specialized work. these work by taking the input from another stream, and providing a stream interface to access that underlying stream's data. complex input stream types type purpose native class contract id interface how to bind to a primitive input stream multiplex concatenate multiple input streams into one. nsmultiplexinputstream @mozilla.org/io/multiplex-input-stream;1 nsimultiplexinputstream .appendstream(stream) .insertstream(stream, index) buffered read ahead in the underlying stream into a buffer, so that calls to the underlying stream are minimized. nsbufferedinputstream @mozilla.org/network/buffered-i...
...istringinputstream", "setdata"); function buildstream(data) { return new stringstream(data, data.length); } function run_test() { var str1 = buildstream("we "); var str2 = buildstream("will "); var str3 = buildstream("rock "); var str4 = buildstream("you!"); var check = "we will rock you!"; var multi = components.classes["@mozilla.org/io/multiplex-input-stream;1"] .createinstance(components.interfaces.nsimultiplexinputstream); multi.appendstream(str1); multi.appendstream(str2); multi.appendstream(str3); multi.appendstream(str4); var instream = components.classes["@mozilla.org/scriptableinputstream;1"] .createinstance(components.interfaces.nsiscriptableinputstream); instream.i...

XPCOM guide
the problem would not exist with java's interfaces).making cross-thread calls using runnablesin the mozilla platform, most activities such as layout, dom operations, content javascript, and chrome javascript run on the main thread. however, it may be useful for c++ code in the mozilla platfor...
...are looking for add-on sdk solution for xpcom javascript components then check out platform/xpcom module first.inheriting from implementation classesgiven that idl interfaces map to abstract classes in c++, a common problem when dealing with idl is when you have an idl inheritance hierarchy, and a corresponding c++ implementation hierarchy, you run into multiple inheritance. that's not inherently multiple inheritance, though, because you only mix in interfaces (i.e. the problem would not exist with java's interfaces).making cross-thread calls using runnablesin the mozilla platform, most activities such as layout, dom operations, content javascript, and chrome javascript run on the main thread. however, it may be useful for c++ code in the mozilla platform to run tasks on another thread.mozilla int...
...s to the progress of the application's startup process, so they can start new services at appropriate times, for example.xpcom array guidemozilla has many array classes because each array is optimized for a particular usage pattern. this guide describes the available arrays as well as the enumerator classes that can be used to get to them. in this document the term array refers to a container for multiple objects with a numeric, zero-based index.xpcom changes in gecko 2.0several changes that affect xpcom component compatibility are taking place in gecko 2. this article details those changes, and provides suggestions for how to update your code.xpcom hashtable guidea hashtable is a data construct that stores a set of items. each item has a key that identifies the item. items are found, added, and r...

IAccessibleTable
in the table if such a description exists. otherwise a null pointer is returned. return value e_invalidarg if bad [in] passed, [out] value is null. s_false if there is nothing to return, [out] value is null. s_ok. columnextentat() returns the number of columns occupied by the accessible object at the specified row and column in the table. the result is greater than 1 if the specified cell spans multiple columns. [propget] hresult columnextentat( [in] long row, [in] long column, [out] long ncolumnsspanned ); parameters row 0 based row index of the accessible for which to return the column extent. column 0 based column index of the accessible for which to return the column extent. ncolumnsspanned returns the 1 based column extent of the specified cell. return value e_invalidarg if bad [in...
...ent(), but in the case where the table cells are not direct children of the table this is the cell index specified by the "table-cell-index" object attribute obtained from parsing the attributes string returned by calling iaccessible2.attributes() on the cell object. columnindex returns the 0 based column index of the cell of the specified child or the index of the first column if the child spans multiple columns. return value e_invalidarg if bad [in] passed, [out] value is 0. s_ok. iscolumnselected() returns a boolean value indicating whether the specified column is completely selected. [propget] hresult iscolumnselected( [in] long column, [out] boolean isselected ); parameters column 0 based index of the column for which to determine whether it is selected. isselected returns true if the ...
...ed row in the table if such a description exists. otherwise a null pointer is returned. return value e_invalidarg if bad [in] passed, [out] value is null. s_false if there is nothing to return, [out] value is null. s_ok. rowextentat() returns the number of rows occupied by the accessible object at the specified row and column in the table. the result is greater than 1 if the specified cell spans multiple rows. [propget] hresult rowextentat( [in] long row, [in] long column, [out] long nrowsspanned ); parameters row 0 based row index of the accessible for which to return the row extent. column 0 based column index of the accessible for which to return the row extent. nrowsspanned returns the row extent of the specified cell. return value e_invalidarg if bad [in] passed, [out] value is 0. s...

IAccessibleTableCell
ut] long nrowsspanned ); [propget] hresult rowheadercells([out, size_is(, nrowheadercells,)] iunknown cellaccessibles, [out] long nrowheadercells ); [propget] hresult rowindex([out] long rowindex ); [propget] hresult table([out] iunknown table ); methods columnextent() returns the number of columns occupied by this cell accessible. the result is greater than 1 if the specified cell spans multiple columns. [propget] hresult columnextent( [out] long ncolumnsspanned ); parameters ncolumnsspanned returns the 1 based column extent of the specified cell. return value s_ok. columnheadercells() returns the column headers as an array of cell accessibles. [propget] hresult columnheadercells( [out, size_is(, ncolumnheadercells,)] iunknown cellaccessibles, [out] long ncolumnheadercells ); p...
...f the returned array. return value s_false if there is no header, [out] values are null and 0 respectively. s_ok. columnindex() translates this cell accessible into the corresponding column index. [propget] hresult columnindex( [out] long columnindex ); parameters columnindex returns the 0 based column index of the cell of the specified cell or the index of the first column if the cell spans multiple columns. return value s_ok. isselected() returns a boolean value indicating whether this cell is selected. [propget] hresult isselected( [out] boolean isselected ); parameters isselected returns true if the specified cell is selected and false otherwise. return value s_ok. rowcolumnextents() gets the row and column indexes and extents of this cell accessible and whether or not it is selecte...
... accessibles returned; the size of the returned array. return value s_false if there is no header, [out] values are null and 0 respectively. s_ok. rowindex() translates this cell accessible into the corresponding row index. [propget] hresult rowindex( [out] long rowindex ); parameters rowindex returns the 0 based row index of the specified cell or the index of the first row if the cell spans multiple rows. return value s_ok. table() returns a reference to the accessbile of the containing table. [propget] hresult table( [out] iunknown table ); parameters table returns a reference to the iunknown of the containing table. return value s_ok. see also iaccessibletable2 ...

nsIIOService
that will get access to the result of this request. for example for an image load, it's the document in which the image will be loaded. and for a css stylesheet it's the document whose rendering will be affected by the stylesheet. if possible, pass in the element which is performing the load. but if the load is coming from a js api (such as xmlhttprequest) or if the load might be coalesced across multiple elements (such as for ) then pass in the document node instead. for loads that are not related to any document, such as loads coming from addons or internal browser features, use null here. aloadingprincipal the loadingprincipal of the channel. the principal of the document where the result of this request will be used. this defaults to the principal of aloadingnode, so when aloadingnode is pas...
...that will get access to the result of this request. for example for an image load, it's the document in which the image will be loaded. and for a css stylesheet it's the document whose rendering will be affected by the stylesheet. if possible, pass in the element which is performing the load. but if the load is coming from a js api (such as xmlhttprequest) or if the load might be coalesced across multiple elements (such as for <img>) then pass in the document node instead. for loads that are not related to any document, such as loads coming from addons or internal browser features, use null here. aloadingprincipal the loadingprincipal of the channel. the principal of the document where the result of this request will be used. this def...
...that will get access to the result of this request. for example for an image load, it's the document in which the image will be loaded. and for a css stylesheet it's the document whose rendering will be affected by the stylesheet. if possible, pass in the element which is performing the load. but if the load is coming from a js api (such as xmlhttprequest) or if the load might be coalesced across multiple elements (such as for ) then pass in the document node instead. for loads that are not related to any document, such as loads coming from addons or internal browser features, use null here. aloadingprincipal the loadingprincipal of the channel. the principal of the document where the result of this request will be used. this defaults to the principal of aloadingnode, so when aloadingnode is pas...

Using the clipboard
ard object which refers to the system clipboard. tell the clipboard object to copy the data using the transferring object. you might wonder why a transferring object is needed instead of just putting the object directly on the clipboard. one reason is that some systems do not copy the data right away. instead, they wait until the data is pasted. another reason is that the transferable can hold multiple representations of the same data. for example, a piece of html can be represented in both its original html form and in plain text. if an application wants to get the data from the clipboard and doesn't understand html, it can use the plain text version. if it does understand html, it can grab that version. the transferring object will hold the clipboard contents until the application has decided...
...ring into the transferable. this function takes three parameters. the first is the flavor we are setting, the second is the object holding the string, and the third is the length of the data, in bytes. here, the length is multiplied by two because we are using a unicode string which requires two bytes per character. you can repeat the last two lines and call adddataflavor and settransferdata for multiple flavors. that way, you could have a text version and an html version of the content. the transferable object will hold its own copy of the data. when you've added all the flavors you want, you can put it all on the clipboard at once. the transferable object will hold all of the data that you want until you're ready to put it on the clipboard. services.clipboard.setdata(trans, null, services.clip...
...aced into the transferable. next we create two javascript objects which will hold the return values from gettransferdata. then we use gettransferdata to retrieve the data from the transferable. we specify the flavor we would like to get. the data will be converted if it is not available in the desired flavor, and a conversion from an available flavor is possible. if you originally copied data of multiple flavors onto the clipboard, you can retrieve the data in the best format necessary. for example, a textbox would accept "text/unicode" (or "text/plain") while a composer window might accept html and image data. the variable str now holds the data from the clipboard. we need to convert the data back into a javascript string from an xpcom object. the code below can be used for this purpose: if (s...

WebIDL bindings
need to make sure your header includes all the headers needed for your func annotations. add external interface entries to bindings.conf for whatever non-webidl interfaces your new interface has as arguments or return values. implement a wrapobject override on mozilla::dom::myinterface that just calls through to mozilla::dom::myinterface_binding::wrap. note that if your c++ type is implementing multiple distinct web idl interfaces, you need to choose which mozilla::dom::myinterface_binding::wrap to call here. see audiocontext::wrapobject, for example. expose whatever methods the interface needs on mozilla::dom::myinterface. these can be inline, virtual, have any calling convention, and so forth, as long as they have the right argument types and return types. you can see an example of what the ...
...od and indicates that another property with the specified name will also appear on the interface prototype object and will have the same function object value as the property for the method. for example: interface myinterface { [alias=performsomething] void dosomething(); }; myinterface.prototype.performsomething will have the same function object value as myinterface.prototype.dosomething. multiple [alias] extended attribute can be used on the one method. [alias] cannot be used on a static method, nor on methods on a global interface (such as window). aside from regular property names, the name of an alias can be symbol.iterator. this is specified by writing [alias="@@iterator"]. [bindingalias=propname] this extended attribute can be specified on an attribute and indicates that another p...
...you actually had two separate attribute declarations on your interface. for example: interface myinterface { [bindingalias=otherattr] readonly attribute boolean attr; }; myinterface.prototype.otherattr and myinterface.prototype.attr will both exist, have separate getter/setter functions, but call the same binding glue code and implementation function on the objects implementing myinterface. multiple [bindingalias] extended attributes can be used on a single attribute. [chromeonly] this extended attribute can be specified on any method, attribute, or constant on an interface or on an interface as a whole. it can also be specified on dictionary members. interface members flagged as [chromeonly] are only exposed in chrome windows (and in particular, are not exposed to webpages). from the po...

Working with windows in chrome code
it contains tips and example code on opening new windows, finding an already opened window, and passing data between different windows. opening windows from a <script> in a window or an overlay to open a new window, we usually use a window.open or window.opendialog dom call, like this: var win = window.open("chrome://myextension/content/about.xul", "aboutmyextension", "chrome,centerscreen"); the first parameter to window.open is the uri of the xul file that describes the window and its contents. the second parameter is the window's name; the name can be used in links or forms as the target attribute. ...
...) provides information about existing windows. two of its methods are often used to obtain information about currently open windows: getmostrecentwindow and getenumerator. please refer to the nsiwindowmediator page for more information and examples of using nsiwindowmediator. === example: opening a window only if it's not opened already === xxx tbd passing data between windows when working with multiple windows, you often need to pass information from one window to another. since different windows have separate dom documents and global objects for scripts, you can't just use one global javascript variable in scripts from different windows. there are several techniques of varying power and simplicity that can be used to share data. we'll demonstrate them from the simplest to the most complex in ...
...e arguments are passed by value, that is to say that any changes made to the values in the new window will not affect the calling code. example 5: using nsiwindowwatcher for passing an arbritrary javascript object it is still possible to pass any javascript object using nsiwindowwatcher, it just takes a little more effort. in this example a single object is passed, though it is possible to pass multiple objects and primitives using a combination of this and the example above. // in the calling code var args = { param1: true, param2: 42 }; args.wrappedjsobject = args; var watcher = components.classes["@mozilla.org/embedcomp/window-watcher;1"] .getservice(components.interfaces.nsiwindowwatcher); watcher.openwindow(null, url, windowname, features, args); // in t...

ANGLE_instanced_arrays - Web APIs
webgl extensions are available using the webglrenderingcontext.getextension() method. for more information, see also using extensions in the webgl tutorial. availability: this extension is only available to webgl1 contexts. in webgl2, the functionality of this extension is available on the webgl2 context by default and the constants and methods are available without the "angle" suffix. ...
...oses one new constant, which can be used in the gl.getvertexattrib() method: ext.vertex_attrib_array_divisor_angle returns a glint describing the frequency divisor used for instanced rendering when used in the gl.getvertexattrib() as the pname parameter. methods this extension exposes three new methods. ext.drawarraysinstancedangle() behaves identically to gl.drawarrays() except that multiple instances of the range of elements are executed, and the instance advances for each iteration. ext.drawelementsinstancedangle() behaves identically to gl.drawelements() except that multiple instances of the set of elements are executed and the instance advances between each set. ext.vertexattribdivisorangle() modifies the rate at which generic vertex attributes advance when rendering ...
... instances of the range of elements are executed, and the instance advances for each iteration. ext.drawelementsinstancedangle() behaves identically to gl.drawelements() except that multiple instances of the set of elements are executed and the instance advances between each set. ext.vertexattribdivisorangle() modifies the rate at which generic vertex attributes advance when rendering multiple instances of primitives with ext.drawarraysinstancedangle() and ext.drawelementsinstancedangle(). examples enabling the extension: var ext = gl.getextension('angle_instanced_arrays'); specifications specification status comment angle_instanced_arraysthe definition of 'angle_instanced_arrays' in that specification. recommendation initial definition. ...

AudioNode.connect() - Web APIs
s destination the audionode or audioparam to which to connect. outputindex optional an index specifying which output of the current audionode to connect to the destination. the index numbers are defined according to the number of output channels (see audio channels). while you can only connect a given output to a given input once (repeated attempts are ignored), you can connect an output to multiple inputs by calling connect() repeatedly. this makes fan-out possible. the default value is 0. inputindex optional an index describing which input of the destination you want to connect the current audionode to; the default is 0. the index numbers are defined according to the number of input channels (see audio channels). it is possible to connect an audionode to another audionode, which in turn ...
...node, which in turn connects back to the first audionode, creating a cycle. this is allowed only if there is at least one delaynode in the cycle. otherwise, a notsupportederror exception is thrown. this parameter is not allowed if the destination is an audioparam. return value if the destination is a node, connect() returns a reference to the destination audionode object, allowing you to chain multiple connect() calls. in some browsers, older implementations of this interface return undefined. if the destination is an audioparam, connect() returns undefined. exceptions indexsizeerror the value specified as outputindex or inputindex doesn't correspond to an existing input or output. invalidaccesserror the destination node is not part of the same audio context as the source node. notsupp...
...fan-in and fan-out are therefore supported. an audioparam will take the rendered audio data from any audionode output connected to it and convert it to mono by down-mixing (if it is not already mono). next, it will mix it together with any other such outputs, and the intrinsic parameter value (the value the audioparam would normally have without any audio connections), includ...

Cache - Web APIs
the cache interface provides a storage mechanism for request / response object pairs that are cached, for example as part of the serviceworker life cycle. note that the cache interface is exposed to windowed scopes as well as workers. you don't have to use it in conjunction with service workers, even though it is defined in the service worker spec. an origin can have multiple, named cache objects. you are responsible for implementing how your script (e.g. in a serviceworker) handles cache updates. items in a cache do not get updated unless explicitly requested; they don’t expire unless deleted. use cachestorage.open() to open a specific named cache object and then call any of the cache methods to maintain the cache. you are also responsible for periodically purging cache entries. each browser...
...ource. the code handles exceptions thrown from the fetch() operation. note that an http error response (e.g., 404) will not trigger an exception. it will return a normal response object that has the appropriate error code. the code snippet also shows a best practice for versioning caches used by the service worker. though there's only one cache in this example, the same approach can be used for multiple caches. it maps a shorthand identifier for a cache to a specific, versioned cache name. the code also deletes all caches that aren't named in current_caches. in the code example, caches is a property of the serviceworkerglobalscope. it holds the cachestorage object, by which it can access the cachestorage interface. this is an implementation of the windoworworkerglobalscope mixin. note: in chro...
...w logging statements for the various actions the service-worker.js script is performing. var cache_version = 1; var current_caches = { font: 'font-cache-v' + cache_version }; self.addeventlistener('activate', function(event) { // delete all caches that aren't named in current_caches. // while there is only one cache in this example, the same logic will handle the case where // there are multiple versioned caches. var expectedcachenamesset = new set(object.values(current_caches)); event.waituntil( caches.keys().then(function(cachenames) { return promise.all( cachenames.map(function(cachename) { if (!expectedcachenamesset.has(cachename)) { // if this cache name isn't present in the set of "expected" cache names, then delete it. consol...

ConstantSourceNode - Web APIs
node interface—part of the web audio api—represents an audio source (based upon audioscheduledsourcenode) whose output is single unchanging value. this makes it useful for cases in which you need a constant value coming in from an audio source. in addition, it can be used like a constructible audioparam by automating the value of its offset or by connecting another node to it; see controlling multiple parameters with constantsourcenode. a constantsourcenode has no inputs and exactly one monaural (one-channel) output. the output's value is always the same as the value of the offset parameter. number of inputs 0 number of outputs 1 constructor constantsourcenode() creates and returns a new constantsourcenode instance, optionally specifying an object which est...
...enever the constantsourcenode data has stopped playing. methods inherits methods from its parent interface, audioscheduledsourcenode. some browsers' implementations of these methods are part of the audioscheduledsourcenode interface. start() schedules a sound to playback at an exact time. stop() schedules a sound to stop playback at an exact time. example in the article controlling multiple parameters with constantsourcenode, a constantsourcenode is created to allow one slider control to change the gain on two gainnodes. the three nodes are set up like this: gainnode2 = context.creategain(); gainnode3 = context.creategain(); gainnode2.gain.value = gainnode3.gain.value = 0.5; volumeslidercontrol.value = gainnode2.gain.value; constantnode = context.createconstantsource(); constantno...
...ce by calling its start() method. finally, the two gain nodes are connected to the audio destination (typically speakers or headphones). now, whenever the value of constantnode.offset changes, the gain on both gainnode2 and gainnode3 will change to have that same value. to see this example in action, as well as to read the rest of the code from which these snippets were derived, see controlling multiple parameters with constantsourcenode. specification specification status comment web audio apithe definition of 'constantsourcenode' in that specification. working draft ...

EventTarget.addEventListener() - Web APIs
rks 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 it is processing an event, that event does not trigger the listener. however, that same listener may be triggered during a later stage of event flow, such as the bubbling phase. multiple identical event listeners if multiple identical eventlisteners are registered on the same eventtarget with the same parameters, the duplicate instances are discarded. they do not cause the eventlistener to be called twice, and they do not need to be removed manually with the removeeventlistener() method. note, however that when using an anonymous function as the handler, such listeners will not...
...nction is created with each iteration of the loop. in the second case, the same previously declared function is used as an event handler, which results in smaller memory consumption because there is only one handler function created. moreover, in the first case, it is not possible to call removeeventlistener() because no reference to the anonymous function is kept (or here, not kept to any of the multiple anonymous functions the loop might create.) in the second case, it's possible to do myelement.removeeventlistener("click", processevent, false) because processevent is the function reference. actually, regarding memory consumption, the lack of keeping a function reference is not the real issue; rather it is the lack of keeping a static function reference. in both problem-cases below, a function ...
... is kept, but since it is redefined on each iteration, it is not static. in the third case, the reference to the anonymous function is being reassigned with each iteration. in the fourth case, the entire function definition is unchanging, but it is still being repeatedly defined as if new (unless it was [[promoted]] by the compiler) and so is not static. therefore, though appearing to be simply [[multiple identical event listeners]], in both cases each iteration will instead create a new listener with its own unique reference to the handler function. however, since the function definition itself does not change, the same function may still be called for every duplicate listener (especially if the code gets optimized.) also in both cases, because the function reference was kept but repeatedly rede...

Using the Gamepad API - Web APIs
f a page has previously received data for that gamepad (e.g. gamepadconnected), a second event is dispatched to the focused window, gamepaddisconnected: window.addeventlistener("gamepaddisconnected", function(e) { console.log("gamepad disconnected from index %d: %s", e.gamepad.index, e.gamepad.id); }); the gamepad's index property will be unique per-device connected to the system, even if multiple controllers of the same type are used. the index property also functions as the index into the array returned by navigator.getgamepads(). var gamepads = {}; function gamepadhandler(event, connecting) { var gamepad = event.gamepad; // note: // gamepad === navigator.getgamepads()[gamepad.index] if (connecting) { gamepads[gamepad.index] = gamepad; } else { delete gamepads[gamepa...
...so demonstrates how the gamepad property can be held after the event has completed — a technique we will use for device state querying later. querying the gamepad object as you can see, the gamepad events discussed above include a gamepad property on the event object, which returns a gamepad object. we can use this in order to determine which gamepad (i.e., its id) had caused the event, since multiple gamepads might be connected at once. we can do much more with the gamepad object, including holding a reference to it and querying it to find out which buttons and axes are being pressed at any one time. doing so is often desirable for games or other interactive web pages that need to know the state of a gamepad now vs. the next time an event fires. performing such checks tends to involve using ...
...igit hexadecimal strings containing the usb vendor and product id of the controller, and the name of the controller as provided by the driver. this information is intended to allow you to find a mapping for the controls on the device as well as display useful feedback to the user. index: an integer that is unique for each gamepad currently connected to the system. this can be used to distinguish multiple controllers. note that disconnecting a device and then connecting a new device may reuse the previous index. mapping: a string indicating whether the browser has remapped the controls on the device to a known layout. currently there is only one supported known layout — the standard gamepad. if the browser is able to map controls on the device to that layout the mapping property will be set to ...

HTMLInputElement - Web APIs
this object. dirname string: returns / sets the directionality of the element. accesskey string: returns a string containing a single character that switches input focus to the control when pressed. list read only htmlelement object: returns the element pointed by the list attribute. the property may be null if no html element found in the same tree. multiple boolean: returns / sets the element's multiple attribute, indicating whether more than one value is possible (e.g., multiple files). files filelist array: returns the list of selected files. htmlinputelement.labels read only nodelist array: returns a list of <label> elements that are labels for this element. step string: returns / sets the element's step at...
...els read only nodelist array: returns a list of <label> elements that are labels for this element. step string: returns / sets the element's step attribute, which works with min and max to limit the increments at which a numeric or date-time value can be set. it can be the string any or a positive floating point number. if this is not set to any, the control accepts only values at multiples of the step value greater than the minimum. valueasdate date object: returns / sets the value of the element, interpreted as a date, or null if conversion is not possible. valueasnumber double: returns the value of the element, interpreted as one of the following, in order: a time value a number nan if conversion is impossible autocapitali...
... technically, the tabindex and accesskey properties, as well as the blur(), click(), and focus() methods, are now defined on htmlelement. the following properties are now obsolete: align and usemap. the following properties have been added: autocomplete, autofocus, dirname, files, formaction, formenctype, formmethod, formnovalidate, formtarget, height, indeterminate, labels, list, max, min, multiple, pattern, placeholder, required, selectiondirection, selectionend, selectionstart, step, validationmessage, validity, valueasdate, valueasnumber, width, and willvalidate. the following methods have been added: checkvalidity(), setcustomvalidity(), setselectionrange(), stepup(), and stepdown(). document object model (dom) level 2 html specificationthe definition of 'htmlinputelement' i...

IDBCursor - Web APIs
the cursor has a source that indicates which index or object store it is iterating over. it has a position within the range, and moves in a direction that is increasing or decreasing in the order of record keys. the cursor enables an application to asynchronously process all the records in the cursor's range. ...
...ants are no longer available — they were removed in gecko 25. you should use the string constants directly instead. (bug 891944) next : "next" : the cursor shows all records, including duplicates. it starts at the lower bound of the key range and moves upwards (monotonically increasing in the order of keys). nextunique : "nextunique" : the cursor shows all records, excluding duplicates. if multiple records exist with the same key, only the first one iterated is retrieved. it starts at the lower bound of the key range and moves upwards. prev : "prev" : the cursor shows all records, including duplicates. it starts at the upper bound of the key range and moves downwards (monotonically decreasing in the order of keys). prevunique : "prevunique" : the cursor shows all records, excluding duplic...
...exist with the same key, only the first one iterated is retrieved. it starts at the lower bound of the key range and moves upwards. prev : "prev" : the cursor shows all records, including duplicates. it starts at the upper bound of the key range and moves downwards (monotonically decreasing in the order of keys). prevunique : "prevunique" : the cursor shows all records, excluding duplicates. if multiple records exist with the same key, only the first one iterated is retrieved. it starts at the upper bound of the key range and moves downwards. examples in this simple fragment we create a transaction, retrieve an object store, then use a cursor to iterate through all the records in the object store. the cursor does not require us to select the data based on a key; we can just grab all of it. al...

Using IndexedDB - Web APIs
you can force a transaction to flush to disk before delivering the complete event by creating a transaction using the experimental (non-standard) readwriteflush mode (see idbdatabase.transaction. you can speed up data access by using the right scope and mode in the transaction. here are a couple of tips: when defining the scope, specify only the object stores you need. this way, you can run multiple transactions with non-overlapping scopes concurrently. only specify a readwrite transaction mode when necessary. you can concurrently run multiple readonly transactions with overlapping scopes, but you can have only one readwrite transaction for an object store. to learn more, see the definition for transactions in the basic concepts article. adding data to the database if you've just created...
...another subtlety here is that you don't actually save the request object to a variable. since the dom event has the request as its target you can use the event to get to the result property. note that you can speed up data access by limiting the scope and mode in the transaction. here are a couple of tips: when defining the scope, specify only the object stores you need. this way, you can run multiple transactions with non-overlapping scopes concurrently. only specify a readwrite transaction mode when necessary. you can concurrently run multiple readonly transactions with overlapping scopes, but you can have only one readwrite transaction for an object store. to learn more, see the definition for transactions in the basic concepts article. updating an entry in the database now we've retrie...
...or.continue(); } }; if you just want to specify a change of direction but not constrain the results shown, you can just pass in null as the first argument: objectstore.opencursor(null, "prev").onsuccess = function(event) { var cursor = event.target.result; if (cursor) { // do something with the entries. cursor.continue(); } }; since the "name" index isn't unique, there might be multiple entries where name is the same. note that such a situation cannot occur with object stores since the key must always be unique. if you wish to filter out duplicates during cursor iteration over indexes, you can pass nextunique (or prevunique if you're going backwards) as the direction parameter. when nextunique or prevunique is used, the entry with the lowest key is always the one returned. inde...

LockManager.request() - Web APIs
property of the options parameter may be either "exclusive" or "shared". request an "exclusive" lock when it should only be held by one code instance at a time. this applies to code in both tabs and workers. use this to represent mutually exclusive access to a resource. when an "exclusive" lock for a given name is held, no other lock with the same name can be held. ...
...this is known as the readers-writer pattern. in the indexeddb api, this is exposed as "readonly" and "readwrite" transactions which have the same semantics. ...
...ked, no other running code on this orign can hold `my_resource` until the callback returns. await navigator.locks.request('my_resource', async lock => { // the lock was granted. }); mode example the following example shows how to use the mode option for readers and writers. notice that both functions use a lock called my_resource. the do_read() requests a lock in 'shared' mode meaning that multiple calls may occur simultaneously across different event handlers, tabs, or workers. async function do_read() { await navigator.locks.request('my_resource', {mode: 'shared'}, async lock => { // read code here. }); } the do_write() function use the same lock but in 'exclusive' mode which will delay invocation of the request() call in do_read() until the write operation has completed. this a...

MediaSession.setActionHandler() - Web APIs
o input parameters, and should not return a value. return value undefined. description to remove a previously-established action handler, call setactionhandler() again, specifying null as the callback. the action handler receives as input a single parameter: an object conforming to the mediasessionactiondetails dictionary, which provides both the action type (so the same function can handle multiple action types), as well as data needed in order to perform the action. media session actions a media session action's type is specified using a string from the mediasessionaction enumerated type. values each of the actions is a common media session control request. implement support for each of these in order to allow that type of action to be performed. the following strings identify the curr...
...etactionhandler('seekforward', evt => { // user clicked "seek forward" media notification icon. audio.currenttime = math.min(audio.currenttime + skiptime, audio.duration); }); navigator.mediasession.setactionhandler('seekbackward', evt => { // user clicked "seek backward" media notification icon. ...
....currenttime = math.min(audio.currenttime + skiptime, audio.duration); }); navigator.mediasession.setactionhandler('seekbackward', evt => { // user clicked "seek backward" media notification icon. ...

Media Session action types - Web APIs
the amount of time to seek backward. seekforward seeks forward from the current position through the media. the mediasessionactiondetails property seekoffset specifies the amount of time to seek forward. seekto moves the playback position to the specified time within the media. the time to which to seek is specified in the mediasessionactiondetails property seektime. if you intend to perform multiple seekto operations in rapid succession, you can also specify the mediasessionactiondetails property fastseek property with a value of true. this lets the browser know it can take steps to optimize repeated operations, and is likely to result in improved performance. skipad skips past the currently playing advertisement or commercial. this action may or may not be available, depending on the plat...
...etactionhandler('seekforward', evt => { // user clicked "seek forward" media notification icon. audio.currenttime = math.min(audio.currenttime + skiptime, audio.duration); }); navigator.mediasession.setactionhandler('seekbackward', evt => { // user clicked "seek backward" media notification icon. ...
....currenttime = math.min(audio.currenttime + skiptime, audio.duration); }); navigator.mediasession.setactionhandler('seekbackward', evt => { // user clicked "seek backward" media notification icon. ...

MediaSessionActionDetails - Web APIs
the amount of time to seek backward. seekforward seeks forward from the current position through the media. the mediasessionactiondetails property seekoffset specifies the amount of time to seek forward. seekto moves the playback position to the specified time within the media. the time to which to seek is specified in the mediasessionactiondetails property seektime. if you intend to perform multiple seekto operations in rapid succession, you can also specify the mediasessionactiondetails property fastseek property with a value of true. this lets the browser know it can take steps to optimize repeated operations, and is likely to result in improved performance. skipad skips past the currently playing advertisement or commercial. this action may or may not be available, depending on the plat...
...etactionhandler('seekforward', evt => { // user clicked "seek forward" media notification icon. audio.currenttime = math.min(audio.currenttime + skiptime, audio.duration); }); navigator.mediasession.setactionhandler('seekbackward', evt => { // user clicked "seek backward" media notification icon. ...
....currenttime = math.min(audio.currenttime + skiptime, audio.duration); }); navigator.mediasession.setactionhandler('seekbackward', evt => { // user clicked "seek backward" media notification icon. ...

Transcoding assets for Media Source Extensions - Web APIs
ely. getting started the first and most important step is to ensure that your files are comprised of a container and codec that users' browsers support. depending on the codec, you might need to fragment the file to comply with the iso bmff spec. (optional) if you decide to use dynamic adaptive streaming over http (dash) for adaptive bitrate streaming, you need to transcode your assets into multiple resolutions. most dash clients expect a corresponding media presentation description (mpd) manifest file, which is typically generated while generating the multiple resolution asset files. below we'll cover all of these steps, but first let's look at a toolchain we can use to do this fairly easily. sample media if you're looking to follow the steps listed here, but don't have any media to exp...
...y fragmented, you can again use ffmpeg: $ ffmpeg -i non_fragmented.mp4 -movflags frag_keyframe+empty_moov fragmented.mp4 in both cases, chrome may require an extra movie flag to be set: -movflags frag_keyframe+empty_moov+default_base_moof having a properly fragmented mp4 file is all you need to get started. ...
...bento4's mp4-dash.py python script can then be used to generate the corresponding mpd file needed by clients. ...

Pointer events - Web APIs
l the non primary handler if (!ev.isprimary) process_non_primary(ev); } function init() { var el=document.getelementbyid("target"); // register pointerdown handler el.onpointerdown = down_handler; } </script> <body onload="init();"> <div id="target"> touch me ... </div> </body> </html> determining the primary pointer in some scenarios there may be multiple pointers (for example a device with both a touchscreen and a mouse) or a pointer supports multiple contact points (for example a touchscreen that supports multiple finger touches). the application can use the isprimary property to identify a master pointer among the set of active pointers for each pointer type. if an application only wants to support a primary pointer, it can ignore all pointer e...
...always be the primary pointer. for touch input, a pointer is considered primary if the user touched the screen when there were no other active touches. for pen and stylus input, a pointer is considered primary if the user's pen initially contacted the screen when there were no other active pens contacting the screen. determining button states some pointer devices, such as mouse and pen, support multiple buttons and the button presses can be chorded i.e. depressing an additional button while another button on the pointer device is already depressed. to determine the state of button presses, pointer events uses the button and buttons properties of the mouseevent interface (that pointerevent inherits from). the following table provides the values of button and buttons for the various device butto...
...ttons pressed — 0 left mouse, touch contact, pen contact 0 1 middle mouse 1 4 right mouse, pen barrel button 2 2 x1 (back) mouse 3 8 x2 (forward) mouse 4 16 pen eraser button 5 32 notice: the button property indicates a change in the state of the button. however, as in the case of touch, when multiple events occur with one event, all of them have the same value. pointer capture pointer capture allows events for a particular pointer event to be re-targeted to a particular element instead of the normal hit test at a pointer's location. this can be used to ensure that an element continues to receive pointer events even if the pointer device's contact moves off the element (for example by scrol...

RTCIceServers.urls - Web APIs
o be used for ice negotiations. these are typically stun and/or turn servers. syntax var iceserver = { urls = iceserverurl | [ url1, ..., urln ], username: "webrtc", // optional credential: "turnpassword" // optional }; iceservers.push(iceserver); the value of this property may be specified as a single url or as an array of multiple urls. examples let's look a few examples of varying complexity. a single ice server this example creates a new rtcpeerconnection which will use a stun server at stunserver.example.org to negotiate connections. mypeerconnection = new rtcpeerconnection({ iceservers: [ { urls: "stun:stunserver.example.org" } ] }); notice that only the urls property is provided; the stun serve...
...nnection which will use a turn server at turnserver.example.org to negotiate connections. logging into the turn server will use the username "webrtc" and the creative password "turnpassword". mypeerconnection = new rtcpeerconnection({ iceservers: [ { urls: "turn:turnserver.example.org", username: "webrtc", credential: "turnpassword" } ] }); a single ice server with multiple urls the next example creates a new rtcpeerconnection which will use a single turn server which has multiple urls. this is useful if the server is, for example, available both on "turn" and "turns" schemes, or if there's a fallback address available for the server. keep in mind that ice will try all the urls you list here, so the more you include, the longer connections will take to establish.
...e's a fallback address available for the server. keep in mind that ice will try all the urls you list here, so the more you include, the longer connections will take to establish. mypeerconnection = new rtcpeerconnection({ iceservers: [ { urls: ["turns:turnserver.example.org", "turn:turnserver.example.org"], username: "webrtc", credential: "turnpassword" } ] }); multiple ice servers finally, this example creates a new rtcpeerconnection which will use one of two servers for ice negotiation. each server can have one or more urls, as demonstrated above. mypeerconnection = new rtcpeerconnection({ iceservers: [ { urls: ["turns:turnserver.example.org", "turn:turnserver.example.org"], username: "webrtc", credential: "turnpassword" }, { ...

RTCPeerConnection - Web APIs
ld watch each stream for removetrack events on each stream within the rtcpeerconnection. also available as the onaddstream event handler property. constants rtcbundlepolicy enum the rtcbundlepolicy enum defines string constants which are used to request a specific policy for gathering ice candidates if the remote peer isn't "bundle-aware" (compatible with the sdp bundle standard for bundling multiple media streams on a single transport link). all browser implementations are bundle-aware. if the remote endpoint is bundle-aware, all media tracks and data channels are bundled onto a single transport at the completion of negotiation, regardless of policy used, and any superfluous transports that were created initially are closed at that point. note: in technical terms, a bundle lets all media ...
...he "failed" state. "closed" the rtcpeerconnection is closed. this value was in the rtcsignalingstate enum (and therefore found by reading the value of the signalingstate) property until the may 13, 2016 draft of the specification. rtcrtcpmuxpolicy enum the rtcrtcpmuxpolicy enum defines string constants which specify what ice candidates are gathered to support non-multiplexed rtcp. <<<add a link to info about multiplexed rtcp. constant description "negotiate" instructs the ice agent to gather both rtp and rtcp candidates. if the remote peer can multiplex rtcp, then rtcp candidates are multiplexed atop the corresponding rtp candidates. otherwise, both the rtp and rtcp candidates are returned, separately. "require" tells the i...
... constant description "negotiate" instructs the ice agent to gather both rtp and rtcp candidates. if the remote peer can multiplex rtcp, then rtcp candidates are multiplexed atop the corresponding rtp candidates. otherwise, both the rtp and rtcp candidates are returned, separately. "require" tells the ice agent to gather ice candidates for only rtp, and to multiplex rtcp atop them. if the remote peer doesn't support rtcp multiplexing, then session negotiation fails. rtcsignalingstate enum the rtcsignalingstate enum specifies the possible values of rtcpeerconnection.signalingstate, which indicates where in the process of signaling the exchange of offer and answer the connection currently is. constant description "stable" ...

Background audio processing using AudioWorklet - Web APIs
essor class. the audio processor class must implement a process() method, which receives incoming audio data and writes back out the data as manipulated by the processor. the module installs the new audio worklet processor class by calling registerprocessor(), specifying a name for the audio processor and the class that defines the processor. a single audio worklet processor module may define multiple processor classes, registering each of them with individual calls to registerprocessor(). as long as each has its own unique name, this will work just fine. it's also more efficient than loading multiple modules from over the network or even the user's local disk. basic code framework the barest framework of an audio processor class looks like this: class myaudioprocessor extends audioworkletp...
...th rather than assuming a particular size. it is, however, guaranteed that the inputs and outputs will have the same block length. each input can have a number of channels. a mono input has a single channel; stereo input has two channels. surround sound might have six or more channels. so each input is, in turn, an array of channels. that is, an array of float32array objects. then, there can be multiple inputs, so the inputlist is an array of arrays of float32array objects. each input may have a different number of channels, and each channel has its own array of samples. thus, given the input list inputlist: const numberofinputs = inputlist.length; const firstinput = inputlist[0]; const firstinputchannelcount = firstinput.length; const firstinputfirstchannel = firstinput[0]; // (or inputlist[...
...hat the number of inputs and outputs may differ, and the channel counts on those inputs and outputs may also differ). or you can take all the inputs and perform mixing or other computations that result in a single output being filled with data (or all the outputs being filled with the same data). it's entirely up to you. this is a very powerful tool in your audio programming toolkit. processing multiple inputs let's take a look at an implementation of process() that can process multiple inputs, with each input being used to generate the corresponding output. any excess inputs are ignored. process(inputlist, outputlist, parameters) { const sourcelimit = math.min(inputlist.length, outputlist.length); for (let inputnum = 0; inputnum < sourcelimit; inputnum++) { let input = inputlist[inpu...

Web Locks API - Web APIs
the web locks api allows scripts running in one tab or worker to asynchronously acquire a lock, hold it while work is performed, then release it. while held, no other script executing in the same origin can acquire the same lock, which allows a web app running in multiple tabs or workers to coordinate work and the use of resources. web locks concepts and usage a lock is an abstract concept representing some potentially shared resource, identified by a name chosen by the web app. for example, if a web app running in multiple tabs wants to ensure that only one tab is syncing data between the network and indexed db, each tab could try to acquire a "my_net_db_sync" lock, but only one tab will succeed (the leader election pattern.) the api is used as follows: the lock is requested. wo...
...k has been acquired. await do_something_with_lock(); await do_something_else_with_lock(); // now the lock will be released. }); // the lock has been released. await do_something_else_without_lock(); options several options can be passed when requesting a lock: mode: the default mode is "exclusive", but "shared" can be specified. there can be only one "exclusive" holder of a lock, but multiple "shared" requests can be granted at the same time. this can be used to implement the readers-writer pattern. signal: an abortsignal can be passed in, allowing a lock request to be aborted. this can be used to implement a timeout on requests. ifavailable: if specified, the lock request will fail if the lock cannot be granted immediately without waiting. the callback is invoked with null. monit...
...; }); // request the lock: navigator.locks.request('my_resource', lock => { // lock is acquired. return p; // now lock will be held until either resolve() or reject() is called. }); deadlocks a deadlock occurs when a process can no longer make progress because each part is waiting on a request that cannot be satisfied. this can occur with this api in complex use-cases, for example, if multiple locks are requested out-of-order. if tab 1 holds lock a and tab 2 holds lock b, then tab 1 attempts to also acquire lock b and tab 2 attempts to also acquire lock a, neither request can be granted. web applications can avoid this through several strategies, such as ensuring lock requests are not nested, or are always well ordered, or have timeouts. note that such deadlocks only affect the locks t...

Using Web Workers - Web APIs
t global scope (instead of self) within a worker will return an error. the worker context is represented by a dedicatedworkerglobalscope object in the case of dedicated workers (standard workers that are utilized by a single script; shared workers use sharedworkerglobalscope). a dedicated worker is only accessible from the script that first spawned it, whereas shared workers can be accessed from multiple scripts. note: see the web workers api landing page for reference documentation on workers and additional guides. you can run whatever code you like inside the worker thread, with some exceptions. for example, you can't directly manipulate the dom from inside a worker, or use some default methods and properties of the window object. but you can use a large number of items available under wind...
... importscripts() method are also kept, since these are always evaluated before the rest of the code. note: scripts may be downloaded in any order, but will be executed in the order in which you pass the filenames into importscripts() . this is done synchronously; importscripts() does not return until all the scripts have been loaded and executed. shared workers a shared worker is accessible by multiple scripts — even if they are being accessed by different windows, iframes or even workers. in this section we'll discuss the javascript found in our basic shared worker example (run shared worker): this is very similar to the basic dedicated worker example, except that it has two functions available handled by different script files: multiplying two numbers, or squaring a number. both scripts use...
... spawning the worker, the onmessage handler is configured to display the results by setting the contents of the div element, and the onerror handler is set to dump the error message. finally, a message is sent to the worker to start it. try this example live. performing web i/o in the background you can find an example of this in the article using workers in extensions . dividing tasks among multiple workers as multi-core computers become increasingly common, it's often useful to divide computationally complex tasks among multiple workers, which may then perform those tasks on multiple-processor cores. other types of worker in addition to dedicated and shared web workers, there are other types of worker available: serviceworkers essentially act as proxy servers that sit between web appl...

ARIA: Comment role - Accessibility
ta-author="chris"> <h3>chris said</h3> <p class="comment-text">i really think this moment could use more cowbell.</p> <p><time datetime="2019-03-30t19:29">march 30 2019, 19:29</time></p> </div> to associate the comment with the text being commented, we need to wrap the commented text with an element containing the aria-details attribute, the value of which should be the id of the comment. ...
...comment-text">i really think this moment could use more cowbell.</p> <p><time datetime="2019-03-30t19:29">march 30 2019, 19:29</time></p> </div> to associate the comment with the text being commented, we need to wrap the commented text with an element containing the aria-details attribute, the value of which should be the id of the comment. ...
...is moment could use more cowbell.</p> <p><time datetime="2019-03-30t19:29">march 30 2019, 19:29</time></p> </div> to associate the comment with the text being commented, we need to wrap the commented text with an element containing the aria-details attribute, the value of which should be the id of the comment. ...

ARIA: listbox role - Accessibility
x role is used to identify an element that creates a list from which a user may select one or more static items, similar to the html <select> element. unlike <select>, a listbox can contain images. each child of a listbox should have a role of option. it is highly recommended to use the html select element, or a group of radio buttons if only one item can be selected, or a group of checkboxes if multiple items can be selected, because there is a lot of keyboard interactivity to manage focus for all the descendants, and native html elements provide this functionality for you for free. elements with the role listbox have an implicit aria-orientation value of vertical. when a list is tabbed to, the first item in the list will be selected if nothing else already is. up/down arrows navigate the list...
...(optional): moves focus to last option. optionally, in a single-select listbox, selection may also move with focus. supporting this key is strongly recommended for lists with more than five options. type-ahead is recommended for all listboxes, especially those with more than seven options: type a character: focus moves to the next item with a name that starts with the typed character. ...
...is strongly recommended for lists with more than five options. type-ahead is recommended for all listboxes, especially those with more than seven options: type a character: focus moves to the next item with a name that starts with the typed character. type multiple characters in rapid succession: focus moves to the next item with a name that starts with the string of characters typed. multiple selection: authors may implement either of two interaction models to support multiple selection: a recommended model that does not require the user to hold a modifier key, such as shift or control, while navigating the list or an alternative model that does require modifier keys to be held while navigating in order to avoid losing selection states. recommended selection model -- holding modif...

Perceivable - Accessibility
or the benefit of hearing-impaired viewers who cannot hear the content. see audio transcripts for transcript information. note: also see the wcag description for guideline 1.2: time-based media: provide alternatives for time-based media. guideline 1.3 — create content that can be presented in different ways this guideline refers to the ability of content to be consumed by users in multiple ways, accomodating their differing needs. success criteria how to conform to the criteria practical resource 1.3.1 info and relationships (a) any content structure—or visual relationship made between content—can also be determined programmatically, or be inferred from text description. the main situations in which this is relevant are: text labels a...
...structions for operating controls or understanding content do not rely on a single sense. this may prove inaccessible to people with a disability related to that sense, or a device that does not support that sense. so, for example: "click the round button to continue" the button should be clearly labelled so that it is obvious that it is the button you need to press. if there are multiple buttons, make sure they are all clearly labelled to distinguish their function. "listen to the audio instructions for guidance" this is obviously problematic—audio will be inaccessible to those with hearing impairments, whereas text can be read, but also spoken by a screenreader if required. "swipe from the right hand side of the screen to reveal the menu" some users might...
...ia how to conform to the criteria practical resource 1.4.1 use of color (a) color should not be solely relied upon to convey information. for example, in forms, you should never mark required fields purely with a color (like red). instead (or as well as), something like an asterisk with a label of "required" would be more appropriate. see color and color contrast and multiple labels. 1.4.2 audio controls (a) for any audio that plays for longer than three seconds, provide accessible controls to play and pause the audio/video, and mute/adjust volume. use native <button>s to provide accessible keyboard controls, as shown in video player styling basics. 1.4.3 minimum contrast (aa) the color contrast between background and foreground content...

@keyframes - CSS: Cascading Style Sheets
sts if a keyframe rule doesn't specify the start or end states of the animation (that is, 0%/from and 100%/to), browsers will use the element's existing styles for the start/end states. this can be used to animate an element from its initial state and back. properties that can't be animated in keyframe rules are ignored, but supported properties will still be animated. ...
... when properties are left out of some keyframes properties that aren't specified in every keyframe are interpolated if possible — properties that can't be interpolated are dropped from the animation. ...
...ed if possible — properties that can't be interpolated are dropped from the animation. for example: @keyframes identifier { 0% { top: 0; left: 0; } 30% { top: 50px; } 68%, 72% { left: 50px; } 100% { top: 100px; left: 100%; } } here, the top property animates using the 0%, 30%, and 100% keyframes, and left animates using the 0%, 68%, 72% and 100% keyframes. when a keyframe is defined multiple times if a keyframe is defined multiple times but not all affected properties are in each keyframe, all values specified in these keyframes are considered. for example: @keyframes identifier { 0% { top: 0; } 50% { top: 30px; left: 20px; } 50% { top: 10px; } 100% { top: 0; } } in this example, at the 50% keyframe, the values used are top: 10px and left: 20px. cascading keyframes are ...

CSS Multi-column Layout - CSS: Cascading Style Sheets
w content should flow from column to column, gap sizes between columns, and column dividing lines (known as column rules) along with their appearance. basic example in the following example the column-count property has been applied to the element with a class of container. as the value of column-count is 3, the content is arranged into 3 columns of equal size. ...
...rranged into 3 columns of equal size. relationship to fragmentation multiple-column layout is closely related to paged media, in that each column box becomes a fragment, much like a printed page becomes a fragment of an overall document. therefore the properties now defined in the css fragmentation specification are required in order to control how content breaks between columns. ...
... spanning and balancing how to make elements span across all columns and controlling the way columns are filled. ...

animation-iteration-count - CSS: Cascading Style Sheets
the animation-iteration-count css property sets the number of times an animation sequence should be played before stopping. if multiple values are specified, each time the animation is played the next value in the list is used, cycling back to the first value after the last one is used. 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. it is often convenient to use the shorthand property animation to set all animation properties at once. ...
...ike to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. it is often convenient to use the shorthand property animation to set all animation properties at once. syntax /* keyword value */ animation-iteration-count: infinite; /* <number> values */ animation-iteration-count: 3; animation-iteration-count: 2.4; /* multiple values */ animation-iteration-count: 2, 0, infinite; the animation-iteration-count property is specified as one or more comma-separated values. values infinite the animation will repeat forever. <number> the number of times the animation will repeat; this is 1 by default. you may specify non-integer values to play part of an animation cycle: for example, 0.5 will play half of the animatio...
...tion-iteration-count property is specified as one or more comma-separated values. values infinite the animation will repeat forever. <number> the number of times the animation will repeat; this is 1 by default. you may specify non-integer values to play part of an animation cycle: for example, 0.5 will play half of the animation cycle. negative values are invalid. note: when you specify multiple values on an animation-* property, they will be assigned to the animations specified in the animation-name property in different ways depending on how many there are. for more information, see setting multiple animation property values. formal definition initial value1applies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal...

background-image - CSS: Cascading Style Sheets
uld a none value. note: even if the images are opaque and the color won't be displayed in normal circumstances, web developers should always specify a background-color. if the images cannot be loaded—for instance, when the network is down—the background color will be used as a fallback. syntax each background image is specified either as the keyword none or as an <image> value. ...
...e images are opaque and the color won't be displayed in normal circumstances, web developers should always specify a background-color. if the images cannot be loaded—for instance, when the network is down—the background color will be used as a fallback. syntax each background image is specified either as the keyword none or as an <image> value. to specify multiple background images, supply multiple values, separated by a comma: background-image: linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)), url('https://mdn.mozillademos.org/files/7693/catfront.png'); values none is a keyword denoting the absence of images. <image> is an <image> denoting the image to display. there can be several of them, separated by commas, as multiple backgrounds are supported. accessib...
...nsparent.gif"), url("https://mdn.mozillademos.org/files/7693/catfront.png"); background-color: transparent; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'background-image' in that specification. candidate recommendation from css2 revision 1, the property has been extended to support multiple backgrounds and any <image> css data type. css level 2 (revision 1)the definition of 'background-image' in that specification. recommendation from css1, the way images with and without intrinsic dimensions are handled is now described. css level 1the definition of 'background-image' in that specification. recommendation initial definition. ...

background-repeat - CSS: Cascading Style Sheets
nd | no-repeat ]{1,2} examples setting background-repeat html <ol> <li>no-repeat <div class="one"></div> </li> <li>repeat <div class="two"></div> </li> <li>repeat-x <div class="three"></div> </li> <li>repeat-y <div class="four"></div> </li> <li>space <div class="five"></div> </li> <li>round <div class="six"></div> </li> <li>repeat-x, repeat-y (multiple images) <div class="seven"></div> </li> </ol> css /* shared for all divs in example */ ol, li { margin: 0; padding: 0; } li { margin-bottom: 12px; } div { background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif); width: 160px; height: 70px; } /* background repeats */ .one { background-repeat: no-repeat; } .two { background-repeat: repeat; } .thr...
... specifications ...
...kground-repeat: repeat-x, repeat-y; height: 144px; } result in this example, each list item is matched with a different value of background-repeat. specifications specification status comment css backgrounds and borders module level 3the definition of 'background-repeat' in that specification. candidate recommendation adds support for multiple background images, the two-value syntax allowing distinct repetition behavior for the horizontal and vertical directions, the space and round keywords, and for backgrounds on inline-level elements by precisely defining the background painting area. css level 2 (revision 1)the definition of 'background-repeat' in that specification. recommendation no significant changes. cs...

background-size - CSS: Cascading Style Sheets
using a width value only, ...
...round-size: unset; the background-size property is specified in one of the following ways: using the keyword values contain or cover. using a width value only, in which case the height defaults to auto. using both a width and a height value, in which case the first sets the width and the second sets the height. each value can be a <length>, a <percentage>, or auto. to specify the size of multiple background images, separate the value for each one with a comma. values contain scales the image as large as possible without cropping or stretching the image. cover scales the image as large as possible without stretching the image. if the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains. auto scales the bac...
...ed using the image's corresponding intrinsic dimension, if there is one. if there is no such intrinsic dimension, it becomes the corresponding dimension of the background positioning area. note: background sizing for vector images that lack intrinsic dimensions or proportions is not yet fully implemented in all browsers. be careful about relying on the behavior described above, and test in multiple browsers to be sure the results are acceptable. working with gradients if you use a <gradient> as the background and specify a background-size to go with it, it's best not to specify a size that uses a single auto component, or is specified using only a width value (for example, background-size: 50%). rendering of <gradient>s in such cases changed in firefox 8, and at present is generally inco...

User input and controls - Developer guides
uchcancel", handlecancel, false);
 element.addeventlistener("touchend", handleend, false);
 element.addeventlistener("touchmove", handlemove, false); where element is the dom element you want to register the touch events on. note: for further information about what you can do with touch events, please read our touch events guide. pointer events when dealing with devices that incorporate multiple forms of input, like mouse, finger touch and pen input, it might be hard to develop a solution that works for all these different control mechanisms. pointer events help developers more easily manage events across devices by normalizing the handling of each one. a pointer can be any point of contact on the screen made by a mouse cursor, pen, touch (including multi-touch), or other pointing input ...
... you can find more information in the mdn drag & drop documentation. contenteditable in open web apps any dom element can be made directly editable using the contenteditable attribute. <div contenteditable="true">
 this text can be edited by the user. </div> note: compatibility information, examples and other resources can be found in the content editable guide. examples tracking multiple touch points at a time this example tracks multiple touch points at a time, allowing the user to draw in a <canvas> with more than one finger at a time. it will only work on a browser that supports touch events. simple pointer lock demo we've written a simple pointer lock demo to show you how to use it to set up a simple control system. the demo uses javascript to draw a ball inside a <canvas>...
...inter lock is then used to remove the mouse pointer and allow you to move the ball directly using the mouse. ...

HTML attribute: accept - HTML: Hypertext Markup Language
s that don't match the criteria and aren't selectable. <p> <label for="soundfile">select an audio file:</label> <input type="file" id="soundfile" accept="audio/*"> </p> <p> <label for="videofile">select a video file:</label> <input type="file" id="videofile" accept="video/*"> </p> <p> <label for="imagefile">select some images:</label> <input type="file" id="imagefile" accept="image/*" multiple> </p> note the last example allows you to select multiple iamges. see the multiple attribute for more information. unique file type specifiers a unique file type specifier is a string that describes a type of file that may be selected by the user in an <input> element of type file. each unique file type specifier may take one of the following forms: a valid case-insensitive filename ext...
...by commas. for example, a file picker that needs content that can be presented as an image, including both standard image formats and pdf files, might look like this: <input type="file" accept="image/*,.pdf"> using file inputs a basic example <form method="post" enctype="multipart/form-data"> <div> <label for="file">choose file to upload</label> <input type="file" id="file" name="file" multiple> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10px; } this produces the following output: note: you can find this example on github too — see the source code, and also see it running live. regardless of the user's device or operating system, the file input provides a button that opens up a file picker dialog that allows the user to choose a file. i...
...iv> <button>submit</button> </div> </form> div { margin-bottom: 10px; } this produces the following output: note: you can find this example on github too — see the source code, and also see it running live. regardless of the user's device or operating system, the file input provides a button that opens up a file picker dialog that allows the user to choose a file. including the multiple attribute, as shown above, specifies that multiple files can be chosen at once. the user can choose multiple files from the file picker in any way that their chosen platform allows (e.g. by holding down shift or control, and then clicking). if you only want the user to choose a single file per <input>, omit the multiple attribute. limiting accepted file types often you won't want the user to be...

<dl>: The Description List element - HTML: Hypertext Markup Language
one, presentation dom interface htmldlistelement attributes this element only includes the global attributes. examples single term and description <dl> <dt>firefox</dt> <dd> a free, open source, cross-platform, graphical web browser developed by the mozilla corporation and hundreds of volunteers. ...
...s of volunteers. </dd> <!-- other terms and descriptions --> </dl> multiple terms, single description <dl> <dt>firefox</dt> <dt>mozilla firefox</dt> <dt>fx</dt> <dd> a free, open source, cross-platform, graphical web browser developed by the mozilla corporation and hundreds of volunteers. </dd> <!-- other terms and descriptions --> </dl> single term, multiple descriptions <dl> <dt>firefox</dt> <dd> a free, open source, cross-platform, graphical web browser developed by the mozilla corporation and hundreds of volunteers. </dd> <dd> the red panda also known as the lesser panda, wah, bear cat or firefox, is a mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long). </dd> <!-- other terms a...
...fox</dt> <dd> a free, open source, cross-platform, graphical web browser developed by the mozilla corporation and hundreds of volunteers. </dd> <dd> the red panda also known as the lesser panda, wah, bear cat or firefox, is a mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long). </dd> <!-- other terms and descriptions --> </dl> multiple terms and descriptions it is also possible to define multiple terms with multiple corresponding descriptions, by combining the examples above. metadata description lists are useful for displaying metadata as a list of key-value pairs. <dl> <dt>name</dt> <dd>godzilla</dd> <dt>born</dt> <dd>1952</dd> <dt>birthplace</dt> <dd>japan</dd> <dt>color</dt> <dd>green</dd> </dl> tip: i...

<video>: The Video Embed element - HTML: Hypertext Markup Language
data is unexpectedly not forthcoming. suspend media data loading has been suspended. timeupdate the time indicated by the currenttime attribute has been updated. volumechange the volume has changed. waiting playback has stopped because of a temporary lack of data usage notes browsers don't all support the same video formats; you can provide multiple sources inside nested <source> elements, and the browser will then use the first one it understands. <video controls> <source src="myvideo.mp4" type="video/mp4"> <source src="myvideo.webm" type="video/webm"> <p>your browser doesn't support html5 video. here is a <a href="myvideo.mp4">link to the video</a> instead.</p> </video> we offer a substantive and thorough guide to media file t...
...h="620"> sorry, your browser doesn't support embedded videos, but don't worry, you can <a href="https://archive.org/details/bigbuckbunny_124">download it</a> and watch it with your favorite video player! </video> until the video starts playing, the image provided in the poster attribute is displayed in its place. if the browser doesn't support video playback, the fallback text is displayed. ...
...l the video starts playing, the image provided in the poster attribute is displayed in its place. if the browser doesn't support video playback, the fallback text is displayed. multiple sources example this example builds on the last one, offering three different sources for the media; this allows the video to be watched regardless of which video codecs are supported by the browser. ...

MIME types (IANA media types) - HTTP
sensitive but are traditionally written in lowercase, with the exception of parameter values, whose case may or may not have specific meaning. types there are two classes of type: discrete and multipart. discrete types are types which represent a single file or medium, such as a single text or music file, or a single video. a multipart type is one which represents 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 expli...
...4 movies (video/mp4). for text documents without a specific subtype, text/plain should be used. similarly, for binary documents without a specific or known subtype, application/octet-stream should be used. multipart types multipart types indicate a category of document broken into pieces, often with different mime types; they can also be used — especially in email scenarios — to represent multiple, separate files which are all part of the same transaction. they represent a composite document. with the exception of multipart/form-data, used in the post method of html forms, and multipart/byteranges, used with 206 partial content to send part of a document, http doesn't handle multipart documents in a special way: the message is transmitted to the browser (which will likely show a "save as"...
...age is transmitted to the browser (which will likely show a "save as" window if it doesn't know how to display the document). there are two multipart types: message list at iana a message that encapsulates other messages. this can be used, for instance, to represent an email that includes a forwarded message as part of its data, or to allow sending very large messages in chunks as if it were multiple messages. examples include message/rfc822 (for forwarded or replied-to message quoting) and message/partial to allow breaking a large message into smaller ones automatically to be reassembled by the recipient. multipart list at iana data that is comprised of multiple components which may individually have different mime types. examples include multipart/form-data (for data produced using the fo...

Content-Disposition - HTTP
dialog, prefilled with the value of the filename parameters if present). content-disposition: inline content-disposition: attachment content-disposition: attachment; filename="filename.jpg" as a header for a multipart body the first parameter in the http context is always form-data. additional parameters are case-insensitive and have arguments that use quoted-string syntax after the '=' sign. ...
... a name with a value of '_charset_' indicates that the part is not an html field, but the default charset to use for parts without explicit charset information. ...
...are separated by a semi-colon (';'). content-disposition: form-data content-disposition: form-data; name="fieldname" content-disposition: form-data; name="fieldname"; filename="filename.jpg" directives name is followed by a string containing the name of the html field in the form that the content of this subpart refers to. when dealing with multiple files in the same field (for example, the multiple attribute of an <input type="file"> element), there can be several subparts with the same name. a name with a value of '_charset_' indicates that the part is not an html field, but the default charset to use for parts without explicit charset information. filename is followed by a string containing the original name of the file transmitted. the filename is always optional and must not be used ...

Set-Cookie - HTTP
browsers block frontend javascript code from accessing the set cookie header, as required by the fetch spec, which defines set-cookie as a forbidden response-header name that must be filtered out from any response exposed to frontend code. for more information, see the guide on http cookies. ...
...it also must not contain a separator character like the following: ( ) < > @ , ; : \ " / [ ]...
...cookie expires. a zero or negative number will expire the cookie immediately. if both expires and max-age are set, max-age has precedence. domain=<domain-value> optional host to which the cookie will be sent. if omitted, defaults to the host of the current document url, not including subdomains. contrary to earlier specifications, leading dots in domain names (.example.com) are ignored. multiple host/domain values are not allowed, but if a domain is specified, then subdomains are always included. path=<path-value> optional a path that must exist in the requested url, or the browser won't send the cookie header. the forward slash (/) character is interpreted as a directory separator, and subdirectories will be matched as well: for path=/docs, /docs, /docs/web/, and /docs/web/http w...

HTTP Index - HTTP
troubleshooting the http method being used by the cors request is not included in the list of methods specified by the response's access-control-allow-methods header. this header specifies a comma-delineated list of the http methods which may be used when using cors to access the url specified in the request; if the request is using any other method, this error occurs. 32 reason: multiple cors header 'access-control-allow-origin' not allowed cors, corsmultiplealloworiginnotallowed, cross-origin, error, http, https, messages, reasons, security, console, troubleshooting more than one access-control-allow-origin header was sent by the server. this isn't allowed. 33 reason: expected ‘true’ in cors header ‘access-control-allow-credentials’ cors, corsmis...
... for example to clear the content of a form, reset a canvas state, or to refresh the ui. 227 206 partial content http, http status, range requests, success the http 206 partial content success status response code indicates that the request has succeeded and has the body contains the requested ranges of data, as described in the range header of the request. 228 300 multiple choices http, http status code, reference, status code the http 300 multiple choices redirect status response code indicates that the request has more than one possible responses. the user-agent or the user should choose one of them. as there is no standardized way of choosing one of the responses, this response code is very rarely used. 229 301 moved permanently http, re...
... request is not supported by the server. 267 506 variant also negotiates http, server error, status code the hypertext transfer protocol (http) 506 variant also negotiates response status code may be given in the context of transparent content negotiation (see rfc 2295). this protocol enables a client to retrieve the best variant of a given resource, where the server supports multiple variants. 268 507 insufficient storage http, server error, status code the hypertext transfer protocol (http) 507 insufficient storage response status code may be given in the context of the web distributed authoring and versioning (webdav) protocol (see rfc 4918). 269 508 loop detected 508, http, server error, status code the hypertext transfer protocol...

An overview of HTTP - HTTP
be transparent, forwarding on the requests they receive without altering them in any way, or non-transparent, in which case they will change the request in some way before passing it along to the server. proxies may perform numerous functions: caching (the cache can be public or private, like the browser cache) filtering (like an antivirus scan or parental controls) load balancing (to allow multiple servers to serve the different requests) authentication (to control access to different resources) logging (allowing the storage of historical information) basic aspects of http http is simple http is generally designed to be simple and human readable, even with the added complexity introduced in http/2 by encapsulating http messages into frames. http messages can be read and understood by ...
.... http therefore relies on the tcp standard, which is connection-based. before a client and server can exchange an http request/response pair, they must establish a tcp connection, a process which requires several round-trips. the default behavior of http/1.0 is to open a separate tcp connection for each http request/response pair. this is less efficient than sharing a single tcp connection when multiple requests are sent in close succession. in order to mitigate this flaw, http/1.1 introduced pipelining (which proved difficult to implement) and persistent connections: the underlying tcp connection can be partially controlled using the connection header. http/2 went a step further by multiplexing messages over a single connection, helping keep the connection warm and more efficient. experiments...
...f the requested web page) close or reuse the connection for further requests. if http pipelining is activated, several requests can be sent without waiting for the first response to be fully received. http pipelining has proven difficult to implement in existing networks, where old pieces of software coexist with modern versions. http pipelining has been superseded in http/2 with more robust multiplexing requests within a frame. http messages http messages, as defined in http/1.1 and earlier, are human-readable. in http/2, these messages are embedded into a binary structure, a frame, allowing optimizations like compression of headers and multiplexing. even if only part of the original http message is sent in this version of http, the semantics of each message is unchanged and the client rec...

String - JavaScript
e point between u+0000 and u+10ffff \xxx (where xx is 2 hex digits; range of 0x00–0xff) iso-8859-1 character / unicode code point between u+0000 and u+00ff long literal strings sometimes, your code will include strings which are very long. ...
...nd u+00ff long literal strings sometimes, your code will include strings which are very long. rather than having lines that go on endlessly, or wrap at the whim of your editor, you may wish to specifically break the string into multiple lines in the source code without affecting the actual string contents. there are two ways you can do this. method 1 you can use the + operator to append multiple strings together, like this: let longstring = "this is a very long string which needs " + "to wrap across multiple lines because " + "otherwise my code is unreadable." method 2 you can use the backslash character (\) at the end of each line to indicate that the string will continue on the next line. make sure there is no space or any other character after the...
...e is unreadable." method 2 you can use the backslash character (\) at the end of each line to indicate that the string will continue on the next line. make sure there is no space or any other character after the backslash (except for a line break), or as an indent; otherwise it will not work. that form looks like this: let longstring = "this is a very long string which needs \ to wrap across multiple lines because \ otherwise my code is unreadable." both of the above methods result in identical strings. constructor string() creates a new string object. it performs type conversion when called as a function, rather than as a constructor, which is usually more useful. static methods string.fromcharcode(num1 [, ...[, numn]]) returns a string created by using the specified sequence of...

Comma operator (,) - JavaScript
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax expr1, expr2, expr3... ...
... the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax expr1, expr2, expr3... ...
...repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax expr1, expr2, expr3... parameters expr1, expr2, expr3... one or more expressions, the last of which is returned as the value of the compound expression. usage notes you can use the comma operator when you want to include multiple expressions in a location that requires a single expression. the most common usage of this operator is to supply multiple parameters in a for loop. the comma operator is fully different from the comma within arrays, objects, and function arguments and parameters. examples if a is a 2-dimensional array with 10 elements on each side, the following code uses the comma operator to increment i and ...

import - JavaScript
, you would call it like this: mymodule.doalltheamazingthings(); import a single export from a module given an object or value named myexport which has been exported from the module my-module either implicitly (because the entire module is exported) or explicitly (using the export statement), this inserts myexport into the current scope. ...
... import { reallyreallylongmoduleexportname as shortname, anotherlongmodulename as short } from '/modules/my-module.js'; import a module for its side effects only import an entire module for side effects only, without importing anything. ...
...m module this inserts both foo and bar into the current scope. import {foo, bar} from '/modules/my-module.js'; import an export with a more convenient alias you can rename an export when importing it. for example, this inserts shortname into the current scope. import {reallyreallylongmoduleexportname as shortname} from '/modules/my-module.js'; rename multiple exports during import import multiple exports from a module with convenient aliases. import { reallyreallylongmoduleexportname as shortname, anotherlongmodulename as short } from '/modules/my-module.js'; import a module for its side effects only import an entire module for side effects only, without importing anything. this runs the module's global code, but doesn't actually import any values. import '/modules/my-module.js'; ...

switch - JavaScript
vided, this clause is executed if the value of expression doesn't match any of the case clauses. description a switch statement first evaluates its expression. it then looks for the first case clause whose expression evaluates to the same value as the result of the input expression (using the strict comparison, ===) and transfers control to that clause, executing the associated statements. (if multiple cases match the provided value, the first case that matches is selected, even if the cases are not equal to each other.) if no matching case clause is found, the program looks for the optional default clause, and if found, transfers control to that clause, executing the associated statements. if no default clause is found, the program continues execution at the statement following the end of swi...
...f it can't find a match: var foo = 5; switch (foo) { case 2: console.log(2); break; // it encounters this break so will not continue into 'default:' default: console.log('default') // fall-through case 1: console.log('1'); } it also works when you put default before all other cases. methods for multi-criteria case source for this technique is here: switch statement multiple cases in javascript (stack overflow) multi-case : single operation this method takes advantage of the fact that if there is no break below a case clause it will continue to execute the next case clause regardless if the case meets the criteria. (see the section what happens if i forgot a break?) this is an example of a single operation sequential case statement, where four different values per...
...single operation sequential case statement, where four different values perform exactly the same. var animal = 'giraffe'; switch (animal) { case 'cow': case 'giraffe': case 'dog': case 'pig': console.log('this animal will go on noah\'s ark.'); break; case 'dinosaur': default: console.log('this animal will not.'); } multi-case : chained operations this is an example of a multiple-operation sequential case clause, where, depending on the provided integer, you can receive different output. this shows you that it will traverse in the order that you put the case clauses, and it does not have to be numerically sequential. in javascript, you can even mix in definitions of strings into these case statements as well. var foo = 1; var output = 'output: '; switch (foo) { case 0:...

The building blocks of responsive design - Progressive web apps (PWAs)
interface depending on the browser or device accessing the site to provide an optimized experience. one approach to this is to create different versions of your site/app for different platforms or browsers and serve them appropriately after detecting which browser or platform is looking at your site. but this is increasingly inefficient: browser sniffing is inherently error prone, and maintaining multiple copies of your code can turn out to be a nightmare. it is usually much better to create a single version of your code which doesn't care about what browser or platform is accessing the site, but instead uses feature tests to find out what code features the browser supports or what the values of certain browser features are, and then adjusts the code appropriately. this tends to be termed respons...
...adding clearing to guard against any float funny business). we've also altered the width of the images inside the third container (no longer a column — this is the gallery) so that now you get five per line (it was previously three per line). narrow screen/mobile layout we then have a narrow screen layout, designed to fit the bill for a mobile app/open web app experience. this is created in multiple parts. first of all, as expected, there is a media query in our main css, which is quite weighty, so we'll go through it in parts: @media all and (max-width: 480px) { x-card:nth-child(1), x-card:nth-child(2), x-card:nth-child(3) { width: 100%; float: none; padding: 0; } button { margin-top: 0; border-radius: 0; } x-card:nth-child(1) video, x-card:nth-child(2) img ...
...rather complicated, but really it's not — we are providing a number of media query options, as at this time different browsers support different resolution media query types and even units. brett jankord has a good explanation at cross browser retina/high resolution media queries. <video> html5 video is fairly well catered for in terms of responsive capabilities. if you wish, you can point to multiple video files via <source> attributes, each with their own source and mime type: <video controls> <source src="videos/720/crystal720.mp4" type="video/mp4"> <source src="videos/720/crystal720.webm" type="video/webm"> </video> but you can go one step further. you can include media attributes on the <source> element containing media queries — the video loaded in the browser will depend on both...

Content Scripts - Archive of obsolete content
rg", contentscriptfile: "./content-script.js" }); unless your content script is extremely simple and consists only of a static string, don't use contentscript: if you do, you may have problems getting your add-on approved on amo. instead, keep the script in a separate file and load it using contentscriptfile. this makes your code easier to maintain, secure, debug and review. ...
... so page-mod does not integrate the worker api directly. instead, each time a content script is attached to a page, the page-mod emits an attach event, whose listener is passed the worker for that context. by supplying a listener to attach you can access the port obj...

Porting the Library Detector - Archive of obsolete content
so main.js needs to filter out any duplicates, in case a page contains more than one iframe, and those iframes use the same library. implementing the user interface showing the library array the widget module is a natural fit for displaying the library list. we'll specify its content using html, so we can display an array of icons...
... librarylist.foreach(function(library) { if (worker.tab.libraries.indexof(library) == -1) { worker.tab.libraries.push(library); } }); if (worker.tab == tabs.activetab) { updatewidgetview(worker.tab); } }); } }); the content script is executed once for every window.onload event, so it will run multiple times when a single page containing multiple iframes is loaded. so main.js needs to filter out any duplicates, in case a page contains more than one iframe, and those iframes use the same library. implementing the user interface showing the library array the widget module is a natural fit for displaying the library list. we'll specify its content using html, so we can display an array of icons. the widget must be able to display differen...

core/heritage - Archive of obsolete content
as mentioned before you could pass constructors that were not created using class function as long as they have proper prototype setup. also you can mix inheritance and composition together if necessary: var point = class({ initialize: function initialize(x, y) { this.x = x; this.y = y; }...
...property descriptor map. also, keep in mind that returned object will be frozen. var { extend } = require('sdk/core/heritage'); var base = { a: 1 }; var derived = extend(base, { b: 2 }); derived.a // => 1 derived.b // => 2 base.isprototypeof(derived) // => true mix module exports mix utility function that is useful for mixing properties of multiple objects into a single one. function takes arbitrary number of source objects and returns a fresh object that inherits from the same prototype as a first one and implements all own properties of all given objects. if two or more argument objects have own properties with the same name, the property is overridden, with precedence from right to left, implying, that properties of the object on the lef...

core/namespace - Archive of obsolete content
provides an api for creating namespaces for objects, which effectively may be used for creating fields that are not part of objects public api. let { ns } = require('sdk/core/namespace'); let anamespace = ns(); anamespace(publicapi).secret = secret; one namespace may be used with multiple objects: let { ns } = require('sdk/core/namespace'); let dom = ns(); function view(element) { let view = object.create(view.prototype); dom(view).element = element; // .... ...
...ith multiple objects: let { ns } = require('sdk/core/namespace'); let dom = ns(); function view(element) { let view = object.create(view.prototype); dom(view).element = element; // .... } view.prototype.destroy = function destroy() { let { element } = dom(this); element.parentnode.removechild(element); // ... }; // ... exports.view = view; // ... also, multiple namespaces can be used with one object: // ./widget.js let { cu } = require('chrome'); let { ns } = require('sdk/core/namespace'); let { view } = require('./view'); // note this is completely independent from view's internal namespace object. let sandboxes = ns(); function widget(options) { let { element, contentscript } = options; let widget = object.create(widget.proto...

core/promise - Archive of obsolete content
agate to bar (bar will be fulfilled with that value): var bar = foo().then(null, function failure(error) { // handle error... }); chaining there are two ways to chain promise operations. you can chain them using either inside or outside handlers. flat chaining you can use then for chaining intermediate operations on promises (var data = readasync().then(parse).then(extract)). you can chain multiple then functions, because then returns a promise resolved to a return value of an operation and errors propagate through the promise chains. in general good rule of thumb is to prefer then based flat chaining. it makes code easier to read and make changes later: var data = readasync(url). // read content of url asynchronously then(parse). // parse content from the url then(ex...
...nk of with promises, but once you start using promises extensively you may discover some missing pieces and this section of documentation may help you to discover them. doing things concurrently so far we have being playing with promises that do things sequentially, but there are many cases where one would need to do things concurrently. in the following example we implement functions that take multiple promises and return one that resolves to first one being fulfilled: function race() { let { promise, resolve } = defer(); array.slice(arguments).foreach(function(promise) { promise.then(resolve); }); return promise; } var asyncaorb = race(readasync(urla), readasync(urlb)); note: that this implementation forgives failures and would fail if all promises fail to resolve. there are ca...

ui/button/action - Archive of obsolete content
for example, in the screenshots above, firefox uses the small icon when the button is in the toolbar and the large icon when the button is in the menu panel. read more about speci...
...on = togglebutton({ id: "my-button1", label: "my button1", icon: "./icon-16.png", onchange: changed, badge: 0, badgecolor: "#00aaaa" }); function changed(state) { button.badge = state.badge + 1; if (state.checked) { button.badgecolor = "#aa00aa"; } else { button.badgecolor = "#00aaaa"; } } specifying multiple icons you can specify just one icon, or multiple icons in different sizes. if you specify multiple icons, firefox will select the best-fitting icon based on the device screen resolution and the place the icon appears. for example, in the screenshots above, firefox uses the small icon when the button is in the toolbar and the large icon when the button is in the menu panel. read more about specifying icons in the reference documentation for the...

ui/button/toggle - Archive of obsolete content
for example, in the screenshots above, firefox uses the small icon when the button is in the toolbar and the large icon when the button is in the menu panel. read more about speci...
...on = togglebutton({ id: "my-button1", label: "my button1", icon: "./icon-16.png", onchange: changed, badge: 0, badgecolor: "#00aaaa" }); function changed(state) { button.badge = state.badge + 1; if (state.checked) { button.badgecolor = "#aa00aa"; } else { button.badgecolor = "#00aaaa"; } } specifying multiple icons you can specify just one icon, or multiple icons in different sizes. if you specify multiple icons, firefox will select the best-fitting icon based on the device screen resolution and the place the icon appears. for example, in the screenshots above, firefox uses the small icon when the button is in the toolbar and the large icon when the button is in the menu panel. read more about specifying icons in the reference documentation for the...

jpm - Archive of obsolete content
binary may be specified as a full path or as a path relative to the current directory. jpm run -b /path/to/firefox/nightly see selecting a browser version. --binary-args cmdargs pass extra arguments to firefox. for example, to pass the -jsconsole argument to firefox and launch the browser console, try the following: jpm run --binary-args -jsconsole to pass multiple arguments, or arguments containing spaces, quote them: jpm run --binary-args '-url mzl.la -jsconsole' --debug run the add-on debugger attached to the add-on. -o --overload path rather than use the sdk modules built into firefox, use the modules found at path. if -o is specified and path is omitted, jpm looks for the jetpack_root environment variable and use i...
...pecified as a full path or as a path relative to the current directory. jpm test -b /path/to/firefox/nightly see selecting a browser version. --binary-args cmdargs pass extra arguments to firefox. for example, to pass the -jsconsole argument to firefox, which will launch the browser console, try the following: jpm test --binary-args -jsconsole to pass multiple arguments, or arguments containing spaces, quote them: jpm test --binary-args '-url mzl.la -jsconsole' --debug run the add-on debugger attached to the add-on. -f --filter file[:test] only run tests whose filenames match file and optionally match test, both regexps. jpm test --filter base64:btoa the above command only runs tests in files whose names ...

Bootstrapped extensions - Archive of obsolete content
sed, however they cannot be localized with dtd files. ...
...ith dtd files. ...

StringView - Archive of obsolete content
to raw data using websockets, and so forth, it has become clear that there are times when it would be helpful for javascript code to be able to quickly and easily manipulate raw binary data. in the past, this had to be simulated by treating the raw data as a string and using the charcodeat() method to read the bytes from the data buffer. however, this is slow and error-prone, due to the need for multiple conversions (especially if the binary data is not actually byte-format data, but, for example, 32-bit integers or floats). javascript typed arrays provide a mechanism for accessing raw binary data much more efficiently. the stringview constructor is one level above typed arrays. the code stringview.js "use strict"; /*\ |*| |*| :: number.isinteger() polyfill :: |*| |*| /docs/web/javascript/...
...stuff. base64tobytes() syntax stringview.base64tobytes(base64string[, regsize]) description decode a base64 string to an array of bytes and return it. the returned array will be a typed array of uint8array subclass. arguments base64string (required) the string to decode from base64. regsize optional the number of bytes of which the length must result in a multiple (1 or omitted for ascii, binary strings or utf-8-encoded strings, 2 for utf-16 strings, 4 for utf-32 strings). examples alert(string.fromcharcode.apply(null, stringview.base64tobytes("sgvsbg8gd29ybgqh"))); // "hello world!" stringview.base64tobytes() is a generic utility useful also for binary data. if you want to pass the stringview.base64tobytes(base64string[, regsize]).buff...

Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
@ include $(depth)/config/autoconf.mk module = myextension xpidl_module = myextension xpi_name = myextension exports = \ myheader.h \ $(null) xpidlsrcs = \ myifirstcomponent.idl \ myisecondcomponent.idl \ $(null) include $(topsrcdir)/config/rules.mk xpidl_module is the name of the generated xpt file that contains type information about your idl interfaces. if you have multiple modules, make absolutely sure that you use a different value for xpidl_module for each one. otherwise the first module's xpt file will be overwritten by the second and you'll get ns_error_xpc_bad_iid errors when you try to access its idl interfaces from your code. the files under exports are copied directly to the /mozilla/$(moz_objdir)/dist/include/ directory and are thus accessible from other m...
... multifarious/ subproject in the above example, it would be placed as a subdirectory underneath that subproject (at the same level as public/ and src/). of course, this means that you will have to build acmelib manually on all platforms before launching the mozilla build. but at least you can then refer to include files and import libraries from your component using relative paths. building for multiple platforms todo original document information author: matthew gertner - july 26, 2005. permission granted to migrate in jan 2006, including permission to relicense under the cc:by-sa. original source: http://www.allpeers.com/blog/creating-complex-firefox-extensions/ ...

Extension Versioning, Update and Compatibility - Archive of obsolete content
avior depends on the version of the client application, of course. <?xml version="1.0" encoding="utf-8"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <!-- this description resource includes all the update and compatibility information for a single add-on with the id foobar@developer.mozilla.org. you can list multiple add-ons information in the same rdf file. --> <rdf:description about="urn:mozilla:extension:foobar@developer.mozilla.org"> <em:updates> <rdf:seq> <!-- each li is a different version of the same add-on --> <rdf:li> <rdf:description> <em:version>2.2</em:version> <!-- this is the version number of the add-on --> <!-- one targetap...
...om this example for brevity in order to show the basic structure): <?xml version="1.0" encoding="utf-8"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <!-- this description resource includes all the update and compatibility information for a single add-on with the id foobar@developer.mozilla.org. you can list multiple add-ons information in the same rdf file. --> <rdf:description about="urn:mozilla:extension:foobar@developer.mozilla.org"> <em:updates> <rdf:seq> <!-- the resource attribute points to an rdf:description entry below with a matching about attribute. the actual uri can be whatever you like --> <rdf:li resource="urn:mozilla:extension:foobar@developer.mo...

Extension Etiquette - Archive of obsolete content
n 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"). sub-menus should be used for single extensions needing multiple menu items, and a tools menu item should not be created for options and preferences (for options and preferences, see the add-on manager). if possible, create a menu item in the menu where it is most applicable; for instance, a bookmark sharing extension should be called from the bookmarks menu. to maintain the default theme, avoid the use of an icon next to the menu items. other ui elements in...
... your extension in one language. it will make translation of your extension to another language easier. it occurs more often than you would think. options firefox users like options. lots of options. try to include everything a user could ever want to customize in your extension, remembering more can be added later. for a large number of options for your extension, break the options window into multiple pages (tabs) that are well labeled. don't hesitate to give long descriptions for each preference, as long as they are easy to understand, even for non-computer-savvy users. however, please make sure the default set of preferences is adequate — don't require people to tweak options in order to get your extension's core functionality. preferences' internal names internal firefox preference name...

Adding Toolbars and Toolbar Buttons - Archive of obsolete content
« previousnext » adding a new toolbar adding new toolbars to firefox is easy, but adding them the wrong way is very easy as well. toolbars in firefox are very customizable. some users don't like extra toolbars, or they want to rearrange toolbar buttons to their liking, possibly merging multiple toolbars in the process. firefox allows all of this by default, and if you don't pay attention to the details we describe here, your toolbar may not be as easy to customize as the rest. the first thing you need to do is add your buttons to the toolbar palette. the toolbarpalette is a collection of all toolbar buttons and toolbar items in firefox, including those added by extensions. to add your buttons, all you need to do is overlay the palette in your main browser overlay. <overl...
...ns for mac os x lion and above, and others for older systems. in this example we won't bother. there is a separate skin directory for each system, with the unix theme as the default (as most other systems are unix-based). this makes it easy to keep the themes separate and to make changes to one of them without having to worry about the rest. on the other hand, it is often the case that there are multiple images and css sheets that are the same for all systems. for example, your extension logo icon will probably be the same. having multiple copies of these files can be wasteful, so you may want to have a "common" directory. image files use the most space in an extension package, by far. most extensions are a few hundred kilobytes in size or smaller. if your file is getting too big, you should lo...

Appendix D: Loading Scripts - Archive of obsolete content
session no matter how many times they are imported, this is one of the most performant methods of script loading. advantages performance: javascript modules are stored in a pre-compiled format in a cache, and therefore load with significantly less overhead than other types of scripts. additionally, scripts are loaded only once globally per session, and therefore have virtually no overhead for multiple imports. namespacing: javascript modules, like javascript components, are loaded into their own private scope. namespace contamination and the resulting compatibility issues are only an issue when they are imported into shared global namespaces. data sharing: as modules are loaded only once globally, every import has access to the same data and global variables no matter what context or window ...
...lasses, but are otherwise limited to simple computation based on data passed via messages and xmlhttprequests. advantages asynchronous: workers execute asynchronously in their own threads, which means that they have limited risk of interfering with the main thread. they may safely perform synchronous xmlhttprequests or other intensive computation which would normally need to be broken up into multiple callbacks. safety: as workers have no access to objects which might cause a crash or deadlock when executed re-entrantly or by spinning the event loop, there are significant safety advantages over other methods of asynchronous execution. disadvantages limited scoping: as data from the main thread may only be accessed via json message passing, there are significant difficulties in performing...

Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
' appear anywhere in your add-on. closures by far the best way to create dynamic event listeners is to use closures. ...
...the following two code fragments are roughly equivalent: function clickify(elem, address) { elem.addeventlistener("click", function (event) { openwindow(address) }, false); } function clickify(elem, address) { elem.onclick = function (event) { openwindow(address) }; } multiple attributes sometimes there is a need for event listeners to appear as attributes in the dom. ...

MMgc - Archive of obsolete content
::gc, mmgc::gcfinalizedobject. alternately, you can open the mmgc namespace in your c++ source so that you can refer to the objects more concisely: using namespace mmgc; ... gc* gc = gc::getgc(this); gcobject* gcobject; gc class the class mmgc::gc is the main class of the gc. it represents a full, self-contained instance of the garbage collector. it may be multiply instantiated; you may have multiple instances of the garbage collector running at once. each instance manages its own set of objects; objects are not allowed to reference objects in other gc instances. the gc typically is constructed early in your program's initialization, and then passed to operations like operator new for allocating gc objects. there are a few methods that you may need to call directly, such as alloc and free. g...
...e it in debug builds. the more frequent ones will have to be turned on manually. write barrier implementation there are a couple options for implementing write barriers. at the finest level of granularity everytime a a white object is written to a black object we push the white object onto the work queue (thus making it grey). another solution is to put the black object on the work queue, thus if multiple writes occur to the black object we only needed one push on the the queue. this could be a significant speedup if the black object was a large array getting populated with a bunch of new objects. on the other hand if the black is a huge array and only a couple slots had new objects written to them we are wasting time by marking the whole thing. a popular solution to this is what's called card mar...

MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
g ldap server. ...
...ldap server to get ldap attributes (mail & cn) getldapattributes() 5) set user preferences */ // 1) env variables if(getenv("user") != "") { // *nix settings var env_user = getenv("user"); var env_home = getenv("home"); } else { // windows settings var env_user = getenv("username"); var env_home = getenv("homepath"); } var env_mozdebug= getenv("mozilla_debug"); // 2) setup multiple ldap servers for fail-over var ldap_values; var ldap_servers = new array('ldap2.int-evry.fr', 'ldap1.int-evry.fr', 'openldap.int-evry.fr' ); // shuffle function to randomize the server array /** * setup the shuffle method for an array, from "mickweb script * factory" at: * http://www.mickweb.com/javascript/arrays/puresh...

Style System Overview - Archive of obsolete content
ookup. style contexts each style context (nsstylecontext), which is the interface through which layout accesses the style data for a given element, points to one rule node. we create one style context per frame, since frames point to style contexts rather than the other way around. style contexts own their parents, since inheritance operates through style context parents (ugly when we have multiple frames per content node). there is one rule node on the path from the root rule node to the style context's rule node for each rule that the element matches. style context api the style context api allows data to be obtained through a set of structs (see nsstylestruct.h). a struct for a style context can be obtained through nsistylecontext::getstyledata. nsiframe::getstyledata does the sam...
...style attribute changes we handle style attribute (“inline style”) changes in a different way from other changes to style rules. as for other style changes, we have to “walk” the rule tree and clear all the style data coming from the old inline style nsistylerule, since there could be an !important rule that overrides it, which would allow dynamic changes to put the style attribute in multiple places in the rule tree. however, we maintain a hashtable just for inline style rules so that we don't have to walk the whole tree to find the nodes. nscssframeconstructor::attributechanged only re-resolves style on the subtree of the element, just like other attribute changes. different hint mechanism (from rule structs, not data structs) could make attributechanged just go straight to a frame...

JavaScript Client API - Archive of obsolete content
nce to sync's internal apis is the source code. please note that usage of the sync apis is governed by a terms of service: by accessing or using the firefox sync apis in connection with the development of your own client software to access the firefox sync services (a “third party client”), you acknowledge that you will need to install and use a local version of the firefox sync server for multiple account testing and that any use of mozilla’s hosted firefox sync services is subject to mozilla’s firefox sync terms of service at https://services.mozilla.com/tos/. further, you agree (a) to maintain and link to (including on websites from which your third party client may be downloaded) a separate, conspicuous, and reasonably detailed privacy policy detailing how data collected or transm...
..."); cu.import("resource://services-sync/util.js"); the record object the record object is a wrapper around a single instance of whatever data it is that you are syncing -- a single bookmark, history url, password or form data entry. for some sync engines, it makes sense to bundle all data into one record. the tabs and preferences engines work that way. for other engines, it makes sense to have multiple records per sync. it all depends on the data model. if in doubt, consult the sync developers. the base record objects are defined in services/sync/modules/record.js. there's a base record object, which defines the basic record api. but, you want to use a derived class, cryptowrapper, which seamlessly encrypts and decrypts records on the client. this makes your synchronized data more secure and u...

Helper Apps (and a bit of Save As) - Archive of obsolete content
n this is delegated to the nspiexternalapplauncher (also implemented by the nsexternalhelperapphandler): windows: launch either directly via nsiprocess or via the ::shellexecute() method depending on where the mimeinfo came from. last-ditch check for executable files here. mac: use the launchwithdoc() method on nsilocalfilemac. unix: launch directly via nsiprocess. ...
... ongoing work support synchronous dialogs, not just asynchronous ones (fixes many issues related to pre-downloading, content-decoding, etc). reworking the nsimimeservice api to improve the quality of the mimeinfo we get. reworking the helper app dialog to save user choices better. ...

Monitoring downloads - Archive of obsolete content
logtransfercompleted: function(adownload) { var endtime = new date(); // current time is the end time // issue the replace sqlite command to update the record. we find a // record for the same source uri and start time, then update the end // time, size, and speed entries in the record. by matching on both // source uri and start time, we support logging multiple downloads of // the same file. var dbconn = this.storageservice.opendatabase(this.dbfile); var statement = dbconn.createstatement("update items set size=?1, " + "endtime=?2, speed=?3, status=?4 where source=?5 and starttime=?6"); statement.bindint64parameter(0, adownload.size); statement.bindint64parameter(1, endtime.gettime()); statement.binddoubleparamete...
...execute(); statement.reset(); dbconn.close(); }, this simply opens the database and builds and executes a update sqlite command that finds the download item whose source uri and start time match the download that has completed and updates its information. by looking for a record with both the same uri and start time, we properly support the case where the user downloads the same file multiple times. displaying the download log the download log window's code is encapsulated in an object called downloadlogger_dlwindow. since this is a simple example, it's a one-shot log window; it doesn't monitor for further changes to the log. it simply displays the state of downloads at the moment the window was opened. that means all its work can be done in its load event handler, which looks like...

Mozilla Application Framework in Detail - Archive of obsolete content
fficient development, including full support of web standards, a cross-platform/cross-device user interface language, an extensible architecture and embedding technologies. with its unprecedented power, speed and standards support, the gecko browser engine represents a major advance for developers. with gecko, developers seeking a streamlined way to create and distribute web-based services across multiple platforms and devices can write once to w3c standards and their content and web applications will be accessible from across computing platforms and devices. gecko is based on contributions from mozilla.org, the organization chartered with managing netscape's open source initiative among thousands of internet developers and participating vendors such as netscape. the gecko browser engine offers se...
..., "skin/modern/xmlterm/"); registerchrome(locale | delayed_chrome, getfolder("chrome","xmlterm.jar"), "locale/xmlterm/"); if (getlasterror() == success) performinstall(); else { alert("error detected: "+getlasterror()); cancelinstall(); } other features a resource description framework (rdf) parser with support for creating rdf graphs programmatically or by parsing files, compositing multiple sources into a single rdf graph, querying and manipulating graphs, and populating xul widgets (trees, menus, etc.) with graph data; an xslt/xpath processor; scalable vector graphics (svg) rendering with support for a usable subset of the standard including all basic shapes, beziers, stroking and filling with opacity, and much of the dom; mathml rendering; an ecma-262 edition 3-compliant javas...

Mozilla Application Framework - Archive of obsolete content
rendering/editing engine with world-leading support for standards that you can drop into your application with a single line of xul. necko a wicked-fast, extensible networking library with built-in support for many common protocols and a well-defined plug-in interface for custom protocol handling so you can add the protocols you need. xpcom a simple, cross-platform component model with multiple language bindings and idl descriptions so you can plug your custom functionality into the framework and connect it with other components. web services built-in support for xmlhttprequest, xml-rpc, soap, and wsdl to enable mozilla-based application authors to take advantage of the exploding world of web services. xpinstall our cross-platform installer for trivial packaging and installati...
...ase that shows you every file in the repository as well as a line-by-line breakdown of who changed which line when in each file bonsai a web interface to the checkin log that you can query for checkins between certain dates, of certain files, or by certain developers. tinderbox our 24/7 build and test webtool that constantly builds, tests, and reports on the mozilla application suite on multiple platforms so you can see the state of the application at any given point in time. community a large, active development community that interacts via newsgroups, mailing lists, irc channels, and web sites. flexible licensing with three licenses to choose from (mpl, lgpl, and gpl) so you can develop both open source and proprietary applications and combine the mozilla framework with other lib...

String Quick Reference - Archive of obsolete content
the caller to choose the storage mechanism, allowing for possible sharing or more efficient handling of string fragments. ...
...widestring; widestring.assignwithconversion("some string"); callwidefunction(widestring); // use widestring again, but need a const prunichar* callwidewithflatstring(widestring.get()) nsautostring widestring2; widestring2.assignwithconversion("another string"); callwidefunction(widestring2); new way: use ns_literal_string or ns_named_literal_string // pre-declare the variable if you'll use it multiple times ns_named_literal_string(widestring, "some string"); callwidefunction(widestring); // use widestring again, but need a const prunichar* callwidewithflatstring(widestring.get()); // inline the string with ns_literal_string callwidefunction(ns_literal_string("another string")); converting literal strings to string objects what: converting from const prunichar*/const char* to the appropr...

Using cross commit - Archive of obsolete content
getting the script "make -f client.mk pull_all" from a working copy of the trunk now pulls cross-commit, and that'll work on the 1.8 branch soon, too, so you might already have the script. if you don't, however, then from the parent directory of your source dir, do: cvs co mozilla/tools/cross-commit note that you will need to have $cvsroot and such set up correctly for this to work. ...
...1. --trunk makes cross-commit land the patch on head in addition to any other branches specified. this is equivalent to --branch head. --moz18 makes cross-commit land the patch on mozilla_1_8_branch in addition to any other branches specified. this is equivalent to --branch mozilla_1_8_branch. --branch=branch-tag adds a branch to the list of branches to land the patch on. this may be specified multiple times, each time with a different branch name. this may also be used in combination with --trunk and --moz18. if no branches are specified, cross-commit will default to landing on head and mozilla_1_8_branch. ...

When To Use ifdefs - Archive of obsolete content
"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. ...
... 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 always acceptable. the only time when they might be a problem is in cross-platform extension code and locales: since this code is downloaded on multiple platforms, platform-specific ifdefs are generally out of the question. for an example of platform-specfic ifdefs, see nscrt.h. feature ifdefs the mozilla code has many features that can be enabled or disabled by configure flags. for instance, it is possible to disable most of the xul rendering engine by specifying --disable-xul when configuring the build. when adding ifdefs that implement thes...

Printing from a XUL App - Archive of obsolete content
about printutils, and the ways that xul applications can trigger print-related behaviors. ...
...ger print-related behaviors. ...

Building Menus With Templates - Archive of obsolete content
d outputs the action body for each one. the uri attribute has not been placed on the menupopup element which is the direct child of the action element but has instead been placed on the menuitem element. this causes the menupopup to only be created once. the menuitem elements however will be repeated for each result from the query. this makes sense, as we only want one menupopup to be created but multiple menuitem elements. the second button in the example displays an alert with the number of children the template-driven button has. if you press this button before opening the menu, there will be one child (the template itself). however, after the menu has been opened, there will be two children, one is the template and the other is the generated menupopup. note that the generated content does not ...
...menupopup inside the action body. you can actually do this, however, you no longer receive the performance benefit as the entire content will be generated right away. the special feature of menus to not generate content immediately applies only to the menu itself. generating a recursive menu menus are often generated from a template recursively. when creating recursive menus, you will need to use multiple rules, since leaf items will need to be created differently than non-leaf items. leaf items will need to use a menuitem element whereas non-leaf items will need to use a menu element. this will involve at least two rules, although you might use other rules if you had other differences to handle. here is an rdf example: <button label="houses in my neighbourhood" type="menu" datasources="te...

Introduction - Archive of obsolete content
details of this later, the simple result here is that a listitem will be generated for each child node in the xml data, setting the label to the name attribute for each xml node. for sqlite datasources, the datasources attribute specifies the uri of a database file. only local files are supported, so a file url should be used. if the datasource type supports it, the template builder can also use multiple datasources which are all combined into a single datasource as if they were all in one datasource to begin with. only the built-in rdf type supports this mechanism; the xml and sqlite types do not. when multiple datasources are used, an nsirdfcompositedatasource is created to hold all of the datasources. you can get this composite datasource in a script by using an element's 'database' property i...
...that means that a template query can grab data from anywhere in all of the datasources. this combining of datasources is often termed 'aggregation'. ...

Static Content - Archive of obsolete content
or each country, and appends a menuitem for each one. one interesting thing about this example is that only one menupopup will be created, even though there are two in the code, one outside the template and another one inside the action body. this demonstrates how the template builder generates content, and the specifics of how this is done become important when dealing with recursive content and multiple rules. what's going on here is that the xul parser first creates the outer menulist element. the static content outside the template will also be created. the result will be a xul display that looks just like the code above, except that the template and its content is hidden. at this point, the menulist will have a menupopup as a child, and the menupopup will in turn have one menuitem child. next...
...each result. the technique of looking for an existing element applies to any type of content. the builder will treat the element as already present as long as some element with the same tag name exists. if you were to change the static content to be some other element besides a menupopup, it won't match, so the builder will create a new one when handling the action. this becomes useful when using multiple rules and we'll see some examples of this later. here is the example to try. note that the workaround of loading the datasource beforehand as mentioned for the last example isn't necessary, as the existence of the static content is another effective workaround. so, if you're using menulists with templates and the data isn't displaying properly when the data hasn't loaded, try using a static menup...

Template Logging - Archive of obsolete content
lt is logged in a form much like the following: in template with id root using ref http://www.some-fictitious-zoo.com/birds new active result for query 2 matching rule 1: http://www.some-fictitious-zoo.com/birds/emperorpenguin in the example above, a new result has been added. for references, the value of the template's id and ref attributes are provided in each logged message. this is useful if multiple templates are being used. the second line gives details about the new result. the id of the result is specified at the end, in this case 'http://www.some-fictitious-zoo.com/b...emperorpenguin'. this corresponds to the id attribute set on a generated row. for an rdf datasource, this will be the result's resource. for other datasources, this may be a somewhat random value. however, calling geteleme...
...for example, were expecting rule 2 to match, examine the rules and ensure that the logic is correct. the final piece of information is the phrase 'new active result'. this indicates first, that this is a new result, as opposed to a result being removed, and second, that this result is 'active'. being active means that the result is not being overridden by an earlier query. as this example implies multiple queries are being used, we can determine that the first query did not provide a result with the given id, and that the result from the second query is used instead. this allows us to narrow down what query and rule is being used to generate the content. if the query was inactive, the log would say 'new inactive query'. in template with id root using ref http://www.some-fictitious-zoo.com/birds re...

Adding Event Handlers - Archive of obsolete content
is called, usually it would be the same as the xul file with a .js extension. in this case, findfile.js will be used. add the line below just after the opening window tag and before any elements. <script src="findfile.js"/> we'll create the script file later when we know what we want to put in it. we'll define some functions in the file and we can call them in event handlers. you can include multiple scripts in a xul file by using multiple script tags, each pointing to a different script. you may use relative or absolute urls. for example, you may use urls of the following form: <script src="findfile.js"/> <script src="chrome://findfiles/content/help.js"/> <script src="http://www.example.com/js/items.js"/> this tutorial does not attempt to describe how to use javascript (except as related ...
...her the user uses the mouse to click a button, or presses the enter key. there are two ways to attach an event listener to an element. first, by using an attribute with a script as its value. second, by calling an element's addeventlistener method. the former may only handle bubbling events but tends to be simpler to write. the latter can handle events at any phase and may also be used to attach multiple listeners for an event to an element. using the attribute form is more common for most events. attribute event listeners to use the attribute form, place an attribute on the element where you want the event listener to be, the name of which should be the event name preceded by the word 'on'. for example, the corresponding attribute for the 'command' event is 'oncommand'. the value of the attrib...

Anonymous Content - Archive of obsolete content
rent places. the includes attribute can be used to allow only certain elements to appear in the content. its value should be set to a single tag name, or to a list of tags separated by vertical bars (the | symbol). <children includes="button"/> this line will add all buttons that are children of the bound element in place of the children tag. other elements will not match this tag. you can place multiple children elements in a binding to place different types of content in different places. if an element in the xul does not match any of the children elements, that element (and any others that don't match) will be used instead of the bound content. here is another example. let's say that we wanted to create a widget that displayed an image with a zoom in and zoom out button on each side of it. thi...
... <xul:button label="zoom out"/> </xul:box> </content> </binding> from the dom's perspective, the child elements are still in their original location. that is, the outer xul box has two children, which are the two images. the inner box with the border has one child, the children tag. this is an important distinction when using the dom with xbl. this also applies to css selector rules. multiple children elements you can also use multiple children elements and have certain elements be placed in one location and other elements placed in another. by adding a includes attribute and setting it to a vertical bar-separated list of tags, you can make only elements in that list be placed at that location. for example, the following xbl will cause text labels and buttons to appear in a different ...

Content Panels - Archive of obsolete content
intains a page history for use with back and forward buttons. the browser can also load pages with referers and other flags. essentially, the browser tag should be used when you want to create a browser-like interface, but the iframe may be used when you just need a simple panel. a similar element, tabbrowser, provides the functionality of browser but also provides a tab bar for switching between multiple pages. this is the widget used by the mozilla browser for its tabbed browsing interface. the tabbrowser element is actually implemened as a tabbox containing a set of browser elements. both types of browser offer similar control over pages that are displayed. browser example example 2 : source view <browser src="http://www.mozilla.org" flex="1" /> as with the iframe, you can specify the u...
...owser src="http://www.mozilla.org" type="content" flex="1" /> important: you must set the type attribute correctly if you are going to be displaying remote web sites inside the browser element. the tabbrowser sets the content type automatically on all tabbed browsers that it creates. so you don't have to set this explicitly for tabbed browsers. the third type is used when your window contains multiple browser elements, for example if you have a sidebar displaying some extra content. set the type attribute on the main browser element to content-primary to indicate that its content will be the primary content inside the window. this acts just like the content value except that the content inside is accessible using the xul window's 'content' property. this makes it easy to access the content of ...

Grids - Archive of obsolete content
st column of the grid and the second element is each row is placed in the second column. note that you do not need an element to declare a cell -- there is no equivalent of the html td element. instead, you put the contents of cells directly in the row elements. grid with more elements you can use any element in place of the button element of course. if you wanted one particular cell to contain multiple elements, you can use a nested hbox or other box element. an hbox is a single element but you can put as many elements that you want inside it. for example: example 2 : source view <grid flex="1"> <columns> <column/> <column flex="1"/> </columns> <rows> <row> <label control="doctitle" value="document title:"/> <textbox id="doctitle" flex="1"/> </row> <row...
...rst row (the cherry button) will be flexible by a factor of 5 horizontally and flexible by a factor of 10 vertically. the next cell, (lemon) will only be flexible vertically. the flex attribute has also been added to the grid element so that the entire grid is flexible, otherwise it would only grow in one direction. column spanning there is no means of making a cell span a particular number of multiple columns or rows (see discussion for a way of achieving the same effect). however, it is possible to make a row or column that spans the entire width or height of the grid. to do this, just add an element inside the rows element that isn't inside a row element. you can use a box type for example, and put other elements inside it if you want to use several elements. here is a simple example: exam...

Manifest Files - Archive of obsolete content
need to do to install a new package is add a new manifest file either into the application chrome directory or the user specific chrome directory. this latter chrome directory is normally the one used since the application directory might not have sufficient permissions to write into it. note: starting in gecko 2.0, only the file named chrome.manifest is read automatically; if you need to read multiple manifest files, use the manifest command in that file to import additional manifests. use manifest flags to configure the scenarios in which the secondary manifest is imported. if you just want to try testing privileged xul code in the firefox browser, you can do this easily by just using a manifest with only one line in it: create a new directory somewhere. for example, on a windows machine, ...
... is 'tests', which means that the first field in the chrome url is 'tests' as in chrome://tests/content/sample.xul. if the package name was 'browser', the chrome url would be chrome://browser/content/. the final field is the path where the files are located. this can be either a local file path using a file url or a jar archive using a jar url, which will be described in a moment. you can specify multiple packages by including another line in the manifest file. the browser.manifest file used by firefox looks like this: content branding jar:browser.jar!/content/branding/ xpcnativewrappers=yes content browser jar:browser.jar!/content/browser/ xpcnativewrappers=yes overlay chrome://global/content/viewsource.xul chrome://browser/content/viewsourceoverlay.xul overlay chrome://global/content/viewpartial...

Styling a Tree - Archive of obsolete content
roperties attribute on the rows or cells to set one or more named properties. this can be used with trees with static content, rdf built content or with those with a custom view. let's say we want a particular row to have a blue background color. this would be used to implement mozilla mail's labels feature. we'll use a property called 'makeitblue'. you can use whatever name you want. you can set multiple properties by separating them with spaces. set the property on a row or cell, as in the following example: <treerow properties="makeitblue"> css selectors for the tree the style sheet can take this property and use it to change the appearance of the row for unread messages or labels. you can think of the properties as functioning much like style classes, although they require a somewhat more...
... that are drawn to connect child rows to parent rows. ::-moz-tree-separator: a separator in a tree. ::-moz-tree-progressmeter: content for progressmeter cells. you can create a progressmeter column by setting the type attribute on the column to progressmeter. ::-moz-tree-drop-feedback: the drag and drop feedback. ::-moz-tree-checkbox: the image to use for checkbox columns. you can check for multiple properties by separating them with commas. the example below sets the background color to grey for rows that have the 'readonly' and 'unread' properties. for properties that are 'readonly', it adds a red border around the row. note that the first rule will apply to any row that is 'readonly' regardless of whether other properties such as 'unread' are set. treechildren::-moz-tree-row(readonly) { ...

Trees and Templates - Archive of obsolete content
describes how to use a template with a tree. adding datasources to trees when using a tree, you will often use a template to build its content, to handle a large amount of hierarchial data. using a template with a tree uses very much the same syntax as with other elements. you need to add a datasources and a ref attribute to the tree element, which specify the datasource and root node to display. multiple rules can be used to indicate different content for different types of data. the following example uses the history datasource: <tree datasources="rdf:history" ref="nc:historybydate" flags="dont-build-content"> as described in the previous section, the tree may use a tree builder for template generation instead of the normal content builder. this means that elements will not be created...
...nt. the two cells grab the name and date from the datasource and place the values in the cell labels. this example shows why the uri attribute becomes useful. notice how it has been placed on the treeitem in the example, even though it is not a direct descendant of the rule element. we need to put this attribute on only those elements that we want repeated for each resource. because we don't want multiple treechildren elements, we don't put it there. instead we put the uri attributes on the treeitem elements. effectively, the elements outside (or above) the element with the uri attribute are not duplicated whereas the element with the uri attribute and the elements inside it are duplicated for each resource. as the tree builder is used and not the content builder, the structure of the elements in ...

Using the standard theme - Archive of obsolete content
it needs to use. if you are only going to use these global style sheets, you of course do not need a <tt>skin</tt> directory in your extension package, and also do not have to register a style in the <tt>chrome.manifest</tt>. adding custom styles in order to provide custom styling for some of your widgets (apart from the standard global skin) you can take two different routes. ...
...u can take two different routes. you can either add multiple <tt>xml-stylesheet</tt> processing instructions to your xul file, or create an <tt>@import</tt> chain. no matter which approach you choose, do not forget to register your custom skin in the <tt>chrome.manifest</tt>. note that you can also mix these two approaches, although it makes your code more readable when sticking to only one way. ...

XUL element attributes - Archive of obsolete content
nt but is used to specify the position in the opposite direction. you can also specify the value of align using the style property -moz-box-align. allowevents type: boolean if true, events are passed to children of the element. otherwise, events are passed to the element only. allownegativeassertions type: boolean valid on any element that has a datasources attribute. when multiple datasources are used, one may override an assertion from another. this attribute, if true, which is the default, allows a datasource to negate an earlier assertion. class type: string the style class of the element. multiple classes may be specified by separating them with spaces. coalesceduplicatearcs type: boolean valid on any element that has a datasources attribute. when mul...
...is preferred to put style rules in style sheets. template type: id for template generated elements, this attribute may optionally be placed on the root node (the element with the datasources attribute) to refer to a template that exists elsewhere in the xul code. this template attribute should be set to the id of the template element. this might be used to share a single template between multiple trees or menus. if this attribute is not specified, there should be a template element directly inside the node. tooltip type: id should be set to the value of the id of the tooltip or panel element that should be used as a tooltip window when the mouse hovers over the element for a moment. the tooltip will automatically disappear when the mouse is moved. if this attribute is set to '_ch...

The Implementation of the Application Object Model - Archive of obsolete content
stands for "extensible user interface language". it is an xml-based language for describing the contents of windows and dialogs. xul has language constructs for all of the typical dialog controls, as well as for widgets like toolbars, trees, progress bars, and menus. where html describes the contents of a single document, xul describes the contents of an entire window (which could itself contain multiple html documents). the html content tree structure for a single document is represented as a set of objects that can be accessed and manipulated. this is referred to as the dom (document object model). in a similar fashion, xul's content tree for a single window is represented as a set of objects that can be accessed and manipulated. this is referred to as the aom (application object model). how ...
... how are xml dom/aom trees represented in nglayout? nglayout has its own objects for holding content trees. nsxmlelement is used to represent a single node in a content tree for an xml language. in the absence of any modifications to xul, etc., this is what would be used by default to hold the tree for a remote xul file. this nsxmlelement implements a whole slew of interfaces, since raptor has multiple apis for referring to these objects. examples of these interfaces include nsidomelement, nsidomnode, nsixmlcontent, and nsicontent. what is rdf? rdf (pronounced r-d-f) has never been a ravening demon intent upon taking over the earth, although that does depend on who you ask. rdf stands for resource description framework, a rather intimidating name that doesn't do much to help the layman under...

XUL controls - Archive of obsolete content
ion goes here. <tab label="firefox"/> tab reference related elements: tabs tabbox tabpanels <textbox> a textbox which allows a single line of text to be entered. <textbox value="firefox"/> more information about the textbox element. textbox reference <textbox multiline="true"> a textbox which allows multiple lines of text to be entered. <textbox multiline="true"/> more information about the multiple line textbox element. textbox reference <textbox type="autocomplete"> a textbox that provides a dropdown showing matches that would complete what the user types. the user can select one to have it filled into the textbox. <textbox type="autocomplete" ...
... <toolbarbutton type="menu-button" label="open"> <menupopup> <menuitem label="open changed files"/> <menuitem label="open all"/> </menupopup> </toolbarbutton> more information about this type of menu toolbarbutton element. toolbarbutton reference related elements: menupopup menuitem toolbar <tree> a tree displays a hierarchy of items in multiple columns. <tree> <treecols> <treecol label="name" flex="1"/> <treecol label="size" flex="1"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="popcorn"/> <treecell label="large"/> </treerow> </treeitem> <treeitem> <treerow> <treecell label="root beer"/> <treecell label="small"/> </treerow> <...

prefpane - Archive of obsolete content
de(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata events paneload this event is fired on the pane element when the pane is fully loaded (e.g. after the overlay is merged.) you can put the handler for this event in the onpaneload attribute on the element. using multiple prefpanes note that when using multiple prefpanes in the same prefwindow, you must not put the <script> elements above the prefpane elements, but instead below them. otherwise the dialog will show erratic behavior and not display correctly. place the <script> tags as in the following example for preference dialogs to work correctly: <prefwindow> <prefpane id="panegeneral" label="general"> .
...e for preference dialogs to work correctly: <prefwindow> <prefpane id="panegeneral" label="general"> ... </prefpane> <prefpane id="panesecurity" label="security"> ... ...

tabbrowser - Archive of obsolete content
note: starting in firefox 3 (xulrunner/gecko 1.9), this is only used in the main firefox window and cannot be used in other xul windows by third-party applications or extensions. ...
... go forward to the next group of tabs. gohome() return type: no return value load the user's home page into the browser. gotoindex( index ) return type: no return value navigate to the page in the history with the given index. use a positive number to go forward and a negative number to go back. loadgroup( group ) not in firefox return type: the first tab loads a group of pages into multiple tabs. they are either appended or replaced depending on the state of the preference browser.tabs.loadgroup. the argument should be an array of objects, one for each document to load. the objects may be defined in script and contain a uri property for the url of the page to load. a referreruri property may also be optionally used to set the referrer page. this function returns a reference to the f...

textbox - Archive of obsolete content
more information is available in the xul tutorial. ...
...alue that the scale or number box may be set to. the default value is 100 for scales and infinity for number boxes. maxlength type: integer the maximum number of characters that the textbox allows to be entered. min type: integer the minimum value the textbox's value may take. the default value is 0. multiline type: boolean if true, the textbox displays multiple lines. if the user presses enter, a new line is started. if false, the textbox only allows entry of one line. newlines type: one of the values below how the text box handles pastes with newlines in them. possible values: pasteintact paste newlines unchanged pastetofirst paste text up to the first newline, dropping the rest of the text replacewithcommas pastes the text with ...

Archived Mozilla and build documentation - Archive of obsolete content
<head> elements. generators can also be independently downloaded and installed by users if they include a list of pages to which they apply. creating a mozilla extension a mozilla extension is an installable enhancement to the mozilla browser that provides additional functionality (for example linky, which adds an item to the context menu for opening multiple links in a document or selection). this tutorial walks you through the process of building a mozilla extension that adds an icon to mozilla's status bar showing the current status of the mozilla source code (i.e. whether or not the latest version of the code is compiling successfully and passing tests). the extension will access tinderbox, mozilla.org's webtool for tracking sour...
... launch roadmap comments, ideas, questions and other discussion should be added on the devmo talk:1.0 launch roadmap page. further details on smaller tasks being done are available at user:dria:todo page. see also current events. download manager improvements in firefox 3 firefox 3 offers improvements to the download manager that allow multiple progress listeners, use of the storage api for data management, download resuming, and more. in addition, you can augment or replace the download manager's user interface by implementing the new nsidownloadmanagerui interface. download manager preferences there are several preferences used by the download manager. this article provides a list of them. dra...

2006-10-27 - Archive of obsolete content
f the nn4.6 table border color quirk discussion on removing the nn 4.6 table boarder color quirk, which currently causes a specific markup to produce a green boarder instead of a gray one. help for getting html element width info discussion on retrieving width information on html elements when using the gecko engine. it was determined that the offsetwidth property can be used to get this value. multiple presshells discussion on why current interfaces allow for multiple presshells and how the relationships work for the following objects: docshell, presshell, prescontext, document, domwindow, widget, docshell and contentviewer. boris zbarsky explains in detail the relationships between these objects. the presshells are currently used for printing, but should or could have been used for print previ...
...lls discussion on why current interfaces allow for multiple presshells and how the relationships work for the following objects: docshell, presshell, prescontext, document, domwindow, widget, docshell and contentviewer. boris zbarsky explains in detail the relationships between these objects. the presshells are currently used for printing, but should or could have been used for print previews and multiple views in editors. meetings none this week. ...

NPN_RequestRead - Archive of obsolete content
an error code. for possible values, see error codes. description for a seekable stream, the browser sends data only in response to requests by the plug-in. the plug-in calls npn_requestread() to request data from a seekable stream. the plug-in can use this function to make one or more requests for ranges of bytes. these requests result in subsequent calls to npp_writeready() and npp_write(). ...
...ug-in. the plug-in calls npn_requestread() to request data from a seekable stream. the plug-in can use this function to make one or more requests for ranges of bytes. these requests result in subsequent calls to npp_writeready() and npp_write(). for multiple requests, the function creates a linked list of npbyterange structures, each of which represents a separate request. if the plug-in requests multiple ranges (either through a list of npbyterange objects in a single call to npn_requestread(), or multiple calls to npn_requestread()), the browser can write individual ranges in any order, and with any number of npp_writeready() and npp_write() calls. the plug-in must allocate npbyterange objects, which the browser copies if necessary. the plug-in can free these as soon as the call returns. seekabl...

Adobe Flash - Archive of obsolete content
scussed further in the section on fscommands. accessing flash from javascript the simple example below shows how input into an html text box in a form field can be transferred to a flash animation (the grey text box below). example 2: javascript to flash communication note: javascript to flash communication may not work with flash player versions older than version 8 if the user has installed multiple mozilla based browsers onto the same machine (see bug 284057 and bug 233533). enter some text in the html form field below and then click outside the field, or hit the enter key, to send the text to the flash movie below: the example is missing. example 2 shows the use of macromedia flash's setvariable method being invoked from javascript. in general, to invoke a macromedia-defined method on ...
...yflash" ..... > <param name="movie" value="somefile.swf" /> .... var myflash = document.getelementbyid("myflash").setvariable("myvar", sendtext); a more expanded code example that shows how example 2 was created is shown in this source listing. fscommands: accessing javascript from flash note: fscommand may not work with flash player versions older than version 8 if the user has installed multiple mozilla based browsers onto the same machine (see bug 32048 and bug 233533). in example 2, a javascript function first obtained a handle to the html that spawned the plugin (the object element or the embed element) and then called a published method of the flash plugin on the reference to the html element. with fscommands, developers may choose to use macromedia's actionscript language to make a...

Shipping a plugin as a Toolkit bundle - Archive of obsolete content
ucture in the xpi file: install.rdf plugins/ pluginlib.dll plugintypes.xpt the install.rdf file contains an install manifest that describes the plugin to the user. the library and scripting interfaces are held in the plugins directory. platform-specific files gecko 1.9.2 (firefox 3.6) and earlier prior to gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1), it was possible to package multiple plugin libraries for different operating systems into a single xpi bundle. in the xpi you can use the following structure: platform/ linux_x86-gcc3/ plugins/ libplugin.so darwin_ppc-gcc3/ plugins/ libplugin.dylib more specific information can be found in the platform-specific subdirectories documentation. gecko 2.0 (firefox 4) and later gecko 2.0 (...
... the @. the plugin must have a name to identify the plugin to the user in the list of add-ons. the version is fairly self-descriptive, it must be a toolkit version format. the target application block says which versions of an application the plugin is compatible with. it includes the application id and the minimum and maximum version of the application that the plugin works with. there can be multiple targetapplication blocks listed. the unpack property is necessary to tell applications using newer versions of gecko to unpack the plugin because dlls can't be loaded from xpi files. providing updates when plugins are packaged in this way they can make use of the built in add-on update system. this allows a remote update file to be read periodically and an updated version of the plugin offered ...

Security Controls - Archive of obsolete content
to circumvent security controls; for example, if passwords must be long and complex, users may write them down. balancing security, functionality, and usability is often a challenge. the goal should be to strike a proper balance: provide a reasonably secure solution while offering the functionality and usability that users require. ...
...ly secure solution while offering the functionality and usability that users require. another fundamental principle with security controls is using multiple layers of security—defense in depth. for example, sensitive data on a server may be protected from external attack by several controls, including a network-based firewall, a host-based firewall, and os patching. the motivation for having multiple layers is that if one layer fails or otherwise cannot counteract a certain threat, other layers might prevent the threat from successfully breaching the system. a combination of network-based and host-based controls is generally most effective at providing consistent protection. original document information author(s): u.s. department of commerce title: federal information processing stand...

Introduction to Public-Key Cryptography - Archive of obsolete content
ssible to encrypt email messages. this is also important for some business users. however, using encryption for email requires careful planning. if the recipient of encrypted email messages loses his or her private key and does not have access to a backup copy of the key, for example, the encrypted messages can never be decrypted. single sign-on network users are frequently required to remember multiple passwords for the various services they use. for example, a user might have to type a different password to log into the network, collect email, use directory services, use the corporate calendar program, and access various servers. multiple passwords are an ongoing headache for both users and system administrators. users have difficulty keeping track of different passwords, tend to choose poor o...
...nternational telecommunications union (itu), an international standards body, since 1988. users don't usually need to be concerned about the exact contents of a certificate. however, system administrators working with certificates may need some familiarity with the information provided here. certificate data formats certificate requests and certificates can be created, stored, and installed in multiple formats: binary and text. all of these formats conform to x.509 standards. three examples of binary formats are der-encoded certificates, pkcs #7 certificate chains, and netscape certificate sequence. any of the binary formats can be imported in text form, which begins with the line: -----begin certificate----- following this line is the certificate data, which can be in any of the binary forma...

TCP/IP Security - Archive of obsolete content
r is below the network layer, controls at this layer can protect both data and ip information. compared to controls at the other layers, data link layer controls are relatively simple, which makes them easier to implement; also, they support other network layer protocols besides ip. because data link layer controls are specific to a particular physical link, they cannot protect connections with multiple links, such as establishing a vpn over the internet. an internet-based connection is typically composed of several physical links chained together; protecting such a connection with data link layer controls would require deploying a separate control to each link, which is not feasible. data link layer protocols have been used for many years primarily to provide additional protection for specifi...
...ll differ. peer authentication. each ssl endpoint can confirm the identity of the other ssl endpoint with which it wishes to communicate, ensuring that the network traffic and data is being sent from the expected host. ssl authentication is typically performed one-way, authenticating the server to the client, but it can be performed mutually. replay protection. the same data is not delivered multiple times, and data is not delivered grossly out of order. original document information author(s): sheila frankel, paul hoffman, angela orebaugh, and richard park title: national institute of standards and technology (nist) special publication 800-113, guide to ssl vpns last updated date: july 2008 copyright information: this document is not subject to copyright. ...

Table Reflow Internals - Archive of obsolete content
the table figures out the column widths (balances) given the style width constraints on the table, col groups, cols, cells the preferred and max element sizes of the cells (from the pass 1 reflow), and considers colspans pass 2 - cell widths are constrained by the column widths (heights are only constrained in paginated mod...
...s reflowed, it takes c and its siblings as children and reflows them. if the reflowee is complete, truncated (it didn't fit), not at the top of page, the reflower should put the reflowee on its overflow list and return an incomplete status. intro to paginated reflow special assumptions there are only initial and (possibly) resize reflows. incremental and style change reflows are not allowed. multiple resize reflows may be necessary (e.g. a child is truncated and gets reflowed on a subsequent page) but they should not change the available width from the last time. multiple resize reflows may require special handling if a frame split previously. it may need to "pull up" children from a continuation. table paginated reflow the block containing the outer table reflows it. if it is incomplete,...

New in JavaScript 1.5 - Archive of obsolete content
r versions of netscape navigator and firefox 1.0. you can compare javascript 1.5 to jscript version 5.5 and internet explorer 5.5, which was released in july 2000. the corresponding ecma standard is ecma-262 edition 3 (from december 1999). new features in javascript 1.5 number.prototype.toexponential() number.prototype.tofixed() number.prototype.toprecision() const is now a reserved word. multiple catch clauses in a try...catch statement are supported. javascript authors can now add getters and setters to their objects. changed functionality in javascript 1.5 runtime errors are now reported as exceptions. regular expression changes: quantifiers — +, *, ? and {} — can now be followed by a ? to force them to be non-greedy. non-capturing parentheses, (?:x) can be used inst...
...apturing parentheses, (?:x) can be used instead of capturing parentheses, (x). when non-capturing parentheses are used, matched subexpressions are not available as back-references. positive and negative lookahead assertions are supported. both assert a match depending on what follows the string being matched. the m flag has been added to specify that the regular expression should match over multiple lines. functions can now be declared inside an if clause. functions can now be declared inside an expression. ...

Mozilla XForms User Interface - Archive of obsolete content
g. 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 be rendered in multiple ways. we use the data type of the instance node that the form control is bound to as a clue when making a rendering decision. the form author can also use the 'appearance' attribute on the form control to give us another clue. for example, a xforms input control may appear as a text field or as a datepicker depending on whether it is bound to a xsd...
...epresentation. link/clickable text - used when appearance = 'minimal'. submit invokes the submission of the selected instance data to its target destination, which could be local or remote (see the spec). it can have the following representations: button - default representation. link/clickable text - used when appearance = 'minimal'. select list control. allows the user to choose one or multiple values from a list of pre-defined values (see the spec). it can have the following representations: listbox - default representation checkbox group - used when appearance = 'full' select1 combobox control. allows the user to choose a single value from a list of pre-defined values (see the spec). it can have the following representations: combobox - default representation listbox - used...

Describing microformats in JavaScript - Archive of obsolete content
this may be left out if all properties are optional. properties a structure describing the properties of the microformat. property specifications each property in the properties structure is specified by its name, and may include additional attributes if the property so requires. standard attributes are: plural a boolean value indicating that, if true indicates that the property can have multiple values. if a property is plural, it is returned as an array. virtual a boolean value indicating whether or not the property is virtual. if it's virtual, the virtualgetter() method will be called to attempt to create the property if it doesn't exist. virtualgetter a function that is called to get a virtual property's value. this is only used if virtual is true. value the property's default v...
...office-box" : { }, "street-address" : { plural: true }, "extended-address" : { }, "locality" : { }, "region" : { }, "postal-code" : { }, "country-name" : { } } }; the properties are quite simple here. the type property indicates the type of address represented by the object (work, home, and so forth). since the plural property is true, multiple types can be specified. this allows an address to be marked as being, for example, a work address for receiving parcels. the street-address property is plural as well. this allows multiple lines of address information to be contained in the street-address array. the microformat is registered with the microformat api by calling microformats.add(), like this: microformats.add("adr", adr_definiti...

The Business Benefits of Web Standards - Archive of obsolete content
sed layouts into css-based layouts. typically this reduces page size by 25 to 50%. this translates into better user experience, according to usability guru jakob nielsen, who notes that users tend to close a web page when it takes more than 10 seconds to load. the style sheet only needs to load once and then it is cached. the payload might be slightly higher for the first page. but for accessing multiple pages of a site over many visits the savings in bandwidth are huge. improve search engine optimization without costs being well-placed in search engines is one of the hardest challenges faced by webmasters. in this case, every bit helps. by using semantic markup we greatly assist the search engines in their indexing process. these things come naturally to standards developers without addition...
...ss all search engines. in the same way that standards hugely reduce the concern we need to have for browser differences, they also reduce the differences between the way search engines rank pages. there should be little need to plunge into the increasing costs and uncertain quality and integrity of proprietary pay per click campaigns. increase website traffic maintain contact with your user on multiple platforms standards-based code and cross-platform go hand in hand. while some browsers have quirks that cause different behavior by platform, mozilla-based browsers are designed to behave identically on all supported platforms (mac, linux, unix, windows...) web content is increasingly being accessed by a growing number of user agents other than browsers, or by browsers on different platforms - ...

Archive of obsolete content
vin, sublime text editor or any other. syntax highliting support for .htaccess files less. 2015 mdn fellowship program add-ons archived add-ons documentation. adding preferences to an extension this article takes the creating a dynamic status bar extension sample to the next level, adding a popup menu that lets you quickly switch between multiple stocks to watch. it also adds a preference dialog that lets you switch to a stock other than one of the ones included in the popup menu. an interview with douglas bowman of wired news one of the web's oldest news sites, wired news draws between 20 and 25 million page views every month. on october 11, 2002, wired launched a brand-new site design that ...
...ing instructions are for obtaining and building the tamarin tracing source code. for instructions on tamarin central, please see the basics of web services summary: a current hot topic on the web right now are web services. this short guide will allow you to learn more about web services. themes archived theme documentation. updating an extension to support multiple mozilla applications this article shows how to take an existing extension and update it so that it can be used in additional mozilla applications. we'll build upon the stock watcher extension created in earlier articles in this series, updating it so it can also be used in thunderbird and sunbird (previous versions worked only in firefox). using firebug...

Anatomy of a video game - Game development
ecent call to requestanimationframe(). at any point, we can stop the main loop by telling the browser to cancel the request that corresponds to our token. window.cancelanimationframe( mygame.stopmain ); the key to programming a main loop, in javascript, is to attach it to whatever event should be driving your action and pay attention to how the different systems involved interplay. you may have multiple components driven by multiple different types of events. this feels like unnecessary complexity but it might just be good optimization (not necessarily, of course). the problem is that you are not programming a typical main loop. in javascript, you are using the browser's main loop and you are trying to do so effectively. building a more optimized main loop in javascript ultimately, in javascri...
...n main ( tframe )", is now a domhighrestimestamp provided by raf. } main(); // start the cycle })(); several other optimizations are possible and it really depends on what your game attempts to accomplish. your game genre will obviously make a difference but it could even be more subtle than that. you could draw every pixel individually on a canvas or you could layer dom elements (including multiple webgl canvases with transparent backgrounds if you want) into a complex hierarchy. each of these paths will lead to different opportunities and constraints. it is decision... time you will need to make hard decisions about your main loop: how to simulate the accurate progress of time. if you demand per-frame control then you will need to determine how frequently your game will update and draw. ...

Game distribution - Game development
distribute your newly created game into the wild. this includes hosting it yourself online, submitting it to open marketplaces, and submitting it to closed ones like google play or the ios app store. benefits of html5 over native building games with html5 gives you extra advantages, such as: multiplatform bliss the technology itself is multiplatform, so you can write the code once and target multiple devices. this can range from low-end smartphones or tablets, through laptops and desktop computers, to smart tvs, watches or even a fridge if it can handle a modern enough browser. you don't need to have separate teams to work on the same title targeting different platforms with only one code base to worry about. you can spend more time and money on promotion and monetization. instant updates ...
... to fix. available tools there are various tools to choose from depending on your skills, preferred frameworks or target platforms. it's all about picking the best tool for your particular task. phonegap — based on cordova, this is the most popular tool for building/packaging javascript apps for native platforms. cocoonio — the most popular tool specifically for building html5 games for multiple native stores. it has it's own performance optimizations for games rendered on canvas and supports many game frameworks. ejecta — a tool specifically for packaging games created with the impactjs framework for ios, built by the impactjs author. it provides seamless integration with impactjs, but it only supports only one framework and app store. nw.js — formerly known as node-webkit, this i...

Efficient animation for web games - Game development
rt of the animation, and so that all the animations we start before the frame is processed are synchronised. to save battery life, it is best to only draw when there are things going on, so that would mean calling requestanimationframe (or your refresh function, which in turn calls that) in response to events happening in your game. unfortunately, this makes it very easy to end up drawing things multiple times per frame. we would recommend keeping track of when requestanimationframe has been called and only having a single handler for it. there aren’t solid guarantees of what order things will be called in with requestanimationframe (though, in our experience, it is in the order in which they were requested), so this also helps cut out any ambiguity. an easy way to do this is to declare your ow...
... of the callback like so: animator.requestanimationframe = function(callback) { requestanimationframe(function(t) { callback(t); redraw(); }); }; the game’s redraw function does all drawing, and the animation callbacks just update state. when you request a redraw outside of animations, the animator’s activeanimations property is queried first to avod mistakenly drawing multiple times in a single animation frame. this gives nice, synchronised animations at a very low cost. puzzowl isn’t out yet, but here’s a little screencast of it running on a nexus 5: note: this article was originally written and published by chris lord, on his blog — see efficient animation for games on the (mobile) web. ...

Extra lives - Game development
roperly with the screen, and the latter is centered, both using anchor.set(). the lifelosttext will be shown only when the life is lost, so its visibility is initially set to false. making our text styling dry as you probably noticed we're using the same styling for all three texts: scoretext, livestext and lifelosttext. ...
...o change the font size or color we will have to do it in multiple places. ...

Gecko FAQ - Gecko Redirect 1
gecko is continuously under development at mozilla.org. gecko has been known previously by the code names "raptor" and "nglayout"; the new name was chosen following a trademark infringement dispute. for more information see the wikipedia article on gecko. ...
...l product based on gecko, see that product's release notes. how does gecko format xml documents? gecko supports the use of css and xslt to format xml documents. for xml documents without associated css or xslt, gecko displays the pretty-printed source of the document. how does gecko help content developers? content developers are sick and tired of developing and testing every single web page multiple times in order to support the different, incompatible, proprietary doms of browsers from different vendors. they have been demanding that all vendors fully support the open standards listed above so that they can have a rich, powerful formatting system and object model at their disposal, and "write once, view anywhere." gecko's robust support for these standards makes gecko the platform of ...

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

HTML: A good basis for accessibility - Learn web development
s ... </p> in this case, we are not using the alt attribute at all — instead, we have presented our description of the image as a regular text paragraph, given it an id, and then used the aria-labelledby attribute to refer to that id, which causes screen readers to use that paragraph as the alt text/label for that image. this is especially useful if you want to use the same text as a label for multiple images — something that isn't possible with alt. note: aria-labelledby is part of the wai-aria spec, which allows developers to add in extra semantics to their markup to improve screen reader accessibility where needed. to find out more about how it works, read our wai-aria basics article. other text alternative mechanisms images also have another mechanisms available for providing descrip...
...bs 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 skipnav, is an a element placed as close as possible to the opening <body> element that links to the beginning of the page's main content. this link allows people to bypass content repeated throughout multiple pages on a website, such as a website's header and primary navigation. skip links are especially useful for people who navigate with the aid of assistive technology such as switch control, voice command, or mouth sticks/head wands, where the act of moving through repetitive links can be a laborious task. webaim: "skip navigation" links how–to: use skip navigation links - the a11y project ...

HTML: A good basis for accessibility - Learn web development
s ... </p> in this case, we are not using the alt attribute at all — instead, we have presented our description of the image as a regular text paragraph, given it an id, and then used the aria-labelledby attribute to refer to that id, which causes screen readers to use that paragraph as the alt text/label for that image. this is especially useful if you want to use the same text as a label for multiple images — something that isn't possible with alt. note: aria-labelledby is part of the wai-aria spec, which allows developers to add in extra semantics to their markup to improve screen reader accessibility where needed. to find out more about how it works, read our wai-aria basics article. other text alternative mechanisms images also have another mechanisms available for providing descrip...
...bs 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 skipnav, is an a element placed as close as possible to the opening <body> element that links to the beginning of the page's main content. this link allows people to bypass content repeated throughout multiple pages on a website, such as a website's header and primary navigation. skip links are especially useful for people who navigate with the aid of assistive technology such as switch control, voice command, or mouth sticks/head wands, where the act of moving through repetitive links can be a laborious task. webaim: "skip navigation" links how–to: use skip navigation links - the a11y project ...

Accessible multimedia - Learn web development
ording of a meeting that refers to an accompanying resource such as a spreadsheet or chart. in such cases, you should make sure that the resources are provided along with the audio + transcript, and specifically link to them in the places where they are referred to in the transcript. this of course will help all users, not just people who are deaf. note: an audio transcript will in general help multiple user groups. as well as giving deaf users access to the information contained in the audio, think about a user with a low bandwidth connection, who would find downloading the audio inconvenient. think also about a user in a noisy environment like a pub or bar, who is trying to access the information but can't hear it over the noise. video text tracks to make video accessible for deaf, blind, o...
... don't understand the language being spoken. descriptions — these include descriptions for blind people who can't see the video, for example what the scene looks like. chapter titles — chapter markers intended to help the user navigate the media resource implementing html5 video text tracks text tracks for displaying with html5 video need to be written in webvtt, a text format containing multiple strings of text along with metadata such as what time in the video you want each text string to be displayed, and even limited styling/positioning information. these text strings are called cues. a typical webvtt file will look something like 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 display...

WAI-ARIA basics - Learn web development
etc., which are commonly found in uis. properties — these define properties of elements, which can be used to give them extra meaning or semantics. as an example, aria-required="true" specifies that a form input needs to be filled in to be valid, whereas aria-labelledby="label" allows you to put an id on an element, then reference it as being the label for anything else on the page, including multiple elements, which is not possible using <label for="input">. as an example, you could use aria-labelledby to specify that a key description contained in a <div> is the label for multiple table cells, or you could use it as an alternative to image alt text — specify existing information on the page as an image's alt text, rather than having to repeat it inside the alt attribute. you can see an exa...
...rm labelling techniques, beyond the classic <label> element. we already talked about using the aria-label property to provide a label where we don't want the label to be visible to sighted users (see the signposts/landmarks section, above). there are some other labelling techniques that use other properties such as aria-labelledby if you want to designate a non-<label> element as a label or label multiple form inputs with the same label, and aria-describedby, if you want to associate other information with a form input and have it read out as well. see webaim's advanced form labeling article for more details. there are many other useful properties and states too, for indicating the status of form elements. for example, aria-disabled="true" can be used to indicate that a form field is disabled. ma...

Backgrounds and borders - Learn web development
gradients is to use one of the many css gradient generators available on the web, such as this one. you can create a gradient then copy and paste out the source code that generates it. try some different gradients in the example below. in the two boxes respectively, we have a linear gradient that is stretched over the whole box, and a radial gradient with a set size, which therefore repeats. multiple background images it is also possible to have multiple background images — you specify multiple background-image values in a single property value, separating each one with a comma. when you do this you may end up with background images overlapping each other. the backgrounds will layer with the last listed background image at the bottom of the stack, and each previous image stacking on top o...
...l, so we've made a demo to demonstrate the differences between the three values — have a look at background-attachment.html (also see the source code here). using the background shorthand property as i mentioned at the beginning of this lesson, you will often see backgrounds specified using the background property. this shorthand lets you set all of the different properties at once. if using multiple backgrounds, you need to specify all of the properties for the first background, then add your next background after a comma. in the example below we have a gradient with a size and position, then an image background with no-repeat and a position, then a color. there are a few rules that need to be followed when writing background image shorthand values, for example: a background-color may on...

Type, class, and ID selectors - Learn web development
for the element i want to target, with the class appended using a dot, with no white space in between. this approach reduces the scope of a rule as the rule will only apply to that particular element & class combination; so you would need to add another selector if you decided the rule should apply to other elements too. target an element if it has more than one class applied you can apply multiple classes to an element and target them individually, or only select the element when all of the classes in the selector are present. this can be helpful when building up components that can be combined in different ways on your site. in the example below we have a <div> that contains a note. the grey border is applied when the box has a class of notebox. if it also has a class of warning or dange...
...d in the same way as a class selector. an id however can be used only once per document, and elements can only have a single id value applied to them. it can select an element that has the id set on it, and you can precede the id with a type selector to only target the element if both the element and id match. you can see both of these uses in the following example: warning: using the same id multiple times in a document may appear to work for styling purposes, but don't do this. it results in invalid code, and will cause strange behavior in many places. note: as we learned in the lesson on specificity, an id has high specificity and will overrule most other selectors. this can make them difficult to deal with. in most cases it is preferable to add a class to the element rather than use an ...

Grids - Learn web development
the prefixed versions will be maintained as an alias so will be safe to use for some time. to be on the safe side, you could double up and add both properties to make your code more bulletproof. .container { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-gap: 20px; gap: 20px; } repeating track listings you can repeat all, or a section of, your track listing us...
...he main features of css grid layout. you should be able to start using it in your designs. to dig further into the specification, read our guides to grid layout, which can be found below. ...

Supporting older browsers - Learn web development
et but then becomes a flex or grid item, the inline-block behaviour is ignored. display: table the method of creating css tables described in the introduction to these lessons can be used as a fallback. items that have css table layouts set on them will lose this behaviour if they become flex or grid items. importantly, the anonymous boxes created to fix up the table structure are not created. multiple-column layout for certain layouts you could use multi-col as a fallback, if your container has any of the column-* properties defined on it and then becomes a grid container, the multicol behaviour will not happen. flexbox as a fallback for grid flexbox has greater browser support than grid due to being supported by ie10 and 11, although do check out the information later in this lesson explai...
...essive enhancement using css grid: supporting browsers without grid a tutorial which uses the ie10 and 11 version of grid should i try to use the ie10 implementation of grid layout? ...

CSS layout - Learn web development
for the web. it lets you lay content out in rows and columns, and has many features that make building complex layouts straightforward. this article will give you all you need to know to get started with page layout, then test your grid skills before moving on. floats originally for floating images inside blocks of text, the float property became one of the most commonly used tools for creating multiple column layouts on webpages. with the advent of flexbox and grid it has now returned to its original purpose, as this article explains. positioning positioning allows you to take elements out of the normal document layout flow, and make them behave differently, for example sitting on top of one another, or always remaining in the same place inside the browser viewport. this article explains the ...
...lexbox and grid it has now returned to its original purpose, as this article explains. positioning positioning allows you to take elements out of the normal document layout flow, and make them behave differently, for example sitting on top of one another, or always remaining in the same place inside the browser viewport. this article explains the different position values, and how to use them. multiple-column layout the multiple-column layout specification gives you a method of laying content out in columns, as you might see in a newspaper. this article explains how to use this feature. responsive design as more diverse screen sizes have appeared on web-enabled devices, the concept of responsive web design (rwd) has appeared: a set of practices that allows web pages to alter their layout and...

Getting started with CSS - Learn web development
nt above. styling html elements by making our heading red we have already demonstrated that we can target and style an html element. we do this by targeting an element selector — this is a selector that directly matches an html element name. to target all paragraphs in the document you would use the selector p. to turn all paragraphs green you would use: p { color: green; } you can target multiple selectors at once, by separating the selectors with a comma. if i want all paragraphs and all list items to be green my rule looks like this: p, li { color: green; } try this out in the interactive editor below (edit the code boxes), or in your local css document. changing the default behavior of elements when we look at a well-marked up html document, even something as simple as our e...
...ht be using a screenreader, which reads out the content of the document, or they may need to use much larger text, or be navigating the site using the keyboard only. a plain html document is generally accessible to everyone — as you start to style that document it is important that you don't make it less accessible. combining selectors and combinators it is worth noting that you can combine multiple selectors and combinators together. for example: /* selects any <span> that is inside a <p>, which is inside an <article> */ article p span { ... } /* selects any <p> that comes directly after a <ul>, which comes directly after an <h1> */ h1 + ul + p { ... } you can combine multiple types together, too. try adding the following into your code: body h1 + p .special { color: yellow; backg...

Learn to style HTML using CSS - Learn web development
cascading stylesheets — or css — is the first technology you should start learning after html. while html is used to define the structure and semantics of your content, css is used to style it and lay it out. for example, you can use css to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. 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 prerequisites you should learn the basics of html before attempting any css. we recommend that you work through our introduction to html module first. in that module, you will learn about: css, starting with the introduction to css module more a...
...lso covered in our css first steps module, albeit in a lot more detail. modules this topic contains the following modules, in a suggested order for working through them. you should definitely start with the first one. css first steps css (cascading style sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. this module provides a gentle beginning to your path towards css mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to html. css building blocks this module carries on where css first steps left off — now you've gained familiarity with the language and its syntax, and go...

What text editors are available? - Learn web development
pet 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. ...
...nd 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 view your project's files and directories format your code automatically with code beautifier check spelling auto-indent code based on indentation settings do i want to add extra features to my text editor? an extensible editor comes with fewer built-in features, but can be extended based on your needs. if you aren't sure which features you want, or your favorite editor lac...

What is the difference between webpage, website, web server, and search engine? - Learn web development
rally do when visiting a library: find a search index and look for the title of the book you want. make a note of the catalog number of the book. go to the particular section containing the book, find the right catalog number, and get the book. let's compare the library with a web server: the library is like a web server. it has several sections, which is similar to a web server hosting multiple websites. the different sections (science, math, history, etc.) in the library are like websites. each section is like a unique website (two sections do not contain same books). the books in each section are like webpages. one website may have several webpages, e.g., the science section (the website) will have books on heat, sound, thermodynamics, statics, etc. (the webpages). webpages can each...
... are available on that computer. the web server will send any web page from the website it is hosting to any user's browser, per user request. don't confuse websites and web servers. for example, if you hear someone say, "my website is not responding", it actually means that the web server is not responding and therefore the website is not available. more 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 f...

Advanced form styling - Learn web development
d-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/time input types (datetime-local, time, week, month) all have the same major associated issue. the actual containing...
...check out styling cross-browser compatible range inputs with css on css tricks for a detailed write up of what's needed. color input types input controls of type color are not too bad. in supporting browsers, they tend to just give you a block of solid color with a small border. you can remove the border, just leaving the block of color, using so...

CSS basics - Learn web development
r example, there are many color values in addition to red.) note the other important parts of the syntax: apart from the selector, each ruleset must be wrapped in curly braces. ({}) within each declaration, you must use a colon (:) to separate the property from its value or values. within each ruleset, you must use a semicolon (;) to separate each declaration from the next one. to modify multiple property values in one ruleset, write them separated by semicolons, like this: p { color: red; width: 500px; border: 1px solid black; } selecting multiple elements you can also select multiple elements and apply a single ruleset to all of them. separate multiple selectors by commas. for example: p, li, h1 { color: red; } different types of selectors there are many different types of...
...le element selector (sometimes called a tag or type selector) all html elements of the specified type. p selects <p> id selector the element on the page with the specified id. on a given html page, each id value should be unique. #my-id selects <p id="my-id"> or <a id="my-id"> class selector the element(s) on the page with the specified class. multiple instances of the same class can appear on a page. .my-class selects <p class="my-class"> and <a class="my-class"> attribute selector the element(s) on the page with the specified attribute. img[src] selects <img src="myimage.png"> but not <img> pseudo-class selector the specified element(s), but only when in the specified state. (for example, when a cursor ho...

Advanced text formatting - Learn web development
ent.</dd> <dt>aside</dt> <dd>in drama, where a character shares a comment only with the audience for humorous or dramatic effect. this is usually a feeling, thought, or piece of additional background information.</dd> </dl> the browser default styles will display description lists with the descriptions indented somewhat from the terms. note that it is permitted to have a single term with multiple descriptions, for example: <dl> <dt>aside</dt> <dd>in drama, where a character shares a comment only with the audience for humorous or dramatic effect. this is usually a feeling, thought, or piece of additional background information.</dd> <dd>in writing, a section of content that is related to the current topic, but doesn't fit directly into the main flow of content so is presented nearb...
...over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = textarea.value; } updatecode(); }; quotations html also has features available for marking up quotations; which element you use depends on whether you are marking up a block or inline quotation. blockquotes if a section of block level content (be it a paragraph, multiple paragraphs, a list, etc.) is quoted from somewhere else, you should wrap it inside a <blockquote> element to signify this, and include a url pointing to the source of the quote inside a cite attribute. for example, the following markup is taken from the mdn <blockquote> element page: <p>the <strong>html <code>&lt;blockquote&gt;</code> element</strong> (or <em>html block quotation element</em>) i...

HTML table basics - Learn web development
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). ...
...ble, to help them stand out. tables headers also have an added benefit — along with the scope attribute (which we'll learn about in the next article), they allow you to make tables more accessible by associating each header with all the data in the same row or column. screenreaders are then able to read out a whole row or column of data at once, which is pretty useful. allowing cells to span multiple rows and columns sometimes we want cells to span multiple rows or columns. take the following simple example, which shows the names of common animals. in some cases, we want to show the names of the males and females next to the animal name. sometimes we don't, and in such cases we just want the animal name to span the whole table. the initial markup looks like this: <table> <tr> <th>ani...

Introducing asynchronous JavaScript - Learn web development
ure. we've then got three further code blocks chained onto the end of the fetch(): two then() blocks. both contain a callback function that will run if the previous operation is successful, and each callback receives as input the result of the previous successful operation, so you can go forward and do something else to it. each .then() 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...cat...
...eir results to the javascript environment. promises versus callbacks promises have some similarities to old-style callbacks. they are essentially a returned object to which you attach callback functions, rather than having to pass callbacks into a function. however, promises are specifically made for handling async operations, and have many advantages over old-style callbacks: you can chain multiple async operations together using multiple .then() operations, passing the result of one into the next one as an input. this is much harder to do with callbacks, which often ends up with a messy "pyramid of doom" (also known as callback hell). promise callbacks are always called in the strict order they are placed in the event queue. error handling is much better — all errors are handled by a s...

Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
lay values if the amount is less than 10, so it looks more like a traditional clock/watch. to pause the stopwatch, you'll want to clear the interval. to reset it, you'll want to set the counter back to 0, clear the interval, and then immediately update the display. you probably ought to disable the start button after pressing it once, and enable it again after you've stopped/reset it. otherwise multiple presses of the start button will apply multiple setinterval()s to the clock, leading to wrong behavior. note: if you get stuck, you can find our version here (see the source code also). things to keep in mind about settimeout() and setinterval() there are a few things to keep in mind when working with settimeout() and setinterval(). let's review these now. recursive timeouts there is anot...
...ttom of your code: function reset() { btn.style.display = 'block'; result.textcontent = ''; result.style.display = 'none'; } okay, enough preparation! it's time to make the game playable! add the following block to your code. the start() function calls draw() to start the spinner spinning and display it in the ui, hides the start button so you can't mess up the game by starting it multiple times concurrently, and runs a settimeout() call that runs a setendgame() function after a random interval between 5 and 10 seconds has passed. the following block also adds an event listener to your button to run the start() function when it is clicked. btn.addeventlistener('click', start); function start() { draw(); spinnercontainer.style.display = 'block'; btn.style.display = 'none';...

Looping code - Learn web development
here we'll look at the loop structures available in javascript that handle such needs. prerequisites: basic computer literacy, a basic understanding of html and css, javascript first steps. objective: to understand how to use loops in javascript. keep me in the loop loops, loops, loops. ...
...teelement('p'); — creates a new paragraph. output.appendchild(para); — appends the paragraph to the output <div>. para.textcontent = — makes the text inside the paragraph equal to whatever you put on the right-hand side, after the equals sign. different iteration numbers require different text to be put in the paragraph for that iteration (you'll need a conditional statement and multiple para.textcontent = lines): if the number is 10, print "countdown 10" to the paragraph. if the number is 0, print "blast off!" to the paragraph. for any other number, print just the number to the paragraph. remember to include an iterator! however, in this example we are counting down after each iteration, not up, so you don't want i++ — how do you iterate downwards? note: i...

What is JavaScript? - Learn web development
in other parts of the learning area. html is the markup language that we use to structure and give meaning to our web content, for example defining paragraphs, headings, and data tables, or embedding images and videos in the page. css is a language of style rules that we use to apply styling to our html content, for example setting background colors and fonts, and laying out our content in multiple columns. javascript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else. (okay, not everything, but it is amazing what you can achieve with a few lines of javascript code.) the three layers build on top of one another nicely. let's take a simple text label as an example. we can mark it up using htm...
...} const buttons = document.queryselectorall('button'); for(let i = 0; i < buttons.length ; i++) { buttons[i].addeventlistener('click', createparagraph); } save and refresh your browser, and you should see the same thing! it works just the same, but now we've got our javascript in an external file. this is generally a good thing in terms of organizing your code and making it reusable across multiple html files. plus, the html is easier to read without huge chunks of script dumped in it. note: you can see this version on github as apply-javascript-external.html and script.js (see it live too). inline javascript handlers note that sometimes you'll come across bits of actual javascript code living inside html. it might look something like this: function createparagraph() { let para = ...

CSS performance optimization - Learn web development
er blocking. optimizing for render blocking css can scope styles to particular conditions with media queries. media queries are important for a responsive web design and help us optimize a critical rendering path. the browser blocks rendering until it parses all of these styles but will not block rendering on styles it knows it will not use, such the print stylesheets. by splitting the css into multiple files based on media queries, you can prevent render blocking during download of unused css. to create a non-blocking css link, move the not-immediately used styles, such as print styles, into separate file, add a <link> to the html mark up, and add a media query, in this case stating it's a print stylesheet. <link rel="stylesheet" href="styles.css"> <!-- blocking --> <link rel="stylesheet" href...
...arge screens --> by default the browser assumes that each specified style sheet is render blocking. tell the browser when the style sheet should be applied by adding a media attribute with the media query. when the browser sees a style sheet it knows that it only needs to apply it for a specific scenario, it still downloads the stylesheet, but doesn't render block. by separating out the css into multiple files, the main render-blocking file, in this case styles.css, is much smaller, reducing the time that rendering is blocked. animating on the gpu browsers are optimized to handle css animations, and handle animating properties that do not trigger a reflow (and therefore also a repaint) very well. to improve performance, the node being animated can be moved off the main thread and onto the gpu. ...

JavaScript performance - Learn web development
script impacts download performance. we'll cover tips and tricks to minimize that impact on download. but javascript can also consume the main thread, the cpu, and the battery. it can make the ui feel unresponsive or janky. we'll introduce concepts for handling that as well. download impact web applications include a lot of javascript. many applications are built with a javascrpit framework, or multiple, with several additional dependencies. often times third party scripts and apis are added, including a/b testing, tracking pixels, and features like maps and support features. all of this javascript must be downloaded. eventually. performance optimizatins should include: reducing the amount of javascript that is needed. some features requiring complex javascript can be done with a few lines ...
...n reduces the number of characters in your file, thereby reducing the number of bytes or weight of your javascript. gzipping compresses the file further, and should be used even if you don't minify. brotli is similar to gzip, generally outperforming gzip's compression. render impact web applications include a lot of javascript. many applications are built with a javascrpit framework, or multiple, with several additional dependencies. often times third party scripts and apis are added, including a/b testing, tracking pixels, and features like maps and support features. battery impact conclusion while optimizing your media files and scripts will get you very far along in terms of web performance optimization, everything that touches a web pages impacts performance. in the next article w...

Server-side web frameworks - Learn web development
profile sites, including: basecamp, github, shopify, airbnb, twitch, soundcloud, hulu, zendesk, square, highrise. laravel (php) laravel is a web application framework with expressive, elegant syntax. laravel attempts to take the pain out of development by easing common tasks used in the majority of web projects, such as: simple, fast routing engine. powerful dependency injection container. multiple back-ends for session and cache storage. expressive, intuitive database orm. database agnostic schema migrations. robust background job processing. real-time event broadcasting. laravel is accessible, yet powerful, providing tools needed for large, robust applications. asp.net asp.net is an open source web framework developed by microsoft for building modern web applications and services.
... the only framework based on java it is easy to use to create stand-alone, production-grade spring-based applications that you can "just run". it is an opinionated view of the spring platform and third-party libraries but allows to start with minimum fuss and configuration. it can be used for small problems but its strength is building larger scale applications that use a cloud approach. usually multiple applications run in parallel talking to each other, with some providing user interaction and others doing back end work (e.g. accessing databases or other services). load balancers help to ensure redundancy and reliability or allow geolocated handling of user requests to ensure responsiveness. summary this article has shown that web frameworks can make it easier to develop and maintain server-...

Framework main features - Learn web development
nt() function, which we can invoke to update the value of count. we call this function on line 4, and set count to whatever its current value is, plus one. styling components each framework offers a way to define styles for your components — or for the application as a whole. although each framework’s approach to defining the styles of a component is slightly different, all of them give you multiple ways to do so. with the addition of some helper modules, you can style your framework apps in sass or less, or transpile your css stylesheets with postcss. handling dependencies all major frameworks provide mechanisms for handling dependencies — using components inside other components, sometimes with multiple hierarchy levels. as with other features, the exact mechanism will differ between f...
...uthorcredit react component might be utilized inside an article component. that means that article would need to import authorcredit. import authorcredit from "./components/authorcredit"; once that’s done, authorcredit could be used inside the article component like this: ... <authorcredit /> ... dependency injection real-world applications can often involve component structures with multiple levels of nesting. an authorcredit component nested many levels deep might, for some reason, need data from the very root level of our application. let's say that the magazine site we're building is structured like this: <app> <home> <article> <authorcredit {/* props */} /> </article> </home> </app> our app component has data that our authorcredit component needs. we could re...

Creating our first Vue component - Learn web development
mponent's done prop to the checked attribute on the <input> element, so that it can serve as a record of whether the checkbox is checked or not. however, it's important that props serve as one-way data binding — a component should never alter the value of its own props. there are a lot of reasons for this. in part, components editing props can make debugging a challenge. if a value is passed to multiple children, it could be hard to track where the changes to that value were coming from. in addition, changing props can cause components to re-render. so mutating props in a component would trigger the component to rerender, which may in-turn trigger the mutation again. to work around this, we can manage the done state using vue’s data property. the data property is where you can manage local st...
...at this point we have a nicely-working todoitem component that can be passed a label to display, will store its checked state, and will be rendered with a unique id each time it is called. you can check if the unique ids are working by temporarily adding more <to-do-item></to-do-item> calls into app.vue, and then checking their rendered output with your browser's devtools. now we're ready to add multiple todoitem components to our app. in our next artcle we'll look at adding a set of todo item data to our app.vue component, which we'll then loop through and display inside todoitem components using the v-for directive. previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started...

Rendering a list of Vue components - Learn web development
in this artcle we'll look at adding a set of todo item data to our app.vue component, which we'll then loop through and display inside todoitem components using the v-for directive. prerequisites: familiarity with the core html, css, and javascript languages, knowledge of the terminal/command line. ...
...combination of javascript objects that manage the app's data and an html-based template syntax that maps to the underlying dom structure. for installation, and to use some of the more advanced features of vue (like single file components or render functions), you'll need a terminal with node + npm installed. objective: to learn how to loop through an array of data and render it in multiple components. rendering lists with v-for to be an effective to-do list, we need to be able to render multiple to-do items. to do that, vue has a special directive, v-for. this is a built-in vue directive that lets us include a loop inside of our template, repeating the rendering of a template feature for each item in an array. we'll use this to iterate through an array of to-do items and di...

Introduction to cross browser testing - Learn web development
he development of the site. you should split the different parts of the development into modules, for example you might split the different site areas up — home page, product page, shopping cart, payment workflow, etc. you might then further subdivide these — implement common site header and footer, implement product page detail view, implement persistent shopping cart widget, etc. there are multiple general strategies to cross browser development, for example: get all the functionality working as closely as possible in all target browsers. this may involve writing different code paths that reproduce functionality in different ways aimed at different browsers, or using a polyfill to mimic any missing support using javascript or other technologies, or using a library that allows you to writ...
...mates to help out if you are working in a team). you should try to test it on real physical devices where possible. if you haven't got the means to test all those different browser, operating system, and device combinations on physical hardware, you can also make use of emulators (emulate a device using software on your desktop computer) and virtual machines (software that allows you to emulate multiple operating system/software combinations on your desktop computer). this is a very popular choice, especially in some circumstances — for example, windows doesn't let you have multiple versions of windows installed simulataneously on the same machine, so using multiple virtual machines is often the only option here. another option is user groups — using a group of people outside your developme...

Accessibility API cross-reference
ame, directory_pane, frame, layered_pane, option_pane, root_pane, scroll_pane, viewport a window in an mdi applicaton internal_frame internal_frame, n/a invisible layer z-indexed to the front, for temporary content. e.g., tooltips may be drawn on the glass pane layer. glass_pane glass_pane n/a multiple adjacent panes that can be sized relative to each other by dragging a grippy on their border split_pane split_pane n/a an object that can be drawn into and is used to trap events. n/a n/a canvas n/a <canvas> (accessible alternative richtext content may be nested inside, but the canvas itself is presentational) a dialog for ...
... n/a iconified iconified can be expressed with aria-expanded marqueed n/a n/a 3rd state in a tri-state checkbox mixed n/a n/a aria-checked=mixed n/a must do something with control before leaving it n/a modal modal aria-modal=true edit control that can take multiple lines n/a multi_line multi_line aria-multiline=true can select more than one of the children multiselectable multiselectable multi_selectable aria-multiselectable=true currently off-screen offscreengrouping n/a n/a n/a indicates that every pixel is painted within the object's rectangular...

Continuous Integration
this document will help you understand all the pieces that comprise mozilla's continuous integration systems. taskcluster and treeherder taskcluster, mozilla's continuous integration (ci) system picks up changes pushed to hg. taskcluster generate binary builds for firefox and firefox for android across a variety of operating sytems. after the builds are completed, they are used to run a series of correctness and performance tests. ...
...g lower-case letters, e.g., t(c d g1 o s tp). the talos indicators in treeherder appear green if the job successfully completed; to see the performance data generated by the jobs, click on the performance tab of the job details panel that pops up when you click on a job in treeherder. each talos suite contains a set of tests or pages, some of these in turn have sub-tests. each test is executed multiple times to produce a number of data replicates. the talos harness produces a single number per test (typically the median of all the replicates excluding the first 1-5), which are stored in treeherder's database, and are accessible via the perfherder interface. other performance systems autophone (android) autophone is a test harness which runs a set of performance tests on a variety of real a...

Interface Compatibility
lerplate. this may involve using javascript modules, passing named parameters using objects, or other similar techniques. binary interfaces traditionally, mozilla has maintained a set of xpcom interfaces and functions with the @status frozen marking. using these interfaces, and using dynamic calls to queryinterface, it has been possible to write binary xpcom components which were compatible with multiple versions of firefox. beginning with mozilla 2 (firefox 4), this will no longer be supported: all @status markings have been removed, and extensions that use binary components will need to recompile for each major version they wish to support. js-ctypes is the recommended way for extensions to call into os or third-party native code. you should strongly consider migrating existing code to use js...
...l @status markings have been removed, and extensions that use binary components will need to recompile for each major version they wish to support. js-ctypes is the recommended way for extensions to call into os or third-party native code. you should strongly consider migrating existing code to use js-ctypes instead of binary components. if necessary, it is possible for an extension to support multiple versions by shipping multiple shared libraries (dlls) in the same extension package, and selecting the correct version using versioning flags in its chrome.manifest file. jsapi, nspr, nss, and other libraries which are currently shipped as separate shared libraries may be integrated into libxul, and extension authors should avoid linking against them. ...

mach
test: $ ./mach mochitest browser/base/content/test/general/browser_pinnedtabs.js you run mach from the source directory, so you should be able to use your shell's tab completion to tab-complete paths to tests. mach figures out how to execute the tests for you! check out the linting and analysis tools: $ ./mach lint $ ./mach static-analysis mach and mozconfigs it's possible to use mach with multiple mozconfig files. mach's logic for determining which mozconfig to use is effectively the following: if a .mozconfig file (some say it is the file mozconfig without the dot) exists in the current directory, use that. if the mozconfig environment variable is set, use the file pointed to in that variable. if the current working directory mach is invoked with is inside an object directory, the mo...
... does mach have its own configuration file? yes. you can specify configuration settings in a ~/.mozbuild/machrc file. to see the list of the 4 available settings ( which are: alias , test , try , runprefs ) type : $ ./mach settings should i implement x as a mach command? there are no hard or fast rules. generally speaking, if you have some piece of functionality or action that is useful to multiple people (especially if it results in productivity wins), then you should consider implementing a mach command for it. some other cases where you should consider implementing something as a mach command: when your tool is a random script in the tree. random scripts are hard to find and may not conform to coding conventions or best practices. mach provides a framework in which your tool can live...

Process scripts
process scripts are new in firefox 38. if you're using the addon sdk you can use the remote/parent module's remoterequire instead. when you need to run code in the content process in order to access web content, then you should use frame scripts. however, a problem with frame scripts is that they can be loaded multiple times in the content process, in multiple scopes that are insulated from each other. for example, if you call the global frame message manager's loadframescript() function, then the script will be loaded separately into all open tabs. this can then cause a problem the frame scripts are interacting with a global service in the content process. for example, in multiprocess firefox, if you need to use nsicontentpolicy to register a content policy, you must do this in the...
...ust do this in the content process. but if you register it in a frame script, and the frame script is loaded more than once, you'll register the content policy more than once, which probably isn't what you intend. similarly, some observer notifications must be registered in the content process, but if you do this in a frame script, and the frame script is loaded more than once, then you will get multiple notifications for that event. the solution in these cases is to use a process script instead of a frame script. you can load a process script by accessing a parent process message manager and calling its loadprocessscript() function. the following code uses the global parent process message manager, which will load the script into the the chrome process and any child processes: // chrome code ...

Storage access policy: Block cookies from trackers
m foo.blah.example.com yes what does the storage access policy block? the storage access policy blocks resources identified as trackers from accessing their cookies and other site storage when they are loaded in a third-party context. this prevents those resources from retrieving tracking identifiers stored in cookies or site storage and using them to identify users across visits to multiple first parties. specifically, firefox does this by imposing the following restrictions: cookies: block cookie request headers and ignore set-cookie response headers. return an empty string for calls to document.cookie and ignore requests to set cookies via document.cookie. dom storage: localstorage: window.localstorage: read and write attempts throw a securityerror exception. prior to f...
...mple.com embeds an <iframe> from tracker.example. http: yes js: yes example.com embeds an <iframe> from example.com (same origin). the nested <iframe> embeds an <iframe> from tracker.example. http: yes js: no storage access expiration the storage access grant expires after 30 days. domains classified as tracking resources may be granted third-party storage access on multiple first parties, and the storage permission for each party expires independently. the above heuristics will also serve to extend the lifetime of a third-party storage permission on origins that have already been granted access. each time the heuristic is activated, or a success call to the storage access api is made, the pre-existing storage access expiration will be extended by 30 days, counting ...

IME handling guide
"turned on". "closed" is also called "inactive" or "turned off") so, this document is useful when you're try to fix a bug for text input in gecko. composition string and clauses typical japanese ime can input two or more words into a composition string. when a user converts from hiragana characters to chinese characters the composition string, japanese ime separates the composition string into multiple clauses. for example, if a user types "watasinonamaehanakanodesu", it's converted to hiragana characters, "わたしのなまえはなかのです", automatically (in the following screenshots, the composition string has a wavy underline and the only one clause is called "raw input clause"). when a user presses convert key, japanese ime separates the composition string as "わたしの" (my)...
... modules handling ime composition widget each widget handles native ime events and dispatches widgetcompositionevent with mozilla::widget::texteventdispatcher to represent the behavior of ime in the focused editor. this is the only module that depends on the users platform. see also native ime hand...

IPDL Tutorial
they behave like public, protected, and private labels in c++. parameters message declarations allow any number of parameters. parameters specify data that are sent with the message. their values are serialized by the sender and deserialized by the receiver. ipdl supports built-in and custom primitive types, as well as unions and arrays. the built-in simp...
...ocol{parent,child}::messagenamepromise, which is a mozpromise. the resolve callback for the first overload as well as the success callback for the mozpromise's then() method each have a single parameter. if the message returns only one value (e.g. otherfunction above) the parameter is, for both resolve and success callbacks, the returns value itself (as a const reference); if the message returns multiple values (e.g. initasync above), the parameter is, for both resolve and success callbacks, a tuple of the return values (e.g. tuple<bool, bool>). on the other hand the reject/failure callbacks take a mozilla::ipc::responserejectreason&& and are called in case of a fatal error, such as an ipc error. therefore, besides callback/promise style response handling, these two overloads are functionally equ...

Promise
ction reason. methods then() calls one of the provided functions as soon as this promise is either fulfilled or rejected. a new promise is returned, whose state evolves depending on this promise and the provided callback functions. the appropriate callback is always invoked after this method returns, even if this promise is already fulfilled or rejected. you can also call the then method multiple times on the same promise, and the callbacks will be invoked in the same order as they were registered. warning: if the onfulfill callback throws an exception, the onreject callback is not invoked and the exception won't be caught, nor shown in the console (you will see a promise chain failed error). you can register a rejection callback on the returned promise instead (using catch() or then())...
...ill callback throws an exception, the onreject callback is not invoked and the exception won't be caught, nor shown in the console (you will see a promise chain failed error). you can register a rejection callback on the returned promise instead (using catch() or then()), to process any exception occurred in either of the callbacks registered on this promise. note: when you call the then method multiple times on the same promise, the registered callbacks are always executed independently. for example, if an exception occurs in one callback, it does not affect the execution of subsequent callbacks. the behavior of the callback only affects the promise returned by the then method with which the callback was registered, that is actually a different promise for each invocation of the method. promis...

Using JavaScript code modules
resource url. details on doing this are in the "extending resource: urls" section below. sharing objects using code modules an extremely important behavior of components.utils.import() is that modules are cached when loaded and subsequent imports do not reload a new version of the module, but instead use the previously cached version. this means that a given module will be shared when imported multiple times. any modifications to data, objects, or functions will be available in any scope that has imported the module. for example, if the simple module were imported into two different javascript scopes, changes in one scope can be observed in the other scope. scope 1: components.utils.import("resource://app/my_module.jsm"); alert(bar.size + 3); // displays "6" bar.size = 10; scope 2: comp...
...t is seen here on github - gists - _template-bootstrapjsm.xpi extending resource: urls prior to gecko 2.0, the most common way to load code modules was using resource: urls. the basic syntax of a resource url is as follows: resource://<alias>/<relative-path>/<file.js|jsm> the <alias> is an alias to a location, usually a physical location relative to the application or xul runtime. there are multiple pre-defined aliases set up by the xul runtime: app - alias to the location of the xul application gre - alias to the location of the xul runtime the <relative-path> can be multiple levels deep and is always relative to the location defined by the <alias>. the common relative path is "modules" and is used by xul runner and firefox. code modules are simple javascript files with a .js or .jsm ...

Localization content best practices
developer.mozilla.org/en/docs/localization_and_plurals # #1 is the number of cookies to delete # example: delete-cookies = delete #1 cookie;delete #1 cookies important: always include the localization note with this format if you use a plural form in firefox. this comment is used by tools to identify strings with plural forms. ...
...e # example: delete-cookies = delete #1 cookie;delete #1 cookies important: always include the localization note with this format if you use a plural form in firefox. this comment is used by tools to identify strings with plural forms. one last advice: never use plural form as a replacement for single/multiple conditional. see bug 658191 for more details. use ordered variables in string with multiple variables consider this string from /browser: generalsiteidentity=this website is owned by %s\nthis has been verified by %s first thing: always add a localization comment explaining what these variables mean, even if it seems obvious. using multiple %s give the impression that the order of variables if fixed, which is actually not. # localization note(generalsiteidentity): %1$s is the owner o...

Mozilla Development Strategies
they find it before you ship. they're giving you a second chance to get it right before it becomes a bug that affects users. minimize how you are affected by regressions unless you are the type to go out and tackle daily regressions, you need to find a way to not let them affect you. you don't want to have one tree, update it every morning, and then be stuck waiting for blockers to clear. have multiple trees. at least one of them should be updated every day. you'll need this one for regressions that require your immediate attention (a new crasher, a blocker, or problem in your area, for example). use this same tree for small, quick bugs or recent regressions or crashers. for your other tree, don't update as often. update when you know that the tree is in good shape. do your primary development ...
... without updating your tree, the more likely you are to have cvs conflicts. if you update every day for a week, you might not have any conflicts, but if you update once a week and you've changed a lot of code, you'll most likely have conflicts. see mozilla\config\fast-update.pl for a fast way to update your tree. you can update your main mozilla tree (minus nsprpub, etc) in 1-2 minutes. work on multiple bugs in parallel you should be working on the most important bugs first. but those might be difficult bugs (hard to reproduce crashers, big rewrites for performance, etc.) which can take several days or weeks to complete, plus the time for reviews. in your other trees, work on smaller, easier bugs. pick bugs that won't cause conflicts with the work you're doing in your primary tree. pick bugs th...

Power profiling overview
the intel power governor documentation) shows how machines using recent intel processors are constructed. the important points are as follows. the processor has one or more packages. these are part of the actual processor that you buy from intel. client processors (e.g. core i3/i5/i7) have one package. server processors (e.g. xeon) typically have two or more packages. each package contains multiple cores. each core typically has hyper-threading, which means it contains two logical cpus. the part of the package outside the cores is called the uncore or 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 fea...
...mple, the gecko profiler takes samples at 1000hz using a timer. each of these samples can trigger a wakeup, which consumes power and obscures firefox's natural wakeup patterns. for this reason, integrating power measurements into the gecko profiler is unlikely to be useful, and other power profiling tools typically use much lower sampling rates (e.g. 1hz.) p-states intel processors also support multiple p-states. p0 is the state 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 measur...

Profiling with the Firefox Profiler
ons are not yet named properly, symbolication may not yet be finished. tip: you can right-click on a function name to get an option to copy its name to the clipboard. a significant portion of time can be spent in idle, blocking calls like waiting for events. this is ideal for a responsive application to be ready to service incoming events. there are os-specific waiting functions like ntwaitformultipleobjects seen in the example above taken on windows or mach_msg_trap on macos. tip: you can quickly go deeper into the call tree by holding down your right arrow key. alternatively, expand an entire tree segment by holding alt and clicking on the arrow to the left of the collapsed tree segment. as we progress into a more specific part of the tree, you'll notice that the 'running time' decreases...
...r profile will now, hopefully, be updated with symbols. upload it for further analysis! i haven’t yet had the opportunity to try this, but i hope to next week. i’d be eager to hear people’s experience giving this a go – it might be a great tool in determining what’s going on in firefox when it’s hung! profiling threads the firefox profiler has rudimentary support for profiling multiple threads. to enable it, check the 'multi-thread' box then enter one or more thread names into the textbox beside it. thread names are the strings passed to the base::thread class at initialization. at present there is no central list of these thread names, but you can find them by grepping the source. examples: 1 2 if the filter you entered is invalid, no threads will be profiled. you can identi...

Introduction to NSPR
rrupting threads for reference information on the nspr api used for thread scheduling, see threads. setting thread priorities the host operating systems supported by nspr differ widely in the mechanisms they use to support thread priorities. in general, an nspr thread of higher priority has a statistically better chance of running relative to threads of lower priority. however, because of the multiple strategies to provide execution vehicles for threads on various host platforms, priorities are not a clearly defined abstraction in nspr. at best they are intended to specify a preference with respect to the amount of cpu time that a higher-priority thread might expect relative to a lower-priority thread. this preference is still subject to resource availability, and must not be used in place of ...
...ition); ... manipulate monitored data exit(monitor); the need to evaluate the boolean expression again after rescheduling from a wait may appear unnecessary, but it is vital to the correct execution of the program. the notification promotes a thread waiting on a condition to a ready state. when that thread actually gets scheduled is determined by the thread scheduler and cannot be predicted. if multiple threads are actually processing the notifications, one or more of them could be scheduled ahead of the one explicitly promoted by the notification. one such thread could enter the monitor and perform the work indicated by the notification, and exit. in this case the thread would resume from the wait only to find that there's nothing to do. for example, suppose the defined rule of a function is t...

Certificate functions
questattributes mxr 3.10 and later cert_startcrlentryextensions mxr 3.10 and later cert_startcrlextensions mxr 3.10 and later cert_uncachecrl mxr 3.10 and later cert_verifycertname mxr 3.2 and later cert_verifycacertforusage mxr 3.6 and later cert_verifycert mxr 3.2 and later. ...
...ame mxr 3.2 and later cert_verifycacertforusage mxr 3.6 and later cert_verifycert mxr 3.2 and later. if you need to verify for multiple usages use cert_verifycertificate cert_verifycertificate mxr 3.6 and later cert_verifycertificatenow mxr 3.6 and later cert_verifycertnow mxr 3.2 and later. ...

JSS FAQ
port? is jss fips compliant? is there any sample code and documentation? if i don't call setcipherpolicy, is the domestic policy used by default? my ssl connection is hanging on windows? how can i tell which ssl/tls ciphers jss supports? how can i debug my ssl connection? can you explain jss ssl certificate approval callbacks? can i have multiple jss instances reading separate db's? once jss initialized, i can't get anymore instances with certificatefactory.getinstance(x.509)? is it possible to sign data in java with jss? how do i convert org.mozilla.jss.crypto.x509certificate to org.mozilla.jss.pkix.cert.certificate? how do i convert org.mozilla.jss.pkix.cert to org.mozilla.jss.crypto.x509certificate? i...
...f ssl_authcertificatehook and ssl_badcerthook. it runs nss's cert authentication check, then calls the callback regardless of whether the cert passed or failed. the callback is told whether the cert passed, and then can do anything extra that it wants to do before making a final decision. sslclientcertificateselectioncallback is analogous to ssl_getclientauthdatahook. can i have multiple jss instances reading separate db's? no, you can only have one initialized instance of jss for each database. once jss initialized, i can't get anymore instances with certificatefactory.getinstance("x.509")? in version previous to jss 3.1, jss removes the default sun provider on startup. upgrade to the latest jss, or, in the cryptomanager.initializationvalues object you pass to c...

NSS_3.12.1_release_notes.html
rds conformance strictness for cert_nametoasciiinvertible (see certt.h) cert_n2a_readable (maximum human readability) cert_n2a_strict (strict rfc compliance) cert_n2a_invertible (maximum invertibility) bugs fixed the following bugs have been fixed in nss 3.12.1. bug 67890: create self-signed cert with existing key that signed csr bug 129303: nss needs to expose interfaces to deal with multiple token sources of certs. bug 311432: ecc's ecl_use_fp code (for linux x86) fails pairwise consistency test bug 330622: certutil's usage messages incorrectly document certain options bug 330628: coreconf/linux.mk should _not_ default to x86 but result in an error if host is not recognized bug 359302: remove the sslsample code from nss source tree bug 372241: need more versatile form of ce...
... bug 439123: assertion failure in libpkix at shutdown bug 440062: incorrect list element count in pkix_list_appenditem function bug 442618: eliminate dead function cert_certpackagetype bug 443755: extra semicolon in pkm_tlskeyandmacderive makes conditional code unconditional bug 443760: extra semicolon in seqdatabase makes sta...

NSS 3.12.4 release notes
sec_error_bad_info_access_method sec_error_crl_import_failed new oids (see secoidt.h) sec_oid_x509_any_policy the nssckbi pkcs #11 module's version changed to 1.75. obsolete code for win16 has been removed. support for openvms has been removed. bugs fixed the following bugs have been fixed in nss 3.12.4. ...
...bug 470500: firefox 3.1b2 crash report [[@ nssutil3.dll@0x34c0 ] bug 482742: enable building util independently of the rest of nss bug 483653: unable to build certutil.exe for fennec/wince bug 485145: miscellaneous crashes in signtool on windows bug 485155: nss_enable_pkix_verify=1 cause...

PKCS11 FAQ
on windows, libsoftokn3.so on most unix platforms). the nss softokn3 is not a complete pkcs #11 module, it was implemented only to support nss, though other products have managed to get it to work in their environment. there are a number of bugs against softoken's non-compliance, but these bugs have lower priority than fixing nss's non-complient uses of pkcs #11 or adding new features to nss. if multiple pkcs #11 modules are loaded, how does nss determine which ones to use for the mechanisms required by ssl? nss uses the first slot it finds that can perform all the required operations. on servers, it's almost always the slot that contains the server's private key. does nss support the use of pkcs #11 callbacks specified in the pnotify and papplication parameters for c_opensession? nss does not...
...and ckm_rc4_xxx. nss knows about all the mechanisms defined in pkcs #11 version 2.01, but will not perform those that aren't defined by nss's policy mechanism. when do nss applications spawn threads off the main thread, which in turn opens up a new pkcs #11 session? this depends on the application. pkcs #11 sessions are cryptographic session states, independent of threads. in nss based servers, multiple threads may call the same session, but two threads will not call the same session at the same time. questions about keys and tokens is the pkcs #11 token treated in a read-only manner? that is, no token init, no key gens, no data puts, no cert puts, etc.? if the token is marked read-only, then it will be treated as such. if the token is marked read/write and advertises that it can generate key...

PKCS11 Implement
til it receives the certificate. c_copyobject the nss rarely calls c_copyobject but may sometimes do so for non-token private keys. c_destroyobject the nss calls c_destroyobject to destroy certificates and keys on tokens. c_getobjectsize the nss never calls c_getobjectsize. c_getattributevalue the nss calls c_getattributevalue to get the value of attributes for both single objects and multiple objects. this is useful for extracting public keys, nonsecret bulk keys, and so on. c_setattributevalue the nss uses c_setattributevalue to change labels on private keys. c_findobjectsinit, 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 ...
...aphic modules frame, click add. in the create a new security module dialog box, add the security module name for your module and the full pathname for the security module file. to avoid requiring the user to type long pathnames, make sure your module is not buried too deeply. semantics unique to nss these sections describe semantics required by nss but not specified by pkcs #11. supporting multiple sessions if you support multiple sessions simultaneously and if you wish to support c_initpin, c_setpin, or c_generatekeypair, you must support simultaneous read-only and read/write sessions. random-number generation and simple digesting the nss requires that the following functions operate without authenticating to the token: c_seedrandom, c_generaterandom, and c_digest (for sha, md5, and md...

NSS Tools certutil
upply the password to include in a certificate or to access a certificate database. this is a plain-text file containing one password. be sure to prevent unauthorized access to this file. -g keysize set a key size to use when generating new public and private key pairs. the minimum is 512 bits and the maximum is 8192 bits. the default is 1024 bits. any size that is a multiple of 8 between the minimum and maximum is allowed. -h tokenname specify the name of a token to use or act on. unless specified otherwise the default token is an internal slot (specifically, internal slot 2). this slot can also be explicitly named with the string "internal". an internal slots is a virtual slot maintained in software, rather than a hardware device. inter...
...he certificate constraint extension. constraint extensions are described in standard x.509 v3 certificate extensions in appendix a.3 of thered hat certificate system administration guide. -3 add an authority keyid extension to a certificate that is being created or added to a database. this extension supports the identification of a particular certificate, from among multiple certificates associated with one subject name, as the correct issuer of a certificate. the certificate database tool will prompt you to select the authority keyid extension. authority key id extensions are described under standard x.509 v3 certificate extensions in appendix b.3 of thered hat certificate system administration guide. -4 add a crl distribution point ext...

Necko Architecture
s acquired. one of the arguments to the ondataavailable() notification is an nsiinputstream (which can be considered the underlying data). streams necko represents data in the form of streams (nsibasestream is the root interface. nsiinputstream is read from. nsioutputstream is written to). streams provide a generic interface to the data and allow for many underlying implementations that permit multiple data sources to be used. as a user, you don't care where the data came from, or where it "is," as long as you get the data. the data may be in memory, it may be on disk, or it may be located somewhere else. the point is that streams provide a loose interface for data access. if you initiate a synchronous transfer on a channel, you are handed back a stream that you can read or write from or to. if...
...sfer on a channel, you are handed back a stream that you can read or write from or to. if you initiate an asynchronous transfer, you receive callbacks that notify you when things are happening. in the case of an asynchronous read... when you receive the ondataavailable() callback, you are handed an nsiinputsteam which you can read the data from (you will more than likely need to be able to handle multiple ondataavailable() callbacks, buffering the data you receive as necessary). the transaction is not complete until you receive an "stopped" notification. transports underlying i/o functionality has been consolidated into "transports." there is a transport for each type of i/o. necko implements a file transport and a socket transport that the protocol implementations (channels) use to actually mo...

Index
returns the next context in the cycle. 219 js_convertarguments jsapi reference, obsolete, spidermonkey js_convertarguments provides a convenient way to translate a series of js values into their corresponding js types with a single function call. it saves you from having to write separate tests and elaborate if...else statements in your function code to retrieve and translate multiple js values for use with your own functions. 220 js_convertargumentsva jsapi reference, obsolete, spidermonkey js_convertargumentsva is to js_convertarguments as vprintf is to printf. see js_convertarguments for further information. 221 js_convertvalue jsapi reference, obsolete, spidermonkey js_convertvalue converts a javascript value, v, to the specified t...
.... js_stringtoversion may return any of the following values: 487 js_suspendrequest jsapi reference, spidermonkey suspends the calling thread's current request, if any, to allow the thread to block or perform time-consuming calculations. 488 js_threadsafe jsapi reference, spidermonkey js_threadsafe was a compile-time option that enables support for running multiple threads of javascript code concurrently as long as no objects or strings are shared between them. 489 js_throwstopiteration jsapi reference, spidermonkey js_throwstopiteration throws the appropriate stopiteration object for the function currently executing in cx. 490 js_toggleoptions jsapi reference, obsolete, spidermonkey js_toggleoptions toggles context...

SpiderMonkey Internals: Thread Safety
bjects cannot be shared across compartments. all js code and most jsapi calls run within a jscontext. the jscontext can be thought of as a machine that knows how to run javascript code, or as an abstraction of the notion of a thread. exception handling, for example, is per-jscontext. each jscontext must be used by only one thread at a time. a single jscontext can run work with code and objects in multiple compartments as long as no other thread is accessing those compartments. objects may be shared among jscontexts within a jscompartment. there's no fixed association between an object and a context. thread-safety in spidermonkey is turned on by compiling with -djs_threadsafe. in a js_threadsafe build, these operations are handled specially: access to jsruntime data structures garbage collection...
...tion accesses to jsruntime data structures are serialized with a few mutexes. the treatment of gc requires more explanation. making gc thread-safe with js_threadsafe, the api changes slightly. the program must group jsapi calls into "requests": js_setcontextthread(cx); js_beginrequest(cx); /* ... do stuff ... */ js_endrequest(cx); js_clearcontextthread(cx); it isn't a bottleneck; multiple threads are allowed to be in requests on the same jsruntime at once. see js_beginrequest. the most obvious effect of a request is: at any given moment there can either be multiple threads in active requests, or one thread doing gc and all requests suspended. a call to js_gc() will block until the latter becomes possible. in other words, gc waits until each other thread is either outside jsapi (in...

JIT Optimization Strategies
if only integers are ever stored in the x and y properties, then the instances of point will be represented in an "unboxed" mode - with the property values stored as raw 4-byte values within the object. objects which have the unboxed optimization are more compact. getprop_commongetter optimizes access to properties which are implemented by a getter function, where the getter is shared between multiple types. this optimization applies most often when the property access site is polymorphic, but all the object types are derived variants of a single base class, where the property access refers to a getter on the base class. consider the following example: function base() {} base.prototype = { get x() { return 3; } }; function derived1() {} derived1.prototype = object.create(base.prototype); f...
...nces of that same kind of operation. inline caches are an order of magnitude slower than the other optimization strategies, and are an indication that the type inference engine has failed to collect enough information to guide the optimization process. setproperty setprop_commonsetter optimizes access to properties which are implemented by a setter function, where the setter is shared between multiple types. this optimization applies most often when the property access site is polymorphic, but all the object types are derived variants of a single base class, where the property access refers to a setter on the base class. consider the following example: function base() {} base.prototype = { set x(val) { ... } }; function derived1() {} derived1.prototype = object.create(base.prototype); func...

JSAPI reference
class jsscript js::compile added in spidermonkey 17 js::compileoffthread added in spidermonkey 31 js::cancompileoffthread added in spidermonkey 31 js::finishoffthreadscript added in spidermonkey 31 js_compilescript js_compileucscript js_bufferiscompilableunit js_executescript js::cloneandexecutescript added in spidermonkey 31 js_decompilescript js_executescriptversion obso...
...ded in spidermonkey 13 js_setcontextsecuritycallbacks obsolete since jsapi 13 js_getruntimesecuritycallbacks obsolete since jsapi 13 js_setruntimesecuritycallbacks obsolete since jsapi 13 threading the following functions support the spidermonkey threading model. note: js_threadsafe is now permanently on and the jsruntime is single-threaded. to execute more than one js script at once, use multiple jsruntimes. jsapi 1.7 and earlier they are only available in js_threadsafe builds. added in spidermonkey 1.8 these functions are always available, but in non-js_threadsafe builds, they do nothing. js_beginrequest js_endrequest js_yieldrequest obsolete since jsapi 18 js_suspendrequest obsolete since jsapi 18 js_resumerequest obsolete since jsapi 18 js_getcontextthread obsolete since jsa...

Web Replay
ir actors, while the middleman and child processes communicate with their own channel and messages, which is tuned to the demands of the recording/replaying process. the middleman can perform actions that would be extremely difficult to manage in a replaying process without going out of sync with the recording. this mainly includes running devtools content-side scripts. the middleman can spawn multiple child processes at once, and coordinate their behavior so they run in parallel. there can be up to one recording child and two replaying children at once. the advantage of spawning both recording and replaying children is that by switching between different children the middleman can effectively rewind a live recording, then play forward and allow the user to resume interacting with the tab aft...
...t's replay project, and microsoft's time-travel debugger. compared to rr: this should work on all platforms and architectures supported by gecko, though with substantial port work required. this will be part of gecko itself, rather than a separate tool, which means both that developers won't need additional software to use it and that this can't be used to debug other software. this can use multiple cores during recording and replay. this does not preserve exact behavior. context switches can occur at different times and data races can lead to different behavior between recording and replay. data races are bugs in and of themselves, however, so this sort of non-determinism should be fixed regardless. this design allows the replaying process to behave differently from the recording process,...

Redis Tips
redis> set foo 42 ok redis> incr foo (integer) 43 redis> incrby foo 17 (integer) 60 notice that these results come back as numbers, not strings. incrbyfloat is in redis 2.6. getset is awesome. it sets the value of a key, and returns the value the key had before you changed it. redis> del foo (integer) 1 redis> get foo (nil) redis> getset foo 3 (nil) redis> getset foo 4 "3" efficient multiple queries and transaction blocks you'll often want to do several queries together. each redis command results in one network round trip. so chaining lots of commands together is going to waste a lot of time. redis has a solution for this: transaction blocks. a transaction block is a series of commands sent all at once across the wire. they are executed sequentially as a single atomic oper...
... heartbeats and time-based event logs it's a common pattern to use numerical timestamps for ranking members in a zset. i'll show this in the node console, to illustrate how the optional parameters are done. > var r = require('redis').createclient(); // and i'll define these utility functions just for this example > function now() { return (new date()).gettime(...

Gecko Roles
it panes within a window. role_toolbar 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 ...
...nts an accessible terminal. role_text_container collection of objects that constitute a logical text entity. role_toggle_button a toggle button. a specialized push button that can be checked or unchecked, but does not provide a separate indicator for the current state. role_tree_table representas a control that is capable of expanding and collapsing rows as well as showing multiple columns of data. role_viewport a viewport. an object usually used in a scroll pane. it represents the portion of the entire data that the user can see. as the user manipulates the scroll bars, the contents of the viewport can change. role_header header of a document page. role_footer footer of a document page. role_paragraph a paragraph of text. role_ruler ...

Gecko states
events: concomitant state: state_focused state_selectable the object can be selected. applied to: events: concomitant state: state_selected state_linked indicates that the object is formatted as a hyperlink. the object role will usually be role_text_leaf. state_traversed 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. ext_state_supports_autocompletion for editable areas that have any kind of autocompletion ext_state_defunct object no longer exists ext_state_selectable_text for text which is selectable, ob...
...nd of autocompletion ext_state_defunct object no longer exists ext_state_selectable_text for text which is selectable, object must implement nsiaccessibletext ext_state_editable implements nsiaccessibleeditabletext ext_state_active this window is currently the active window ext_state_modal must do something with control before leaving it ext_state_multi_line edit control that can take multiple lines ext_state_horizontal uses horizontal layout ext_state_opaque indicates this object paints every pixel within its rectangular region ext_state_single_line this text object can only contain 1 line of text ext_state_transient ext_state_vertical especially used for sliders and scrollbars ext_state_stale object not dead, but not up-to-date either ext_state_enabled a widget that i...

XPCOM array guide
the standard array classes are: nsiarray - a scriptable container for scriptable xpcom objects. ...
...ay<t>&). for example: // melements is an nscomarray<nsielement> nsfoo::getelements(nsisimpleenumerator** aresult) { return ns_newarrayenumerator(aresult, melements); } deleting objects requires gecko 6.0(firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) introduces the removeobjectsat() method to nscomarray<t>. this lets you delete multiple objects from the array at once by specifying the index to the first item to delete as well as the number of items to delete. for example, to remove three objects, starting at the third object in the array (that is, the object with index value 2): myarray.removeobjectsat(2, 3); nstarray<t> nstarray<t> is a typesafe array for holding various objects. it can be used to hold objects directly, no...

An Overview of XPCOM
guage neutral development environment - is to use an interface definition language (idl). xpcom uses its own variant of the corba omg interface definition language (idl) called xpidl, which allows you to specify methods, attributes and constants of a given interface, and also to define interface inheritance. there are some drawbacks to defining your interface using xpidl. ...
...itance. there are some drawbacks to defining your interface using xpidl. there is no support for multiple inheritance, for one thing. if you define a new interface, it cannot derive from more than one interface. another limitation of interfaces in xpidl is that method names must be unique. you can not have two methods with the same name that take different parameters, and the workaround - having multiple function names - isn't pretty: void foowithint(in int x); void foowithstring(in string x); void foowithuri(in nsiuri x); however, these shortcomings pale in comparison to the functionality gained by using xpidl. xpidl allows you to generate type libraries, or typelibs, which are files with the extension .xpt. the type library is a binary representation of an interface or interfaces. it provide...

Using XPCOM Utilities to Make Things Easier
ontain the following information: a human readable class name the class id (cid) the contract id (an optional but recommended argument) a constructor for the given object static const nsmodulecomponentinfo components[] = { { "pretty class name", cid, contract_id, constructor }, // ... }; the important thing to note in the fictitious listing above is that it can support multiple components in a module. modules such as the networking libraries in gecko ("necko") have over 50 components declared in a single nsmodulecomponentinfo array like this. the first entry of the nsmodulecomponentinfo above is the name of the component. though it isn't used that much internally at the present time, this name should be something that meaningfully describes the module. the second entr...
..., 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 mozilla the string classes support sequences of characters broken up into multiple fragments (fragments which may or may not be null terminated)[nulls-in-strings]. all string classes in xpcom derive from one of two abstract classes[other-string-classes]: nsastring and nsacstring. the former handles double byte characters, and the latter tends to be used in more general circumstances, but both of these classes define the functionality of a string. you can see these classes bein...

Inheriting from implementation classes
the problem would not exist with java's interfaces). ...
...the problem would not exist with java's interfaces). ...

Interfacing with the XPCOM cycle collector
hat your class nsfoo participates in the cycle collection in nsfoo.cpp: ns_impl_cycle_collection_class(nsfoo) change the line ns_decl_isupports to ns_decl_cycle_collecting_isupports in the definition of nsfoo. add a line ns_decl_cycle_collection_class(nsfoo) within the public portion of definition of nsfoo. or ns_decl_cycle_collection_class_ambiguous(nsfoo, nsibar) if nsfoo inherits from multiple interfaces, where nsibar is the interface which is returned when you queryinterface nsfoo to nsisupports. (we call nsibar the canonical isupports type for nsfoo.) add a line ns_interface_map_entries_cycle_collection(nsfoo) to the interface map of nsfoo in nsfoo.cpp. or if that doesn't work: ns_interface_table_head(nsfoo) ns_interface_table2(nsfoo, nsibar, ...
...ing_release(nsfoo) in nsfoo.cpp. add the appropriate ns_impl_cycle_collection_# macro, where # is the number of member variables in your class. for instance, if nsfoo contains two member variables, mbar and mbaz, we'd add ns_impl_cycle_collection_2(nsfoo, mbar, mbaz) in nsfoo.cpp. it is possible that your class has more complicated structure than this picture. for example, your class may have multiple nsisupports base classes, which requires the use of some *_ambiguous macros that perform a disambiguating downcast. or your class may have a complicated ownership structure, such that the simple ns_impl_cycle_collection_n macros are insufficient; in this case you might need to implement the traverse and unlink methods of your helper class manually. it's helpful even in these cases to use the ns_i...

IAccessibleHyperlink
s one greater than the maximum value for the indices used with the methods of this interface. furthermore, the object that implements this interface has to be connected implicitly or explicitly with an object 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...
...in this case you would have to implement two levels of accessible hyperlinks. the first level hyperlinks would only implement anchor() and anchortarget(). the anchors would all reference the image object. the anchortargets would reference the second level accessible hyperlink objects. ...

imgIEncoder
xample 50% transparent red is 0xff000080) input_format_hostargb 2 input is host-endian argb: on big-endian machines each pixel is therefore argb, and for little-endian machiens (intel) each pixel is bgra (this is used by canvas to match it's internal representation) pre-multiplied alpha is used (that is, 50% transparent red is 0x80800000, not 0x80ff0000) possible values for outputoptions. multiple values are semicolon-separated. png: ---- transparency=[yes|no|none] -- default: "yes" overrides default from input format. "no" and "none" are equivalent. apng: ----- the following options can be used with startimageencode(): transparency=[yes|no|none] -- default: "yes" overrides default from input format. "no" and "none" are equivalent. skipfirstframe=[yes|no] -- default: "no" ...
...mat, in astring outputoptions ); parameters width width in pixels. height height in pixels. inputformat one of input_format_* constants specifying the format of data. outputoptions semicolon-delimited list of name=value pairs that can give options to the output encoder. options are encoder-specific. just give an empty string for default behavior. remarks for encoding images which may contain multiple frames, the 1-shot initfromdata() interface is too simplistic. the alternative is to use startimageencode(), call addimageframe() one or more times, and then finish initialization with endimageencode(). ...

nsIAccessibleRole
ar 22 represents a toolbar, which is a grouping 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 head...
...1 represents an accessible terminal. role_text_container 92 collection of objects that constitute a logical text entity. role_toggle_button 93 a toggle button. a specialized push button that can be checked or unchecked, but does not provide a separate indicator for the current state. role_tree_table 94 representas a control that is capable of expanding and collapsing rows as well as showing multiple columns of data. role_viewport 95 a viewport. an object usually used in a scroll pane. it represents the portion of the entire data that the user can see. as the user manipulates the scroll bars, the contents of the viewport can change. also refer to role_scroll_pane. role_header 96 header of a document page. also refer to role_footer. role_footer 97 footer of a document page. also refer to...

nsIAccessibleStates
e 0x00100000 the object can be focused. state_selectable 0x00200000 the object can be selected. state_linked 0x00400000 the object is formatted as a hyperlink. the object role will usually be role_text_leaf. (see nsiaccessiblerole.constants). state_traversed 0x00800000 the object is a hyperlink that has been visited (previously clicked) by a user. state_multiselectable 0x01000000 supports multiple selection. state_extselectable 0x02000000 supports extended selection. state_alert_low 0x04000000 this information is of low priority. state_alert_medium 0x08000000 this information is of medium priority. state_alert_high 0x10000000 this information is of high priority. state_protected 0x20000000 maps to gnome's role* atk_role_passwd_text, nothing for java? state_haspopup 0x40000000 n...
...ists. 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 leaving it. ext_state_multi_line 0x00000040 edit control that can take multiple lines. ext_state_horizontal 0x00000080 uses horizontal layout. ext_state_opaque 0x00000100 indicates this object paints every pixel within its rectangular region. ext_state_single_line 0x00000200 this text object can only contain 1 line of text. ext_state_transient 0x00000400 ext_state_vertical 0x00000800 especially used for sliders and scrollbars. ext_state_stale 0x00001000 object ...

nsIAccessibleTable
tion() return the description text of the specified column in the table. astring getcolumndescription( in long columnindex ); parameters columnindex the column index. return value the column description. getcolumnextentat() return the number of columns occupied by the accessible cell at the specified row and column in the table. the result differs from 1 if the specified cell spans multiple columns. long getcolumnextentat( in long row, in long column ); parameters row the row index of the cell. column the column index of the cell. return value the number of columns the cell spans. return the index of the column containg the given cell index. long getcolumnindexat( in long cellindex ); parameters cellindex the cell index. return value the column index. g...
...ll index. getrowdescription() return the description text of the specified row in the table. astring getrowdescription( in long rowindex ); parameters rowindex the row index. return value the row description getrowextentat() return the number of rows occupied by the accessible cell at the specified row and column in the table. the result differs from 1 if the specified cell spans multiple rows. long getrowextentat( in long row, in long column ); parameters row row index of the cell. column column index of the cell. return value the number of rows the cell spans. return the index of the row containg the given cell index. long getrowindexat( in long cellindex ); parameters cellindex the cell index. return value the row index. getselectedcellindices() ...

nsICryptoHash
a base-64 encoded string. if false, then the returned value is binary data. return value this method returns a hash of the data that was read by this object. this can be either binary data or a base-64 encoded string. exceptions thrown ns_error_not_initialized indicates that init() or initwithstring() has not been called. init() initialize the hashing object. this method may be called multiple times with different algorithm types. note: this method or " .. manch("initwithstring") .. " must be called before any other method on this interface is called. void init( in unsigned long aalgorithm ); parameters aalgorithm the hash algorithm to use. must be one of the hash algorithms. exceptions thrown ns_error_invalid_arg indicates that an unsupported algorithm type was passed ...
...withstring") .. " must be called before any other method on this interface is called. void init( in unsigned long aalgorithm ); parameters aalgorithm the hash algorithm to use. must be one of the hash algorithms. exceptions thrown ns_error_invalid_arg indicates that an unsupported algorithm type was passed initwithstring() initialize the hashing object. this method may be called multiple times with different algorithm types. note: this method or " .. manch("init") .. " must be called before any other method on this interface is called. void initwithstring( in acstring aalgorithm ); parameters aalgorithm the hash algorithm type to be used as a string, such as "sha256". exceptions thrown ns_error_invalid_arg indicates that an unsupported algorithm type was passed ...

nsIDOMWindowUtils
rsetisforced boolean whether the charset of the window's current document has been forced by the user. cannot be accessed from unprivileged context (not content-accessible) read only. elementsrestyled read only unsigned long long the number of elements which have been restyled for the current document. keep in mind that during a restyle operation, an element may be restyled multiple times (for example, when an inline element contains blocks). this number also counts restyling of pseudo-elements and anonymous boxes. throws ns_error_not_available if the count can't be provided. focusedinputtype string the type of the currently-focused html <input> element, if one is focused. imageanimationmode unsigned short returns the image animation mode of th...
...clauselength, in unsigned long athirdclauseattr, in long acaretstart, in long acaretlength ); parameters acompositionstring afirstclauselength afirstclauseattr asecondclauselength asecondclauseattr athirdclauselength athirdclauseattr acaretstart acaretlength sendtouchevent() synthesizes a touch event and sends it to the window. this method supports multiple touches of the same type, but not multiple touches on the screen of different types. note: this method cannot be called from unprivileged content; that is, it's not accessible from web content. it will throw a dom security error if called without universalxpconnect privileges. the event is dispatched via the top-level window, so it could go to any window under that top level. in some cases, it ...

nsIHttpChannel
d (before onstartrequest()). referrerpolicy read only unsigned long the referrer policy in use for this channel, indicated by one of the constants listed above methods getoriginalresponseheader() get the value of a particular original response header, that is, in the same form as it came from the network. i.e. empty headers will have an empty string as value and multiple headers will not be merged as opposed to getresponseheader(). void getoriginalresponseheader( in acstring aheader, in nsihttpheadervisitor avisitor ); parameters aheader the case-insensitive name of the response header to query (for example "set-cookie"). avisitor an nsihttpheadervisitor instance allowing to visit all equally named response headers. exceptions thrown ns_error_...
...lue if changing the value of this response header is not allowed. ns_error_failure if called during visitresponseheaders(), visitoriginalresponseheaders() or getoriginalresponseheader(). visitoriginalresponseheaders() call this method to visit all original response headers, that is, in the same form as they came from the network. i.e. empty headers will be have an empty string as value and multiple headers will not be merged as opposed to visitresponseheaders(). warning: calling setresponseheader() while visiting response headers will return a ns_error_failure. void visitoriginalresponseheaders( in nsihttpheadervisitor avisitor ); parameters avisitor an nsihttpheadervisitor instance allowing to visit all original response headers. visitrequestheaders() call this method to vis...

nsIMemoryMultiReporter
the callback, which must implement the nsimemorymultireportercallback interface, receives values that match the fields in the nsimemoryreporter object. in order for a multi-reporter to gather and generate reports, you need to call collectreports(). ...
...the callback, which must implement the nsimemorymultireportercallback interface, receives values that match the fields in the nsimemoryreporter object. in order for a multi-reporter to gather and generate reports, you need to call collectreports(). ...

nsIObserver
notifications are often, though not always, broadcast via the nsiobserverservice. inherits from: nsisupports last changed in gecko 0.9.6 method overview void observe(in nsisupports asubject, in string atopic, in wstring adata); methods observe() this method will be called when there is a notification for the topic that the observer has been registered for. if you expect multiple topics/subjects, the implementor is responsible for filtering. you should not modify, add, remove, or enumerate notifications in the implementation of this method. void observe( in nsisupports asubject, in string atopic, in wstring adata ); parameters asubject in general reflects the object whose change or action is being observed. atopic indicates the specific change or action. ...
... or action is being observed. atopic indicates the specific change or action. adata an optional parameter or other auxiliary data further describing the change or action. remarks the specific values and meanings of the parameters provided varies widely, though, according to where the observer was registered, and what topic is being observed. a single nsiobserver implementation can observe multiple types of notification, and is responsible for dispatching its own behavior on the basis of the parameters for a given callback. in general, atopic is the primary criterion for such dispatch; nsiobserver implementations should take care that they can handle being called with unknown values for atopic. the most common implementation of nsiobserverservice is the xpcom observer service. with this im...

nsIOutputStream
is method. typically, output streams that do not have an internal buffer will not implement this method since such an implementation would require an intermediate buffer unless afromstream supported nsiinputstream.readsegments(), but that is not guaranteed. native code only!writesegments low-level write method that has access to the stream's underlying buffer. the reader function may be called multiple times for segmented buffers. this method is expected to keep calling the reader until either there is nothing left to write or the reader returns an error. this method should not call the reader with zero bytes to provide. note: a nsioutputstream is not required to implement this method. in some contexts, writesegments may be guaranteed to be implemented, but in general it is not. this method se...
...ero bytes to provide. note: a nsioutputstream is not required to implement this method. in some contexts, writesegments may be guaranteed to be implemented, but in general it is not. this method serves as an optimization. unsigned long writesegments( in nsreadsegmentfun areader, in voidptr aclosure, in unsigned long acount ); parameters areader a callback function that may be called multiple times. see nsreadsegmentfun for more details on this function. aclosure a parameter that is passed to areader each time it is called. acount the maximum number of bytes to write to the stream. return value this method returns the number of bytes written to the stream (may be less than acount). exceptions thrown ns_base_stream_would_block indicates that writing to the output stream wou...

nsIScriptableIO
the file is automatically deleted when the stream is closed. this can be useful for temporary files. closeoneof: the file is automatically closed when the end of the file is reached. reopenonrewind: used in conjunction with the seek mode, the file will be reopened when a seek to the beginning of the file is done. multi: the resulting stream is one which is used to concatenate the input from multiple streams as if they were one long, continuous stream. the returned stream implements the nsimultiplexinputstream interface. this mode may not be used in conjunction with the text or buffered modes. acharset the character set to use for interpreting the text data being read. used only in conjunction with the text input mode. by default, streams are interpreted in utf-8. arepl...
...nput mode. by default, streams are interpreted in utf-8. areplacechar the character used to replace unknown characters in the input stream. abuffersize the size of the buffer to use. by default, the buffer is 1024 bytes long. return value returns an nsiinputstream object to use for reading the stream. if the multi mode was specified, this object also implements the nsimultiplexinputstream interface. exceptions thrown ns_error_invalid_arg abase was null. newoutputstream() retrieves a stream to which data can be written. nsisupports newoutputstream( in nsivariant abase, in astring amode, [optional] in astring acharset, [optional] in astring areplacechar, [optional] in unsigned long abuffersize, [optional] in unsigned long apermissions ...

nsITextInputProcessor
ng); parameters astring new pending composition string. sharemodifierstateof() shares modifier state of another instance. after sharing modifier state between two or more instances, modifying modifier state on of this affects other instances. therefore, this is useful if you want to create textinputprocessor instance in every dom window or something. see also sharing modifier state during multiple instances. void sharemodifierstateof(in nsitextinputprocessor aother); parameters aother another instance. if this is null, the instance stops sharing modifier state with other instances and clears all modifier state. startcomposition() this starts composition explicitly. this is useful if your ime doesn't generate composing string but provides some ui to select commit string. if the in...
...pslock", code: "" }); tip.keydown(capslockkey); // this activates capslock state. tip.keyup(capslockkey); // this doesn't inactivate capslock state. tip.keyup(capslockkeyonvirtualkeyboard); // this also doesn't inactivate capslock state. tip.keydown(capslockkey); // this inactivates capslock state. tip.keyup(capslockkey); // this doesn't modify capslock state. sharing modifier state during multiple instances sharemodifierstateof() allows to share modifier state between multiple instances: var shiftkey = new keyboardevent("", { key: "shift", code: "shiftleft" }); var ctrlkey = new keyboardevent("", { key: "control", code: "controlleft" }); var altkey = new keyboardevent("", { key: "alt", code: "altleft" }); tip1.keydown(shiftkey); // tip1's shift state becomes active. tip1.keyup(shi...

nsIXULTemplateBuilder
s>...</bindings> <action>...</action> </rule> </queryset> </template> </rootnode> the datasources attribute on the root node is used to identify the source of data to be used. the ref attribute is used to specify the reference point for the query. the <queryset> element contains a single query and one or more <rule> elements. there may be more than one <queryset> if multiple queries are desired, and this element is optional if only one query is needed -- in that case the <query> and <rule>s 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 generat...
...e query processor's translateref() method using the value of the root node's ref attribute. this object may be retrieved later via the builder's rootresult property. for convenience, each reference point as well as all results implement the nsixultemplateresult interface, allowing the result objects from each iteration to be used directly as the reference points for the next iteration. when using multiple queries, each may generate results with the same id. more than one of these results may match one of the rules in their respective queries, however only the result for the earliest matching query in the template becomes the active match and generates output. the addresult, removeresult, replaceresult and resultbindingchanged methods may be called by the query processor to indicate that the set of...

Performance
n be kept in memory at once. the page size can be set using the page_size pragma before any operations have been done on the file. you can see an example of setting the maximum cache size to be a percentage of memory in nsnavhistory::initdb in toolkit/components/places/src/nsnavhistory.cpp. sharding the cache between connections by default, storage enables the sqlite shared-cache mode which makes multiple connections to the same database share the same cache. the cache is threadsafe. all you need to do is use services.storage.opendatabase(file). some features (virtual tables, full text indexes) are not compatible with shared cache - then you need to use services.storage.openunshareddatabase(file), which doesn't share the cache. see mozistorageservice.opendatabase(). disk writes sqlite provides the...
...l text indexes) are not compatible with shared cache - then you need to use services.storage.openunshareddatabase(file), which doesn't share the cache. see mozistorageservice.opendatabase(). disk writes sqlite provides the basic acid rules of database theory: atomicity: each transaction is atomic and cannot be "partially" committed. consistency: the database won't get corrupted. isolation: multiple transactions do not affect each other. durability: once a commit has gone through, the data is guaranteed to be committed. the problem is that these requirements make some operations, especially commits, very slow. for each commit, sqlite does two disk syncs among many other file operations (see the "atomic commit" section of http://www.sqlite.org/php2004/slides-all.html for more information o...

Address Book examples
th particular properties within that collection using getcardfromproperty. this function will return the first match that it finds in the collection or null. let collection = ... let card = collection.getcardfromproperty("jobtitle", "software engineer", false); if you are searching for a card with a particular email address, you can use the cardforemailaddress function that will match against multiple email addresses stored in one card. again, this function returns the first match that it finds in the collection, or null. let collection = ... let card = collection.cardforemailaddress("foo@bar.invalid.com"); note: both of these functions may raise an ns_error_not_implemented exception if the collection has not implemented that function. this is currently true in the case of ldap, but may be ...
...unction returns the first match that it finds in the collection, or null. let collection = ... let card = collection.cardforemailaddress("foo@bar.invalid.com"); note: both of these functions may raise an ns_error_not_implemented exception if the collection has not implemented that function. this is currently true in the case of ldap, but may be true in other cases as well. how do i search for multiple contacts? formulate a boolean search string (see nsiabcard for built-in property names): var searchquery = "(or(primaryemail,bw,@v)(nickname,bw,@v)(and(ismaillist,=,true)(notes,bw,@v)))"; searchquery = searchquery.replace(/@v/g, encodeuricomponent("mystr") the search queries use lisp syntax with operators enumerated in nsabquerystringtoexpression.cpp. assuming you wish to search across multi...

Theme Packaging
benjamin smedberg. note that this page is included from the pages listed below. ...
...ges listed below. ...

URLs - Plugins
url. the npn_geturlnotify method acts like npn_geturl. both request the creation of a new stream with the contents of the specified url, and, in addition, npn_geturlnotify notifies the plug-in of the successful or unsuccessful completion of the request. the browser notifies the plug-in by calling the plug-in's npp_urlnotify function and passing it the notifydata value, which may be used to track multiple requests. npn_geturlnotify handles the url request asynchronously. it returns immediately and only later handles the request and calls npp_urlnotify. without this notification, the plug-in cannot tell whether a request with a null target failed or a request with a non-null target was completed. nperror npn_geturlnotify(npp instance, const char* url, const char* target, ...
... only later handles the request and calls npp_urlnotify. nperror npn_posturlnotify( npp instance, const char *url, const char *target, uint32 len, const char *buf, npbool file, void* notifydata ); the parameters of this function have the same definitions as those of npn_posturl. the notifydata parameter contains plug-in-private data passed by npp_urlnotify and may be used for tracking multiple posts. posting data to an http server the following code posts two name-value pairs to a cgi script through http. the response from the server is displayed in a new window. char* ppostdata = "content-type:\tapplication/x-www-form-urlencoded\ncontent-length:\t17\n\nname=aaashun@gmail.com\n"; uint32 npostdatalen = (uint32)strlen(ppostdata); npn_posturl(npinstance, "http://www.baidu.com","...

Debugger.Frame - Firefox Developer Tools
es a small amount of progress, passing no arguments and providing this debugger.frame instance as the thisvalue. the function should return a resumption value specifying how the debuggee’s execution should proceed. what constitutes “a small amount of progress” varies depending on the implementation, but it is fine-grained enough to implement useful “step” and “next” behavior. if multiple debugger instances each have debugger.frame instances for a given stack frame with onstep handlers set, their handlers are run in an unspecified order. if any onstep handler forces the frame to return early (by returning a resumption value other than undefined), any remaining debuggers’ onstep handlers do not run. this property is ignored on frames that are not executing debuggee code, like "...
... passed in this case reflects the resumption value that caused the frame to complete. when spidermonkey calls an onpop handler for a frame that is throwing an exception or being terminated, and the handler returns undefined, then spidermonkey proceeds with the exception or termination. that is, an undefined resumption value leaves the frame’s throwing and termination process undisturbed. if multiple debugger instances each have debugger.frame instances for a given stack frame with onpop handlers set, their handlers are run in an unspecified order. the resumption value each handler returns establishes the completion 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 excep...

Debugger.Memory - Firefox Developer Tools
debugger.object.prototype.allocationsite accessor property. allocationsamplingprobability a number between 0 and 1 that indicates the probability with which each new allocation should be entered into the allocations log. 0 is equivalent to “never”, 1 is “always”, and .05 would be “one out of twenty”. the default is 1, or logging every allocation. note that in the presence of multiple debugger instances observing the same allocations within a global’s scope, the maximum allocationsamplingprobability of all the debuggers is used. maxallocationsloglength the maximum number of allocation sites to accumulate in the allocations log at a time. this accessor can be both fetched and stored to. its default value is 5000. allocationslogoverflowed returns true if there have been ...
...t. ongarbagecollection(statistics) a garbage collection cycle spanning one or more debuggees has just been completed. the statistics parameter is an object containing information about the gc cycle. it has the following properties: collections the collections property’s value is an array. because spidermonkey’s collector is incremental, a full collection cycle may consist of multiple discrete collection slices with the js mutator running interleaved. for each collection slice that occurred, there is an entry in the collections array with the following form: { "starttimestamp":timestamp, "endtimestamp":timestamp, } here the timestamp values are timestamps of the gc slice’s start and end events. reason a very short string describing the reason why the co...

Tutorial: Set a breakpoint - Firefox Developer Tools
e to make sure that tabs[0] indeed refers to the html file you visited. if you have more than one tab visiting a file: url, they all share a single content process, so you may need to use a different element of the array as the debuggee. press “run” in the scratchpad again. now, clicking on “click me!” causes the breakpoint hit to be logged twice—one for each debugger instance. multiple debugger instances can observe the same debuggee. re-running the code in the scratchpad creates a fresh debugger instance, adds the same web page as its debuggee, and then sets a new breakpoint. when you click on the div element, both debuggers’ breakpoints are hit, and both handlers run. this shows how any number of debugger-based tools can observe a single web page simultaneously. in fact,...
...s a new breakpoint. when you click on the div element, both debuggers’ breakpoints are hit, and both handlers run. this shows how any number of debugger-based tools can observe a single web page simultaneously. in fact, you can use the browser content toolbox’s debugger panel to set its own breakpoint in report, and it will trigger along with the first two. keep in mind, however, that when multiple debuggers share a debuggee, the order in which their handlers run is not specified. if more than one tool tries to influence the debuggee’s behavior, their combined behavior could be unpredictable. close the web page and the browser content toolbox. since both the scratchpad’s global object and the debuggee window are now gone, the debugger instances will be garbage collected, since ...

The JavaScript input interpreter - Firefox Developer Tools
es not immediately execute the input, but behaves as if you had pressed shift+enter , so you can finish entering the function definition. multi-line mode for multi-line entry, click the "split pane" icon at the right hand side of the single-line entry field, or press ctrl+b (windows/linux) or cmd+b (macos). the multi-line editing pane opens on the left side the of web console. you can enter multiple lines of javascript by default in this mode, pressing enter after each one. to execute the snippet that is currently in the editing pane, click the run button or press ctrl+enter (or cmd+return on macos). the snippet is echoed under the input prompt (in the right-side pane), followed by the result. you can also select a range of lines in the editing pane, and run just the code on those lines. st...
...that object. pprint() obsolete since gecko 74 formats the specified value in a readable way; this is useful for dumping the contents of objects and arrays. help()deprecated since gecko 62 :help displays help text. actually, in a delightful example of recursion, it will bring you to this page. cd() switch javascript evaluation context to a different iframe in the page. this helper accepts multiple different ways of identifying the frame to switch to. you can supply any of the following: a selector string that will be passed to document.queryselector to locate the iframe element the iframe element itself the content window inside the iframe see working with iframes. copy() new in firefox 38. copy the argument to the clipboard. if the argument is a string, it's copied as-is.

ANGLE_instanced_arrays.drawElementsInstancedANGLE() - Web APIs
note: when using webgl2, this method is available as gl.drawelementsinstanced() by default. syntax void ext.drawelementsinstancedangle(mode, count, type, offset, primcount); parameters mode a glenum specifying the type primitive to render. possible values are: gl.points: draws a single dot. gl.line_strip: draws a straight line to the next vertex. ...
...hree vertices. count a glsizei specifying the number of elements to be rendered. type a glenum specifying the type of the values in the element array buffer. possible values are: gl.unsigned_byte gl.unsigned_short when using the oes_element_index_uint extension: gl.unsigned_int offset a glintptr specifying an offset in the element array buffer. must be a valid multiple of the size of the given type. primcount a glsizei specifying the number of instances of the set of elements to execute. return value none. exceptions if mode is not one of the accepted values, a gl.invalid_enum error is thrown. if offset is a invalid multiple of the size of the given type, a gl.invalid_operation error is thrown. if count or primcount are negative, a gl.invalid_value e...

Optimizing canvas - Web APIs
ctx.drawimage(myimage, 0.3, 0.5); this forces the browser to do extra calculations to create the anti-aliasing effect. to avoid this, make sure to round all co-ordinates used in calls to drawimage() using math.floor(), for example. don’t scale images in drawimage cache various sizes of your images on an offscreen canvas when loading as opposed to constantly scaling them in drawimage(). use multiple layered canvases for complex scenes in your application, you may find that some objects need to move or change frequently, while others remain relatively static. a possible optimization in this situation is to layer your items using multiple <canvas> elements. for example, let's say you have a game with a ui on top, the gameplay action in the middle, and a static background on the bottom. in th...
...nsparency if your application uses canvas and doesn’t need a transparent backdrop, set the alpha option to false when creating a drawing context with htmlcanvaselement.getcontext(). this information can be used internally by the browser to optimize rendering. var ctx = canvas.getcontext('2d', { alpha: false }); more tips batch canvas calls together. for example, draw a polyline instead of multiple separate lines. avoid unnecessary canvas state changes. render screen differences only, not the whole new state. avoid the shadowblur property whenever possible. avoid text rendering whenever possible. try different ways to clear the canvas (clearrect() vs. fillrect() vs. resizing the canvas). with animations, use window.requestanimationframe() instead of window.setinterval() . be careful ...

DisplayMediaStreamConstraints.video - Web APIs
the displaymediastreamconstraints dictionary's video property is used to configure the video track in the stream returned by getdisplaymedia(). this value may simply be a boolean, where true specifies that a default selection of input source be made (typically the entire display area of the device in use, spanning every screen in a multiple screen configuration). since a video track must always be included, a value of false results in a typeerror exception being thrown. more precise control over the format of the returned video track may be exercised by instead providing a mediatrackconstraints object, which is used to process the video data after obtaining it from the device but prior to adding it to the stream. syntax displaymediastreamconstraints.video = allowvideoflag; displaymediastreamco...
...the content. motion the mouse cursor is always included in the video if it's moving, and for a short time after it stops moving. never the mouse cursor is never included in the shared video. displaysurface a constraindomstring which specifies the types of display surface that may be selected by the user. this may be a single one of the following strings, or a list of them to allow multiple source surfaces: application the stream contains all of the windows of the application chosen by the user rendered into the one video track. browser the stream contains the contents of a single browser tab selected by the user. monitor the stream's video track contains the entire contents of one or more of the user's screens. window the stream contains a single window selected ...

Document.getElementsByClassName() - Web APIs
ll getelementsbyclassname() on any element; it will return only elements which are descendants of the specified root element with the given class name(s). syntax var elements = document.getelementsbyclassname(names); // or: var elements = rootelement.getelementsbyclassname(names); elements is a live htmlcollection of found elements. names is a string representing the class name(s) to match; multiple class names are separated by whitespace getelementsbyclassname can be called on any element, not only on the document. the element on which it is called will be used as the root of the search. examples get all elements that have a class of 'test': document.getelementsbyclassname('test') get all elements that have both the 'red' and 'test' classes: document.getelementsbyclassname('red test'...
...only elements with all of the classnames specified are selected. html <span class="orange fruit">orange fruit</span> <span class="orange juice">orange juice</span> <span class="apple juice">apple juice</span> <span class="foo bar">something random</span> <textarea id="r...

DynamicsCompressorNode() - Web APIs
syntax var dynamicscompressornode = new dynamicscompressornode(context, options) parameters context a reference to an audiocontext. ...
... syntax var dynamicscompressornode = new dynamicscompressornode(context, options) parameters context a reference to an audiocontext. ...

DynamicsCompressorNode - Web APIs
this is often used in musical production and game audio. dynamicscompressornode is an audionode that has exactly one input and one output; it is created using the audiocontext.createdynamicscompressor() method. ...
...this is often used in musical production and game audio. dynamicscompressornode is an audionode that has exactly one input and one output; it is created using the audiocontext.createdynamicscompressor() method. ...

Element.getClientRects() - Web APIs
example 1: this html creates three paragraphs with a <span> inside, each embedded in a <div> block. client rects are painted for the paragraph in the second block, and for the <span> element in the third block. <h3>a paragraph with a span inside</h3> <p>both the span and the paragraph have a border set. the client rects are in red. ...
...k. client rects are painted for the paragraph in the second block, and for the <span> element in the third block. <h3>a paragraph with a span inside</h3> <p>both the span and the paragraph have a border set. the client rects are in red. note that the p has onlyone border box, while the span has multiple border boxes.</p> <div> <strong>original</strong> <p> <span>paragraph that spans multiple lines</span> </p> </div> <div> <strong>p's rect</strong> <p class="withclientrectsoverlay"> <span>paragraph that spans multiple lines</span> </p> </div> <div> <strong>span's rect</strong> <p> <span class="withclientrectsoverlay">paragraph that spans multiple lines</span> </p> </div> example 2: this html creates three ordered lists. client rects are painted for the <ol> in...

ExtendableEvent - Web APIs
the lifetime of the install and activate events dispatched on the global scope as part of the service worker lifecycle. this ensures that any functional events (like fetchevent) are not dispatched until it upgrades database schemas and deletes the outdated cache entries. if waituntil() is called outside of the extendableevent handler, the browser should throw an invalidstateerror; note also that multiple calls will stack up, and the resulting promises will be added to the list of extend lifetime promises. note: the behaviour described in the above paragraph was fixed in firefox 43 (see bug 1180274.) this interface inherits from the event interface. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align:...
... treating the serviceworkerregistration.installing worker as installed until the passed promise resolves successfully. the promise resolves when all resources have been fetched and cached, or else when any exception occurs. the code snippet also shows a best practice for versioning caches used by the service worker. though there's only one cache in this example, the same approach can be used for multiple caches. it maps a shorthand identifier for a cache to a specific, versioned cache name. note: in chrome, logging statements are visible via the "inspect" interface for the relevant service worker accessed via chrome://serviceworker-internals. var cache_version = 1; var current_caches = { prefetch: 'prefetch-cache-v' + cache_version }; self.addeventlistener('install', function(event) { va...

HTMLSelectElement - Web APIs
telement.formread only an htmlformelement referencing the form that this element is associated with. if the element is not associated with of a <form> element, then it returns null. htmlselectelement.labelsread only a nodelist of <label> elements associated with the element. htmlselectelement.length an unsigned long the number of <option> elements in this select element. htmlselectelement.multiple a boolean reflecting the multiple html attribute, which indicates whether multiple items can be selected. htmlselectelement.name a domstring reflecting the name html attribute, containing the name of this control used by servers and dom search functions. htmlselectelement.optionsread only an htmloptionscollection representing the set of <option> (htmloptionelement) elements contained by thi...
...dindex a long reflecting the index of the first selected <option> element. the value -1 indicates no element is selected. htmlselectelement.selectedoptionsread only an htmlcollection representing the set of <option> elements that are selected. htmlselectelement.size a long reflecting the size html attribute, which contains the number of visible items in the control. the default is 1, unless multiple is true, in which case it is 4. htmlselectelement.typeread only a domstring represeting the form control's type. when multiple is true, it returns "select-multiple"; otherwise, it returns "select-one". htmlselectelement.validationmessageread only a domstring representing a localized message that describes the validation constraints that the control does not satisfy (if any). this attribute ...

Using microtasks in JavaScript with queueMicrotask() - Web APIs
event loop runs only the tasks present on the queue when the iteration began, one after another, it handles the microtask queue very differently. there are two key differences. first, each time a task exits, the event loop checks to see if the task is returning control to other javascript code. if not, it runs all of the microtasks in the microtask queue. the microtask queue is, then, processed multiple times per iteration of the event loop, including after handling events and other callbacks. second, if a microtask adds more microtasks to the queue by calling queuemicrotask(), those newly-added microtasks execute before the next task is run. that's because the event loop will keep calling microtasks until there are none left in the queue, even if more keep getting added. warning: since micro...
... this.cache[url] = data; this.data = data; this.dispatchevent(new event("load")); }); } }; this balances the clauses by 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 (me...

Drag Operations - Web APIs
data using the type text/plain. this data will be a simple textual representation. to set a drag data item within the datatransfer, use the setdata() method. it takes two arguments: the type of data and the data value. for example: event.datatransfer.setdata("text/plain", "text to drag"); in this case, the data value is "text to drag" and is of the format text/plain. you can provide data in multiple formats. to do this, call the setdata() method multiple times with different formats. you should call it with formats in order from most specific to least specific. const dt = event.datatransfer; dt.setdata("application/x.bookmark", bookmarkstring); dt.setdata("text/uri-list", "https://www.mozilla.org"); dt.setdata("text/plain", "https://www.mozilla.org"); here, data is added in three differen...
...event's screenx and screeny properties will be set to the screen coordinates where the drop occurred. after the dragend event has finished propagating, the drag and drop operation is complete. [1]: in gecko, dragend is not dispatched if the source node is moved or removed during the drag (e.g. on drop or dragover). bug 460801 see also html drag and drop api (overview) dragging and dropping multiple items recommended drag types html5 living standard: drag and drop ...

HTML Drag and Drop API - Web APIs
nd datatransfer are broadly supported on desktop browsers. however, the datatransferitem and datatransferitemlist interfaces have limited browser support. see interoperability for more information about drag-and-drop interoperability. gecko-specific interfaces mozilla and firefox support some features not in the standard drag-and-drop model. these are convenience functions to help with dragging multiple items or non-string data (such as files). for more information, see dragging and dropping multiple items. additionally, see the datatransfer reference page for all of the gecko-specific properties and gecko-specific methods. the basics this section is a summary of the basic steps to add drag-and-drop functionality to an application. identify what is draggable making an element draggable requi...
...ping files (firefox only): http://jsfiddle.net/9c2ef/ dragging and dropping files (all browsers): https://jsbin.com/hiqasek/ a parking project using the drag and drop api: https://park.glitch.me/ (you can edit here) specifications specification status comment html living standard living standard see also drag operations dragging and dropping multiple items recommended drag types html5 living standard: drag and drop drag and drop interoperability data from caniuse ...

Headers.append() - Web APIs
for security reasons, some headers can only be controlled by the user agent. ...
...ple creating an empty headers object is simple: var myheaders = new headers(); // currently empty you could add a header to this using append(): myheaders.append('content-type', 'image/jpeg'); myheaders.get('content-type'); // returns 'image/jpeg' if the specified header already exists, append() will change its value to the specified value. if the specified header already exists and accepts multiple values, append() will append the new value to the end of the value set: myheaders.append('accept-encoding', 'deflate'); myheaders.append('accept-encoding', 'gzip'); myheaders.get('accept-encoding'); // returns 'deflate, gzip' to overwrite the old value with a new one, use headers.set. specifications specification status comment fetchthe definition of 'append()' in that...

Headers.set() - Web APIs
for security reasons, some headers can only be controller by the user agent. ...
... headers(); // currently empty you could add a header to this using headers.append, then set a new value for this header using set(): myheaders.append('content-type', 'image/jpeg'); myheaders.set('content-type', 'text/html'); if the specified header does not already exist, set() will create it and set its value to the specified value. if the specified header does already exist and does accept multiple values, set() will overwrite the existing value with the new one: myheaders.set('accept-encoding', 'deflate'); myheaders.set('accept-encoding', 'gzip'); myheaders.get('accept-encoding'); // returns 'gzip' you'd need headers.append to append the new value onto the values, not overwrite it. specifications specification status comment fetchthe definition of 'set()' in tha...

KeyboardEvent - Web APIs
the numeric keypad (unless it's the numlock key), and for keys that are duplicated on the left and right sides of the keyboard, the key is, for whatever reason, not to be associated with that location. examples include alphanumeric keys on the standard pc 101 us keyboard, the numlock key, and the space bar. dom_key_location_left 0x01 the key is one which may exist in multiple locations on the keyboard and, in this instance, is on the left side of the keyboard. examples include the left control key, the left command key on a macintosh keyboard, or the left shift key. dom_key_location_right 0x02 the key is one which may exist in multiple positions on the keyboard and, in this case, is located on the right side of the keyboard. examples ...
...the keyboardevent() constructor. obsolete properties keyboardevent.char read only returns a domstring representing the character value of the key. if the key corresponds to a printable character, this value is a non-empty unicode string containing that character. if the key doesn't have a printable representation, this is an empty string. note: if the key is used as a macro that inserts multiple characters, this attribute's value is the entire string, not just the first character. keyboardevent.charcode read only returns a number representing the unicode reference number of the key; this attribute is used only by the keypress event. for keys whose char attribute contains multiple characters, this is the unicode value of the first character in that attribute. in firefox 26 this retu...

NetworkInformation - Web APIs
kinformation interfaces cannot be instantiated. it is instead accessed through the connection property of the navigator interface. note: this feature is available in web workers. properties this interface also inherits properties of its parent, eventtarget. networkinformation.downlink read only returns the effective bandwidth estimate in megabits per second, rounded to the nearest multiple of 25 kilobits per seconds. networkinformation.downlinkmax read only returns the maximum downlink speed, in megabits per second (mbps), for the underlying connection technology. networkinformation.effectivetype read only returns the effective type of the connection meaning one of 'slow-2g', '2g', '3g', or '4g'. this value is determined using a combination of recently observed round-trip tim...
...g connection technology. networkinformation.effectivetype read only returns the effective type of the connection meaning one of 'slow-2g', '2g', '3g', or '4g'. this value is determined using a combination of recently observed round-trip time and downlink values. networkinformation.rtt read only returns the estimated effective round-trip time of the current connection, rounded to the nearest multiple of 25 milliseconds. networkinformation.savedata read only returns true if the user has set a reduced data usage option on the user agent. networkinformation.type read only returns the type of connection a device is using to communicate with the network. it will be one of the following values: bluetooth cellular ethernet none wifi wimax other unknown event handlers ...

Using the Notifications API - Web APIs
thod on it. replacing existing notifications it is usually undesirable for a user to receive a lot of notifications in a short space of time — for example, what if a messenger application notified a user for each incoming message, and they were being sent a lot? to avoid spamming the user with too many notifications, it's possible to modify the pending notifications queue, replacing single or multiple pending notifications with a new one. to do this, it's possible to add a tag to any new notification. if a notification already has the same tag and has not been displayed yet, the new notification replaces that previous notification. if the notification with the same tag has already been displayed, the previous notification is closed and the new one is displayed. tag example assume the follow...
...dd a tag to any new notification. if a notification already has the same tag and has not been displayed yet, the new notification replaces that previous notification. if the notification with the same tag has already been displayed, the previous notification is closed and the new one is displayed. ...

OVR_multiview2 - Web APIs
this especially useful for virtual reality (vr) and webxr. for more information, see also: multiview on webxr three.js multiview demo multiview in babylon.js optimizing virtual reality: understanding multiview multiview webgl rendering for oculus browser 6.0+ webgl extensions are available using the webglrenderingcontext.getextension() method. for more information, see also using extensions in the webgl tutorial. availability: support depends on the system's graphics driver (windows+angle and android are supported; windows+gl, mac, linux are not supported). ...
...uffer_incomplete_view_targets_ovr if baseviewindex is not the same for all framebuffer attachment points where the value of framebuffer_attachment_object_type is not none, the framebuffer is considered incomplete. calling checkframebufferstatus for a framebuffer in this state returns framebuffer_incomplete_view_targets_ovr. methods framebuffertexturemultiviewovr() simultaneously renders to multiple elements of a 2d texture array. examples this example is taken from the specification. see also this three.js demo for a live multiview example. const gl = document.createelement('canvas').getcontext( 'webgl2', { antialias: false } ); const ext = gl.getextension('ovr_multiview2'); const fb = gl.createframebuffer(); gl.bindframebuffer(gl.draw_framebuffer, fb); const colortex = gl.createtextur...

ParentNode.replaceChildren() - Web APIs
nodes between parents replacechildren() enables you to easily transfer nodes between parents, without having to resort to verbose looping code. for example, say we have a simple application allowing you to choose what food you want for your party. ...
...>carrot sticks and houmous</option> <option>margherita pizza</option> <option>pepperoni pizza</option> <option>vegan veggie pizza</option> </select> </div> <div class="buttons"> <button id="to-yes">transfer to "yes" --&gt;</button> <button id="to-no">&lt;-- transfer to "no"</button> </div> <div> <label for="yes">yes please!</label> <select id="yes" multiple size="10"> </select> </div> </main> it would make sense to use some simple css to lay out the two select lists in a line alongside one another, with the control buttons in between them: main { display: flex; } div { margin-right: 20px; } label, button { display: block; } .buttons { display: flex; flex-flow: column; justify-content: center; } select { width: 200px; } wh...

Multi-touch interaction - Web APIs
nting input devices such as pen/stylus and touch screens as well as mouse. the pointer is a hardware-agnostic device that can target a specific set of screen coordinates. having a single event model for pointers can simplify creating web sites, applications and provide a good user experience regardless of the user's hardware. pointer events have many similarities to mouse events but they support multiple simultaneous pointers such as multiple fingers on a touch screen. this additional feature can be used to provide richer user interaction models but at the cost of additional complexity in the multi-touch interaction handling. this document demonstrates via example code, using pointer events with different multi-touch interactions. a live version of this application is available on github. the so...
...(ev) { // the pointerdown event signals the start of a touch interaction. // save this event for later processing (this could be part of a // multi-touch interaction) and update the background color push_event(ev); if (logevents) log("pointerdown: name = " + ev.target.id, ev); update_background(ev); } pointer move the pointermove handler is called when the pointer moves. it may be called multiple times (for example, if the user moves the pointer) before a different event type is fired. in this application, a pointer move is represented by the target's border being set to dashed to provide a clear visual indication that the element has received this event. function pointermove_handler(ev) { // note: if the user makes more than one "simultaneous" touch, most browsers // fire at least on...

RTCConfiguration.certificates - Web APIs
use a certificate to secure the connection. see using certificates below for more information on why you might want to—or not to—explicitly provide certificates. description if this property isn't included in the configuration, a set of certificates is automatically generated for each instance of rtcpeerconnection. although a given dtls connection only uses a single certificate, providing multiple options in the certificates list may improve the odds of establishing a connection by increasing the chances a mutually-compatible encryption algorithm and key size may be found. the method by which a browser decides which certificate to use is implementation-dependent. some browsers may simply choose the first listed certificate and ignore the rest of the list; others may take a different appro...
...by an rtcpeerconnection instead of having the rtcpeerconnection generate them automatically, you do so by calling the static rtcpeerconnection.generatecertificate() function. the certificates property's value cannot be changed once it's first specified. if it's included in the configuration passed into a call to a connection's setconfiguration(), it is ignored. this attribute supports providing multiple certificates because even though a given dtls connection uses only one certificate, providing multiple certificates allows support for multiple encryption algorithms. the implementation of rtcpeerconnection will choose which certificate to use based on the algorithms it and the remote peer support, as determined during dtls handshake. if you don't provide certificates, new ones are generated aut...

RTCIceCandidate.foundation - Web APIs
note: if port is null — and port is supported by the user agent — passing the candidate to addicecandidate() will fail, throwing an operationerror exception. ...
... note: if port is null — and port is supported by the user agent — passing the candidate to addicecandidate() will fail, throwing an operationerror exception. ...

RTCIceCandidateStats.address - Web APIs
the address property of the rtcicecandidatestats dictionary indicates the address of the ice candidate. while it's preferred that the address be specified as an ipv4 or ipv6 numeric address, a fully-qualified domain name can be used as well. when a domain name is specified, the first ip address selected for that address is used, even if the domain name maps to multiple ip addresses. syntax candidateaddress = rtcicecandidatestats.address; value either an ipv4 or ipv6 address or a fully-qualified domain name, which corresponds to the candidate. if the value of address is comprised entirely of digits from 0-9 with periods as separators, the value is interpreted as an ipv4 address. if the value is entirely comprised of hexadecimal digits and colon (":") characters, it is interpreted as an ip...
...e value is interpreted as an ipv4 address. if the value is entirely comprised of hexadecimal digits and colon (":") characters, it is interpreted as an ipv6 address. otherwise, the address is presumed to be a fully-qualified domain name, which is resolved first using an aaaa record (assuming ipv6 is available), then using an a record (if no result is found or the device onlu supports ipv4). if multiple ip addresses are returned in response to the query, the user agent selects one, which is then used for the duration of ice processing. usage notes the address property was previously known as ip, and only permitted ipv4 and ipv6 addresses to be used. the addition of support for fully-qualified domain names to be used for the address brought about the renaming of the property. specifications ...

RTCInboundRtpStreamStats - Web APIs
streams. qpsum a 64-bit value containing the sum of the qp values for every frame decoded by this rtp receiver. you can determine the average qp per frame by dividing this value by framesdecoded. valid only for video streams. receiverid a string indicating which identifies the rtcaudioreceiverstats or rtcvideoreceiverstats object associated with the stream's receiver. this id is stable across multiple calls to getstats(). remoteid a string which identifies the rtcremoteoutboundrtpstreamstats object that provides statistics for the remote peer for this same ssrc. this id is stable across multiple calls to getstats(). slicount an integer indicating the number of times the receiver sent a slice loss indication (sli) frame to the sender to tell it that one or more consecutive (in terms of scan...
...(sli) frame to the sender to tell it that one or more consecutive (in terms of scan order) video macroblocks have been lost or corrupted. available only for video streams. trackid a string which identifies the statistics object representing the receiving track; this object is one of two types: rtcreceiveraudiotrackattachmentstats or rtcreceivervideotrackattachmentstats. this id is stable across multiple calls to getstats(). examples specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcinboundrtpstreamstats' in that specification. candidate recommendation initial specification. ...

RTCPeerConnection() - Web APIs
if this value isn't included in the dictionary, "balanced" is assumed. certificates optional an array of objects of type rtccertificate which are used by the connection for authentication. if this property isn't specified, a set of certificates is generated automatically for each rtcpeerconnection instance. although only one certificate is used by a given connection, providing certificates for multiple algorithms may improve the odds of successfully connecting in some circumstances. see using certificates below for additional information. this configuration option cannot be changed after it is first specified; once the certificates have been set, this property is ignored in future calls to rtcpeerconnection.setconfiguration(). icecandidatepoolsize optional an unsigned 16-bit integer value ...
...pecified, "all" is assumed. peeridentity optional a domstring which specifies the target peer identity for the rtcpeerconnection. if this value is set (it defaults to null), the rtcpeerconnection will not connect to a remote peer unless it can successfully authenticate with the given name. rtcpmuxpolicy optional the rtcp mux policy to use when gathering ice candidates, in order to support non-multiplexed rtcp. the value must be one of those from the rtcrtcpmuxpolicy enum. the default is "require". return value a newly-created rtcpeerconnection object, configured as described by configuration, if specified; otherwise, configured to appropriate basic defaults. specifications specification status comment webrtc 1.0: real-time communication between browsersthe definiti...

SVGTransformList - Web APIs
s new svgtransform object as the first and only item in the list. the returned item is the item itself and not a copy. any changes made to the item are immediately reflected in the list. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. ...
...esponds to a read only attribute or when the object itself is read only. example using multiple svgtransform objects in this example we create a function that will apply three different transformations to the svg element that has been clicked on. in order to do this we create a separate svgtransform object for each transformation -- such as translate, rotate, and scale. we apply multiple transformation by appending the transform object to the svgtransformlist associated with an svg element. <svg id="my-svg" viewbox="0 0 300 280" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>example showing how to transform svg elements that using svgtransform objects</desc> <script type="application/ecmascript"> <![cdata[ function transformme(evt) { // svg root eleme...

Selection.rangeCount - Web APIs
property returns the number of ranges in the selection. before the user has clicked a freshly loaded page, the rangecount is 0. after the user clicks on the page, rangecount is 1, even if no selection is visible. a user can normally only select one range at a time, so the rangecount will usually be 1. scripting can be used to make the selection contain more than one range. gecko browsers allow multiple selections across table cells. firefox allows to select multiple ranges in the document by using ctrl+click (unless the click within an element with display: table-cell). syntax value = sel.rangecount example the following example will show the rangecount every second. select text in the browser to see it change. html <table> <tr><td>a.1<td>a.2 <tr><td>b.1<td>b.2 <tr><td>c.1<td>c.2 ...
...e the following example will show the rangecount every second. select text in the browser to see it change. html <table> <tr><td>a.1<td>a.2 <tr><td>b.1<td>b.2 <tr><td>c.1<td>c.2 javascript window.setinterval(function () { console.log(window.getselection().rangecount); }, 1000); result open your console to see how many ranges are in the selection. in gecko browsers, you can select multiple ranges across table cells by holding down ctrl while dragging with the mouse. specifications specification status comment selection apithe definition of 'selection.rangecount' in that specification. working draft current ...

Using server-sent events - Web APIs
eventlist.appendchild(newelement); }); this code is similar, except that it will be called automatically whenever the server sends a message with the event field set to "ping"; it then parses the json in the data field and outputs that information. when not used over http/2, sse suffers from a limitation to the maximum number of open connections, which can be especially painful when opening multiple tabs, as the limit is per browser and is set to a very low number (6). the issue has been marked as "won't fix" in chrome and firefox. this limit is per browser + domain, which means that you can open 6 sse connections across all of the tabs to www.example1.com and another 6 sse connections to www.example2.com (per stackoverflow). when using http/2, the maximum number of simultaneous http streams...
... event a string identifying the type of event described. if this is specified, an event will be dispatched on the browser to the listener for the specified event name; the website source code should use addeventlistener() to listen for named events. the onmessage handler is called if no event name is specified for a message. data the data field for the message. when the eventsource receives multiple consecutive lines that begin with data:, it concatenates them, inserting a newline character between each one. trailing newlines are removed. id the event id to set the eventsource object's last event id value. retry the reconnection time to use when attempting to send the event. this must be an integer, specifying the reconnection time in milliseconds. if a non-integer value is specified, th...

Using Service Workers - Web APIs
lly, but we wanted to make sure the images were loaded before we tried to display them? this is a standard thing to want to do, but it can 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 unders...
...ldn’t resolve at the same time as the iterations are being done (that is a synchronous process.) we actually resolve the promise with an array, as we want to make the loaded image blob available to the resolving function later on in the code, but also the image name, credits and alt text (see app.js lines 31-34). promises will only resolve with a single argument, so if you want to resolve with multiple values, you need to use an array/object. to access the resolved promise values, we then access this function as you’d then expect (see app.js lines 60-64). this may seem a bit odd at first, but this is the way promises work. enter service workers note : we're using the es6 arrow functions syntax in the service worker implementation now let’s get on to service workers! registering your w...

Service Worker API - Web APIs
cessfully resolved. for a complete tutorial to show how to build up your first basic example, read using service workers. other use case ideas service workers are also intended to be used for such things as: background data synchronization. responding to resource requests from other origins. receiving centralized updates to expensive-to-calculate data such as geolocation or gyroscope, so multiple pages can make use of one set of data. client-side compiling and dependency management of coffeescript, less, cjs/amd modules, etc. for development purposes. hooks for background services. custom templating based on certain url patterns. performance enhancements, for example pre-fetching resources that the user is likely to need in the near future, such as the next few pictures in a photo alb...
...h provides access to registration, removal, upgrade, and communication with the serviceworker objects for the associated document. notificationevent the parameter passed into the onnotificationclick handler, the notificationevent interface represents a notification click event that is dispatched on the serviceworkerglobalscope of a serviceworker. serviceworker represents a service worker. multiple browsing contexts (e.g. pages, workers, etc.) can be associated with the same serviceworker object. serviceworkercontainer provides an object representing the service worker as an overall unit in the network ecosystem, including facilities to register, unregister, and update service workers, and access the state of service workers and their registrations. serviceworkerglobalscope represents...

TransformStream - Web APIs
examples include building a pwa with progressive loading and progressive streaming. let responses = [ /* conjoined response tree */ ] let {readable, writable} = new transformstream responses.reduce( (a, res, i, arr) => a.then(() => res.pipeto(writable, {preventclose: (i+1) !== arr.length})), promise.res...
... constructor(encoding = 'utf-8', {...options} = {}) { let t = {...tds, encoding, options} super(t) _jstes_wm.set(this, t) } get encoding() {return _jstds_wm.get(this).decoder.encoding} get fatal() {return _jstds_wm.get(this).decoder.fatal} get ignorebom() {return _jstds_wm.get(this).decoder.ignorebom} } chaining multiple readablestreams together this is a useful one, where multiple streams can be conjoined. examples include building a pwa with progressive loading and progressive streaming. let responses = [ /* conjoined response tree */ ] let {readable, writable} = new transformstream responses.reduce( (a, res, i, arr) => a.then(() => res.pipeto(writable, {preventclose: (i+1) !== arr.length})), promise.resolve() ) note that this is not resilient to other influences.

ValidityState.typeMismatch - Web APIs
put>, after having been edited by the user, does not conform to the constraints set by the element's type attribute. if the type attribute expects specific strings, such as the email and url types and the value don't doesn't conform to the constraints set by the type, the typemismatch property will be true. the email input type expects one or more valid email addresses, depending on whether the multiple attribute is present. a valid email address includes an email prefix and a domain, with or without a top level domain. if the value of the email input is not an empty string, a single valid e-mail address, or one or more comma separated email address if the multiple attribute is present, there is a typemismatch. the url input type expects one or more valid email urls, depending on whether the mu...
...s present, there is a typemismatch. the url input type expects one or more valid email urls, depending on whether the multiple attribute is present. a valid url includes a protocol, optionally with an ip address, or an optional subdomain, domain, and top level domain combination. if the value of the url input is not an empty string, a single valid url, or one or more comma separated urls if the multiple attribute is present, there is a typemismatch. type attribute conformance input type value expected value email x@y or x@y.z email address, with or without tld url x: or x://y.z protocol or full url with protocol examples given the following: <p> <label> enter an email address: <input type="email" value="example.com"/> </label...

WEBGL_draw_buffers - Web APIs
ax_draw_buffers_webgl a glint indicating the maximum number of draw buffers. methods this extension exposes one new method. ext.drawbufferswebgl() defines the draw buffers to which all fragment colors are written. (when using webgl2, this method is available as gl.drawbuffers() by default). ...
...ent3_webgl, gl.texture_2d, tx[3], 0); mapping the color attachments to draw buffer slots that the fragment shader will write to using gl_fragdata: ext.drawbufferswebgl([ ext.color_attachment0_webgl, // gl_fragdata[0] ext.color_attachment1_webgl, // gl_fragdata[1] ext.color_attachment2_webgl, // gl_fragdata[2] ext.color_attachment3_webgl // gl_fragdata[3] ]); shader code that writes to multiple textures: <script type="x-shader/x-fragment"> #extension gl_ext_draw_buffers : require precision highp float; void main(void) { gl_fragdata[0] = vec4(0.25); gl_fragdata[1] = vec4(0.5); gl_fragdata[2] = vec4(0.75); gl_fragdata[3] = vec4(1.0); } </script> specifications specification status comment webgl_draw_buffersthe definition of 'webgl_draw_buffers' in that...

WebGL2RenderingContext.drawElementsInstanced() - Web APIs
note: when using webgl 1, the angle_instanced_arrays extension can provide this method, too. syntax void gl.drawelementsinstanced(mode, count, type, offset, instancecount); parameters mode a glenum specifying the type primitive to render. possible values are: gl.points: draws a single dot. gl.line_strip: draws a straight line to the next vertex. ...
...hree vertices. count a glsizei specifying the number of elements to be rendered. type a glenum specifying the type of the values in the element array buffer. possible values are: gl.unsigned_byte gl.unsigned_short when using the oes_element_index_uint extension: gl.unsigned_int offset a glintptr specifying an offset in the element array buffer. must be a valid multiple of the size of the given type. instancecount a glsizei specifying the number of instances of the set of elements to execute. return value none. exceptions if mode is not one of the accepted values, a gl.invalid_enum error is thrown. if offset is a valid multiple of the size of the given type, a gl.invalid_operation error is thrown. if count or instancecount are negative, a gl.invalid_v...

WebGL: 2D and 3D graphics for the web - Web APIs
webgl constants webgl types webgl 2 webgl 2 is a major update to webgl which is provided through the webgl2renderingcontext interface. it is based on opengl es 3.0 and new features include: 3d textures, sampler objects, uniform buffer objects, sync objects, query objects, transform feedback objects, promoted extensions that are now core to webgl 2: vertex array objects, instancing, multiple render targets, fragment depth. see also the blog post "webgl 2 lands in firefox" and webglsamples.org/webgl2samples for a few demos. guides and tutorials below, you'll find an assortment of guides to help you learn webgl concepts and tutorials that offer step-by-step lessons and examples. guides data in webgl a guide to variables, buffers, and other types of data used when writing webgl...
...guide to using webgl extensions. tutorials webgl tutorial a beginner's guide to webgl core concepts. a good place to start if you don't have previous webgl experience. examples a basic 2d webgl animation example this example demonstrates the simple animation of a one-color shape. topics examined are adapting to aspect ratio differences, a function to build shader programs from sets of multiple shaders, and the basics of drawing in webgl. webgl by example a series of live samples with short explanations that showcase webgl concepts and capabilities. the examples are sorted according to topic and level of difficulty, covering the webgl rendering context, shader programming, textures, geometry, user interaction, and more. advanced tutorials webgl model view projection a detailed e...

WebRTC API - Web APIs
ng the webrtc implementations across the environments supporting it. adapter.js also handles prefixes and other naming differences to make the entire webrtc development process easier, with more broadly compatible results. the library is also available as an npm package. to learn more about adapter.js, see improving compatibility using webrtc adapter.js. webrtc concepts and usage webrtc serves multiple purposes; together with the media capture and streams api, they provide powerful multimedia capabilities to the web, including support for audio and video conferencing, file exchange, screen sharing, identity management, and interfacing with legacy telephone systems including support for sending dtmf (touch-tone dialing) signals. connections between peers can be made without requiring any special...
...cations defining the api needed to use webrtc, there are several protocols, listed under resources. see also mediadevices mediastreamevent mediastreamconstraints mediastreamtrack messageevent mediastream media capture and streams api firefox multistream and renegotiation for jitsi videobridge peering through the webrtc fog with socketpeer inside the party bus: building a web app with multiple live video streams + interactive graphics web media technologies ...

Writing WebSocket servers - Web APIs
ridge from http to websockets. in the handshake, details of the connection are negotiated, and either party can back out before completion if the terms are unfavorable. the server must be careful to understand everything the client asks for, otherwise security issues can occur. tip: the request-uri (/chat here) has no defined meaning in the spec. so, many people use it to let one server handle multiple websocket applications. for example, example.com/chat could invoke a multiuser chat app, while /game on the same server might invoke a multiplayer game. client handshake request even though you're building a server, a client still has to start the websocket handshake process by contacting the server and requesting a websocket connection. so, you must know how to interpret the client's request.
...or ask for authentication or redirects via other status codes, before sending the reply handshake. keeping track of clients this doesn't directly relate to the websocket protocol, but it's worth mentioning here: your server must keep track of clients' sockets so you don't keep handshaking again with clients who have already completed the handshake. the same client ip address can try to connect multiple times. however, the server can deny them if they attempt too many connections in order to save itself from denial-of-service attacks. for example, you might keep a table of usernames or id numbers along with the corresponding websocket and other data that you need to associate with that connection. exchanging data frames either the client or the server can choose to send a message at any time ...

Web Video Text Tracks Format (WebVTT) - Web APIs
<video>. webvtt is a text based format, which must be encoded using utf-8. where you can use spaces you can also use tabs. there is also a small api available to represent and manage these tracks and the data needed to perform the playback of the text at the correct times. webvtt files the mime type of webvtt is text/vtt. a webvtt file (.vtt) contains cues, which can be either a single line or multiple lines, as shown below: webvtt 00:01.000 --> 00:04.000 - never drink liquid nitrogen. 00:05.000 --> 00:09.000 - it will perforate your stomach. - you could die. webvtt body the structure of a webvtt consists of the following components, some of them optional, in this order: an optional byte order mark (bom). the string "webvtt". an optional text header to the right of webvtt. ther...
...nealign; attribute (double or autokeyword) position; attribute positionalignsetting positionalign; attribute double size; attribute alignsetting align; attribute domstring text; documentfragment getcueashtml(); }; vtt region interface this is the second interface in webvtt api. the new keyword can be used for defining a new vttregion object which can then be used for containing the multiple cues. there are several properties of vttregion which are width, lines, regionanchorx, regionanchory, viewportanchorx, viewportanchory and scroll that can be used to specify the look and feel of this vtt region. the interface code is given below which can be used to expose the webvtt regions in dom api: enum scrollsetting { "" /* none */, "up" }; [constructor] interface vttregion { attribute d...

Inputs and input sources - Web APIs
e events on the device, a new xrinputsource object might be created to represent the simulated input source for the duration of handling the action. this is necessary because of the separation that's maintained between standard input devices and xr input sources. an artificial source is used to represent the external source for the duration of each transient action. managing input sources when multiple input sources are available, you need to be able to obtain information about each one, including its position and orientation, its targeting ray (if applicable to your needs), and details that can help you decide how to present the input source visually, if at all. you also need to be able to determine which input source to use for what activities; for example, if the user has two controllers, wh...
...f specificity from most-specific to least. in order to do anything meaningful involving scanning of profiles beyond basic identification of features, you may need to import the json profile database from the webxr input profiles registry. see input profiles for more specific details on working with input profiles. choosing the primary controller in order to avoid having problems introduced by multiple controllers trying to inadvertently manipulate the ui at the same time, your app may need to have a "primary" controller. not only would this controller then take the responsibility of clicking through the user interface of your app, but it would also be considered the "main hand," while other controllers would then be off-hand or additional controllers. note: this doesn't mean your app needs t...

Movement, orientation, and motion: A WebXR example - Web APIs
ely, the penultimate article in the series, covering lighting in webgl. while reading this article and the accompanying source code, it's helpful to keep in mind that the display for a 3d headset is a single screen, divided in half. the left half of the screen is seen only by the left eye, while the right half is only seen by the right eye. rendering the scene for immersive presentation requires multiple renders of the scene—once from the perspective of each eye. when rendering the left eye, the xrwebgllayer has its viewport configured to restrict drawing to the left half of the drawing surface. contrarily, when rendering the right eye, the viewport is set to restrict drawing to the right half of the surface. this example demonstrates this by showing the canvas on the screen, even when presen...
...n easily customized way to output logging information for errors that occur while executing webgl functions. function logglerror(where) { let err = gl.geterror(); if (err) { console.error(`webgl error returned by ${where}: ${err}`); } } this takes as its only input a string, where, which is used to indicate what part of the program generated the error, since similar errors can have in multiple situations. the vertex and fragment shaders the vertex and fragment shaders are both exactly the same as those used in the example for our article lighting in webgl. refer to that if you're interested in the glsl source code for the basic shaders used here. suffice it to say that the vertex shader computes the position of each vertex given the initial positions of each vertex and the transfor...

WebXR performance guide - Web APIs
as such, you may find yourself needing to make adjustments or compromises to optimize the performance of your webxr application to be as usable as possible on the broadest assortment of target devices. in this guide, we'll examine a variety of suggestions and recommendations that will help you make your webxr app as performant as possible. rendering tips ... talk about general stuff like limiting how many different loops there are during rendering, avoiding unnecessary drawing, etc. ...
...sed. a simple change can optimize this significantly: const vertexlist = ... const normalmatrix = mat4.create(); const modelviewmatrix = mat4.create(); function drawscene(gl, view, programinfo, buffers, texture, deltatime) { ... for (object in scene) { ... } } now, instead of allocating variables every loop iteration, we're using global constants(or class member constants). this has multiple benefits: the memory allocated for each value or structure will not need to be reallocated every frame. this reduces the potential for triggering garbage collection, and optimizes memory use. you can't accidentally delete the objects that contain your vectors and matrices, since they're constants. you can, however, still replace the contents of each of these objects, so they're reusable. y...

Targeting and hit detection - Web APIs
fied, invisible objects atop the objects in your scene. these objects then serve a s. for instance, if you have a more-or-less rectangular object, use a rectangle as a surrogate for the object when performing hit testing. likewise, if an object is essentially round, use the radius of the minimum enclosing circle to establish a colision test object. ...
...some devices include infrared sensors to help range objects, and others provide powerful lidar systems, which use lasers (usually infrared lasers, which can't be seen by the human eye) to determine range to objects in the world. the details of how to work with an individual platform's ranging system is beyond the scope of this article. ...

Web Workers API - Web APIs
— this file contains the code that will run in the worker thread; workers run in another global context that is different from the current window. this context is represented by either a dedicatedworkerglobalscope object (in the case of dedicated workers - workers that are utilized by a single script), or a sharedworkerglobalscope (in the case of shared workers - workers that are shared between multiple scripts). you can run whatever code you like inside the worker thread, with some exceptions. for example, you can't directly manipulate the dom from inside a worker, or use some default methods and properties of the window object. but you can use a large number of items available under window, including websockets, and data storage mechanisms like indexeddb. see functions and classes available ...
...kers may in turn spawn new workers, as long as those workers are hosted within the same origin as the parent page. in addition, workers may use xmlhttprequest for network i/o, with the exception that the responsexml and channel attributes on xmlhttprequest always return null. in addition to dedicated workers, there are other types of worker: shared workers are workers that can be utilized by multiple scripts running in different windows, iframes, etc., as long as they are in the same domain as the worker. they are a little more complex than dedicated workers — scripts must communicate via an active port. see sharedworker for more details. serviceworkers essentially act as proxy servers that sit between web applications, the browser, and the network (when available). they are intended, amon...

XDomainRequest - Web APIs
the origin's security protocol must match that of the requested url. (http to http, https to https). if these do not match, the...
... the origin's security protocol must match that of the requested url. (http to http, https to https). if these do not match, the request will error "access is denied". ...

Using XMLHttpRequest - Web APIs
"sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">female</label><br /> password: <input type="password" name="secret" /><br /> what do you prefer: <select name="image_type"> <option>books</option> <option>cinema</option> <option>tv</option> </select> </p> <p> post your photos: <input type="file" multiple name="photos[]"> </p> <p> <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="bike" /> <label for="vehicle_bike">i have a bike</label><br /> <input id="vehicle_car" type="checkbox" name="vehicle[]" value="car" /> <label for="vehicle_car">i have a car</label> </p> <p> describe yourself:<br /> <textarea name="description" cols="50" ro...
..."sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">female</label><br /> password: <input type="password" name="secret" /><br /> what do you prefer: <select name="image_type"> <option>books</option> <option>cinema</option> <option>tv</option> </select> </p> <p> post your photos: <input type="file" multiple name="photos[]"> </p> <p> <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="bike" /> <label for="vehicle_bike">i have a bike</label><br /> <input id="vehicle_car" type="checkbox" name="vehicle[]" value="car" /> <label for="vehicle_car">i have a car</label> </p> <p> describe yourself:<br /> <textarea name="description" cols="50" ro...

Using the aria-labelledby attribute - Accessibility
this idea is similar to how the "for" attribute is used to link a label to an input. assistive technology, such as screen readers, use this attribute to catalog the objects in a document so that users can navigate between them. ...
...tml form element; it is not limited to elements that have an aria role assigned. value a space-separated list of element ids possible effects on user agents and assistive technology when user agents compute the accessible name property of elements that have both an aria-labelledby attribute and an aria-label attribute, the user agents give precedence to aria-labelledby. ...

ARIA Test Cases - Accessibility
or: (mz) screen reader should announce the label and role of the listbox when it gains focus. if an item is focused within the list, this should be announced next, followed by an indication of this item's position within the list if the screen reader supports this in other lists as well. as focus moves within the list, the screen reader should announce the relevant list items. ...
... jaws - jaws announces landmarks as they are encountered in the virtual page...

Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
't implement, watching system generated versions of this event causes assistive technology crashes] event_object_show [can be important, depending on project] event_object_hide [can be important, depending on project] event_object_reorder [important for mutating docs] event_object_focus [important] event_object_selection [important] event_object_selectionadd [important for multiple selection] event_object_selectionremove [important for multiple selection] event_object_selectionwithin [important for multiple selection] event_object_statechange [important for checkboxes and radio buttons] event_object_locationchange event_object_namechange event_object_descriptionchange event_object_valuechange [important for sliders and progress meters] event_...
...er support for native tree views. solution: look carefully at how microsoft implements msaa for its tree views. the tree view object itself handles all of the requests for get_accname for child objects. the child id is part of the variant structure's information. this means you don't really need to create a separate object for each tree view row, which saves a lot of work. also, rather than have multiple nested level of objects, treat all of the rows as direct children of the main tree view object. simply put the level, i.e. "1", "2", 3", etc. in the value field. msaa implementation is not performant problem: the assistive technology may interact slowly with your application. solution: try not to calculate the same things more than once or create the same objects more than once. for example, c...

Accessibility documentation index - Accessibility
sible on the screen. if there is visible text labeling the element, use aria-labelledby instead. 22 using the aria-labelledby attribute aria, accessibility, broken link the aria-labelledby attribute establishes relationships between objects and their label(s), and its value should be one or more element ids, which refer to elements that have the text needed for labeling. list multiple element ids in a space delimited fashion.this idea is similar to how the "for" attribute is used to link a label to an input.assistive technology, such as screen readers, use this attribute to catalog the objects in a document so that users can navigate between them. without an element id, the assistive technology cannot catalog the object. 23 using the aria-orientation attribute a...
...aria: heading role aria, aria role, aria heading, reference the heading role defines this element as a heading to a page or section. to give the page more structure, a level should also be provided to indicate relationships between sections. 67 aria: img role aria, aria img, aria role, accessibility, reference, rôle, figure the aria img role can be used to identify multiple elements inside page content that should be considered as a single image. these elements could be images, code snippets, text, emojis, or other content that can be combined to deliver information in a visual manner. 68 aria: listbox role aria, accessibility, needscontent the listbox role is used for lists from which a user may select one or more items which are static and, un...

Web Accessibility: Understanding Colors and Luminance - Accessibility
ypersensitive cones, the authors note that "by population, about 64% of the cones are red-sensitive, about 32% green sensitive, and about 2% are blue sensitive." surprisingly, although cones that are blue-sensitive typically make up the fewest number of cones, they are also the most "sensitive" to color. put another way, as humans, the color blue is perceived differently than other colors, for multiple reasons. first, because the blue cones are actually the most sensitive of the three, second, we have fewer blue cones than red or green, and third, it so happens that these "blue sensitive" cones tend to be located at the rims of our eyeballs, away from the center (fovea centralis) of the back of the eyeball, where the red and green cones tend to cluster. there is software that actually takes ad...
...ensitive epilepsy analysis tool, noted seizure rates were much higher than expected. they found that we are much more sensitive to saturated red flashing. (see the video, the photosensitive epilepsy analysis tool) measuring color & luminance methods that measures color exploring the rgb color space further, as it is the color space used by the data type <color>, note that there are actually multiple "versions" of the rgb color space, such as srgb, scrgb, and rgba. there are also different ways to refrence rgb: rgb decimal reference: 153, 0, 0 and an rgb percent reference: 60, 0, 0. window.getcomputedstyle() returns values using rgb decimal reference scale. for example, calling window.getcomputedstyle() on a div with a background-color: #990000; set returns the computed background color ...

-webkit-mask-repeat-x - CSS: Cascading Style Sheets
the -webkit-mask-repeat-x property specifies whether and how a mask image is repeated (tiled) horizontally. /* keyword values */ -webkit-mask-repeat-x: repeat; -webkit-mask-repeat-x: no-repeat; -webkit-mask-repeat-x: space; -webkit-mask-repeat-x: round; /* multiple values */ -webkit-mask-repeat-x: repeat, no-repeat, space; /* global values */ -webkit-mask-repeat-x: inherit; -webkit-mask-repeat-x: initial; -webkit-mask-repeat-x: unset; syntax values repeat the mask image is repeated both horizontally and vertically. no-repeat the mask image is not repeated; only one copy of the mask image is drawn. the remainder of the masked element's content is not displayed. repeat the mask image is repeated both horizontally and vertically. space the image is repeated as much as possi...
... specifications not part of any standard. ...

-webkit-mask-repeat-y - CSS: Cascading Style Sheets
the -webkit-mask-repeat-y property sets whether and how a mask image is repeated (tiled) vertically. /* keyword values */ -webkit-mask-repeat-y: repeat; -webkit-mask-repeat-y: no-repeat; -webkit-mask-repeat-y: space; -webkit-mask-repeat-y: round; /* multiple values */ -webkit-mask-repeat-y: repeat, no-repeat, space; /* global values */ -webkit-mask-repeat-y: inherit; -webkit-mask-repeat-y: initial; -webkit-mask-repeat-y: unset; syntax values repeat the mask image is repeated vertically. no-repeat the mask image is not repeated vertically; only one copy of the mask image is drawn in vertical direction. the vertical remainder of the masked element's content is not displayed. repeat the mask image is repeated vertically. space the image is repeated as much as possible witho...
... specifications not part of any standard. ...

@supports - CSS: Cascading Style Sheets
tors, like and and or, the parentheses are required. the and operator the and operator creates a new expression from the conjunction of two shorter expressions. it returns true only if both of the shorter expressions are also true. the following example returns true if and only if the two shorter expressions are simultaneously true: @supports (display: table-cell) and (display: list-item) {} multiple conjunctions can be juxtaposed without the need of more parentheses. the following are both equivalent: @supports (display: table-cell) and (display: list-item) and (display:run-in) {} @supports (display: table-cell) and ((display: list-item) and (display:run-in)) {} the or operator the or operator creates a new expression from the disjunction of two shorter expressions. it returns true if one...
...nd ((display: list-item) and (display:run-in)) {} the or operator the or operator creates a new expression from the disjunction of two shorter expressions. it returns true if one or both of the shorter expressions is also true. the following example returns true if at least one of the two shorter expressions is true: @supports (transform-style: preserve) or (-moz-transform-style: preserve) {} multiple disjunctions can be juxtaposed without the need of more parentheses. the following are both equivalent: @supports (transform-style: preserve) or (-moz-transform-style: preserve) or (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {} @supports (transform-style: preserve-3d) or ((-moz-transform-style: preserve-3d) or ((-o-transform-style: preserve-3d) or (...

CSS Box Alignment - CSS: Cascading Style Sheets
y for each layout method and detailed on the page for that method. types of alignment there are three different types of alignment that the specification details; these use keyword values. positional alignment: specifying the position of an alignment subject with relation to its alignment container. baseline alignment: these keywords define alignment as a relationship among the baselines of multiple alignment subjects within an alignment context. distributed alignment: these keywords define alignment as a distribution of space among alignment subjects. positional alignment keyword values the following values are defined for positional alignment, and can be used as values for content alignment with justify-content and align-content and also for self alignment with justify-self and align-s...
...ibution keywords or adding margins to items. ...

Basic Concepts of Multicol - CSS: Cascading Style Sheets
this guide explains how the specification works with some common use case examples. key concepts and terminology multicol is unlike any of the other layout methods we have in css in that it fragments the content, including all descendent elements, into columns. this happens in the same way that content is fragmented into pages when we work with css paged media, for example by creating a print stylesheet. ...
...ss would give the same result as example 1, column-count set to 3. .container { columns: 3; } this css would give the same result as example 2, with column-width of 200px. .container { columns: 200px; } this css would give the same result as example 3, with both column-count and column-width set. .container { columns: 2 200px; } next steps in this guide we've learned the basic use of multiple-column layout. in the next guide, we will look at how much we can style the columns themselves. ...

Using multi-column layouts - CSS: Cascading Style Sheets
people have trouble reading text if lines are too long; if it takes too long for the eyes to move from the end of the one line to the beginning of the next, they lose track of which line they were on. therefore, to make maximum use of a large screen, authors should have limited-width columns of text placed side by side, just as newspapers do. unfortunately this is impossible to do with css and html without forcing column breaks at fixed positions, or severely restricting the markup allowed in the text, or using heroic scripting. ...
... sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </div> css #column_gap { column-count: 5; column-gap: 2em; } result graceful degradation the column properties will just be ignored by non-columns-supporting browsers. therefore it's relatively easy to create a layout that will display in a single column in those browsers and use multiple columns in supporting browsers. conclusion css3 columns are a layout primitive that will help web developers make the best use of screen real estate. imaginative developers may find many uses for them, especially with the automatic height balancing feature. ...

Mastering Wrapping of Flex Items - CSS: Cascading Style Sheets
keeps the flex line’s cross-size stable. thus, if a flex container has only one flex line, dynamically collapsing or uncollapsing items may change the flex container’s main size, but is guaranteed to have no effect on its cross size and won’t cause the rest of the page’s layout to "wobble". flex line wrapping is re-done after collapsing, however, so the cross-size of a flex container with multiple lines might or might not change.” - collapsed items this behaviour is useful if you want to target flex items using javascript to show and hide content for example. the example in the specification demonstrates one such pattern. in the following live example i have a non-wrapped flex container. the third item has more content than the others yet is set to visibility: collapse and therefore t...
... retaining a strut of the height required to display this item. if you remove visibility: collapse from the css or change the value to visible, you will see the item disappear and the space redistribute between non-collapsed items; the height of the flex container should not change. note: use firefox for the below two examples as chrome and safari treat collapse as hidden. when dealing with multiple-line flex containers however you need to understand that the wrapping is re-done after collapsing. so the browser needs to re-do the wrapping behaviour to account for the new space that the collapsed item has left in the inline direction. this means that items might end up on a different line to the one they started on. in the case of an item being shown and hidden it could well cause the items ...

CSS Fragmentation - CSS: Cascading Style Sheets
it also occurs when a block spans more than one column inside a column layout container, or spans a page break when printed. each piece of the rendering for the element is called a fragment. ...
...it also occurs when a block spans more than one column inside a column layout container, or spans a page break when printed. each piece of the rendering for the element is called a fragment. ...

Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
<div class="item2">item 2</div> <div class="item3">item 3</div> <div class="item4">item 4</div> </div> as with align-self and align-items, you can apply justify-items to the grid container, to set the justify-self value for all items. the justify-self and justify-items properties are not implemented in flexbox. this is due to the one-dimensional nature of flexbox, and that there may be multiple items along the axis, making it impossible to justify a single item. to align items along the main, inline axis in flexbox you use the justify-content property. shorthand properties the place-items property is shorthand for align-items and justify-items. the place-self property is shorthand for align-self and justify-self. center an item in the area by combining the align and justify prope...
... side of the grid. setting auto margins, using margin-right or margin-left however, or absolutely positioning items using the top, right, bottom and left offsets would not honor writing modes. in the next guide, we will look further into this interaction between css grid layout, box alignment and writing modes. this will be important to understand, if you develop sites that are then displayed in multiple languages, or if you want to mix languages or writing modes in a design. ...

CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
e grid in production it is worth noting that you do not have to use grid in an all or nothing way. you could start by simply enhancing elements in your design with grid, that could otherwise display using an older method. overwriting of legacy methods with grid layout works surprisingly well, due to the way grid interacts with these other methods. floats we have typically used floats to create multiple column layouts. if you have floated an item, which is also a grid item in a supporting browser, the float will no longer apply to the item. the fact is that a grid item takes precedence. in the example below, i have a simple media object. in a non-supporting browser, i use float, however i have also defined the container as a grid container, in order to use the alignment properties that are imple...
...ar have no effect on a grid item. therefore you do not need to explicitly set items to float: none. vertical alignment the alignment property vertical-align has no effect on a grid item. in layouts using display: inline-block or display: table, you might use the vertical-align property to perform basic alignment. in your grid layout you then have the far more powerful box alignment properties. multiple-column layout you can also use multiple column layout as your legacy browser plan, as the column-* properties do not apply when applied to a grid container. further reading for an excellent explanation of feature queries, and how to use them well, see using feature queries in css. a write-up of the differences between the ie/edge (≤15) grid implementation and the modern implementation, al...

Using CSS transitions - CSS: Cascading Style Sheets
n-property specifies the name or names of the css properties to which transitions should be applied. only properties listed here are animated during transitions; changes to all other properties occur instantaneously as usual. transition-duration specifies the duration over which transitions should occur. you can specify a single duration that applies to all properties during the transition, or multiple values to allow each property to transition over a different period of time. transition-duration: 0.5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width ...
...hover over the box to see these properties animated.</p> <div class="box">sample</div> </body> css content .box { border-style: solid; border-width: 1px; display: block; width: 100px; height: 100px; background-color: #0000ff; ...

Introducing the CSS Cascade - CSS: Cascading Style Sheets
l of the cascade, a specific origin (the user-agent stylesheet, the author stylesheet, or the user stylesheet), or even to clear the values of the properties entirely. css animations and the cascade css animations, using @keyframes at-rules, define animations between states. ...
...animations, using @keyframes at-rules, define animations between states. keyframes don't cascade, meaning that at any given time css takes values from only one single @keyframes, and never mixes multiple ones together. when several keyframes are appropriate, it chooses the latest defined in the most important document, but never combined all together. ...

Column layouts - CSS: Cascading Style Sheets
this. whether you use grid, flexbox or multi-column layout will depend on what you are trying to achieve, and in this recipe we explore these options. requirements there are a number of design patterns you might want to achieve with your columns: a continuous thread of content broken up into newspaper-style columns. a single row of items arranged as columns, with all heights being equal. multiple rows of columns lined up by row and column. the recipes you need to choose different layout methods in order to achieve your requirements. a continuous thread of content — multi-column layout if you create columns using multi-column layout your text will remain as a continuous stream filling each column in turn. the columns must all be the same size, and you are unable to target an individ...
...ut where items line up in rows and columns then you should choose css grid layout. grid layout works on the direct children of the grid container in a similar way to the manner in which flexbox works on the direct children of the flex container, however with css grid you can line your items up in rows and columns — it is described as two-dimensional. download this example use grid: for multiple rows or columns of items. when you want to be able to align the items on the block and inline axes. when you want items to line up in rows and columns. ...

CSS Tutorials - CSS: Cascading Style Sheets
we should look at using "difficulty level" tags on the tutorial/guide pages so that difficulty-based lists can be automatically built. beginner-level css tutorials getting started this guide is aimed at complete beginners: you haven't written one single line of css? — this is for you. it explains the fundamental concepts of the language and guides you in writing basic stylesheets. using 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 devic...
...nts allowed in css: linear or radial, repeating or not. this tutorial describes how to use them. advanced-level css tutorials css also got new features allowing you to create complex layouts. though the simplest way to achieve such layout, they are more complex to use for people without too much experience. css multi-column layouts css3 introduces a new layout allowing you to easily define multiple columns in an element. though multi-column text is not that common on devices like screens, this is particularly useful on printed pages, or for indexes. css flexible boxes layouts this new layout allow you to give boxes flexibility, allowing them to be resized smoothly. it is a powerful way to describe complex interfaces. ...

Using CSS custom properties (variables) - CSS: Cascading Style Sheets
-color: black;) and are accessed using the var() function (e.g., color: var(--main-color);). complex websites have very large amounts of css, often with a lot of repeated values. for example, the same color might be used in hundreds of different places, requiring global search and replace if that color needs to change. custom properties allow a value to be stored in one place, then referenced in multiple other places. an additional benefit is semantic identifiers. for example, --main-text-color is easier to understand than #00ff00, especially if this same color is also used in other contexts. custom properties are subject to the cascade and inherit their value from their parent. basic usage declaring a custom property is done using a custom property name that begins with a double hyphen (--), ...
...ht find in other programming languages. the value is computed where it is needed, not stored for use in other rules. for instance, you cannot set a property for an element and expect to retrieve it in a sibling's descendant's rule. the property is only set for the matching selector and its descendants, like any normal css. custom property fallback values using the var() function, you can define multiple fallback values when the given variable is not yet defined; this can be useful when working with custom elements and shadow dom. fallback values aren't used to fix the browser compatibility. if the browser doesn't support css custom properties, the fallback value won't help. it's just a backup for the browser which supports css custom properties to choose a different value if the given variable...

animation-delay - CSS: Cascading Style Sheets
xample is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. it is often convenient to use the shorthand property animation to set all animation properties at once. syntax /* single animation */ animation-delay: 3s; animation-delay: 0s; animation-delay: -1500ms; /* multiple animations */ animation-delay: 2.1s, 480ms; values <time> the time offset, from the moment at which the animation is applied to the element, at which the animation should begin. this may be specified in either seconds (s) or milliseconds (ms). the unit is required. a positive value indicates that the animation should begin after the specified amount of time has elapsed. a value of 0s, whic...
...mmediately, but partway through its cycle. for example, if you specify -1s as the animation delay time, the animation will begin immediately but will start 1 second into the animation sequence. if you specify a negative value for the animation delay, but the starting value is implicit, the starting value is taken from the moment the animation is applied to the element. note: when you specify multiple comma-separated values on an animation-* property, they will be assigned to the animations specified in the animation-name property in different ways depending on how many there are. for more information, see setting multiple animation property values. formal definition initial value0sapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typ...

animation-direction - CSS: Cascading Style Sheets
ibute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. it is often convenient to use the shorthand property animation to set all animation properties at once. syntax /* single animation */ animation-direction: normal; animation-direction: reverse; animation-direction: alternate; animation-direction: alternate-reverse; /* multiple animations */ animation-direction: normal, reverse; animation-direction: alternate, reverse, normal; /* global values */ animation-direction: inherit; animation-direction: initial; animation-direction: unset; values normal the animation plays forwards each cycle. in other words, each time the animation cycles, the animation will reset to the beginning state and start over again. this is th...
...function becomes ease-out. alternate the animation reverses direction each cycle, with the first iteration being played forwards. the count to determine if a cycle is even or odd starts at one. alternate-reverse the animation reverses direction each cycle, with the first iteration being played backwards. the count to determine if a cycle is even or odd starts at one. note: when you specify multiple comma-separated values on an animation-* property, they will be assigned to the animations specified in the animation-name property in different ways depending on how many there are. for more information, see setting multiple animation property values. formal definition initial valuenormalapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation...

animation-duration - CSS: Cascading Style Sheets
his interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. it is often convenient to use the shorthand property animation to set all animation properties at once. syntax /* single animation */ animation-duration: 6s; animation-duration: 120ms; /* multiple animations */ animation-duration: 1.64s, 15.22s; animation-duration: 10s, 35s, 230ms; values <time> the time that an animation takes to complete one cycle. this may be specified in either seconds (s) or milliseconds (ms). the value must be positive or zero and the unit is required. a value of 0s, which is the default value, indicates that no animation should occur. note: negative values ...
...e cycle. this may be specified in either seconds (s) or milliseconds (ms). the value must be positive or zero and the unit is required. a value of 0s, which is the default value, indicates that no animation should occur. note: negative values are invalid, causing the declaration to be ignored. some early, prefixed, implementations may consider them as identical to 0s. note: when you specify multiple comma-separated values on an animation-* property, they will be assigned to the animations specified in the animation-name property in different ways depending on how many there are. for more information, see setting multiple animation property values. formal definition initial value0sapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typ...

animation-fill-mode - CSS: Cascading Style Sheets
like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. it is often convenient to use the shorthand property animation to set all animation properties at once. syntax /* single animation */ animation-fill-mode: none; animation-fill-mode: forwards; animation-fill-mode: backwards; animation-fill-mode: both; /* multiple animations */ animation-fill-mode: none, backwards; animation-fill-mode: both, forwards, none; values none the animation will not apply any styles to the target when it's not executing. the element will instead be displayed using any other css rules applied to it. this is the default value. forwards the target will retain the computed values set by the last keyframe encountered during exe...
...nt keyframe depends on the value of animation-direction: animation-direction first relevant keyframe normal or alternate 0% or from reverse or alternate-reverse 100% or to both the animation will follow the rules for both forwards and backwards, thus extending the animation properties in both directions. note: when you specify multiple comma-separated values on an animation-* property, they will be assigned to the animations specified in the animation-name property in different ways depending on how many there are. for more information, see setting multiple animation property values. formal definition initial valuenoneapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation t...

animation-name - CSS: Cascading Style Sheets
f you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. it is often convenient to use the shorthand property animation to set all animation properties at once. syntax /* single animation */ animation-name: none; animation-name: test_05; animation-name: -specific; animation-name: sliding-vertically; /* multiple animations */ animation-name: test1, animation4; animation-name: none, -moz-specific, sliding; /* global values */ animation-name: initial animation-name: inherit animation-name: unset values none a special keyword denoting no keyframes. it can be used to deactivate an animation without changing the ordering of the other identifiers, or to deactivate animations coming from the cascade. <cu...
...scade. <custom-ident> a name identifying the animation. this identifier is composed of a combination of case-sensitive letters a to z, numbers 0 to 9, underscores (_), and/or dashes (-). the first non-dash character must be a letter. also, two dashes are forbidden at the beginning of the identifier. furthermore, the identifier can't be none, unset, initial, or inherit. note: when you specify multiple comma-separated values on an animation-* property, they will be assigned to the animations specified in the animation-name property in different ways depending on how many there are. for more information, see setting multiple animation property values. formal definition initial valuenoneapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation t...

animation-play-state - CSS: Cascading Style Sheets
bute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. resuming a paused animation will start the animation from where it left off at the time it was paused, rather than starting over from the beginning of the animation sequence. ...
... /* single animation */ animation-play-state: running; animation-play-state: paused; /* multiple animations */ animation-play-state: paused, running, running; /* global values */ animation-play-state: inherit; animation-play-state: initial; animation-play-state: unset; values running the animation is currently playing. paused the animation is currently paused. note: when you specify multiple comma-separated values on an animation-* property, they will be assigned to the animations specified in the animation-name property in different ways depending on how many there are. for more information, see setting multiple animation property values. formal definition initial valuerunningapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimatio...

animation-timing-function - CSS: Cascading Style Sheets
if no animation-timing-function is specified on a keyframe, the corresponding value of animation-...
... is no jump on either end. instead, holding at both the 0% mark and the 100% mark, each for 1/n of the duration. jump-both includes pauses at both the 0% and 100% marks, effectively adding a step during the animation iteration. start same as jump-start. end same as jump-end. step-start equal to steps(1, jump-start) step-end equal to steps(1, jump-end) note: when you specify multiple comma-separated values on an animation-* property, they will be assigned to the animations specified in the animation-name property in different ways depending on how many there are. for more information, see setting multiple animation property values. formal definition initial valueeaseapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation t...

background-attachment - CSS: Cascading Style Sheets
example html <p> there were doors all round the hall, but they were all locked; and when alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to get out again. </p> css p { background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"); background-attachment: fixed; } result multiple background images this property supports multiple background images. you can specify a different <attachment> for each background, separated by commas. each image is matched with the corresponding attachment type, from first specified to last. html <p> there were doors all round the hall, but they were all locked; and when alice had been all the way down one side and up the other, trying e...
...os.org/files/12059/startransparent.gif"); background-attachment: fixed, scroll; background-repeat: no-repeat, repeat-y; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'background-attachment' in that specification. candidate recommendation the shorthand property has been extended to support multiple backgrounds and the local value. css level 2 (revision 1)the definition of 'background-attachment' in that specification. recommendation no significant change. css level 1the definition of 'background-attachment' in that specification. recommendation no significant change. ...

background-position-x - CSS: Cascading Style Sheets
element after it. syntax /* keyword values */ background-position-x: left; background-position-x: center; background-position-x: right; /* <percentage> values */ background-position-x: 25%; /* <length> values */ background-position-x: 0px; background-position-x: 1cm; background-position-x: 8em; /* side-relative values */ background-position-x: right 3px; background-position-x: left 25%; /* multiple values */ background-position-x: 0px, center; /* global values */ background-position-x: inherit; background-position-x: initial; background-position-x: unset; the background-position-x property is specified as one or more values, separated by commas. values left aligns the left edge of the background image with the left edge of the background position layer. center aligns the center of...
... nosamsung internet android no support nolegend full support full support no support no support see also background-position background-position-y background-position-inline background-position-block using multiple backgrounds ...

background-position-y - CSS: Cascading Style Sheets
ement after it. syntax /* keyword values */ background-position-y: top; background-position-y: center; background-position-y: bottom; /* <percentage> values */ background-position-y: 25%; /* <length> values */ background-position-y: 0px; background-position-y: 1cm; background-position-y: 8em; /* side-relative values */ background-position-y: bottom 3px; background-position-y: bottom 10%; /* multiple values */ background-position-y: 0px, center; /* global values */ background-position-y: inherit; background-position-y: initial; background-position-y: unset; the background-position-y property is specified as one or more values, separated by commas. values top aligns the top edge of the background image with the top edge of the background position layer. center aligns the vertical cen...
... nosamsung internet android no support nolegend full support full support no support no support see also background-position background-position-x background-position-inline background-position-block using multiple backgrounds ...

box-decoration-break - 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. ...
...s specification for details. clone each box fragment is rendered independently with the specified border, padding, and margin wrapping each fragment. the border-radius, border-image, and box-shadow are applied to each fragment independently. the background is also drawn independently for each fragment, which means that a background image with background-repeat: no-repeat may nevertheless repeat multiple times. formal definition initial valuesliceapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax slice | clone examples inline box fragments an inline element that contains line breaks styled with: .example { background: linear-gradient(to bottom right, yellow, green); box-shadow: 8px 8px 10px 0px deeppink, -5px -5px 5px 0px blue, ...

box-shadow - CSS: Cascading Style Sheets
the box-shadow css property adds shadow effects around an element's frame. you can set multiple effects separated by commas. a box shadow is described by x and y offsets relative to the element, blur and spread radius, and color. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the box-shadow property enables you to cast a drop shadow from the frame of almost any element. if a border-radius is specified on the element with a box shadow, the box shadow takes on the same rounded corners. the z-ordering of multiple box shadows is the same as multiple text shadows (the first specified shadow is on top). box-shadow generator...
...hadow: unset; specify a single box-shadow using: two, three, or four <length> values. if only two values are given, they are interpreted as <offset-x><offset-y> values. if a third value is given, it is interpreted as a <blur-radius>. if a fourth value is given, it is interpreted as a <spread-radius>. optionally, the inset keyword. optionally, a <color> value. to specify multiple shadows, provide a comma-separated list of shadows. values inset if not specified (default), the shadow is assumed to be a drop shadow (as if the box were raised above the content). the presence of the inset keyword changes the shadow to one inside the frame (as if the content was depressed inside the box). inset shadows are drawn inside the border (even transparent ones), above the backgro...

<color> - CSS: Cascading Style Sheets
hsl colors the hsl color model defines a given color according to its hue, saturation, and lightness components. an optional alpha component represents the color's transparency. many designers find hsl more intuitive than rgb, since it allows hue, saturation, and lightness to each be adjusted independently. hsl can also make it easier to create a set of matching colors (such as when you want multiple shades of a single hue). syntax hsl colors are expressed through the functional hsl() and hsla() notations. note: as of css colors level 4, hsla() is an alias for hsl(). in browsers that implement the level 4 standard, they accept the same parameters and behave the same way. functional notation: hsl[a](h, s, l[, a]) h (hue) is an <angle> of the color circle given in degs, rads, grads, or...
...d links visitedtext text of visited links deprecated system color keywords the following keywords were defined in earlier versions of the css color module. they are now deprecated. for use on public web pages. activeborder active window border. activecaption active window caption. should be used with captiontext as foreground color. appworkspace background color of multiple document interface. background desktop background. buttonhighlight the color of the border facing the light source for 3-d elements that appear 3-d due to that layer of surrounding border. buttonshadow the color of the border away from the light source for 3-d elements that appear 3-d due to that layer of surrounding border. captiontext text in caption, size box, and scrol...

column-count - CSS: Cascading Style Sheets
12 full support 12prefixed prefixed implemented with the vendor prefix: -webkit-firefox full support 52 full support 52 no support 1.5 — 74prefixed notes prefixed implemented with the vendor prefix: -moz-notes prior to version 37, multiple columns didn't work with display: table-caption elements.ie full support 10opera full support 11.1 full support 11.1 full support 15prefixed prefixed implemented with the vendor prefix: -webkit-safari fu...
... full support 18prefixed prefixed implemented with the vendor prefix: -webkit-firefox android full support 52 full support 52 full support 4prefixed notes prefixed implemented with the vendor prefix: -moz-notes prior to version 37, multiple columns didn't work with display: table-caption elements.opera android full support 11.1 full support 11.1 full support 14prefixed prefixed implemented with the vendor prefix: -webkit-safari ios full support 9 ...

flex-wrap - CSS: Cascading Style Sheets
if wrapping is allowed, it sets the direction that lines are stacked. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. see using css flexible boxes for more properties and information. ...
... the flex-wrap property is specified as a single keyword chosen from the list of values below. values the following values are accepted: nowrap the flex items are laid out in a single line which may cause the flex container to overflow. the cross-start is either equivalent to start or before depending on the flex-direction value. this is the default value. wrap the flex items break into multiple lines. the cross-start is either equivalent to start or before depending flex-direction value and the cross-end is the opposite of the specified cross-start. wrap-reverse behaves the same as wrap but cross-start and cross-end are permuted. formal definition initial valuenowrapapplies toflex containersinheritednocomputed valueas specifiedanimation typediscrete formal syntax nowrap | wrap | ...

mask-origin - CSS: Cascading Style Sheets
the mask-origin css property sets the origin of a mask. ...
...it-mask-origin: content; -webkit-mask-origin: padding; -webkit-mask-origin: border; /* global values */ mask-origin: inherit; mask-origin: initial; mask-origin: unset; for elements rendered as a single box, this property specifies the mask positioning area. in other words, this property specifies the origin position of an image specified by the mask-image css property. for elements rendered as multiple boxes, such as inline boxes on several lines or boxes on several pages, it specifies which boxes box-decoration-break operates upon to determine the mask positioning area. syntax one or more of the keyword values listed below, separated by commas. values content-box the position is relative to the content box. padding-box the position is relative to the padding box. for single boxes 0 0 ...

mask-repeat - CSS: Cascading Style Sheets
d along the horizontal axis, the vertical axis, both axes, or not repeated at all. /* one-value syntax */ mask-repeat: repeat-x; mask-repeat: repeat-y; mask-repeat: repeat; mask-repeat: space; mask-repeat: round; mask-repeat: no-repeat; /* two-value syntax: horizontal | vertical */ mask-repeat: repeat space; mask-repeat: repeat repeat; mask-repeat: round space; mask-repeat: no-repeat round; /* multiple values */ mask-repeat: space round, no-repeat; mask-repeat: round repeat, space, repeat-x; /* global values */ mask-repeat: inherit; mask-repeat: initial; mask-repeat: unset; by default, the repeated images are clipped to the size of the element, but they can be scaled to fit (using round) or evenly distributed from end to end (using space). syntax one or more <repeat-style> values, separat...
... specifications specification status comment css masking module level ...

repeating-linear-gradient() - CSS: Cascading Style Sheets
like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the length of the gradient that repeats is the distance between the first and last color stop. if the first color does not have a color-stop-length, the color-stop-length defaults to 0. with each repetition, the positions of the color stops are shifted by a multiple of the length of the basic linear gradient. thus, the position of each ending color stop coincides with a starting color stop; if the color values are different, this will result in a sharp visual transition. this can be altered with repeating the first color again as the last color. as with any gradient, a repeating linear gradient has no intrinsic dimensions; i.e., it has no natural or preferr...
...stop> and <linear-color-stop> = <color> [ <color-stop-length> ]? ...

text-decoration-style - CSS: Cascading Style Sheets
ps://github.com/mdn/interactive-examples and send us a pull request. if the specified decoration has a specific semantic meaning, like a line-through line meaning that some text has been deleted, authors are encouraged to denote this meaning using an html tag, like <del> or <s>. as browsers can disable styling in some cases, the semantic meaning won't disappear in such a situation. when setting multiple line-decoration properties at once, it may be more convenient to use the text-decoration shorthand property instead. syntax /* keyword values */ text-decoration-style: solid; text-decoration-style: double; text-decoration-style: dotted; text-decoration-style: dashed; text-decoration-style: wavy; /* global values */ text-decoration-style: inherit; text-decoration-style: initial; text-decoration...
... ...

transition-timing-function - 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. this, in essence, lets you establish an acceleration curve so that the speed of the transition can vary over its duration. this acceleration curve is defined using one <timing-function> for each property to be transitioned. you may specify multiple timing functions; each one will be applied to the corresponding property as specified by the transition-property property, which acts as a transition-property list. if there are fewer timing functions specified than in the transition-property list, the user agent must calculate which value is used by repeating the list of values until there is one for each transition property. if there are more t...
...ps(4, jump-end); transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); /* steps function keywords */ transition-timing-function: steps(4, jump-start); transition-timing-function: steps(10, jump-end); transition-timing-function: steps(20, jump-none); transition-timing-function: steps(5, jump-both); transition-timing-function: steps(6, start); transition-timing-function: steps(8, end); /* multiple timing functions */ transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1); /* global values */ transition-timing-function: inherit; transition-timing-function: initial; transition-timing-function: unset; values <timing-function> each <timing-function> represents the timing function to link to the corresponding property to transition, as defined in transition-propert...

Constraint validation - Developer guides
ption associated violation <input type="url"> the value must be an absolute url, as defined in the url living standard. typemismatch constraint violation <input type="email"> the value must be a syntactically valid email address, which generally has the format username@hostname.tld. typemismatch constraint violation for both of these input types, if the multiple attribute is set, several values can be set, as a comma-separated list, for this input. if any of these do not satisfy the condition described here, the type mismatch constraint violation is triggered. note that most input types don't have intrinsic constraints, as some are simply barred from constraint validation or have a sanitization algorithm transforming incorrect values to a correct defaul...
...etime-local, month, week, time, number, checkbox, radio, file; also on the <select> and <textarea> elements none as it is a boolean attribute: its presence means true, its absence means false there must be a value (if set). valuemissing constraint violation step date an integer number of days unless the step is set to the any literal, the value must be min + an integral multiple of the step. stepmismatch constraint violation month an integer number of months week an integer number of weeks datetime, datetime-local, time an integer number of seconds range, number an integer minlength text, search, url, tel, email, password; also on the <textarea> element an integer length the number of characters (code p...

HTML5 - Developer guides
nt side. indexeddb indexeddb is a web standard for the storage of significant amounts of structured data in the browser and for high performance searches on this data using indexes. using files from web applications support for the new html5 file api has been added to gecko, making it possible for web applications to access local files selected by the user. this includes support for selecting multiple files using the <input> of type file html element's new multiple attribute. there also is filereader. multimedia using html5 audio and video the <audio> and <video> elements embed and allow the manipulation of new multimedia content. webrtc this technology, where rtc stands for real-time communication, allows connecting to other people and controlling videoconferencing directly in the bro...
...css has been extended to be able to style elements in a much more complex way. this is often referred as css3, though css is not a monolithic specification any more and the different modules are not all at level 3: some are at level 1 and others at level 4, with all the intermediate levels covered. new background styling features it is now possible to put shadows on elements using box-shadow, multiple backgrounds, and css filters. you can learn more about these by reading advanced box effects. more fancy borders not only it is now possible to use images to style borders, using border-image and its associated longhand properties, but rounded borders are supported via the border-radius property. animating your style using css transitions to animate between different states or using css anima...

Localizations and character encodings - Developer guides
tent cross-locale from the old locales whose fallback encoding is windows-1252. new-authored locale-native utf-8 content is expected to declare its encoding, in which case the fallback encoding does not participate in the processing of content. additionally, there is a small number of locales where in the 1990s there wasn't an obvious single region-specific encoding and heuristic detection among multiple legacy encodings was introduced to web browsers. this has then had the effect that web authors have depended on heuristic detection being present, so firefox still has heuristic detection in these locales. finding canonical encoding names the text below refers to canonical names of encodings. the canonical names are the values to the right of the equals sign in unixcharset.properties. specifyi...
...e easily selectable from the character encoding menu the preference intl.charsetmenu.browser.static in intl.properties makes some character encodings more easily available in the character encoding menu in the browser. the value should be a comma-separated list of canonical encoding names. the list should include at least the fallback encoding, windows-1252 and utf-8. for locales where there are multiple common legacy encodings, all those encodings should be included. for example, the fallback encoding for japanese is shift_jis, but there are other legacy encodings: iso-2022-jp and euc-jp. therefore, it makes sense for the list to be shift_jis, euc-jp, iso-2022-jp, windows-1252, utf-8. ...

HTML attribute: rel - HTML: Hypertext Markup Language
being a hyperlink between the two. in this case, on <link> and <form>, if the rel attribute is absent, has no keywords, or if not one or more of the space-separated keywords above, then the element does not create any links. <a> and <area> will still created links, but without a defined relationship. like all html keyword attribute values, these values are case-insenstive. values if there are multiple <link rel="icon">s, the browser uses their media attribute, type, and sizes attributes to select the most appropriate icon. if several icons are equally appropriate, the last one is used. if the most appropriate icon is later found to be inappropriate, for example because it uses an unsupported format, the browser proceeds to the next-most appropriate, and so on. note: apple's ios does not use t...
... help is for the whole document. when included with <a> and <area> and supported, the default cursor will be help instead of pointer. icon valid with <link>, the linked resource represents the icon, a resource for representing the page in the user interface, for the current document. the most common use for the icon value is the favicon: <link rel="icon" href="favicon.ico"> if there are multiple <link rel="icon">s, the browser uses their media attribute, type, and sizes attributes to select the most appropriate icon. if several icons are equally appropriate, the last one is used. if the most appropriate icon is later found to be inappropriate, for example because it uses an unsupported format, the browser proceeds to the next-most appropriate, and so on. note: apple's ios does not use ...

<audio>: The Embed Audio element - HTML: Hypertext Markup Language
ectedly not forthcoming. suspend media data loading has been suspended. timeupdate the time indicated by the currenttime attribute has been updated. volumechange the volume has changed. waiting playback has stopped because of a temporary lack of data usage notes browsers don't all support the same file types and audio codecs; you can provide multiple sources inside nested <source> elements, and the browser will then use the first one it understands: <audio controls> <source src="myaudio.mp3" type="audio/mpeg"> <source src="myaudio.ogg" type="audio/ogg"> <p>your browser doesn't support html5 audio. here is a <a href="myaudio.mp4">link to the audio</a> instead.</p> </audio> we offer a substantive and thorough guide to media file ty...
...n a nested <source> element rather than directly on the <audio> element. it is always useful to include the file's mime type inside the type attribute, as the browser is able to instantly tell if it can play that file, and not waste time on it if not. <audio controls> <source src="foo.wav" type="audio/wav"> your browser does not support the <code>audio</code> element. </audio> <audio> with multiple <source> elements this example includes multiple <source> elements. the browser tries to load the first source element (opus) if it is able to play it; if not it falls back to the second (vorbis) and finally back to mp3: <audio controls> <source src="foo.opus" type="audio/ogg; codecs=opus"/> <source src="foo.ogg" type="audio/ogg; codecs=vorbis"/> <source src="foo.mp3" type="audio/mpeg"/> </a...

<details>: The Details disclosure element - HTML: Hypertext Markup Language
ontents of the <details> element — are currently visible. the default, false, means the details are not visible. events in addition to the usual events supported by html elements, the <details> element supports the toggle event, which is dispatched to the <details> element whenever its state changes between open and closed. it is sent after the state is changed, although if the state changes multiple times before the browser can dispatch the event, the events are coalesced so that only one is sent. you can use an event listener for the toggle event to detect when the widget changes state: details.addeventlistener("toggle", event => { if (details.open) { /* the element was toggled open */ } else { /* the element was toggled closed */ } }); examples a simple disclosure example...
...ong-term storage. an input device as well as some form of output device is recommended.</p> </details> result customizing the disclosure widget the disclosure triangle itself can be customized, although this is not as broadly supported. there are variations in how browsers support this customization due to experimental implementations as the element was standardized, so we'll have to use multiple approaches for a while. the <summary> element supports the list-style shorthand property and its longhand properties, such as list-style-type, to change the disclosure triangle to whatever you choose (usually with list-style-image). for example, we can remove the disclosure widget icon by setting list-style: none. chrome doesn't support this yet, however, so we also need to use its non-standard...

<input type="range"> - HTML: Hypertext Markup Language
is no pattern validation available; however, the following forms of automatic validation are performed: if the value is set to something which can't be converted into a valid floating-point number, validation fails because the input is suffering from a bad input. the value won't be less than min. the default is 0. the value won't be greater than max. the default is 100. the value will be a multiple of step. the default is 1. value the value attribute contains a domstring which contains a string representation of the selected number. the value is never an empty string (""). the default value is halfway between the specified minimum and maximum—unless the maximum is actually less than the minimum, in which case the default is set to the value of the min attribute. the algorithm for deter...
... elements, the orient attribute defines the orientation of the range slider. values include horizontal, meaing the range is rendered horizontally, and vertical, where the range is rendered vertically. note: the following input attributes do not apply to the input range: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, maxlength, minlength, multiple, pattern, placeholder, readonly, required, size, src, and width. any of these attributes, if included, will be ignored. examples while the number type lets users enter a number with optional constraints forcing their value to be between a minimum and a maximum value, it does require that they enter a specific value. the range input type lets you ask the user for a value in cases where the user...

<style>: The Style Information element - HTML: Hypertext Markup Language
interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the <style> element must be included inside the <head> of the document. in general, it is better to put your styles in external stylesheets and apply them using <link> elements. if you include multiple <style> and <link> elements in your document, they will be applied to the dom in the order they are included in the document — make sure you include them in the correct order, to avoid unexpected cascade issues. in the same manner as <link> elements, <style> elements can include media attributes that contain media queries, allowing you to selectively apply internal stylesheets to your document...
...ntroduced in the future per https://github.com/w3c/csswg-drafts/issues/3547. if you want to use the attribute now, you can use a polyfill. examples a simple stylesheet in the following example, we apply a very simple stylesheet to a document: <!doctype html> <html> <head> <style> p { color: red; } </style> </head> <body> <p>this is my paragraph.</p> </body> </html> multiple style elements in this example we've included two <style> elements — notice how the conflicting declarations in the later <style> element override those in the earlier one, if they have equal specificity. <!doctype html> <html> <head> <style> p { color: white; background-color: blue; padding: 5px; border: 1px solid black; } </style> <style> p { ...

HTML elements reference - HTML: Hypertext Markup Language
sing context, or a resource to be handled by a plugin. <param> the html <param> element defines parameters for an <object> element. <picture> the html <picture> element contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios. <source> the html <source> element specifies multiple media resources for the <picture>, the <audio> element, or the <video> element. scripting in order to create dynamic content and web applications, html supports the use of scripting languages, most prominently javascript. certain elements support this capability. element description <canvas> use the html <canvas> element with either the canvas scripting ap...
...ent (<multicol>) was an experimental element designed to allow multi-column layouts and must not be used. <nextid> <nextid> is an obsolete html element that served to enable the next web designing tool to generate automatic name labels for its anchors. <nobr> the non-standard, obsolete html <nobr> element prevents the text it contains from automatically wrapping across multiple lines, potentially resulting in the user having to scroll horizontally to see the entire width of the text. <noembed> the <noembed> element is an obsolete, non-standard way to provide alternative, or "fallback", content for browsers that do not support the <embed> element or do not support the type of embedded content an author wishes to use. <noframes> the obsolete ht...

Link types - HTML: Hypertext Markup Language
type of made is incorrect and should be replaced by the rel attribute with this link type. <a>, <area>, <link> <form> bookmark indicates that the hyperlink is a permalink for the nearest ancestor <article> element. if none, it is a permalink for the section that the element is most closely associated to. this allows for bookmarking a single article in a page containing multiple articles, such as on a monthly summary blog page, or a blog aggregator. <a>, <area> <link>, <form> canonical from wikipedia, the free encyclopedia: canonical_link_element a canonical link element is an html element that helps webmasters prevent duplicate content issues by specifying the "canonical" or "preferred" version of a web page as part of search engine optimization. ...
...d its descendants. if the element is <link> it indicates that the hyperlink leads to a resource giving further help about the page as a whole. <a>, <area>, <form>, <link> none. icon defines a resource for representing the page in the user interface, usually an icon (auditory or visual). in the browser, it is usually referred to as the favicon. if there are multiple <link rel="icon">s, the browser uses their media, type, and sizes attributes to select the most appropriate icon. if several icons are equally appropriate, the last one is used. if the most appropriate icon is later found to be inappropriate, for example because it uses an unsupported format, the browser proceeds to the next-most appropriate, and so on. note: apple's ios does not use thi...

Content-Language - HTTP
d for german language speakers (however, it doesn't indicate the document is written in german. for example, it might be written in english as part of a language course for german speakers. if you want to indicate which language the document is written in, use the lang attribute instead). if no content-language is specified, the default is that the content is intended for all language audiences. multiple language tags are also possible, as well as applying the content-language header to various media types and not only to textual documents. header type entity header forbidden header name no cors-safelisted response header yes cors-safelisted request header yes, with the additional restriction that values can only be 0-9, a-z, a-z, space or *,-.;=. ...
...tual documents. header type entity header forbidden header name no cors-safelisted response header yes cors-safelisted request header yes, with the additional restriction that values can only be 0-9, a-z, a-z, space or *,-.;=. syntax content-language: de-de content-language: en-us content-language: de-de, en-ca directives language-tag multiple language tags are separated by comma. each language tag is a sequence of one or more case-insensitive subtags, each separated by a hyphen character ("-", %x2d). in most cases, a language tag consists of a primary language subtag that identifies a broad family of related languages (e.g., "en" = english), which is optionally followed by a series of subtags that refine or narrow that language's rang...

Link - HTTP
am2="value2" <uri-reference> the uri reference, must be enclosed between < and >. parameters the link header contains parameters, which are separated with ; and are equivalent to attributes of the <link> element. ...
... the uri reference, must be enclosed between < and >. parameters the link header contains parameters, which are separated with ; and are equivalent to attributes of the <link> element. ...

Set-Cookie2 - HTTP
specifications specification title rfc 2965: set-cookie2 historic specification of http state management mechanism, obsoleted by rfc ...
... specifications specification title rfc 2965: set-cookie2 historic specification of http state management mechanism, obsoleted by rfc 6265 ...

TE - HTTP
ote that chunked is always acceptable for http/1.1 recipients and you don't have to specify "chunked" using the te header. however, it is useful for setting if the client is accepting trailer fields in a chunked transfer coding using the "trailers" value. header type request header forbidden header name yes syntax te: compress te: deflate te: gzip te: trailers // multiple directives, weighted with the quality value syntax: te: trailers, deflate;q=0.5 directives compress a format using the lempel-ziv-welch (lzw) algorithm is accepted as a transfer coding name. deflate using the zlib structure is accepted as a transfer coding name. gzip a format using the lempel-ziv coding (lz77), with a 32-bit crc is accepted as a transfer coding name. trailers indicate...
... compress a format using the lempel-ziv-welch (lzw) algorithm is accepted as a transfer coding name. deflate using the zlib structure is accepted as a transfer coding name. gzip a format using the lempel-ziv coding (lz77), with a 32-bit crc is accepted as a transfer coding name. trailers indicates that the client is willing to accept trailer fields in a chunked transfer coding. q when multiple transfer codings are acceptable, the q parameter of the quality value syntax can rank codings by preference. specifications specification title rfc 7230, section 4.3: te hypertext transfer protocol (http/1.1): message syntax and routing ...

HTTP response status codes - HTTP
this request, but the headers may be useful. the user-agent may update its cached headers for this resource with the new ones. 205 reset content tells the user-agent to reset the document which sent this request. 206 partial content this response code is used when the range header is sent from the client to request only part of a resource. 207 multi-status (webdav) conveys information about multiple resources, for situations where multiple status codes might be appropriate. 208 already reported (webdav) used inside a <dav:propstat> response element to avoid repeatedly enumerating the internal members of multiple bindings to the same collection. 226 im used (http delta encoding) the server has fulfilled a get request for the resource, and the response is a representation of the result of ...
...the user-agent or user should choose one of them. ...

A re-introduction to JavaScript (JS tutorial) - JavaScript
operand is dependent on the first. this is useful for checking for null objects before accessing their attributes: var name = o && o.getname(); or for caching values (when falsy values are invalid): var name = cachedname || (cachedname = getname()); javascript has a ternary operator for conditional expressions: var allowed = (age > 18) ? 'yes' : 'no'; the switch statement can be used for multiple branches based on a number or string: switch (action) { case 'draw': drawit(); break; case 'eat': eatit(); break; default: donothing(); } if you don't add a break statement, execution will "fall through" to the next level. this is very rarely what you want — in fact it's worth specifically labeling deliberate fallthrough with a comment if you really meant it to aid ...
...tion relies on one or two other functions that are not useful to any other part of your code, you can nest those utility functions inside it. this keeps the number of functions that are in the global scope down, which is always a good thing. this is also a great counter to the lure of global variables. when writing complex code it is often tempting to use global variables to share values between multiple functions — which leads to code that is hard to maintain. nested functions can share variables in their parent, so you can use that mechanism to couple functions together when it makes sense without polluting your global namespace — "local globals" if you like. this technique should be used with caution, but it's a useful ability to have. closures this leads us to one of the most powerful a...

Details of the object model - JavaScript
does not assign a value to the id and does not update the counter. therefore, for an employee to get an assigned id, you must specify a name for the employee. in this example, mac.id would be 1. alternatively, you can create a copy of employee's prototype object to assign to workerbee: workerbee.prototype = object.create(employee.prototype); // instead of workerbee.prototype = new employee no multiple inheritance some object-oriented languages allow multiple inheritance. that is, an object can inherit the properties and values from unrelated parent objects. javascript does not support multiple inheritance. inheritance of property values occurs at run time by javascript searching the prototype chain of an object to find a value. because an object has a single associated prototype, javascript ...
...nheritance. inheritance of property values occurs at run time by javascript searching the prototype chain of an object to find a value. because an object has a single associated prototype, javascript cannot dynamically inherit from more than one prototype chain. in javascript, you can have a constructor function call more than one other constructor function within it. this gives the illusion of multiple inheritance. for example, consider the following statements: function hobbyist(hobby) { this.hobby = hobby || 'scuba'; } function engineer(name, projs, mach, hobby) { this.base1 = workerbee; this.base1(name, 'engineering', projs); this.base2 = hobbyist; this.base2(hobby); this.machine = mach || ''; } engineer.prototype = new workerbee; var dennis = new engineer('doe, dennis',...

Functions - JavaScript
an in-scope variable that refers to the function for example, consider the following function definition: var foo = function bar() { // statements go here } within the function body, the following are all equivalent: bar() arguments.callee() foo() a function that calls itself is called a recursive function. in some ways, recursion is analogous to a loop. both execute the same code multiple times, and both require a condition (to avoid an infinite loop, or rather, infinite recursion in this case). for example, the following loop... var x = 0; while (x < 10) { // "x < 10" is the loop condition // do stuff x++; } ...can be converted into a recursive function declaration, followed by a call to that function: function loop(x) { if (x >= 10) // "x >= 10" is the exit conditio...
... the references directly and cannot inspect them. multiply-nested functions functions can be multiply-nested. for example: a function (a) contains a function (b), which itself contains a function (c). both functions b and c form closures here. so, b can access a, and c can access b. in addition, since c can access b which can access a, c can also access a. thus, the closures can contain multiple scopes; they recursively contain the scope of the functions containing it. this is called scope chaining. (the reason it is called "chaining" is explained later.) consider the following example: function a(x) { function b(y) { function c(z) { console.log(x + y + z); } c(3); } b(2); } a(1); // logs 6 (1 + 2 + 3) in this example, c accesses b's y and a's x. this can be ...

Grammar and types - JavaScript
gs. (this is similar to string interpolation features in perl, python, and more.) optionally, a tag can be added to allow the string construction to be customized, avoiding injection attacks, or constructing higher-level data structures from string contents. ...
..." by r.w. service. to include a literal backslash inside a string, you must escape the backslash character. for example, to assign the file path c:\temp to a string, use the following: var home = 'c:\\temp'; you can also escape line breaks by preceding them with backslash. the backslash and line break are both removed from the value of the string. var str = 'this string \ is broken \ across multiple \ lines.' console.log(str); // this string is broken across multiple lines. although javascript does not have "heredoc" syntax, you can get close by adding a line break escape and an escaped line break at the end of each line: var poem = 'roses are red,\n\ violets are blue.\n\ sugar is sweet,\n\ and so is foo.' ecmascript 2015 introduces a new type of literal, namely template literals. thi...

Introduction - JavaScript
at is javascript? javascript is a cross-platform, object-oriented scripting language used to make webpages interactive (e.g., having complex animations, clickable buttons, popup menus, etc.). there are also more advanced server side versions of javascript such as node.js, which allow you to add more functionality to a website than simply downloading files (such as realtime collaboration between multiple computers). inside a host environment (for example, a web browser), javascript can be connected to the objects of its environment to provide programmatic control over them. javascript contains a standard library of objects, such as array, date, and math, and a core set of language elements such as operators, control structures, and statements. core javascript can be extended for a variety of pur...
...for more complex javascript, you can use the multi-line line input mode. hello world to get started with writing javascript, open the web console in multi-line mode, and write your first "hello world" javascript code: (function(){ "use strict"; /* start of your code */ function greetme(yourname) { alert('hello ' + yourname); } greetme('w...

JavaScript modules - JavaScript
rver. also, note that you might get different behavior from sections of script defined inside modules as opposed to in standard scripts. this is because modules use strict mode automatically. there is no need to use the defer attribute (see <script> attributes) when loading a module script; modules are deferred automatically. modules are only executed once, even if they have been referenced in multiple <script> tags. last but not least, let's make this clear — module features are imported into the scope of a single script — they aren't available in the global scope. therefore, you will only be able to access imported features in the script they are imported into, and you won't be able to access them from the javascript console, for example. you'll still get syntax errors shown in the devto...
...port { square }; over in main.js, we import it like this: import { square } from './modules/square.js'; and then use the class to draw our square: let square1 = new square(mycanvas.ctx, mycanvas.listid, 50, 50, 100, 'blue'); square1.draw(); square1.reportarea(); square1.reportperimeter(); aggregating modules there will be times where you'll want to aggregate modules together. you might have multiple levels of dependencies, where you want to simplify things, combining several submodules into one parent module. this is possible using export syntax of the following forms in the parent module: export * from 'x.js' export { name } from 'x.js' for an example, see our module-aggregation directory. in this example (based on our earlier classes example) we've got an extra module called shapes.js, w...

Character classes - JavaScript
has one of the following meanings: matches any single character except line terminators: \n, \r, \u2028 or \u2029. for example, /.y/ matches "my" and "ay", but not "yes", in "yes make my day". inside a character set, the dot loses its special meaning and matches a literal dot. note that the m multiline flag doesn't change the dot behavior. so to match a pattern across multiple lines, the character set [^] can be used — it will match any character including newlines. es2018 added the s "dotall" flag, which allows the dot to also match line terminators. \d matches any digit (arabic numeral). equivalent to [0-9]. for example, /\d/ or /[0-9]/ matches "2" in "b2 is the suite number". \d matches any character that is not a dig...
...e latin alphabet) starting with a var aliceexcerpt = "i’m sure i’m not ada,’ she said, ‘for her hair goes in such long ringlets, and mine doesn’t go in ringlets at all."; var regexpwordstartingwitha = /\b[aa]\w+/g; // \b indicates a boundary (i.e. do not start matching in the middle of a word) // [aa] indicates the letter a or a // \w+ indicates any character *from the latin alphabet*, multiple times console.table(aliceexcerpt.match(regexpwordstartingwitha)); // ['ada', 'and', 'at', 'all'] looking for a word (from unicode characters) instead of the latin alphabet, we can use a range of unicode characters to identify a word (thus being able to deal with text in other languages like russian or arabic). the "basic multilingual plane" of unicode contains most of the characters used arou...

Regular expression syntax cheatsheet - JavaScript
has one of the following meanings: matches any single character except line terminators: \n, \r, \u2028 or \u2029. for example, /.y/ matches "my" and "ay", but not "yes", in "yes make my day". inside a character set, the dot loses its special meaning and matches a literal dot. note that the m multiline flag doesn't change the dot behavior. so to match a pattern across multiple lines, the character set [^] can be used — it will match any character including newlines. es2018 added the s "dotall" flag, which allows the dot to also match line terminators. \d matches any digit (arabic numeral). equivalent to [0-9]. for example, /\d/ or /[0-9]/ matches "2" in "b2 is the suite number". \d matches any character that is not a dig...
...included in the character set as a normal character. for example, [^abc] is the same as [^a-c]. they initially match "o" in "bacon" and "h" in "chop". the ^ character may also indicate the beginning of input. (x) capturing group: matches x and remembers the match. for example, /(foo)/ matches and remembers "foo" in "foo bar". a regular expression may have multiple capturing groups. in results, matches to capturing groups typically in an array whose members are in the same order as the left parentheses in the capturing group. this is usually just the order of the capturing groups themselves. this becomes important when capturing groups are nested. matches are accessed using the index of the the result's elements ([1], ..., [n]) or from the predefined regexp...

RegExp.prototype.exec() - JavaScript
the exec() method executes a search for a match in a specified string. returns a result array, or null. javascript regexp objects are stateful when they have the global or sticky flags set (e.g. /foo/g or /foo/y). they store a lastindex from the previous match. using this internally, exec() can be used to iterate over multiple matches in a string of text (with capture groups), as opposed to getting just the matching strings with string.prototype.match(). a newer function has been proposed to simplify matching multiple parts of a string (with capture groups): string.prototype.matchall(). if you are executing a match simply to find true or false, use regexp.prototype.test() method or string.prototype.search() instead. the source for this interactive example is stored in a github repository. i...
...fox jumps over the lazy dog" re lastindex the index at which to start the next match. if g is absent, this will always be 0. 25 ignorecase indicates if the i flag was used to ignore case. true global indicates if the g flag was used for a global match. true multiline indicates if the m flag was used to search across multiple lines. false source the text of the pattern. "quick\s(brown).+?(jumps)" examples finding successive matches if your regular expression uses the "g" flag, you can use the exec() method multiple times to find successive matches in the same string. when you do so, the search starts at the substring of str specified by the regular expression's lastindex property (test() wil...

RegExp - JavaScript
contains the flags of the regexp object. regexp.prototype.dotall whether . matches newlines or not. regexp.prototype.global whether to test the regular expression against all possible matches in a string, or only against the first. regexp.prototype.ignorecase whether to ignore case while attempting a match in a string. regexp.prototype.multiline whether or not to search in strings across multiple lines. regexp.prototype.source the text of the pattern. regexp.prototype.sticky whether or not the search is sticky. regexp.prototype.unicode whether or not unicode features are enabled. instance methods regexp.prototype.compile() (re-)compiles a regular expression during execution of a script. regexp.prototype.exec() executes a search for a match in its string parameter. regexp.pr...
...the platform (unix, windows, etc.). the line splitting provided in this example works on all platforms. let text = 'some text\nand some more\r\nand yet\rthis is the end' let lines = text.split(/\r\n|\r|\n/) console.log(lines) // logs [ 'some text', 'and some more', 'and yet', 'this is the end' ] note that the order of the patterns in the regular expression matters. using regular expression on multiple lines let s = 'please yes\nmake my day!' s.match(/yes.*day/); // returns null s.match(/yes[^]*day/); // returns ["yes\nmake my day"] using a regular expression with the sticky flag the sticky flag indicates that the regular expression performs sticky matching in the target string by attempting to match starting at regexp.prototype.lastindex. let str = '#foo#' let regex = /foo/y regex.last...

WebAssembly - JavaScript
y.compileerror()/webassembly.linkerror()/webassembly.runtimeerror() constructors. constructor properties webassembly.compileerror() indicates an error during webassembly decoding or validation. webassembly.global() represents a global variable instance, accessible from both javascript and importable/exportable across one or more webassembly.module instances. this allows dynamic linking of multiple modules. webassembly.instance() is a stateful, executable instance of a webassembly.module webassembly.linkerror() indicates an error during module instantiation (besides traps from the start function). webassembly.memory() an object whose buffer property is a resizable arraybuffer that holds the raw bytes of memory accessed by a webassembly instance. webassembly.module() contains statele...
...es an error during module instantiation (besides traps from the start function). webassembly.memory() an object whose buffer property is a resizable arraybuffer that holds the raw bytes of memory accessed by a webassembly instance. webassembly.module() contains stateless webassembly code that has already been compiled by the browser and can be efficiently shared with workers, and instantiated multiple times. webassembly.runtimeerror() error type that is thrown whenever webassembly specifies a trap. webassembly.table() an array-like structure representing a webassembly table, which stores function references. static methods webassembly.instantiate() the primary api for compiling and instantiating webassembly code, returning both a module and its first instance. webassembly.instantiat...

Operator precedence - JavaScript
code output function echo(name, num) { console.log("evaluating the " + name + " side"); ...
...ight", 3)); evaluating the left side evaluating the right side 8 the difference in associativity comes into play when there are multiple operators of the same precedence. with only one operator or operators of different precedences, associativity doesn't affect the output, as seen in the example above. in the example below, observe how associativity affects the output when multiple of the same operator are used. code output function echo(name, num) { console.log("evaluating the " + name + " side"); return num; } // notice the division operator (/) console.log(echo("left", 6) / echo("middle", 2) / echo("right", 3)); evaluating the left side evaluating the middle side evaluating the right side 1 function ec...

Spread syntax (...) - JavaScript
for function calls: myfunction(...iterableobj); for array literals or strings: [...iterableobj, '4', 'five', 6]; for object literals (new in ecmascript 2018): let objclone = { ...obj }; rest syntax (parameters) rest syntax looks exactly like spread syntax. in a way, rest syntax is the opposite of spread syntax. spread syntax "expands" an array into its elements, while rest syntax collects multiple elements and "condenses" them into a single element. see rest parameters. examples spread in function calls replace apply() it is common to use function.prototype.apply() in cases where you want to use the elements of an array as arguments to a function. function myfunction(x, y, z) { } const args = [0, 1, 2]; myfunction.apply(null, args); with spread syntax the above can be written as: fu...
...apply() in cases where you want to use the elements of an array as arguments to a function. function myfunction(x, y, z) { } const args = [0, 1, 2]; myfunction.apply(null, args); with spread syntax the above can be written as: function myfunction(x, y, z) { } const args = [0, 1, 2]; myfunction(...args); any argument in the argument list can use spread syntax, and the spread syntax can be used multiple times. function myfunction(v, w, x, y, z) { } const args = [0, 1]; myfunction(-1, ...args, 2, ...[3]); apply for new operator when calling a constructor with new it's not possible to directly use an array and apply() (apply() does a [[call]] and not a [[construct]]). however, an array can be easily used with new thanks to spread syntax: const datefields = [1970, 0, 1]; // 1 jan 1970 const d ...

instanceof - JavaScript
new d() o3 instanceof d // true o3 instanceof c // true since c.prototype is now in o3's prototype chain note that the value of an instanceof test can change based on changes to the prototype property of constructors. it can also be changed by changing an object's prototype using object.setprototypeof. it is also possible using the non-standard __proto__ property. instanceof and multiple context (e.g. frames or windows) different scopes have different execution environments. this means that they have different built-ins (different global object, different constructors, etc.). this may result in unexpected results. for instance, [] instanceof window.frames[0].array will return false, because array.prototype !== window.frames[0].array and arrays inherit from the former. this may ...
...ve different execution environments. this means that they have different built-ins (different global object, different constructors, etc.). this may result in unexpected results. for instance, [] instanceof window.frames[0].array will return false, because array.prototype !== window.frames[0].array and arrays inherit from the former. this may not make sense at first, but for scripts dealing with multiple frames or windows, and passing objects from one context to another via functions, this will be a valid and strong issue. for instance, you can securely check if a given object is, in fact, an array using array.isarray(myobj) for example, checking if a nodes is a svgelement in a different context, you can use mynode instanceof mynode.ownerdocument.defaultview.svgelement. note for mozilla develo...

Expressions and operators - JavaScript
rs member operators provide access to a property or method of an object (object.property and object["property"]). new the new operator creates an instance of a constructor. new.target in constructors, new.target refers to the constructor that was invoked by new. super the super keyword calls the parent constructor. ...obj spread syntax allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) are expected. increment and decrement postfix/prefix increment and postfix/prefix decrement operators. a++ postfix increment operator. a-- postfix decrement operator. ++a prefix increment operator. --a prefix decrement operator. unary operators a unary operation is operation with only one operand. delete ...
... ^= bitwise xor assignment. |= bitwise or assignment. &&= logical and assignment. ||= logical or assignment. ??= logical nullish assignment. [a, b] = [1, 2] {a, b} = {a:1, b:2} destructuring assignment allows you to assign the properties of an array or object to variables using syntax that looks similar to array or object literals. comma operator , the comma operator allows multiple expressions to be evaluated in a single statement and returns the result of the last expression. specifications specification ecmascript (ecma-262)the definition of 'ecmascript language: expressions' in that specification. ...

if...else - JavaScript
to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax if (condition) statement1 [else statement2] condition an expression that is considered to be either truthy or falsy. statement1 statement that is executed if condition is truthy. can be any statement, including further nested if statements. to execute multiple statements, use a block statement ({ ... }) to group those statements. to execute no statements, use an empty statement. statement2 statement that is executed if condition is falsy and the else clause exists. can be any statement, including block statements and further nested if statements. description multiple if...else statements can be nested to create an else if clause. note that there i...
... if clause. note that there is no elseif (in one word) keyword in javascript. if (condition1) statement1 else if (condition2) statement2 else if (condition3) statement3 ... else statementn to see how this works, this is how it would look if the nesting were properly indented: if (condition1) statement1 else if (condition2) statement2 else if (condition3) ... to execute multiple statements within a clause, use a block statement ({ ... }) to group those statements. in general, it is a good practice to always use block statements, especially in code involving nested if statements: if (condition) { statements1 } else { statements2 } do not confuse the primitive boolean values true and false with truthiness or falsiness of the boolean object. any value that is not fal...

JavaScript typed arrays - JavaScript
's create a view that treats the data in the buffer as an array of 32-bit signed integers: let int32view = new int32array(buffer); now we can access the fields in the array just like a normal array: for (let i = 0; i < int32view.length; i++) { int32view[i] = i * 2; } this fills out the 4 entries in the array (4 entries at 4 bytes each makes 16 total bytes) with the values 0, 2, 4, and 6. multiple views on the same data things start to get really interesting when you consider that you can create multiple views onto the same data. for example, given the code above, we can continue like this: let int16view = new int16array(buffer); for (let i = 0; i < int16view.length; i++) { console.log('entry ' + i + ': ' + int16view[i]); } here we create a 16-bit integer view that shares the same b...
...ugh. consider this: int16view[0] = 32; console.log('entry 0 in the 32-bit array is now ' + int32view[0]); the output from this is "entry 0 in the 32-bit array is now 32". in other words, the two arrays are indeed simply viewed on the same data buffer, treating it as different formats. you can do this with any view types. working with complex data structures by combining a single buffer with multiple views of different types, starting at different offsets into the buffer, you can interact with data objects containing multiple data types. this lets you, for example, interact with complex data structures from webgl, data files, or c structures you need to use while using js-ctypes. consider this c structure: struct somestruct { unsigned long id; char username[16]; float amountdue; }; y...

<mtable> - MathML
cko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) the interpretation of negative values has been corrected (bug 601436). in gecko 17.0 (firefox 17.0 / thunderbird 17.0 / seamonkey 2.14) the parsing has been updated to treat whitespace correctly. alignmentscope unimplemented class, id, style provided for use with stylesheets. columnalign specifies the horizontal alignment of the cells. multiple values separated by space are allowed and apply to the corresponding columns (e.g. columnalign="left right center"). possible values are: left, center (default) and right. columnlines specifies column borders. multiple values separated by space are allowed and apply to the corresponding columns (e.g. columnlines="none none solid"). possible values are: none (default), solid and dashed. columns...
...ed href used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. you can use #rgb, #rrggbb and html color names. unimplemented minlabelspacing a length value specifing the minimum space between a label and the adjacent cell in the row. rowalign specifies the vertical alignment of the cells. multiple values separated by space are allowed and apply to the corresponding rows (e.g. rowalign="top bottom axis"). possible values are: axis, baseline (default), bottom, center and top. rowlines specifies row borders. multiple values separated by space are allowed and apply to the corresponding rows (e.g. rowlines="none none solid"). possible values are: none (default), solid and dashed. unimplement...

Web audio codec guide - Web media technologies
oid 20 linux (depends on gstreamer) 26 macos 35 opus the opus audio format was created by the xiph.org foundation as a fully open audio format; it has been standardized by ietf as rfc 6716. it's a good general-purpose audio codec that can efficiently handle both low-complexity audio such as speech as well as music and other high-complexity sounds. opus supports multiple compression algorithms, and can even use more than one algorithm in the same audio file, since the encoder can choose the bit rate, audio bandwidth, algorithm, and other details of the compression settings for each frame of audio. opus is a good all-around audio codec for use in your web applications, and can be used for any audio tasks you have in mind. supported bit rates 6 kbps -...
...o at least 100 ms for the others). note: compatibility information described here is generally correct as of the time this article was written; however, there may be caveats and exceptions. be sure to refer to the compatibility tables before committing to a given media format. based on this, aac is likely your best choice if you can only support one audio format. of course, if you can provide multiple formats (for example, by using the <source> element within your <audio> and <video> elements), you can avoid many or all of those exceptions. example: music for download music being downloaded by the user can be compressed to a larger overall file size than streamed music, since (unlike when streaming) it doesn't matter if the download speed is slower than the playback speed of the media. that ...

Performance fundamentals - Web Performance
that only processes 1,000 database transactions per second, over a choppy, unresponsive app that processes 100,000,000 per second. of course, it's by no means pointless to optimize other metrics, but real upp targets come first. the next few subsections point out and discuss essential performance metrics. responsiveness responsiveness simply means how fast the system provides outputs (possibly multiple ones) in response to user inputs. for example, when a user taps the screen, they expect the pixels to change in a certain way. for this interaction, the responsiveness metric is the time elapsed between the tap and the pixel change. responsiveness sometimes involves multiple stages of feedback. application launch is one particularly important case discussed in more detail below. responsiveness ...
...receive the system theme, and the system provides "built-in" support for some use cases developers may not think of initially, like different-resolution displays or right-to-left languages. the canvas element offers a pixel buffer directly for developers to draw on. this gives developers pixel-level control over rendering and precise control of framerate, but now the developers need to deal with multiple resolutions and orientations, right-to-left languages, and so forth. developers draw to canvases using either a familiar 2d drawing api, or webgl, a "close to the metal" binding that mostly follows opengl es 2.0. gecko rendering the gecko javascript engine supports just-in-time (jit) compilation. this enables application logic to perform comparably to other virtual machines — such as java vir...

Performance budgets - Web Performance
rning. error. the warning level allows you to be proactive and plan any tech debt, while not blocking development or deploys. the error level is an upper bound limit, where changes will have a negative and noticeable impact. in order to begin, you need to first measure the devices and connection speeds where your users are coming from (e.g. a ~$200 android device over a 3g connection), using multiple tools. these time-based metrics will translate into file-size budgets. a default baseline to reduce bounce rate is to achieve time to interactive under 5 seconds in 3g/4g, and under 2 seconds for subsequent loads. however, based on the specific goals and content of your site, you might choose to focus on other metrics. for a text-heavy site such as a blog or a news site, the first contentful pa...
...i and can be used to gather lighthouse and webpage test metrics from a development url. the bot will pass or fail based on the provided minimum scores. how do i enforce a performance budget? the sooner that you can identify a potential addition pushing the budget, the better you can analyze the current state of your site, and pinpoint optimizations or unnecessary code. however, you should have multiple budgets and be dynamic. they are meant to reflect your ongoing goals but allow risks and experiments. for example, you may introduce a feature that increases overall load time but attempts to increase user engagement. (i.e. how long a user stays on a page or site). a performance budget helps you protect optimal behavior for your current users while enabling you to tap into new markets and delive...

Mobile first - Progressive web apps (PWAs)
ches) { require('three'); } we can, therefore, save the bandwidth for browsers that don't need it. modernizr css and js back to modernizr! the reason why it is so useful is that it provides a mechanism to selectively serve both css and javascript. modernizr stores the results of all its feature tests as classes on the html element. ...
...odernizr! the reason why it is so useful is that it provides a mechanism to selectively serve both css and javascript. modernizr stores the results of all its feature tests as classes on the html element. for example, the modernizr in our example app is testing for multiple background image and rgba support. when they are not supported, the <html> tag looks like this: <html class=" js no-rgba no-multiplebgs"> when these are present, we can serve alternative styling rules to provide sensible fallbacks using descendant selectors — see the following in my code. .no-multiplebgs body { background: white; } .no-rgba .main > p { background: white; } this is not hugely pretty, but it does make the main content area more readable on browsers that don't support either or both of these features. ...

systemLanguage - SVG: Scalable Vector Graphics
efix matching rule does not imply that if a user understands a language with a certain tag, that the user will also understand all languages with the tag as prefix. if the attribute is not present, then it implicitly evaluates to "true". if a null string or empty string value is given, the attribute evaluates to "false". the prefix rule simply allows the use of prefix tags if this is the case. ...
...guage with a certain tag, that the user will also understand all languages with the tag as prefix. if the attribute is not present, then it implicitly evaluates to "true". if a null string or empty string value is given, the attribute evaluates to "false". the prefix rule simply allows the use of prefix tags if this is the case. multiple languages may be listed for content that is intended for multiple audiences. for example, content that is presented simultaneously in the original maori and english versions, would call for: <text systemlanguage="mi, en"><!-- content goes here --></text> however, just because multiple languages are present within the object on which the systemlanguage test attribute is placed, this does not mean that it is intended for multiple linguistic audiences. an exampl...

target - SVG: Scalable Vector Graphics
the target attribute should be used when there are multiple possible targets for the ending resource, such as when the parent document is embedded within an html or xhtml document, or is viewed with a tabbed browser. this attribute specifies the name of the browsing context (e.g., a browser tab or an (x)html iframe or object element) into which a document is to be opened when the link is activated: only one element is using this attribute: <a> html, body, svg { height: 100%; } text { font: 20px arial, helvetica, sans-serif; fill: blue; text-decoration: underline; } <svg viewbox="0 0 300 120" xmlns="http://www.w3.org/2000/svg"> <a href="https://developer.mozilla.org" target="_self"> <text x="0" y="20">open link within iframe</text> </a> <a href="https://developer.mozilla.o...
...aced by the linked content, if it exists and can be securely accessed from this document. _top the content of the full active window or tab is replaced by the linked content, if it exists and can be securely accessed from this document _blank a new un-named window or tab is requested for the display of the linked content, if this document can securely do so. if the user agent does not support multiple windows/tabs, the result is the same as _top. <xml-name> specifies the name of the browsing context (tab, inline frame, object, etc.) for display of the linked content. if a context with this name already exists, and can be securely accessed from this document, it is re-used, replacing the existing content. if it does not exist, it is created (the same as '_blank', except that it now has a name...

Paths - SVG: Scalable Vector Graphics
complex shapes composed only of straight lines can be created as <polyline>s. while <polyline>s and <path>s can create similar-looking shapes, <polyline>s require a lot of small straight lines to simulate curves, and don't scale well to larger sizes. a good understanding of paths is important when drawing svgs. ...
...ve. note: the co-ordinate deltas for q are both relative to the previous point (that is, dx and dy are not relative to dx1 and dy1). q x1 y1, x y (or) q dx1 dy1, dx dy <svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> <path d="m 10 80 q 95 10 180 80" stroke="black" fill="transparent"/> </svg> as with the cubic bézier curve, there is a shortcut for stringing together multiple quadratic béziers, called with t. t x y (or) t dx dy this shortcut looks at the previous control point used and infers a new one from it. this means that after the first control point, fairly complex shapes can be made by specifying only end points. this only works if the previous command was a q or a t command. if not, then the control point is assumed to be the same as the previous poin...

Subdomain takeovers - Web security
hosting provider, an attacker can now create their own virtual host with that provider, claim your subdomain, and host their own content under that subdomain. how can i prevent them? preventing subdomain takeovers is a matter of order of operations in lifecycle management for virtual hosts and dns. depending on the size of the organization, this may require communication and coordination across multiple departments, which can only increase the likelihood for a vulnerable misconfiguration. define standard processes for provisioning and deprovisioning hosts. do all steps as closely together as possible. start provisioning by claiming the virtual host; create dns records last. start deprovisioning by removing dns records first. create an inventory of all of your organization’s d...
...meone claiming a virtual host actually has a legitimate claim to the domain name. work within your organization to make this part of the vendor qualification process. my subdomain has been taken over. what should i do? if you discover that a subdomain of your domain has been taken over, the first step, if possible, is to "cut power" by removing the dns entry for the subdomain. if your site has multiple layers of virtualization (e.g., a cdn in addition to virtual hosting), you may need to examine each layer to see where exactly the attacker asserted their virtual host claim to take over your domain. learn more 'deep thoughts' on subdomain takeover vulnerabilities subdomain takeover: basics ...

Subresource Integrity - Web security
esource served from an origin other than the document in which it’s embedded, browsers additionally check the resource using cross-origin resource sharing (cors), to ensure the origin serving the resource allows it to be shared with the requesting origin. how subresource integrity helps using content delivery networks (cdns) to host files such as scripts and stylesheets that are shared among multiple sites can improve site performance and conserve bandwidth. however, using cdns also comes with a risk, in that if an attacker gains control of a cdn, the attacker can inject arbitrary malicious content into files on the cdn (or replace the files completely) and thus can also potentially attack all sites that fetch files from that cdn. subresource integrity enables you to mitigate some risks of a...
...ng the browser to fetch, in the value of the integrity attribute of any <script> or <link> element. an integrity value begins with at least one string, with each string including a prefix indicating a particular hash algorithm (currently the allowed prefixes are sha256, sha384, and sha512), followed by a dash, and ending with the actual base64-encoded hash. note: an integrity value may contain multiple hashes separated by whitespace. a resource will be loaded if it matches one of those hashes. example integrity string with base64-encoded sha384 hash: sha384-oqvuafxrkap7fdgccy5uykm6+r9gqq8k/uxy9rx7hnqlgyl1kpzqho1wx4jwy8wc so oqvuafxrkap7fdgccy5uykm6+r9gqq8k/uxy9rx7hnqlgyl1kpzqho1wx4jwy8wc is the "hash" part, and the prefix sha384 indicates that it's a sha384 hash. note: an integrity value...

Web Components
encapsulated away from the rest of your code — and utilize them in your web apps. concepts and usage as developers, we all know that reusing code as much as possible is a good idea. this has traditionally not been so easy for custom markup structures — think of the complex html (and associated style and script) you've sometimes had to write to render custom ui controls, and how using them multiple times can turn your page into a mess if you are not careful. web components aims to solve such problems — it consists of three main technologies, which can be used together to create versatile custom elements with encapsulated functionality that can be reused wherever you like without fear of code collisions. custom elements: a set of javascript apis that allow you to define custom elements...
... separately from the main document dom — and controlling associated functionality. in this way, you can keep an element's features private, so they can be scripted and styled without the fear of collision with other parts of the document. html templates: the <template> and <slot> elements enable you to write markup templates that are not displayed in the rendered page. these can then be reused multiple times as the basis of a custom element's structure. the basic approach for implementing a web component generally looks something like this: create a class in which you specify your web component functionality, using the ecmascript 2015 class syntax (see classes for more information). register your new custom element using the customelementregistry.define() method, passing it the element n...

document - XPath
syntax document(uri [,node-set] ) arguments uri an absolute or relative uri of the document to be retrieved. the uri may also include a fragment identifier. node-set (optional) an expression pointing to a node-set in the external document that should be returned. returns a node-set. ...
...n the external document, that fragment will be treated as the root in the node-set argument's expression. if the node-set argument is omitted, the entire fragment will be returned. if the uri argument is a node-set, and the second argument is present, each node in the node-set will be evaluated as a separate uri, and the returned node-set will be as if the document function has been called multiple times (each time with the same second argument just as given in the function call) and the resulting node-sets had been concatenated into a single node-set. other specific conditions exist with specified behaviors. see the xslt 1.0 documentation for details. since the uri is relative to the xsl document, document("") would return the root node of the current document. this function is a...

<xsl:number> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:number> element counts things sequentially. it can also be used to quickly format a number. syntax <xsl:number count=expression level="single" | "multiple" | "any" from=expression value=expression format=format-string lang=xml:lang-code letter-value="alphabetic" | "traditional" grouping-separator=character grouping-size=number /> required attributes none. optional attributes count specifies what in the source tree should be numbered sequentially. it uses an xpath expression. level defines how levels of the source tree should be considered in generating sequential numbers. it has three valid values: single, multiple, and any. the default value is single: single ...
...umbers sibling nodes sequentially, as in the items in a list. the processor goes to the first node in the ancestor-or-self axis that matches the count attribute and then counts that node plus all its preceding siblings (stopping when it reaches a match to the from attribute, if there is one) that also match the count attribute.if no match is found, the sequence will be an empty list. multiple numbers nodes as a composite sequence that reflects the hierarchic position of the node, e.g. 1.2.2.5. (the nested format can be specified with the format attribute, e.g. a.1.1). the processor looks at all ancestors of the current node and the current node itself, stopping when it reaches a match for the from attribute, if there is one. for each node in this list that matches the count attribut...

PI Parameters - XSLT: Extensible Stylesheet Language Transformations
attribute must not fail due to the presence of an unrecognized attribute as long as that attribute follows the syntax in xml-stylesheet. both the xslt-param and the xslt-param-namespace pis must appear in the prolog of the document, i.e. before the first element tag. all pis in the prolog must be honored, both ones occurring before and onces occurring after any xml-stylesheet pis. if there are multiple xml-stylesheet pis the parameters apply to all stylesheets as a consequence of that all stylesheets are imported into a single stylesheet per the xslt spec.reference? note that multiple xml-stylesheet xslt pis are not supported in firefox currently. xslt-param the xslt-param pi supports 4 attributes: name the local-name part of the parameter name. no syntax checking is done on the attribut...
...ce the xslt-param-namespace uses two attributes: prefix the prefix that is mapped. namespace the namespace the prefix maps to. an xslt-param-namespace pi affects the expression in the select attribute for all xslt-params following the pi. this applies even if there are other nodes such as comments or other pis between the xslt-param-namespace and xslt-param pis. it is not an error for multiple pis to use the same prefix, every new pi just changes what namespace the prefix maps to. if prefix is missing, empty, or equals an invalid ncname, the pi is ignored. if namespace is missing, the pi is ignored. if namespace is empty, the prefix mapping is removed. examples set the parameter 'books' to a nodeset containing all <book> elements in the 'http://www.example.org/mynamespace' namespac...

WebAssembly
el assembly-like language with a compact binary format that runs with near-native performance and provides languages such as c/c++, c# and rust with a compilation target so that they can run on the web. it is also designed to run alongside javascript, allowing both to work together. in a nutshell webassembly has huge implications for the web platform — it provides a way to run code written in multiple languages on the web at near native speed, with client apps running on the web that previously couldn’t have done so. webassembly is designed to complement and run alongside javascript — using the webassembly javascript apis, you can load webassembly modules into a javascript app and share functionality between the two. this allows you to take advantage of webassembly's performance and power...
...embly module written in the text format into a .wasm binary. api reference webassembly this object acts as the namespace for all webassembly related functionality. webassembly.global() a webassembly.global object represents a global variable instance, accessible from both javascript and importable/exportable across one or more webassembly.module instances. this allows dynamic linking of multiple modules. webassembly.module() a webassembly.module object contains stateless webassembly code that has already been compiled by the browser and can be efficiently shared with workers, and instantiated multiple times. webassembly.instance() a webassembly.instance object is a stateful, executable instance of a module. instance objects contain all the exported webassembly functions that allow c...

Loading Content Scripts - Archive of obsolete content
from which the content script will be loaded. to supply the file "my-content-script.js", located in the /data subdirectory under your add-on's root directory, use a line like: // "data" is supplied by the "self" module var data = require("sdk/self").data; ... contentscriptfile: data.url("my-content-script.js") both contentscript and contentscriptfile accept an array of strings, so you can load multiple scripts, which can also interact directly with each other in the content process: // "data" is supplied by the "self" module var data = require("sdk/self").data; ... contentscriptfile: [data.url("jquery-1.4.2.min.js"), data.url("my-content-script.js")] scripts specified using contentscriptfile are loaded before those specified using contentscript. this enables you to load a javascript libr...

Communicating using "port" - Archive of obsolete content
"self.port.on('alert', function(text) {" + " console.log(text);" + "});" }); panel.show(); panel.port.emit("alert", "panel is showing"); the panel and page-worker objects only host a single page at a time, so each distinct page object only needs a single channel of communication to its content scripts. but some modules, such as page-mod, might need to handle multiple pages, each with its own context in which the content scripts are executing, so it needs a separate channel (worker) for each page. so page-mod does not integrate the worker api directly: instead, each time a content script is attached to a page, the worker associated with the page is supplied to the page-mod in its onattach function. by supplying a target for this function in the page-mod's con...

Classes and Inheritance - Archive of obsolete content
stub implementation defined on class itself. the last special property we will look into is implements. it specifies a list of objects, which properties are to be copied to the prototype of the constructor. note that only properties defined on the object itself are copied: properties defined on one of its prototypes are not. this allows objects to inherit from more than one class. it is not true multiple inheritance, however: no constructors are called for objects inherited via implements, and instanceof only works correctly for classes inherited via extends. ...

Modules - Archive of obsolete content
modules within the sdk are loaded using cuddlefish by default. like any other custom loader, cuddlefish is created using the loader constructor. in the final section, we will take a look at some of the options passed by the sdk to the loader constructor to create the cuddlefish loader. loading subscripts when a javascript project reaches a certain size, it becomes necessary to split it up into multiple files. unfortunately, javascript does not provide any means to load scripts from other locations: we have to rely on the host application to provide us with this functionality. applications such as firefox and thunderbird are based on xulrunner. xulrunner adds a built-in object, known as components, to the global scope. this object forms the central access point for all functionality provided by ...

SDK and XUL Comparison - Archive of obsolete content
pis to simplify many common tasks in add-on development, and tool support which greatly simplifies the process of developing, testing, and packaging an add-on. compatibility although we can't promise we'll never break a high-level api, maintaining compatibility across firefox versions is a top priority for us. we've designed the apis to be forward-compatible with the new multiple process architecture (codenamed electrolysis) planned for firefox. we also expect to support both desktop and mobile firefox using a single edition of the sdk: so you'll be able to write one extension and have it work on both products. security if they're not carefully designed, firefox add-ons can open the browser to attack by malicious web pages. although it's possible...

clipboard - Archive of obsolete content
the type of the data, , one of "text", "html", "image". optional. get(datatype) get the contents of the user's clipboard. parameters datatype : string retrieve the clipboard contents only if matching this type (optional). the function will return null if the contents of the clipboard do not match the supplied type. properties currentflavors data on the clipboard is sometimes available in multiple types. for example, html data might be available as both a string of html (the html type) and a string of plain text (the text type). this property is an array contains all types in which the data currently on the clipboard is available. ...

context-menu - Archive of obsolete content
constructor description pagecontext() the page context. selectioncontext() this context occurs when the menu is invoked on a page in which the user has made a selection. selectorcontext(selector) this context occurs when the menu is invoked on a node that either matches selector, a css selector, or has an ancestor that matches. selector may include multiple selectors separated by commas, e.g., "a[href], img". urlcontext(matchpattern) this context occurs when the menu is invoked on pages with particular urls. matchpattern is a match pattern string or an array of match pattern strings. when matchpattern is an array, the context occurs when the menu is invoked on a page whose url matches any of the patterns. these are the same match patter...

l10n - Archive of obsolete content
.log(_("child_id", 2)); see the tutorial on plural support for more information. note that if you use this parameter, you can't supply any placeholders. placeholder1...n : string optional parameters. if you do not include the count parameter, you can supply one or more placeholder strings that are to be inserted into the translated string at locations defined by the translator. if you supply multiple placeholders, each one is a separate string parameter. var _ = require("sdk/l10n").get; console.log(_("home_town", "alan", "norwich")); see the tutorial on placeholder support for more information. returns string : the localized string referenced by the identifier parameter passed in, or the identifier itself if no referent for the identifier can be found. ...

io/file - Archive of obsolete content
by joining the strings on the file system's path separator. list(path) returns an array of file names in the given directory. parameters path : string the path of the directory. returns array : an array of file names. each is a basename, not a full path. mkpath(path) makes a new directory named by the given path. any subdirectories that do not exist are also created. mkpath can be called multiple times on the same path. parameters path : string the path to create. open(path, mode) returns a stream providing access to the contents of a file. parameters path : string the path of the file to open. mode : string an optional string, each character of which describes a characteristic of the returned stream. if the string contains "r", the file is opened in read-only mode. "w" open...

places/history - Archive of obsolete content
d to determine overall settings, like sorting and how many objects should be returned. parameters queries : object|array an object representing a query, or an array of objects representing queries. each query object can take several properties, which are queried against the history database. each property is and'd together, meaning that bookmarks must match each property within a query object. multiple query objects are then or'd together. options : object optional options: name type count number the number of bookmark items to return. if left undefined, no limit is set. sort string a string specifying how the results should be sorted. possible options are 'title', 'date', 'url', 'visitcount', 'keyword', 'dateadded' and 'lastmo...

ui/toolbar - Archive of obsolete content
kmarks toolbar. hidden state persists even over create/destroy cycles: if a toolbar is created, then hidden, then destroyed, and another toolbar with the same title is then created, the new toolbar will be in the hidden state. toolbar events toolbars get attach and detach events when their content is loaded and unloaded, and show and hide events when the uses shows or hides them. working with multiple browser windows there's only a single toolbar for all browser windows, so operations like show and hide work across all browser windows. if you need to customize content for a particular browser window, you can do that by messaging the window-specific frame hosted by that toolbar. globals constructors toolbar(options) creates a toolbar. the only mandatory option is title, but for the toolbar...

Adding a Button to the Toolbar - Archive of obsolete content
n loads https://www.mozilla.org/ into a new tab. specifying the icon the icon property may specify a single icon or a collection of icons in different sizes, as in the example above. if you specify a collection of icons in different sizes the browser will automatically choose the best fit for the screen resolution and the place in the browser ui that hosts the button. read more about specifying multiple icons. the icon file must be packaged with your add-on: it may not refer to a remote file. you can change the icon at any time by setting the button's icon property. you can change the icon, and the other state attributes, either globally, for a specific window, or for a specific tab. read more about updating state. attaching a panel if you need to attach a panel to a button, use the toggle b...

Modifying Web Pages Based on URL - Archive of obsolete content
for example, you could rewrite my-script.js to use jquery. $("body").html("<h1>page matches ruleset</h1>"); then download jquery to add-on's data directory, and load the script and jquery together (making sure to load jquery first). // import the page-mod api var pagemod = require("sdk/...

Troubleshooting - Archive of obsolete content
in those cases you need to use jpm's --binary option. see the jpm guide for more information. ...

Progress Listeners - Archive of obsolete content
, false); window.addeventlistener("unload", function() { myextension.uninit() }, false); note: if you use the same listener for more than one tab/window, use awebprogress.domwindow in the callback methods to obtain the tab/window which triggers the state change or event. example: example of listener for anchor change the above example "notification when the value in address bar changes" fires multiple times, one of which is when the tab is changed. in some cases you want to catch only a location change when the anchor changes. to do this the optional aflags parameter of the onlocationchange listener is used. var myext_urlbarlistener = { onlocationchange: function (aprogress, arequest, auri, aflags) { if (aflags & ci.nsiwebprogresslistener.location_change_same_document) { ...

Windows - Archive of obsolete content
down", mousedown, false); window.addeventlistener("mouseup", mouseup, false); window.addeventlistener("mousemove", mousemove, false); xul titlebar element xul applications can take advantage of the titlebar element to achieve a similar result without extra javascript code. re-using and focusing named windows while specifying the name parameter to window.open or window.opendialog will prevent multiple windows of that name from opening, each call will actually re-initialize the window and thus lose whatever state the user has put it in. additionally, if the window is in the background, it may not be brought to the front. this code will check for a window of the provided name. if it finds one, it focuses it. if it doesn't, it opens one. var wenum = components.classes["@mozilla.org/embedcomp/win...

Deploying a Plugin as an Extension - Archive of obsolete content
gs that can be placed in the install.rdf is called an updateurl. for example: <em:updateurl><http://www.rhapsody.com/update.rdf></em:updateurl> this url specifies an rdf file that can be used to tell firefox that there are updates available for your extension. this rdf file can be updated to indicate that an update to our extension/plugin is available. finally, if you want to package plugins for multiple platforms into a single extension, you can do that as well. there are two ways to do this. first, you can simply put all the files in the plugins directory. firefox will load the correct plugins based on the platform, simply because the plugins for other platforms won't load. if your plugin is for windows, don't forget add to version resources to your plugin's dll. also, supply mimetype and filee...

Enhanced Extension Installation - Archive of obsolete content
item-uninstalled an item has been configured for uninstallation. item-enabled an item has been configured for enabling. item-disabled an item has been configured for disabling. things this upgrade does not do replace rdf/xml as a storage format the rdf/xml datasource back end creates unneccessary and undesirable complexity when saving data. it also makes it more difficult to support multiple instances of a single extension at different install locations due to the singleton nature of rdf resources. extension metadata is structured and not relational in the sense encouraged by rdf, and so a simple text storage format is probably desirable. making the database file format human readable would also help developers debug their installation problems. footnotes the term "extension" is ...

Extension Theming Guidelines - Archive of obsolete content
s style, in particular logos and icons can be kept in the chrome content package such that they are not replaceable by custom themes stylesheets guidelines include stylesheets for every new window that your extension adds and for every window that your extension overlays content into be sure to add a stylesheet from your chrome skin package. while it may be tempting to use the same stylesheet in multiple places try to avoid this so that themes can correctly target the right windows. css selectors when writing stylesheet rules for windows that you are overlaying always try to be specific with the css selector. if you are not then you run a risk of conflicting with content that other extensions add to the window. xul guidelines xbl bindings xbl bindings are applied using style rules. however thes...

Hiding browser chrome - Archive of obsolete content
unc = xulbrowserwindow.hidechromeforlocation; xulbrowserwindow.hidechromeforlocation = function(alocation) { return (/* your test goes here */) || prevfunc.apply(xulbrowserwindow, [alocation]); } this works by saving a reference to the current implementation of the hidechromeforlocation() method, then replacing it with a new method that calls through to the previous implementation. by chaining multiple implementations of the method together in this way, everyone that wants to hide chrome can do so when appropriate. ...

Listening to events in Firefox extensions - Archive of obsolete content
gecko uses events to pass information about interesting things that have occurred along to the parties that may wish to know about them. there are several different categories of events; this article will help you learn about them and direct you to more specific documentation covering each of them. it also provides some use cases that may be of specific interest. types of events there are multiple types of events that application and extension authors can use to receive notifications from <xul:browser> and <xul:tabbrowser> elements to hear about changes relating to loads of the content contained within them. simple dom events registering for a dom event is done using with code such as the following: function callback(evt) { // do your processing here. check evt.target for the target of the...

Appendix: What you should know about open-source software licenses - Archive of obsolete content
the source code, must be released under the same kind of license. if copyleft is not one of the conditions (as is the case with the modified bsd license), the modified program can be released under a different license, and can even be sold without any open-source license at all. dual licensing some open-source software uses “dual licensing.” in this situation, the software is released with multiple licenses, and the user decides which one to apply. in most cases, this means gpl and another license with looser restrictions. for example, mysql is published under a dual license: gpl and a commercial license. oss license can duplicate can distribute can modify commercial license install on one machine only unauthorized copies prohibited n...

Chapter 1: Introduction to Extensions - Archive of obsolete content
mode confirms and runs updates provides access to add-ons' settings dialogs provides access to add-ons' support sites development environment amenities initially, there wasn't adequate documentation available, and extension developers were largely left to fend for themselves1; however, now there's a considerable store of knowledge. because firefox and its extensions are designed to support multiple languages, excellent extensions come from all over the world, and can be quickly localized by anyone interested. this lowers the threshold both to using and to developing extensions; that fact, combined with firefox's rapidly growing popularity, has created a positive feedback loop, with the number of extension users and extension developers growing explosively—there are now more than 7000 ext...

Adding menus and submenus - Archive of obsolete content
show a custom greeting. the separator is usually displayed as a horizontal line that creates a logical division between different types of menuitem elements, keeping everything more organized. a menubar can hold one or more menu elements. ...

Appendix A: Add-on Performance - Archive of obsolete content
ng startup wiki page includes a relatively simple test you can use to compare a clean firefox profile vs that profile with your add-on installed. page loads this is another critical route that many add-ons tap into. the intercepting page loads section details several techniques to do this, and you should read all of them carefully to figure out which one you need. some of these events are fired multiple times during a single page load, and having inefficient code in the event handlers can cause a noticeable delay that users may have hard time figuring out. look at the source samples in the article and notice how they mostly consist of nested if statements. this is what you should do first to make sure that you filter out all cases that don't interest you so that your add-on doesn't slow down ot...

Appendix B: Install and Uninstall Scripts - Archive of obsolete content
etvalue(firstrunpref, false)) { application.prefs.setvalue(firstrunpref, true); // all the rest of the first run code goes here. } } in this case you would need to declare the first run preference in your default preferences file, with a default value of false. you should also change the preference value before you run any other first run code. keep in mind that the user could have set multiple firefox windows to open at startup, so there's a race condition on which window will run the first run code. if you need to run code on every update, or some of them, the code would be very similar. instead of a boolean preference, it would be best to use a string preference with the last-installed add-on version. and then do a version comparison to decide which code to run. the current version ...

Custom XUL Elements with XBL - Archive of obsolete content
udes attribute gives you a little more flexibility with children, but it's rarely needed. one important thing to take into account is that you shouldn't use the id attribute in any content nodes. these nodes are part of the xul dom just like any other, and having an id attribute is bound to cause problems, given that you could have more than instance of your element in the same document and then multiple inner items with the same id. in order to work around this problem, the anonid attribute is used instead: <xul:label anonid="xulshoolhello-name-label" xbl:inherits="value=name" /> and then, in order to get a reference to the node from the js code in your binding, we use the getanonymouselementbyattribute dom method: let namelabel = document.getanonymouselementbyattribute( this, "a...

Local Storage - Archive of obsolete content
can request error data from your users when you encounter problems that are hard to debug. we'll discuss logging in this section, but first let's look at the right (or at least, common and scalable) way of managing local files. it is strongly recommended that you keep your local files inside the firefox profile directory. otherwise you may run into problems if the same extension is installed in multiple profiles. the common practice is to create a directory with the name of your project at the root of the profile folder, and keep your files inside. the structure could be something like this: s435l.default (your profile directory) xulschool log.txt somedbfile.sqlite the directory service and the nsifile interface are used to create the local directory. here...

Observer Notifications - Archive of obsolete content
erface, as seen before), therefore its properties and methods cannot be accessed unless the correct interface is set to it. when the notifytest method is called, all observers registered with xulschoolhello-test-topic will get notified and display two alerts. if there are 2 firefox windows open, the observer will be notified in both and the alerts will show up on both. you can always listen for multiple notification topics using the same observer. also, be careful not to add the same observer to a notification topic more than once, otherwise the same code in the observer will be run several times when a notification is sent. useful firefox notifications we have covered sending and receiving custom notification topics using observers and the observer service. in firefox, there are many built-in...

Setting Up a Development Environment - Archive of obsolete content
e signed and unsigned development builds. firefox profile management it is good development practice to keep your test environment separate from everything else. you don't want unstable extensions to break your everyday firefox profile, risking data loss. it's much better to have a different "version" of firefox for testing. this is what firefox profiles are for. you can learn about setting up multiple firefox profiles in the mozilla support article managing profiles. you can have as many profiles as you like. you can also mix them with multiple firefox installations. for instance, you may want to test your extension in firefox 3.5 and firefox 3.6, or test it in a localized version of firefox. you can install as many firefox versions as you want, and mix profiles and versions. on windows and l...

The Box Model - Archive of obsolete content
s. you should avoid using long blocks text, and also avoid designing your ui so that everything fits just right around text. you should always keep in mind that the text can be much longer, and your ui should adapt to it. labels should generally be short, and they should always be displayed in a single line. descriptions may be longer, and in general you should plan it so that they can wrap into multiple lines. in order to have wrapping descriptions, you need to set the text as a child node instead of using the value attribute: <description>&xulschoolhello.description.label;</description> even then, the text will extend as much as it can in a single line, so you need to add some css limits in order to make it wrap inside a xul dialog or window. you can use the css property width to restrict...

User Notifications and Alerts - Archive of obsolete content
n't get rid of . on firefox 3 and above, this seems to have been corrected, using the panel element. the bottom right corner of the browser is the recommended location for an alert, because it normally doesn't block the part of the content where the user is reading, or the most important parts of page content, such as menus and titles. remember this is not a recommended practice. imagine having multiple extensions notifying you in their own custom way, probably even at the same time! this is not good from a ui perspective, so you consider custom alerts the very last resort. « previousnext » this tutorial was kindly donated to mozilla by appcoast. ...

Setting up an extension development environment - Archive of obsolete content
e use of a separate user profile for development can be advantageous, averting performance degradation from development related settings, and further isolating personal data (such as bookmarks, extensions, and settings) from your testing environment. you could be running two instances of firefox simultaneously. note: for an extended guide on how to set up even more user profiles, take a look at multiple firefox profiles. this particularly comes in handy for the use of all currently available firefox versions. it even allows the running of simultaneous versions, at the same time. to quickly achieve our task of creating just a developer profile, we will start the application with the parameters: /path/to/firefox -no-remote -p profilename without these parameters, the default behavior of your m...

Signing an XPI - Archive of obsolete content
isplayed certificate text into a new file called c:\projects\codesigning\certum code signing.cer. installing real certificate there are two steps required to install the new certificate in the code signing nss certificate database. 1. install the issuer's certificate authority root 2. install your key and certificate the root ca establishes the trust of your certificate. many issuer's have multiple root cas for different levels of trust. find out which one was used for your certificate and download it. you can view the details of your certificate in mozilla firefox and get this information from the issued by common name (unizeto certum's free certificate ca is certum level iii ca). download the root ca and any intermediate certificates used to sign your certificate from the issuer; their w...

Tabbed browser - Archive of obsolete content
nts normally mark where you should be inserting your own code. each snippet normally includes some code to run at initialization, these are best run using a load listener. these snippets assume they are run in the context of a browser window. if you need to work with tabs from a non-browser window, you need to obtain a reference to one first, see working with windows in chrome code for details. multiple meanings for the word 'browser' the word 'browser' is used several ways. of course the entire application firefox is called "a browser". within the firefox browser are tabs and inside each tab is a browser, both in the common sense of a web page browser and the xul sense of a browser element. furthermore another meaning of 'browser' in this document and in some firefox source is "the tabbrowser ...

Adding preferences to an extension - Archive of obsolete content
it also adds a preference dialog that lets you switch to a stock other than one of the ones included in the popup menu. ...

Underscores in class and ID Names - Archive of obsolete content
learn why this is so, and how to keep your sites from being bitten by this problem. ...

Beginner tutorials - Archive of obsolete content
this page includes archived beginners tutorials, from various places around mdn. creating reusable content with css and xblthis page illustrates how you can use css in mozilla to improve the structure of complex applications, making code and resources more easily reusable.underscores in class and id namessummary: the use of the underscore character in css can lead to major display problems in multiple browsers. learn why this is so, and how to keep your sites from being bitten by this problem. this technical note examines the use of underscores in css, and why they should be generally avoided in most circumstances.xml datathis page contains an example of how you can use css with xml data.xul user interfacesthis page illustrates mozilla's specialized language for creating user interfaces. ...

Case Sensitivity in class and id Names - Archive of obsolete content
based on a close reading of the html 4.01 specification. in section 7.5.2, which defines class and ids, we find the following text: id = name [cs] this attribute assigns a name to an element. this name must be unique in a document. class = cdata-list [cs] this attribute assigns a class name or set of class names to an element. any number of elements may be assigned the same class name or names. multiple class names must be separated by white space characters. the marker "[cs]" means "case sensitive," as defined in section 6.1 of the specification. thus, the mozilla team, committed to following open standards as closely as possible, implemented both class and id names as case-sensitive values. as of this writing, netscape 6 is the only browser to honor this defined behavior; other browsers trea...

Creating a status bar extension - Archive of obsolete content
n about the extension, or to look for updates. this is not a required field, but including it is a nice thing to do. target application information it's also necessary to include information that identifies the application or applications in which your extension is designed to run. although this sample extension only works in firefox, it's entirely possible to create extensions that work in multiple xul-based applications. it's also necessary to indicate what versions of the target application or applications your extension supports. if it won't work in older versions of firefox, or hasn't been tested on newer versions, you can restrict the extension so that only supported versions of the target application will attempt to use it. the target application information is contained within the em...

Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
as a general approach, the main steps to the iframe-based implementation can be represented as follows: create a hidden iframe in the page; when a new content is required, ask for the content to the iframe; the iframe will load the content and callback a function in the main page; update the main page. of course, specific implementations may have different requirements, like the use of multiple iframe elements to make multiple requests retrieving different contents at the same time. example using iframes and javascript: stock ticker this section describes a stock ticker application based on the inner-browsing model. the stock ticker is a web page with a stock ticker element that displays updated stock symbol information. the web page receives updates to its contents but only redraws the...

Localizing an extension - Archive of obsolete content
given xul file, we need to add one line to the xul file. to options.xul, we add this line: <!doctype window system "chrome://stockwatcher2/locale/options.dtd"> we add a similar line to the stockwatcher.xul file: <!doctype overlay system "chrome://stockwatcher2/locale/stockwatcher2.dtd"> in larger applications you might need to use entities from several locale files in a single xul file. using multiple dtds describes how to do it. note that the urls of the dtd files don't actually include the name of the localization to use. the chrome registry resolves the uris based on the user's current locale setting and the data you provide in your chrome manifest. then we simply replace each text string in our xul files with the corresponding entity. for example, in stockwatcher2.xul, we change this line:...

Defining Cross-Browser Tooltips - Archive of obsolete content
the same content as the alt attribute. a variant on christian's original suggestion was made by "ct" in bug 25537. a similar solution can be employed for web servers that are based on content management systems, including microsoft's active server pages, which make such substitutions fairly simple. recommendations use the title attribute (instead of alt) to ensure desired tooltip behavior in multiple browsers. authors able to run content-rewriting proxy servers can use them to dynamically alter outgoing content to ensure both the title and alt attributes are present. related links html 4.01 specification: 13.8 how to specify alternate text html 4.01 specification: 7.4.3 the title attribute bug 25537 original document information author(s): eric a. meyer, netscape communications ...

No Proxy For configuration - Archive of obsolete content
the ip address ("127.0.0.1" does not block "localhost") a network network w/ cidr block "10.0.0.0/8" does not block hostnames that resolve to the ip address range (10.0.0.0/8 is not "no proxy for intranet hostnames") optional - port-specific (optional) ":" + port number "<filter>:81" only black-lists port. only applies to one port (no support for ranges and/or multiple ports). port-only filters ":80" or "*:80" are not supported. all non-fqdn hosts, such as intranet hosts the string "<local>" (without quotes) "<local>" bypasses the proxy for all hostnames which have no periods in them. for example: "https://mycompanyintranet/" formats that are not accepted example domain filters with interior wildcards www.*.com ...

Notes on HTML Reflow - Archive of obsolete content
nd object is created and passed to the presentation shell via the nsipresshell::appendreflowcommand method. the presentation shell does not process the command immediately. instead, it queues the command, and processes it asynchronously along with other queued reflow commands en masse . coalescing. as described below, the reflow command has a type and a target frame . multiple reflow commands with the same type and target frame are coalesced : the presentation shell simply refuses to add subsequent commands of the same type for the same frame to the queue. a caller may also cancel a reflow command that is in the queue; e.g., if the target frame is destroyed. dispatch. the presentation shell processes the reflow queue by removing a single reflow comman...

Prerequisites - Archive of obsolete content
in order to complete this tutorial you need to have and know how to use the following programs on your computer: an installation of mozilla; zip and unzip utilities; a text editor. you should also understand tag-based languages like html as well as basic javascript, css, and the dom. you might install mozilla multiple times in the course of this tutorial, so you will find it handy to keep around a mozilla installer. if you currently use mozilla, you should install a new copy of the software in a different location from the existing installation for the purposes of this demo. this tutorial instructs you to do things that can damage your installation and make it unusable, so don't modify your primary mozilla installation per the instructions in this tutorial unless you really know wh...

Specifying the appearance - Archive of obsolete content
} statusbarpanel#tinderbox-status[status="success"] { list-style-image: url("chrome://navigator/content/tb-success.png"); } statusbarpanel#tinderbox-status[status="testfailed"] { list-style-image: url("chrome://navigator/content/tb-testfailed.png"); } statusbarpanel#tinderbox-status[status="busted"] { list-style-image: url("chrome://navigator/content/tb-busted.png"); } mozilla can have multiple sets of stylesheets that govern its appearance, and we don't want to have to add these rules to each set (and have our extension break when a new set gets installed), so we'll put this stylesheet in a file called tinderstatus.css in the same directory as navigator.xul and reference it at the top of that file right under the global stylesheet reference: <?xml-stylesheet href="chrome://navigator/sk...

Tinderbox - Archive of obsolete content
the mozilla sheriff, a rotating position responsible 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 fail...

Creating a Mozilla Extension - Archive of obsolete content
ow to create an extension for the old versions of mozilla suite (currently seamonkey). see building an extension for an up-to-date tutorial (it focuses on firefox, but is also applicable to other new applications). a mozilla extension is an installable enhancement to the mozilla browser that provides additional functionality (for example linky, which adds an item to the context menu for opening multiple links in a document or selection). this tutorial walks you through the process of building a mozilla extension that adds an icon to mozilla's status bar showing the current status of the mozilla source code (i.e. whether or not the latest version of the code is compiling successfully and passing tests). the extension will access tinderbox, mozilla.org's webtool for tracking source code status, to...

In-Depth - Archive of obsolete content
are displayed. normal in english web browsers items are displayed top to bottom and left to right. this will flip it around so items inside of this box will be displayed bottom to top and right to left. this is useful for, say, putting the navigation controls (back button) on the right hand side of the toolbar. values: normal, reverse -moz-image-region this is useful for dividing up an image into multiple smaller images. it uses a rect() object to determine the clipping region. check out the section on organizing images for more information. example: -moz-image-region: rect(168px 69px 189px 46px); -moz-opacity makes boxes semi-transparent. it takes a decimal value, 0.00 is invisible and 1.00 is totally visible. how do i know what to modify? now that you've got everything extracted and you know ho...

Developing New Mozilla Features - Archive of obsolete content
ature, it is going to take reviewers new to the code a long time to work their way through it. and if it’s not possible to design the feature in bite-size chunks, it probably won’t be possible to review it that way either. we expect our reviewers to understand the code they approve for check-in, not to simply glance at it and say ok. finding the focus to digest a massive patch in the midst of multiple other demands will take time, even if you’ve done a perfect job. and since few of us are perfect, chances are that revisions will be requested. if you’ve got a large patch, let the likely reviewers know when they might expect to see it if your timeframe is tight, check out the mozilla roadmap for milestone dates and see if your feature will arrive at a time of furious activity. if so, and i...

Download Manager improvements in Firefox 3 - Archive of obsolete content
in addition, you can augment or replace the download manager's user interface by implementing the new nsidownloadmanagerui interface. note: these changes will require some modest revisions to code using the download manager; several methods have had minor changes. download manager interfaces nsidownloadmanager gives applications and extensions access to the download manager, allowing them to add and remove files to the download list, retrieve information about past and present downloads, and request notifications as to the progress of downloads. ...

GRE Registration - Archive of obsolete content
ally shipped a linux gre based on the mozilla suite. however, some linux distributors including red hat/fedora core ship /etc/gre.d/*.conf files with the mozilla suite rpms. xulrunner rpms/post-install scripts should register xulrunner as a gre by running <tt>xulrunner -register-global</tt> and not hand-create a .conf file. the <tt>-register-global</tt> flag has special fallback semantics so that multiple xulrunners of the same version can be installed without overwriting registration files. ...

Me - Archive of obsolete content
onfirstrun() accepts a callback which is called after installation. note that this mechanism is independent of the first-run page; in particular, the callback is not a load event listener or jquery ready callback. onfirstrun() may be called anywhere in your jetpack, but if it is called as the result of some asynchronous operation such as a timeout or xmlhttprequest, it is ignored. if you call it multiple times, all but the final call are ignored. funca function. it takes no paramenters. inside the function, this is the jetpack's content.function example jetpack.me.onfirstrun(function(){ jetpack.notifications.show("oh boy, i'm installed!");}); ...

Menu - Archive of obsolete content
regular expression, or integer. a string target is case-insensitively matched against the label, id, and xulid properties of menuitems. a regular expression target is tested against the label, id, and xulid properties of menuitems. an integer target indicates a zero-based index within a menu. integer targets can be negative: -1 indicates the last item in a menu, -2 the second-to-last, and so on. multiple items in a menu may match a target, but action is only ever taken on the first matching item. examples before running any examples, import the api from the future: jetpack.future.import("menu"); snippets add a single, static menuitem to the jetpack menu that doesn't do anything: jetpack.menu.add("two drink holders and a captain's chair"); add a menuitem to the jetpack menu that displays the cur...

jspage - Archive of obsolete content
(o,m))){if(!p){return document.id(o,r); }q.push(o);}o=o[l];}return(p)?new elements(q,{ddup:false,cash:!r}):null;};var e={html:"innerhtml","class":"classname","for":"htmlfor",defaultvalue:"defaultvalue",text:(browser.engine.trident||(browser.engine.webkit&&browser.engine.version<420))?"innertext":"textcontent"}; var b=["compact","nowrap","ismap","declare","noshade","checked","disabled","readonly","multiple","selected","noresize","defer"];var k=["value","type","defaultvalue","accesskey","cellpadding","cellspacing","colspan","frameborder","maxlength","readonly","rowspan","tabindex","usemap"]; b=b.associate(b);hash.extend(e,b);hash.extend(e,k.associate(k.map(string.tolowercase)));var a={before:function(m,l){if(l.parentnode){l.parentnode.insertbefore(m,l); }},after:function(m,l){if(!l.parentnode){retur...

Modularization techniques - Archive of obsolete content
nsifactory **afactory); // returns whether the dll can be unloaded now. extern "c" ns_export prbool nscanunload(); the implementation of nsgetfactory() in the simplest case is nearly identical to that of getsamplefactory() in our previous example. you only need to verify that the class id passed in is the correct one for the factory you implement. if your dll contains multiple factories, you'll need to add conditional code to determine which one to return. nscanunload() is an optional, but useful function. if implemented, it allows the nsrepository to free up memory by unloading dlls it is no longer using when freelibraries() is called. the implementation takes into consideration two things when deciding whether or not a dll can be unloaded: whether any of its factori...

New Security Model for Web Services - Archive of obsolete content
drop an access file into the root directory of the web server to allow access. delegation with mixed ownership independent owners of subdirectories cannot grant web script access to these subdirectories without getting the owner of the root directory to post a delegating access file. normally a server will be either inside or outside of a firewall, so this is not a problem. where a server spans multiple owners, the alternative would be to scan all directories in the path looking for a web scripts access file, which seems undesirable. on the other hand, perhaps it is not so bad, since it permits independent management in domains where the top level owner may not care about providing access to web services. adjustments as this new model is applied to soap, and potentially document.load or xml-re...

Configuration - Archive of obsolete content
turns the hotkey history navigation (alt+left, alt+right and alt+home) on or off for this web app: yes or no splashscreen filename of an html page to be displayed while the app is loading. the file must be located in the web app home directory: splashscreen.html include uris that should be opened in the web app, rather than in the default browser. an asterisk is used to match any string. separate multiple uris with commas: *google.com, *yahoo.com exclude urls that should be opened in the default browser, rather than in the web app. syntax is the same as for include. trayicon indicates that a system tray (notification area) icon should be displayed for the application on windows: yes or no. iconic specifies that the application should be opened in iconic state. currently support only on windows in ...

Space Manager Detailed Design - Archive of obsolete content
the caller can reallocate the collection and try again. check the size of the collection again, if there is no room left then estimate the number of items requires as the current count + twice the number of bands below the band in question plus one. create a new trapezoid in the band collection that has a region corresponding to the reference band rect, marked as occupied by either a single or multiple frames. move to the next band after walking all of the band data, se if we have reached the rightedge of the band. if not, then check for space in the band collection if there is no room left, then set the count to the current count plus 1 and return an error. otherwise, create another entry in the band collection, marked as available, and with a rect corresponding to the area remain in in ...

SpiderMonkey coding conventions - Archive of obsolete content
ercase, underscore-separated or intercaps names, e.g., str_indexof. and library-private and static data use underscores, not intercaps (but library-private data do use a js_ prefix). scalar type names are lowercase and js-prefixed: jsdouble. aggregate type names are js-prefixed and mixed-case: jsobject. macros are generally all_caps and underscored, to call out potential side effects, multiple uses of a formal argument, etc. linkage dll entry points have their return type expanded within a js_public_api() macro call, to get the right windows secret type qualifiers in the right places for all build variants. dll entry points that are not public apis use js_friend_api() instead. ...

Actionscript Performance Tests - Archive of obsolete content
abc. the runtests.py test harness works by parsing the abc stdout for lines like: 'metric time 566'. the testconfig.txt file defines groups of tests to run (e.g. sunspider, scimark, language). by default the time for each test is output. use the --memory flag to capture the maximum private bytes memory (high water mark) for a test. by default each test is run a single time. to run each test multiple times use the --iterations flag. when the number of iterations is greater than 2 all times are displayed in [], faster time is displayed in the output column, and the 95% confidence interval is calculated. the 95% confidence interval is the calculated percentage of the mean value to fall within 95% of the measured results. for example if the mean is 100 and the 95% confidence interval is 2%, 9...

Running Tamarin acceptance tests - Archive of obsolete content
ure_cache_gqcn;avmfeature_safepoints;avmfeature_swf12;avmfeature_swf13;avmtweak_exact_tracing; running acceptance tests --androidthreads sets the number of threads to the number of phones found via usb. running with 2 or more phones uses threads to run tests in parallel and reduces running times dramatically. you must, in any case, at least use --androidthreads or --threads=1 (or will fail due to multiple tests running). $ cd tamarin-redux/test/acceptance $ ./runtests.py --androidthreads note on using an emulator: the emulator does seem to support hardware floating point but gives a buserror when running avmshell -darm_vfp. it's unreliable, losing its adb connection frequently. an emulator is ok for testing a few abc files but for any consistency a real device is better. ...

Running Tamarin performance tests - Archive of obsolete content
s 65.0 68.0 -4.4 sunspider/bitops-3bit-bits-in-byte.as 12.0 13.0 -7.7 sunspider/bitops-bits-in-byte.as 36.0 36.0 0.0 by default tests sunspider and sunspider-as3 (optimized for as3) and run. other tests may be specified by selecting ./runtests.py -c [misc,scimark,jsbench]. also for better accuracy tests may be run multiple times. specifying ./runtests.py -i 10 will run each tests 10 time and use the fastest result. if more than 2 repetitions are specified the 95% percentile confidence rating is calculated. the confidence rating measures the percentage of the mean 95% of the results were within the range. performance test options there are a variety of options available with runtests.py - here is the help text follo...

Tuning Pageload - Archive of obsolete content
at all content.notify.backoffcount controls how many times that happens for a given page (the default is arbitrarily many times). once the backoff count is reached, no more rendering model construction till after the whole page is parsed. content.maxtextrun controls the maximum length of data in a textnode. so if you have more than content.maxtextrun characters of text in a row, we'll create multiple textnodes for it. this is an optimization designed to prevent long text from ending up being o(n^2). it's also really a bug per the dom spec and we should stop doing it... ...

Elements - Archive of obsolete content
ding is attached to contains content, the default content will be ignored. if the element does not contain content, the default content will be added. id - the id attribute is a document-unique identifier. includes - the includes attribute can be used to indicate that only certain content should be placed at the insertion point specified by the children element. its value can be a tag name or multiple tag names separated by the pipe character ("|"). a child can only be placed within the insertion point if it is matched by the value in the includes attribute. only immediate children are matched against the selector. for example, an xml fragment <customelement><foobar><hoge/></foobar></customelement> with an binding definition <binding id="customelement"><content><xul:box><children includes="hog...

Creating XPI Installer Modules - Archive of obsolete content
n this case the barley.jar we want to have installed in the mozilla/bin/chrome/ directory) and an install script that guides the installation process. under the chrome/ directory, you'll notice that in addition to the package subdirectories, there are now also a handful of jar files, or java archives (see figure below). jar is a file format based on the zip file format and is used for aggregating multiple files into a single file. these archives are redundant with the subdirectories: mozilla now installs both the compressed and uncompressed versions of the ui, though you can change this when you build mozilla yourself. chrome/ us/ us.jar chatzilla/ chatzilla.jar chrome.rdf chromelist.txt classic/ classic.jar comm/ comm.jar content-packs/ content-packs.jar embed-sample/ ...

patch - Archive of obsolete content
ksum stored in the gdiff file, patch returns an error without applying the patch. after patch applies a patch, it compares a checksum.of the resulting file against a checksum stored in the gdiff file. if the checksums do not match, the original version of the file is preserved, the patched version of the file is discarded, and an error code is returned. any single installation process can apply multiple patches to the same file. if performinstall indicates that a reboot is necessary to complete the installation, patch may not work in subsequent xpinstall processes until the reboot is performed. ...

setPackageFolder - Archive of obsolete content
urns none. description the setpackagefolder method to set the default package folder that is saved with the root node. when the package folder is set, it is used as the default for forms of addfile and other methods that have an optional localdirspec parameter. you should only call this method once, and you should always call it immediately after you call initinstall. if you call setpackagefolder multiple times, the last folder set is the folder that is saved in the client version registry and used as the default for other installations. ...

allownegativeassertions - Archive of obsolete content
« xul reference home allownegativeassertions type: boolean valid on any element that has a datasources attribute. when multiple datasources are used, one may override an assertion from another. this attribute, if true, which is the default, allows a datasource to negate an earlier assertion. ...

browser.type - Archive of obsolete content
n a web browser, this would be the element that displays the web page. the window for the primary content can be retrieved more conveniently using window.content. content-targetable one browser among many for content. the content that is loaded inside the browser is not allowed to access the chrome above it. this is the preferred value for any browser element in an application, which will use multiple browsers of equal privileges, and is unselected at the moment. chrome (default behaviour): a browser, intended to be used for loading privileged content using a chrome:// uri. don't use for content from web, as this may cause serious security problems! see also more information in the xul tutorial and iframe ...

class - Archive of obsolete content
« xul reference home class type: string the style class of the element. multiple classes may be specified by separating them with spaces. ...

coalesceduplicatearcs - Archive of obsolete content
« xul reference home coalesceduplicatearcs type: boolean valid on any element that has a datasources attribute. when multiple datasources are used, one may override an assertion from another. this attribute, if true, which is the default, allows a datasource to negate an earlier assertion. ...

modifiers - Archive of obsolete content
keys will map to other keys on platforms that do not have them. shift: the shift key. alt: the alt key. on the macintosh, this is the option key. on macintosh this can only be used in conjunction with another modifier, since alt+letter combinations are reserved for entering special characters in text. meta: the meta key. on the macintosh, this is the command key. control: the control key. ...

multiline - Archive of obsolete content
« xul reference home multiline type: boolean if true, the textbox displays multiple lines. if the user presses enter, a new line is started. if false, the textbox only allows entry of one line. ...

searchSessions - Archive of obsolete content
the following values are possible, although custom components may be installed which add others. ...

seltype - Archive of obsolete content
« xul reference home seltype type: one of the values below used to indicate whether multiple selection is allowed. single only one row may be selected at a time. (default in listbox and richlistbox.) multiple multiple rows may be selected at once. (default in tree.) for trees, you can also use the following values: cell individual cells can be selected text rows are selected; however, the selection highlight appears only over the text of the primary column. for richlistbox, this is new in firefox 3.5. ...

template - Archive of obsolete content
if this attribute is not specified, there should be a template element directly inside the node. ...

tree.onselect - Archive of obsolete content
« xul reference home onselect type: script code this event is sent to a tree when a row is selected, or whenever the selection changes. the user can select multiple rows by holding down shift or control and clicking on a row. the onselect event will be sent for each item added to or removed from the selection. see the tree selection page on the tutorial for more information. ...

Attribute (XUL) - Archive of obsolete content
e inactivetitlebarcolor increment index inputtooltiptext insertafter insertbefore instantapply inverted iscontainer isempty key keycode keytext label lastpage lastselected last-tab left linkedpanel max maxheight maxlength maxpos maxrows maxwidth member menu menuactive min minheight minresultsforpopup minwidth mode modifiers mousethrough movetoclick multiline multiple name negate newlines next noautofocus noautohide noinitialfocus nomatch norestorefocus object observes onbeforeaccept onbookmarkgroup onchange onclick onclosetab oncommand oncommandupdate ondialogaccept ondialogcancel ondialogclosure ondialogextra1 ondialogextra2 ondialoghelp onerror onerrorcommand onextra1 onextra2 oninput onload onnewtab onpageadvanced onpagehi...

XUL Events - Archive of obsolete content
own keypress the keypress event is sent to an element that has the focus when a key is pressed and released. when the user presses a key, the keydown event is sent first, followed by the keypress event and then the keyup event. in a textbox, a user can normally hold down a key to repeat a character in this case, multiple sets of key events are sent (as if the user pressed the same key repeatedly). attribute: onkeypress keyup the keyup event is sent to an element that has the focus when a key is released. attribute: onkeyup load ...

Reading from Files - Archive of obsolete content
acter encoding. this means that if a character within the file occupies several bytes, it will converted into a single character when read. this is done automatically as long as you specify the 'text' flag to nsiscriptableio.newinputstream(). the default character encoding is utf-8 which means that characters below value 128 will occupy a single byte whereas characters above value 128 will occupy multiple bytes, depending on their value. however, a number of other character encodings are available; see reading other character encodings below for details about reading text in other encodings. there are several methods available to read from an input stream. the two most common for text files are the readstring and readline methods for reading a string and a line from the file respectively. var file...

Writing to Files - Archive of obsolete content
ated for the file 'myinfo.txt'. the writestring method is called to write a single string to the file, supplied as an argument to the method. finally, the stream is closed by calling the stream's close method. you should ensure that the file is closed, so that the data is properly written and that the file can be reopened for reading later. to write additional strings, call the writestring method multiple times. writing other character encodings the default character encoding is utf-8. if you want to write using a different encoding, you can specify a third argument to nsiscriptableio.newoutputstream() which specifies the encoding. this example opens a file using the utf-16 encoding. var stream = io.newinputstream(file, "text", "utf-16"); this third argument is not needed to write using utf-8. as...

How to implement a custom XUL query processor component - Archive of obsolete content
query processor is very simple. a few explanatory notes: we are using a the getbindingfor rather than getbindingobjectfor to simplify the code. the variable passed into getbindingfor still has the "?" prepended to it, so be sure to handle it appropriately. we are not handling any datasources, but instead hard code the datasource in the component. you could easily extend this sample to handle multiple datasources by checking the datasources value in getdatasource and initializeforbuilding. we do not make use of any <query/> or <rule/> elements in the xul template block. these could be used to support filtering the datasource. ...

Introduction to XUL - Archive of obsolete content
mework. that's been done, and is a great deal of work. we intend to provide a subset of cross-platform functionality suitable for building network applications like browsers, leveraging the cross-platform functionality already built into gecko, mozilla's html layout engine. the term "cross-platform ui" is somewhat misleading. ui designers will be able to create ui descriptions which will work on multiple platforms. but proper ui descriptions which take into account various platforms' differing ideas about proper placement of such things as dialog buttons will require some platform-specific work. a single xul specification can only cross-platform to a degree. ui designers and build engineers will need to maintain separate, platform-specific versions of at least some xul documents. "xptoolkit" is ...

getSelectedItem - Archive of obsolete content
the argument index specifies the index in the list of the selected items, not the row number of the item. ...

loadGroup - Archive of obsolete content
they are either appended or replaced depending on the state of the preference browser.tabs.loadgroup. the argument should be an array of objects, one for each document to load. the objects may be defined in script and contain a uri property for the url of the page to load. ...

ContextMenus - Archive of obsolete content
just set the context attribute on those elements you want the context menu to apply to. one technique is to attach a context menu to an entire document area. for instance, the firefox browser applies a single context menu to the browser area which displays web pages. for example, the following will attach a context menu with the id 'contentareacontextmenu' to a browser element: <brows...

Menus - Archive of obsolete content
"file-menu" label="file"> ... </menu> <menu id="tools-menu" label="tools"> ... </menu> <menu id="help-menu" label="help"> ... </menu> </menubar> it's possible to place other elements on a menubar, but remember that they will not appear on a macintosh. so you should ensure that the functionality of these elements is avialable elsewhere. or, you could write code that handles multiple platforms in different ways. if you do place other elements on a menubar, you may wish to align them on the far side rather than next to the other menus. you can do this by adding a flexible spacer. <menubar id="sample-menubar"> <menu id="file-menu" label="file"> ... </menu> <spacer flex="1"/> <image src="logo.png"/> </menubar> in this example, a logo image is placed on the end of ...

PopupEvents - Archive of obsolete content
menu using the addeventlistener method. this will cause the filemenuopened function to be called when the popupshown event is fired on the 'file' menu. the filemenuopened function first checks that the target of the event is the right popup and returns early if not. next, the popupshown event listener is removed again. we need to make sure to do this to ensure that the event listener isn't added multiple times. finally, we use a similar technique as the openfilemenu function to open the 'open' submenu. the result is a button that opens both the outer menu and the inner menu. the popuphiding event when a popup is closed, the popuphiding event is fired on the popup just before it is removed from the screen. a listener for the popuphiding event can be used to remove or hide items on the popup again,...

currentIndex - Archive of obsolete content
used trees won't show a focus ring, naturally. for unfocused trees, the (undrawn) caret's position can still be obtained by this property. if the caret isn't present for any row (for example, because the tree has never been focused), the value will be -1. you cannot rely on this property to change or determine a tree selection, except for trees with seltype="single". (all trees have seltype="multiple" by default.) to reliably change or determine a selection, instead use the nsitreeselection interface methods available via tree.view.selection. example // one way of retrieving the text of a cell. <script language ="javascript"> function treerowclicked(){ var tree = document.getelementbyid("my-tree"); var selection = tree.view.selection; var celltext = tree.view.getcelltext(...

currentItem - Archive of obsolete content
...

listbox.currentIndex - Archive of obsolete content
« xul reference currentindex type: integer set to the index of the currently focused item in the list. if no item is focused, the value will be -1. (or, on some platforms, typeof(listboxcurrentindex) will be undefined) in a single selection list, the current index will always be the same as the selected index. in a multiple selection list, the currently focused row may be modified by the user without changing the selection by pressing the control key and pressing the cursor keys to navigate. ...

Additional Template Attributes - Archive of obsolete content
listbox here does not have any children, although it may do. if you did add children, they act just like the static content as if the template was present. however, it is possible to use different static content for each usage, even though the template is shared. the datasources and ref attributes also differ for each usage, so it is possible to use a shared template to display the same structure multiple times but with different starting nodes in each case. the generated content is always inserted into the root node, in this example the listbox, not inside the template. declaring the container and member variables normally, the container and member variables are determined by the template builder automatically. the container or starting node variable is specified in the <content> tag inside a q...

Containment Properties - Archive of obsolete content
df/e"/> <rdf:li rdf:resource="http://www.xulplanet.com/rdf/f"/> </rdf:seq> the effect is that there are five results instead of three. three generated via the use of the containment attribute, and two generated because the starting resource is a container with two children. effectively, the containment attribute allows you to specify additional predicates that provide children. you can specify multiple predicates in the containment attribute by separating them with spaces. each will be applied in sequence. the containment attribute also applies to member tests when using the extended template syntax. that is, in addition to iterating over the children, it will iterate over the predicates listed in the containment attribute. for example, the following is equivalent to the previous example, excep...

RDF Modifications - Archive of obsolete content
need to change. however, the builder can use a much simpler process for recalculating the results. instead of regenerating the content for a result, the builder just looks for attribute values that involve the ?name variable. those attributes are just recomputed, substituting the new value for ?name instead. this process is repeated for each result that would be affected. when a template involves multiple queries, the same process is used for each query as with one query. as when generating the results initially, only the highest matching query needs to be applied. the only extra complication to deal with in the multiple query case is when a particular result's member resource already matches a query, yet the new rdf triple would cause an earlier query to match. since the earlier query takes prece...

SQLite Templates - Archive of obsolete content
esults, six listitems will be generated. the labels have the special value '?name'. the syntax with the question mark is similar as with the other query types. it means, substitute the attribute value with the value of a column from the result. in this case, '?name' means replace this with the value of the name column. the effect is a listbox containing the names from the database. you can return multiple columns or filtered data by using a more complex query. <vbox datasources="profile:userdata.sqlite" ref="*" querytype="storage"> <template> <query> select name, email from myfriends where age >= 30 </query> <action> <hbox uri="?"> <label value="?name"/> <label value="?email"/> </hbox> </action> </template> </vbox> this template displays the ...

Sorting Results - Archive of obsolete content
oot node of the template. the sortactive attribute is not needed. in this example, the list of people is sorted ascending by name. <listbox datasources="people2.xml" ref="*" querytype="xml" sort="?name" sortdirection="ascending"> <template> <query expr="*/*"/> <action> <listitem uri="?" label="?name"/> </action> </template> </listbox> it will often be the case that multiple items have the same value, especially for larger amounts of data. you can specify multiple sort keys to further define how a sort should be handled in the case where the values for the first sort key are the same. to do this, just add another key after the first separated by a space, as in the following: sort="?name ?gender" in this example, results will be sorted by name, followed by gender for...

Special Condition Tests - Archive of obsolete content
the first of these tests can be used to test if an element is a container or not. to use this test, place an iscontainer attribute on a <rule>. the iscontainer attribute should be set to true if you only want to match containers, and false if you only want to match non-containers. a container is an rdf container such as a seq. the iscontainer attribute makes it easier to handle recursive c...

Using Recursive Templates - Archive of obsolete content
all nodes that have children to indicate that the node contains generated children as well as whether the node is empty. these hints are used for trees, but they can also be used in a stylesheet to provide a different appearance for containers with children, empty containers, as well as non-containers. in this example, both the parent groups and child people are displayed the same. you could use multiple rules as well, in order to generate different output for each level. in this next example, an assign element is used to assign the local name of the node is to the variable ?type. in an xpath expression, the period refers to the context node. for an assign element, the context is the the result node. the local-name function retrieves the tag of the element without the namespace prefix. in this ca...

XML Templates - Archive of obsolete content
be generated and repeated for each result, which in this case, is a listitem. the child of the action element has to have a uri attribute, although it does not have to be a direct child. the element with the uri attribute and its children will be copied once for each result. any elements between the action element and this element are only copied once. this is useful when recursive generation or multiple rules are used, and we'll see examples of why this is useful later. for an rdf query, the uri attribute specifies the member variable; for an xml query the member variable is always '?' so the value of the uri attribute for xml templates should always be the single question mark character as in this example. the label attribute has been set to a special value ?name. when a question mark characte...

Template Guide - Archive of obsolete content
es introduction rule compilation rdf template syntax result generation rdf query syntax actions recursive generation simple example bindings additional navigation filtering static content simple query syntax containment properties xml template syntax xml templates xml assignments sql template syntax sqlite templates common template syntax attribute substitution multiple rules using recursive templates building menus with templates special condition tests multiple queries using multiple queries to generate more results building trees with templates building trees building hierarchical trees template modifications template builder interface template and tree listeners rdf modifications additional topics sorting results additional template a...

Textbox (XPFE autocomplete) - Archive of obsolete content
s open. the open attribute is not present if the menu is closed. readonly type: boolean if set to true, then the user cannot change the value of the element. however, the value may still be modified by a script. searchsessions obsolete since gecko 26 type: space-separated list of session names set to a keyword indicating what type of data to look up for autocomplete. you may set multiple types by separating their names by spaces. the following values are possible, although custom components may be installed which add others. history: the user's url history is searched. obsolete since gecko 3 addrbook: the user's address book is searched. obsolete since gecko 3 ldap: the user's ldap directories are searched. obsolete since gecko 25 showcommentcolumn obsolete sinc...

The Joy of XUL - Archive of obsolete content
s will benefit from being migrated to xul because of the enhanced ui capabilities, consistent implementation of the specification across supported platforms, and access to native resources such as shared libraries and the local file system. whether you need to migrate an existing web application to the desktop, are looking for a technology that will enable you to easily port your applications to multiple platforms, or want to integrate your own cool features into the browser, xul warrants serious consideration. see also xul documentation on mdc, including the xul tutorial and the xul reference xul overlays xbl documentation: xbl introduction, xbl reference xpcom documentation xpconnect (scriptable components) documentation. see also http://www.mozilla.org/scriptable/ extensions documenta...

Adding Event Handlers to XBL-defined Elements - Archive of obsolete content
s the alt key. control the user must press the control key. meta the user must press the meta key. shift the user must press the shift key. accel the user must press the special modifier key that is usually used for keyboard shortcuts on their platform. if set, the handler is only called when the modifier is pressed. you can require multiple modifier keys by separating them with spaces. the following alternate syntax can be used when the code in a handler is more complex: <binding id="binding-name"> <handlers> <handler event="event-name"> -- handler code goes here -- </handler> </handlers> </binding> handlers example the following example adds some key handlers to create a very primitive local clipboard: example 1 ...

Adding HTML Elements - Archive of obsolete content
information has been left out for simplicity. a dialog with a check box example 2 : source view <html:p> click the box below to remember this decision. <html:p> <html:input id="rtd" type="checkbox"/> <html:label for="rtd">remember this decision</html:label> </html:p> </html:p> in this case, one p tag was used to place the text in and another was used to break apart the text into multiple lines. text outside of html blocks example 3 : source view <html:div> would you like to save the following documents? <html:hr/> </html:div> expense report 1 what i did last summer <button id="yes" label="yes"/> <button id="no" label="no"/> as can be seen in the image, the text inside the div tag was displayed but the other text (expense report 1 and what i did last summer) was not. ...

Adding Properties to XBL-defined Elements - Archive of obsolete content
ng the field element. often, fields would correspond to an attribute placed on the element such as label or disabled, but they do not have to. the name attribute on the field element is used to indicate the name of the field. you can use the name from a script to get and set the value. the example below creates a button which generates and stores a random number. you can retrieve this same number multiple times by getting the number property from the button. most of the work here is done in the oncommand handlers. later, we'll find out how to move this to xbl. xul: <box id="random-box" class="randomizer"/> <button label="generate" oncommand="document.getelementbyid('random-box').number=math.random();"/> <button label="show" oncommand="alert(document.getelementbyid('random-b...

Broadcasters and Observers - Archive of obsolete content
the value of the label attribute on the broadcaster changes, the observers will update the values of their label attributes also. we could continue with additional elements. as many elements as you want can observe a single broadcaster. you can also have only one if you wanted to but that would accomplish very little since the main reason for using broadcasters is to have attributes forwarded to multiple places. you should only use broadcasters when you need multiple elements that observe an attribute. below, some additional observers are defined: <broadcaster id="offline_command" label="offline" accesskey="f"/> <keyset> <key id="goonline_key" observes="offline_command" modifiers="accel" key="o"/> </keyset> <menuitem id="offline_menuitem" observes="offline_command"/> <toolbarbutton id="offlin...

Creating a Skin - Archive of obsolete content
-region: rect(80px 16px 96px 0); -moz-box-orient: vertical; } mozilla provides a custom style property -moz-image-region which can be used to make an element use part of an image. you can think of it as a clip region for the image. you set the property to a position and size within an image and the button will display only that section of the image. this allows you to use the same image for multiple buttons and set a different region for each one. when you have lots of buttons, with states for hover, active and disabled, this saves space that would normally be occupied by mutliple images. in the code above, we use the same image for each button, but set a different image region each one. if you look at this image (btn1.gif), you will notice that it contains a grid of smaller images, each one...

Input Controls - Archive of obsolete content
maxlength="8"/> multiline textbox the textbox examples above will create text inputs that can only be used for entering one line of text. html also has a textarea element for creating a larger text entry area. in xul, you can use the textbox element for this purpose as well -- two separate elements are not necessary. if you set the multiline attribute to true, the text entry field will display multiple rows. example 2 : source view <textbox multiline="true" value="this is some text that could wrap onto multiple lines."/> like the html textarea, you can use the rows and cols attributes to set the size. this should be set to the number of rows and columns of characters to display. our find files example let's add a search entry field to the find file dialog. we'll use the textbox ...

Install Scripts - Archive of obsolete content
th the adddirectory() and addfile() functions have various forms. the simplest takes only one argument, the directory from the installer to install to the assigned installation directory. adddirectory ( dir ); addfile ( dir ); example: adddirectory("findfile"); the example above will specify that the findfile directory from the installer archive should be installed. we can call these functions multiple times to install other files. next, we'll want to register the find files in the chrome system so that it can be used with a chrome url. this can be done with the registerchrome() function. it takes two arguments, the first is the type of chrome to register (content, skin or locale). the second is the directory containing the contents.rdf file to register. because the find files dialog contains c...

List Controls - Archive of obsolete content
chocolate chip" value="chocchip" /> <listitem label="raspberry ripple" value="raspripple" /> <listitem label="squash swirl" value="squash" /> </listbox> the example has been changed to display only 3 rows at a time. values have also been added to each item in the list. list boxes have some additional features, which will be described later. multi-column list boxes the listbox also supports multiple columns. each cell may have arbitrary content within it, although usually only text is used. when the user selects an item in the list, the entire row is selected. you cannot have a single cell selected. two tags are used to specify the columns in the listbox. the listcols element is used to hold the column information, each of which is specified using a listcol element. you will need one listcol...

Localization - Archive of obsolete content
nd semantics of a particular xml file, but they also let you declare entities. in the mozilla chrome system, you will find dtd files located in the locales subdirectory. you would normally have one dtd file (with an extension .dtd) per xul file. if you look in the chrome directory, you should see an archive for your language. (en-us.jar is the default for english.) you might have locale files in multiple languages, for example, us english (en-us) and french (fr). inside these archives, you will find the files that hold the localized text for each window. the structure of the archives is very similar to the directory structure used for skins. inside the archives, you would place the dtd files in which you declare entities. typically, you will have one dtd file for each xul file, usually with the ...

Modifying a XUL Interface - Archive of obsolete content
g yet. addbutton() then assigns the label 'a new button' to the button using the setattribute() function. finally the appendchild() function of the particular box found by getelementbyid() is called to add the button to it. at this point, the button is attached to a visible box, so it becomes visible as well. the button with the label "add" can be pressed multiple times and it will continue to add new buttons, each of which will have the label "a new button", and will only be distinguishable by their place as children in the box element with the id "abox". the createelement() function will create the default type of element for the document. for xul documents, this generally means that a xul element will be created. for an html document, an html e...

Numeric Controls - Archive of obsolete content
fault value of 0. the maximum value defaults to the special value infinity which means that there is no limit. other numeric textbox attributes the increment attribute may be used to specify by how much the value changes when the arrows are pressed. the default value is 1, but specifying a different value allows the number to change by a larger amount. for instance, the following example steps in multiples of 10. <textbox type="number" increment="10" max="100"/> this textbox steps in multiples of 10 from 0 to 100. since the min attribute was not specified, it defaults to 0. note that the user can still enter other values if they are typed in. the increment attribute only affects the arrow buttons. the user may also increment or decrement the value using this increment by using the up and down cur...