mozbrowserusernameandpasswordrequired
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowserusernameandpasswordrequired event is fired when the content within a browser <iframe> requires an http authentification. the embedder is supposed to retrieve the necessary credentials, usually using a dialog or a database of username/passwords, and then call authenticate() or cancel() as appropriate. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type descriptio...
... is a proxy server (true) or not (false). authenticate() a function that is called to enable the authentication to go ahead. it needs to take two parameters — the username and password to authenticate. cancel() a function that is called to cancel the authentication. ...

UI pseudo-classes - Learn web development
a keyboard activation). these basic pseudo-classes should be familiar to you now. more recently, the css selector level 3 and css basic ui level 3 added more pseudo-classes related to html forms that provide several other useful targetting conditions that you can take advantage of. we'll discuss these in more detail in the sections below, but briefly, the main ones we'll be looking at are: :required and :optional: targets required or optional form controls. :valid and :invalid, and :in-range and :out-of-range: target form controls that are valid/invalid according to form validation constraints set on them, or in-range/out-of-range. :enabled and :disabled, and :read-only and :read-write: target enabled or disabled form controls (e.g. with the disabled html attribute set), and read-write or ...
...asses discussed here are concerned with styling form controls based on their validation state (is their data valid, or not?) you'll learn much more about setting and controlling validation constraints in our next article — client-side form validation — but for now we'll keep things simple with regards to form validation, so it doesn't confuse things. styling inputs based on whether they are required or not one of the most basic concepts with regards to client-side form validation is whether a form input is required (it has to be filled in before the form can be submitted) or optional. <input>, <select>, and <textarea> elements have a required attribute available which, when set, means that you have to fill in that control before the form will successfully submit. for example: <form> <fi...
...re the form can be submitted) or optional. <input>, <select>, and <textarea> elements have a required attribute available which, when set, means that you have to fill in that control before the form will successfully submit. ...
...And 25 more matches

Index
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 plugin that provides additional algorithms or stores key or trust information) that implement the pkcs#11 interface. a core element of nss is freebl, a base library providing hash functions, big number calculations, and cryptographic algorithm...
...ates”), which also implements the pkcs#11 interface. on an organizational level the contents of the set are managed according to the mozilla ca policy. on a technical level the set is a binary software module. a cryptographic transaction, such as encryption or decryption related to a data exchange, usually involves working with the x.509 certs of your communication partners (peer). it's also required that you safely keep your own secret keys that belong to your own certificates. you might want to protect the storage of your secret keys with pbe. you might decide to modify the default trust provided by nss. all of this requires storing, looking up, and retrieving data. nss simplifies performing these operations by offering storage and management apis. nss doesn't require the programmer to mana...
...s#11 modules that have been registered to be used by nss. the file could be named secmod.db, but in newer database generations a file named pkcs11.txt is used. only nss is allowed to access and manipulate these database files directly; a programmer using nss must go through the apis offered by nss to manipulate the data stored in these files. the programmer's task is to initialize nss with the required parameters (such as a database), and nss will then transparently manage the database files. most of the time certificates and keys are supposed to be stored in the nss database. therefore, after initial import or creation, the programmer usually doesn't deal with their raw bytes. instead, the programmer will use lookup functions, and nss will provide an access handle that will be subsequently ...
...And 25 more matches

Client-side form validation - Learn web development
this is called client-side form validation, and helps ensure data submitted matches the requirements set forth in the various form controls. this article leads you through basic concepts and examples of client-side form validation. prerequisites: computer literacy, a reasonable understanding of html, css, and javascript. objective: to understand what client-side form validation is, why it's important, and how to apply various techniques to implement it. ...
... website security for an idea of what could happen; implementing server-side validation is somewhat beyond the scope of this module, but you should bear it in mind. what is form validation? go to any popular site with a registration form, and you will notice that they provide feedback when you don't enter your data in the format they are expecting. you'll get messages such as: "this field is required" (you can't leave this field blank). "please enter your phone number in the format xxx-xxxx" (a specific data format is required for it to be considered valid). "please enter a valid email address" (the data you entered is not in the right format). "your password needs to be between 8 and 30 characters long and contain one uppercase letter, one symbol, and a number." (a very specific data form...
... this is called form validation. when you enter data, the browser and/or the web server will check to see that the data is in the correct format and within the constraints set by the application. ...
...And 21 more matches

Index - Web APIs
signal read-only property of the abortcontroller interface returns an abortsignal object instance, which can be used to communicate with/abort a dom request as desired. 10 abortsignal api, abortsignal, dom, experimental, interface, reference the abortsignal interface represents a signal object that allows you to communicate with a dom request (such as a fetch) and abort it if required via an abortcontroller object. 11 abortsignal.aborted api, abortsignal, experimental, property, reference, aborted the aborted read-only property returns a boolean that indicates whether the dom request(s) the signal is communicating with is/are aborted (true) or not (false). 12 abortsignal.onabort api, abortsignal, event handler, experimental, fetch, property,...
... kind: some text or some file. 806 datatransferitem.type api, datatransferitem, html dom, html drag and drop api, property, reference, type, drag and drop the read-only datatransferitem.type property returns the type (format) of the datatransferitem object representing the drag data item. the type is a unicode string generally given by a mime type, although a mime type is not required. 807 datatransferitem.webkitgetasentry() api, datatransferitem, file system api, file and directory entries api, files, method, non-standard, offline, reference, drag and drop, getasentry if the item described by the datatransferitem is a file, webkitgetasentry() returns a filesystemfileentry or filesystemdirectoryentry representing it. if the item isn't a file, null is retur...
...() api, dom, method, obsolete, reference returns a boxobject (x, y, width, height) for a specified element. 919 document.getelementbyid() api, dom, document, elements, method, reference, web, getelementbyid, id the document method getelementbyid() returns an element object representing the element whose id property matches the specified string. since element ids are required to be unique if specified, they're a useful way to get access to a specific element quickly. 920 document.getelementsbyclassname() api, dom, dom element methods, gecko, html5, method, reference returns an array-like object of all child elements which have all of the given class names. 921 document.getelementsbyname() api, dom, document, html, method, reference ...
...And 13 more matches

JavaScript Daemons Management - Archive of obsolete content
-1 : 1; var bbreak = odmn.task.call(odmn.owner, odmn.index, odmn.length, odmn.backw) === false, bend = odmn.isatend(), binvert = odmn.reversals > 0; if (bend && !binvert || bbreak) { odmn.pause(); return false; } if (bend && binvert) { odmn.backw...
...you could safely remove all or some of them, * depending on your needs. if you want to remove them and are using the daemon.safe subsystem you * should also remove the daemon.safe global object methods that require them. **/ daemon.construct = function (aargs) { var odmn = new this.blank(); ...
...is(octx, octx.perform, nrate || null, nlen || null, octx.create || null, octx.prepare || null); }; /* warning! calling daemon.incorporate(@func) will modify the @func.prototype property! ...
...And 12 more matches

Codecs used by WebRTC - Web media technologies
the webrtc api makes it possible to construct web sites and apps that let users communicate in real time, using audio and/or video as well as optional data and other information. to communicate, the two devices need to be able to agree upon a mutually-understood codec for each track so they can successfully communicate and present the shared media. this guide reviews the codecs that browsers are required to implement as well as other codecs that some or all browsers support for webrtc. containerless media webrtc uses bare mediastreamtrack objects for each track being shared from one peer to another, without a container or even a mediastream associated with the tracks. which codecs can be within those tracks is not mandated by the webrtc specification. however, rfc 7742 specifies that all webrtc...
...tc-compatible browsers must support vp8 and h.264's constrained baseline profile for video, and rfc 7874 specifies that browsers must support at least the opus codec as well as g.711's pcma and pcmu formats. these two rfcs also lay out options that must be supported for each codec, as well as specific user comfort features such as echo cancelation. this guide reviews the codecs that browsers are required to implement as well as other codecs that some or all browsers support for webrtc. while compression is always a necessity when dealing with media on the web, it's of additional importance when videoconferencing in order to ensure that the participants are able to communicate without lag or interruptions. of secondary importance is the need to keep the video and audio synchronized, so that the m...
... pixels tall. it's encouraged that video be encoded at a frame rate and size no lower than that, since that's essentially the lower bound of what webrtc generally is expected to handle. sdp supports a codec-independent way to specify preferred video resolutions (rfc 6236. this is done by sending an a=imageattr sdp attribute to indicate the maximum resolution that is acceptable. the sender is not required to support this mechanism, however, so you have to be prepared to receive media at a different resolution than you requested. beyond this simple maximum resolution request, specific codecs may offer further ways to ask for specific media configurations. supported video codecs webrtc establishes a baseline set of codecs which all compliant browsers are required to support. some browsers may choo...
...And 12 more matches

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
hose types' pages. this element includes the global attributes. those with extra importance as it relates to <input> are highlighted. attributes for the <input> element include global html attributes and: attribute type or types description accept file hint for expected file type in file upload controls alt image alt attribute for the image type. ...
...le 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 required almost all boolean. a value is required or must be check for the form to be submittable size email, password, tel, text size of the control src image same as src attribute for <img>; address of image resource step numeric types incremental values that are valid. type all type of form control value all current value o...
...isabled a boolean attribute which, if present, indicates that the user should not be able to interact with the input. disabled inputs are typically rendered with a dimmer color or using some other form of indication that the field is not available for use. specifically, disabled inputs do not receive the click event, and disabled inputs are not submitted with the form. note: although not required by the specification, firefox will by default persist the dynamic disabled state of an <input> across page loads. use the autocomplete attribute to control this feature. form a string specifying the <form> element with which the input is associated (that is, its form owner). this string's value, if present, must match the id of a <form> element in the same document. if this attribute isn'...
...And 11 more matches

StringView - Archive of obsolete content
encoding). bufferview read only arraybufferview an arraybufferview containing the representation of the whole buffer as array of 8-bit, 16-bit, or 32-bit integers (depending on the chosen encoding). constructor syntax new stringview(input[, encoding[, startoffset[, length]]]) description create a new string-like object based upon an arraybuffer. arguments input (required) the argument the stringview is constructed from. it can be: another stringview a string a number an arraybuffer a typed array of uint8array, uint16array, or uint32array subclass any other kind of ordered object (like arrays, collections, etc.) if it is a number it will become the length of the new stringview; otherwise it will become its content. the following table shows the b...
...w1, "utf-16"); alert(mystringview1.buffer.bytelength); // 12 alert(mystringview2.buffer.bytelength); // 24 stringview constructor's methods makefrombase64() syntax stringview.makefrombase64(base64string[, encoding][, byteoffset][, length]) description returns a new instance of stringview constructed decoding a given base64-encoded string. arguments base64string (required) a base64-encoded string which will be decoded and copied into the new stringview object. encoding optional a string expressing the encoding type. for possible values see here. byteoffset optional a number expressing the start offset in bytes of the new stringview. if not specified (or specified as null) it will be considered as 0. length optional a number expressing the leng...
.... if characterslength is 0 or negative, substr returns an empty string. if characterslength is omitted, substr extracts characters to the end of the string. foreachchar() syntax stringview.foreachchar(callback[, thisobject[, characteroffset[, characterslength]]]) description repeatedly invokes a function for each character of the stringview. arguments callback (required) a function to be invoked for each character. it will be called with four arguments, expressing respectively: charcode a number expressing the unicode representation of the actual character (codepoint). characteroffset a number expressing the position, in codepoints, of the passed character. rawoffset a number expressing the position, in codepoints parts, of the pas...
...And 10 more matches

sslfnc.html
n ssl export policy functions must also be called during nss initialization. nss_init nss_initreadwrite nss_nodb_init ssl_optionsetdefault ssl_optiongetdefault ssl_cipherprefsetdefault ssl_cipherprefgetdefault ssl_clearsessioncache ssl_configserversessionidcache ssl_configmpserversidcache ssl_inheritmpserversidcache nss_init sets up configuration files and performs other tasks required to run network security services. database files are opened read-only. syntax #include "nss.h" secstatus nss_init(char *configdir); parameter this function has the following parameter: configdir a pointer to a string containing the pathname of the directory where the certificate, key, and security module databases reside. returns the funct...
...mestic, international, and french versions of software products with encryption features. ssl_cipherpolicyset sets policy flags for individual cipher suites, one at a time. this may be helpful if you have an export license that permits more or fewer capabilities than those allowed by the other export policy functions. nss_initreadwrite sets up configuration files and performs other tasks required to run network security services. unlike nss_init, nss_initreadwrite provides both read and write access to database files. syntax #include "nss.h" secstatus nss_initreadwrite(char *configdir); parameter this function has the following parameter: configdir a pointer to a string containing the pathname of the directory where the certificate, key, and secur...
...mime operations. before calling nss_initreadwrite, your program must call pr_init. the policy flags for all cipher suites are turned off by default, disallowing all cipher suites. therefore, an application cannot use nss to perform any cryptographic operations until after it enables appropriate cipher suites by calling one of the ssl export policy functions. nss_nodb_init performs tasks required to run network security services without setting up configuration files. important: this nss function is not intended for use with ssl, which requires that the certificate and key database files be opened. syntax #include "nss.h" secstatus nss_nodb_init(char *reserved); parameter this function has the following parameter: reserved should be null.. ...
...And 9 more matches

How to structure a web form - Learn web development
/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. ...
...heckbox-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. ...
...ologies can have trouble handling them. in the case of multiple labels, you should nest a widget and its labels inside a single <label> element. ...
...And 8 more matches

HTTP Index - HTTP
troubleshooting simply put, the origin making the request does not match any of the origins permitted by the access-control-allow-origin header. ...
...all cors requests must have an origin header. 26 reason: cors preflight channel did not succeed cors, corspreflightdidnotsucceed, cross-origin, error, http, https, messages, reasons, security, console, troubleshooting the cors request requires preflight, preflighting could not be performed. ...
...nd a proxy server. it authenticates the request to the proxy server, allowing it to transmit the request further. 170 proxy-authorization http, http header, reference, request header, header the http proxy-authorization request header contains the credentials to authenticate a user agent to a proxy server, usually after the server has responded with a 407 proxy authentication required status and the proxy-authenticate header. 171 public-key-pins hpkp, http, reference, security, header the http public-key-pins response header associates a specific cryptographic public key with a certain web server to decrease the risk of mitm attacks with forged certificates. if one or several keys are pinned and none of them are used by the server, the browser will not acc...
...And 8 more matches

Index - Archive of obsolete content
nd summary 1 archive of obsolete content archive, landing here at mdn, we try to avoid outright deleting content that might be useful to people targeting legacy platforms, operating systems, and browsers. perhaps your target audience is people that are using older hardware, for example, and can't upgrade to the latest and greatest browsers. or for "reasons," your company is required to use very old software and you need to build web content that runs on that software. or perhaps you're just curious about the history of an obsolete feature or api, and how it worked. 2 .htaccess ( hypertext access ) 301 redirect, cache control, custom error pages, htaccess, permanent redirect, redirect file accessing : htaccess files can be opened using any text editor, li...
...fx --force-mobile. enables you to run and test add-ons for firefox mobile (aka fennec). 139 jpmignore jpm no summary! 140 package.json commonjs, jpm, sdk, add-on, package.json the package.json file contains manifest data for your add-on, providing not only descriptive information about the add-on for presentation in the add-ons manager, but other metadata required of add-ons. 141 tutorials add-on sdk no summary! 142 add a context menu item add-on sdk, firefox, guide no summary! 143 add a menu item to firefox add-on sdk no summary! 144 adding a button to the toolbar add-on sdk no summary! 145 annotator add-on sdk no summary! 146 creating annot...
...ns didn't work to build on osx 10.6.7. 455 layout faq needsupdate no summary! 456 layout system overview gecko layout is primarily concerned with providing a presentation to an html or xml document. this presentation is typically formatted in accordance with the requirements of the css1 and css2 specifications from the w3c. presentation formatting is also required to provide compatibility with legacy browsers (microsoft internet explorer and netscape navigator 4.x). the decision about when to apply css-specified formatting and when to apply legacy formatting is controlled by the document's doctype specification. these layout modes are referred to as 'standards' and 'navquirks' modes. (doctype and modes are explained in more detail in article mozilla's doct...
...And 7 more matches

Elements - Archive of obsolete content
a xbl binding can add anonymous content, fields, properties, methods, and event handlers to html/xml elements. a single xbl binding can be attached to an element by using style sheets or by sc...
...-8,%3c%3fxml%20version%3d%221.0%22%3f%3e%0a%3cbindings%20id%3d%22xbltestbindings%22%20xmlns%3d%22http%3a//www.mozilla.org/xbl%22%3e%0a%20%20%3cbinding%20id%3d%22xbltest%22%3e%3ccontent%3epass%3c/content%3e%3c/binding%3e%0a%3c/bindings%3e%0a); } since data: urls don't support fragment identifiers, the first binding found in the embedded xml is used instead. keep in mind that the binding is still required to have an id even though you're not referencing it. in addition, data: urls are only supported from chrome code (in other words, from the application or an extension). note: the normal same-origin policy is used for web sites; they can only link to xbl files on the same domain, or within the chrome. for clarity's sake, here's what the embedded xml in the previous example looks like: <?xml ver...
...l be blocked, but the anonymous content and styling will be still used. given that the css declarations should be always used - unless you need to add bindings at runtime to individual elements. a binding element may contain a resources tag, a content tag, a implementation tag and a handlers tag. id - the id attribute is a document-unique identifier. for the binding element, this attribute is required, since it is used to attach bindings. extends - the extends attribute is used to specify the url of a binding that this binding inherits from (see inheritance of implementations). the url specifies a particular binding document. the # notation must be used to point to a specific binding id within a binding document. note that content cannot be inherited, only behavior. display - this attribute ...
...And 7 more matches

An overview of NSS Internals
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 plugin that provides additional algorithms or stores key or trust information) that implement the pkcs#11 interface. a core element of nss is freebl, a base library providing hash functions, big number calculations, and cryptographic algorithm...
...ates”), which also implements the pkcs#11 interface. on an organizational level the contents of the set are managed according to the mozilla ca policy. on a technical level the set is a binary software module. a cryptographic transaction, such as encryption or decryption related to a data exchange, usually involves working with the x.509 certs of your communication partners (peer). it's also required that you safely keep your own secret keys that belong to your own certificates. you might want to protect the storage of your secret keys with pbe. you might decide to modify the default trust provided by nss. all of this requires storing, looking up, and retrieving data. nss simplifies performing these operations by offering storage and management apis. nss doesn't require the programmer to mana...
...s#11 modules that have been registered to be used by nss. the file could be named secmod.db, but in newer database generations a file named pkcs11.txt is used. only nss is allowed to access and manipulate these database files directly; a programmer using nss must go through the apis offered by nss to manipulate the data stored in these files. the programmer's task is to initialize nss with the required parameters (such as a database), and nss will then transparently manage the database files. most of the time certificates and keys are supposed to be stored in the nss database. therefore, after initial import or creation, the programmer usually doesn't deal with their raw bytes. instead, the programmer will use lookup functions, and nss will provide an access handle that will be subsequently ...
...And 7 more matches

WAI-ARIA basics - Learn web development
t is going on. here we'll show how to use it at a basic level to improve accessiblity. prerequisites: basic computer literacy, a basic understanding of html, css, and javascript, an understanding of the previous articles in the course. objective: to gain familiarity with wai-aria, and how it can be used to provide useful additional semantics to enhance accessibility where required. what is wai-aria? let's start by looking at what wai-aria is, and what it can do for us. a whole new set of problems as web apps started to get more complex and dynamic, a new set of accessibility features and problems started to appear. for example, html5 introduced a number of semantic elements to define common page features (<nav>, <footer>, etc.) before these were available, devel...
...f html5 structural elements e.g. role="navigation" (<nav>) or role="complementary" (<aside>), but there are also others that describe different pages structures, such as role="banner", role="search", role="tabgroup", role="tab", 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...
...is used to create a complex ui-feature, or a native control is greatly enhanced/changed via javascript, accessibility can suffer — screenreader users will find it difficult to work out what the feature does if there are no semantics or other clues. in these situations, aria can help to provide what's missing with a combination of roles like button, listbox, or tabgroup, and properties like aria-required or aria-posinset to provide further clues as to functionality. one thing to remember though — you should only use wai-aria when you need to! ideally, you should always use native html features to provide the semantics required by screenreaders to tell their users what is going on. sometimes this isn't possible, either because you have limited control over the code, or because you are creating...
...And 6 more matches

<input type="email"> - HTML: Hypertext Markup Language
alue 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 the user did not enter a value or that the value ...
...g. constraint validation is only applied when the value is changed by the user. multiple a boolean attribute which, if present, indicates that the user can enter a list of multiple e-mail addresses, separated by commas and, optionally, whitespace characters. see allowing multiple e-mail addresses for an example, or html attribute: multiple for more details. note: normally, if you specify the required attribute, the user must enter a valid e-mail address for the field to be considered valid. however, if you add the multiple attribute, a list of zero e-mail addresses (an empty string, or one which is entirely whitespace) is a valid value. in other words, the user does not have to enter even one e-mail address when multiple is specified, regardless of the value of required. pattern the patter...
...ted technical issues with your content. see labels and placeholders in <input>: the input (form input) element for more information. readonly a boolean attribute which, if present, means this field cannot be edited by the user. its value can, however, still be changed by javascript code directly setting the htmlinputelement.value property. note: because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified. size the size attribute is a numeric value indicating how many characters wide the input field should be. the value must be a number greater than zero, and the default value is 20. since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or...
...And 6 more matches

<input type="text"> - HTML: Hypertext Markup Language
ithub 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 text contained in the text field. events change and input supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, required and size idl attributes list, value methods select(), setrangetext() and setselectionrange(). value the value attribute is a domstring that contains the current value of the text entered into the text field. you can retrieve this using the value property in javascript. let thetext = mytextinput.value; if no validation constraints are in place for the input (see ...
...ted technical issues with your content. see labels and placeholders in <input>: the input (form input) element for more information. readonly a boolean attribute which, if present, means this field cannot be edited by the user. its value can, however, still be changed by javascript code directly setting the htmlinputelement.value property. note: because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified. size the size attribute is a numeric value indicating how many characters wide the input field should be. the value must be a number greater than zero, and the default value is 20. since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or...
...sition: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } the technique also requires a <span> element to be placed after the form element, which acts as a holder for the icons. this was necessary because some input types on some browsers don't display icons placed directly after them very well. ...
...And 6 more matches

Install script template - Archive of obsolete content
var plid = "@myplugin.com/myplugin,version=5.3"; var version = "5.3.0.0"; var mimetype = "application/x-my-plugin"; var suffix = "my...
... var plid = "@myplugin.com/myplugin,version=5.3"; var version = "5.3.0.0"; var mimetype = "application/x-my-plugin"; var suffix = "my"; var suffix_description = "my plugin files"; var company_name = "mypluginco"; var plugin_description = "...
... write to the registry. errorcode="+hkcu_status); return hkcu_status; } } return 0; } /** * function for preinstallation of plugin (firstinstall). * you should not stop the install process because the function failed, * you still have a chance to install the plugin for the already * installed gecko browsers. ...
...And 5 more matches

Creating our first Vue component - Learn web development
state that affects their display. registering props in vue, there are two ways to register props: the first way is to just list props out as an array of strings. each entry in the array corresponds to the name of a prop. the second way is to define props as an object, with each key corresponding to the prop name. listing props as an object allows you to specify default values, mark props as required, perform basic object typing (specifically around javascript primitive types), and perform simple prop validation. note: prop validation only happens in development mode, so you can't strictly rely on it in production. additionally, prop validation functions are invoked before the component instance is created, so they do not have access to the component state (or other props). for this comp...
...se the object registration method. go back to your todoitem.vue file. add a props property inside the export default {} object, which contains an empty object. inside this object, add two properties with the keys label and done. the label key's value should be an object with 2 properties (or props, as they are called in the context of being available to the components). the first is a required property, which will have a value of true. this will tell vue that we expect every instance of this component to have a label field. vue will warn us if a todoitem component does not have a label field. the second property we'll add is a type property. set the value for this property as the javascript string type (note the capital "s"). this tells vue that we expect the value of this property ...
...operty. set the value for this property as the javascript string type (note the capital "s"). this tells vue that we expect the value of this property to be a string. now on to the done prop. first add a default field, with a value of false. ...
...And 5 more matches

sslintro.html
initialization initialization includes setting up configuration files, setting global defaults, and setting up callback functions. functions used in the initialization part of an application can include the following: pr_init. initializes nspr. must be called before any other nss functions. pk11_setpasswordfunc. sets the global callback function to obtain passwords for pkcs #11 modules. required. nss_init. sets up configuration files and performs other tasks required to run network security services. nss_init is not idempotent, so call it only once. required. ssl_optionsetdefault. changes default values for all subsequently opened sockets as long as the application is running (compare with ssl_seturl which only configures the socket that is currently open). this function must be ca...
...te and configure a server cache, using either ssl_configserversessionidcache or ssl_configmpserversidcache. the server cache is used for all sessions where the program handshakes as an ssl server. ssl_clearsessioncache. clears all sessions from the client session cache. optional. ssl_configserversessionidcache. sets up parameters for a server session cache for a single-process application. required for single-process server applications. ssl_configmpserversidcache. sets up parameters for a server cache for a multi-process application. required for multi-process server applications. you can use either this function or ssl_configserversessionidcache, not both. configuration the configuration portion of an ssl-enabled application typically begins by opening a new socket and then import...
...brings an ordinary nspr socket into the ssl library, returning a new nspr socket that can be used to make ssl calls. ...
...And 5 more matches

Alerts - Accessibility
the problem you have a form — a contact form, for example — that you want to put some accessible error checking into. examples of common problems include e-mail addresses which are not valid, or a name field which does not contain at least a first name or a surname. the form first, please read about the aria-required technique if you have not done so, as this technique expands upon that. ...
...ddresses which are not valid, or a name field which does not contain at least a first name or a surname. the form first, please read about the aria-required technique if you have not done so, as this technique expands upon that. ...
...ot contain at least a first name or a surname. the form first, please read about the aria-required technique if you have not done so, as this technique expands upon that. ...
...And 5 more matches

<input type="number"> - HTML: Hypertext Markup Language
ted technical issues with your content. see labels and placeholders in <input>: the input (form input) element for more information. readonly a boolean attribute which, if present, means this field cannot be edited by the user. its value can, however, still be changed by javascript code directly setting the htmlinputelement.value property. note: because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified. step the step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. only values which are equal to the basis for stepping (min if specified, value otherwise, and an appropriate default value if neither of those is provided) are valid.
...ng screenshot is taken from firefox for android: a simple number input in its most basic form, a number input can be implemented like this: <label for="ticketnum">number of tickets you would like to buy:</label> <input id="ticketnum" type="number" name="ticketnum" value="0"> a number input is considered valid when empty and when a single number is entered, but is otherwise invalid. if the required attribute is used, the input is no longer considered valid when empty. note: any number is an acceptable value, as long as it is a valid floating point number (that is, not nan or infinity). placeholders sometimes it's helpful to offer an in-context hint as to what form the input data should take. this can be especially important if the page design doesn't offer descriptive labels for each <...
...value="12999922"> </datalist> use of the list attribute with number inputs is not supported in all browsers. it works in chrome and opera, for example, but not in firefox. validation we have already mentioned a number of validation features of number inputs, but let's review them now: <input type="number"> elements automatically invalidate any entry that isn't a number (or empty, unless required is specified). you can use the required attribute to make an empty entry invalid. (in other words, the input must be filled in.) you can use the step attribute to constrain valid values to a certain set of steps (e.g., multiples of 10). you can use the min and max attributes to constrain valid values to lower and upper bounds. the following example exhibits all of the above features, as well...
...And 5 more matches

<input type="search"> - HTML: Hypertext Markup Language
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 value contained in the search field. events change and input supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, required, size. idl attributes value methods select(), setrangetext(), setselectionrange(). value the value attribute contains a domstring representing the value contained in the search field. you can retrieve this using the htmlinputelement.value property in javascript. searchterms = mysearch.value; if no validation constraints are in place for the input (see validation...
...ted technical issues with your content. see labels and placeholders in <input>: the input (form input) element for more information. readonly a boolean attribute which, if present, means this field cannot be edited by the user. its value can, however, still be changed by javascript code directly setting the htmlinputelement.value property. note: because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified. size the size attribute is a numeric value indicating how many characters wide the input field should be. the value must be a number greater than zero, and the default value is 20. since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or...
... padding-left: 5px; position: absolute; } input:valid ~ span:after { content: '✓'; padding-left: 5px; position: absolute; } the technique also requires a <span> element to be placed after the form element, which acts as a holder for the icons. this was necessary because some input types on some browsers don't display icons placed directly after them very well. ...
...And 5 more matches

<input type="tel"> - HTML: Hypertext Markup Language
ted technical issues with your content. see labels and placeholders in <input>: the input (form input) element for more information. readonly a boolean attribute which, if present, means this field cannot be edited by the user. its value can, however, still be changed by javascript code directly setting the htmlinputelement.value property. note: because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified. size the size attribute is a numeric value indicating how many characters wide the input field should be. the value must be a number greater than zero, and the default value is 20. since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or...
...pass the validation, or to remove it entirely. it's also possible for someone to simply bypass your html entirely and submit the data directly to your server. if your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data (or data which is too large, is of the wrong type, and so forth) is entered into your database. ...
...tirely and submit the data directly to your server. if your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data (or data which is too large, is of the wrong type, and so forth) is entered into your database. making telephone numbers required you can make it so that an empty input is invalid and won't be submitted to the server using the required attribute. ...
...And 5 more matches

<input type="time"> - HTML: Hypertext Markup Language
cept, given in the time value format described previously. if the value specified isn't a valid time string, no minimum value is set. readonly a boolean attribute which, if present, means this field cannot be edited by the user. its value can, however, still be changed by javascript code directly setting the htmlinputelement.value property. note: because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified. step the step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. only values which are equal to the basis for stepping (min if specified, value otherwise, and an appropriate default value if neither of those is provided) are valid. ...
...available about when or if safari will add it. ...
...add it. ...
...And 5 more matches

2015 MDN Fellowship Program - Archive of obsolete content
upport our efforts, the fellow will review various technical specifications to identify gaps between the documentation and current situation and refine existing tests to adapt to this cross-browser test harness. activities and deliverables identify gaps between existing documentation and current development environments. the work would entail refining existing tests to adapt to this framework. required skills and experience experience and comfort writing javascript test scripts. mentor information josh matthews, mozilla platform group. github: jdm twitter: @lastontheboat service workers brief project description service workers essentially act as proxy servers that sit between web applications, the browser and (when available) the network. they enable the creation of effective offlin...
...act as proxy servers that sit between web applications, the browser and (when available) the network. they enable the creation of effective offline experiences and wiill also allow access to push notifications and background sync apis. activities and deliverables write a demonstration web application (new or existing) to showcase service worker functionality. provide detailed api descriptions. required skills and experience experienced web developer with expertise in javascript, css, html as well as with efficient network interaction (queuing resource fetching, etc.). self-starter and autonomous worker mentor information brittany storoz, mozilla apps engineering. github: brittanystoroz twitter: @brittanystoroz webgl brief project description webgl is the latest incarnation of the ope...
...ebgl brief project description webgl is the latest incarnation of the opengl family of real time rendering immediate mode graphics apis. webgl is getting some cool new features in 2015 with the standardization efforts around the webgl 2.0 spec being published. activities and deliverables help us develop a curriculum on mdn for teaching developers new to graphics programming the webgl apis. required skills and experience computer graphics experience with programmable shaders and the opengl, opengl es, webgl, or direct3d apis. command of javascript and module systems preferred. mentor information nick desaulniers, sleeps at desk. github: nickdesaulniers twitter: @lostoracle web app performance brief project description web performance is a feature that needs to be considered from s...
...And 4 more matches

nss tech note1
e *t, secitem *item); secstatus sec_quickderdecodeitem(prarenapool* arena, void* dest, const sec_asn1template* templateentry, secitem* src); here is a description of the arguments : secitem* src† is a structure containing a pointer to the binary data to be decoded, as well as its size. const sec_asn1template* templateentry is a pointer to one or more decoder templates. the number of required templates is determined by the type of the first template.when multiple templates are required, the pointer must point to a null-terminated array of templates. the syntax of these templates is identical for both decoders, except where noted. a "null template" is a template that is all zeros, having a zero kind.† the term "null-terminated array", as used throughout this document, means an array ...
...to save the current component. it is normally relative to the dest argument passed to the decoder. if templates are nested, the offset applies to the location of the current component within the target component, typically the decoded sequence. sub† . this field does not apply to all template types. ...
...the current component within the target component, typically the decoded sequence. sub† . this field does not apply to all template types. if kind contains the sec_asn1_inline or sec_asn1_pointer modifiers, then it must point to the required subtemplate. if kind contains the sec_asn1_xtrn or sec_asn1_dynamic modifiers, this is a pointer to a callback function that will dynamically return the required subtemplate. size† . this field does not apply to all template types. ...
...And 4 more matches

PKCS11 Implement
version 2.0. how nss calls pkcs #11 functions this section is organized according to the categories used in pkcs #11: cryptographic token interface standard, version 2.0. to understand this section, you should be familiar with the standard specification. general-purpose functions c_initialize the nss calls c_initialize on startup or when it loads a new module. the nss always passes null, as required by the pkcs #11 specification, in the single c_initialize parameter preserved. c_finalize the nss calls c_finalize on shutdown and whenever it unloads a module. c_getfunctionlist the nss calls c_getfunctionlist on startup or when it loads a new module. the function list returned should include all the pkcs 2.0 function calls. if you don't implement a function, you should still provide a stu...
...the token is a removable device, nss may call c_gettokeninfo anytime it's looking for a new token to check whether the token is write protected, whether it can generate random numbers, and so on. the nss expects ck_token_info.label to contain the name of the token. if the ckf_write_protected flag is set, nss won't use the token to generate keys. the nss interprets the combination of the ckf_login_required and ckf_user_pin_initialized flags as shown in table 1.1. nss's interpretation of the ckf_login_required and ckf_user_pin_initialized flags cfk_login_required cfk_user_pin_initialized nss assumes that: false false this is a general access device. the nss will use it without prompting the user for a pin. true false the device is uninitialized. the nss attempts to initialize the de...
...the user pin; if these calls are successful, the key is generated and at that point the cfk_user_pin_initialized flag should change from false to true. false true this is a general access device that can have a pin set on it. because it's a general access device, nss never prompts for the pin, even though it's possible to set a pin with c_setpin. if the pin is set successfully, the cfk_login_required flag should change to true. the nss uses this combination of flags for its internal token when the key database password is null. these are not standard pkcs #11 semantics; they are intended for nss's internal use only. true true the device has been initialized and requires authentication. the nss checks whether the user is logged on, and if not prompts the user for a pin. c_getmechanism...
...And 4 more matches

NSS tools : modutil
-tempdir temporary-directory give a directory location where temporary files are created during the installation by the -jar option. if no temporary directory is specified, the current directory is used. usage and examples creating database files before any operations can be performed, there must be a set of security databases available. modutil can be used to create these files. the only required argument is the database that where the databases will be located. modutil -create -dbdir [sql:]directory adding a cryptographic module adding a pkcs #11 module means submitting a supporting library file, enabling its ciphers, and setting default provider status for various security mechanisms. this can be done by supplying all of the information through modutil directly or by running a ja...
...nable-list] [-mechanisms mechanism-list] for example: modutil -dbdir sql:/home/my/sharednssdb -add "example pkcs #11 module" -libfile "/tmp/crypto.so" -mechanisms rsa:dsa:rc2:random using database directory ... module "example pkcs #11 module" added to database. installing a cryptographic module from a jar file pkcs #11 modules can also be loaded using a jar file, which contains all of the required libraries and an installation script that describes how to install the module. the jar install script is described in more detail in [1]the section called “jar installation file format”. the jar installation script defines the setup information for each platform that the module can be installed on. for example: platforms { linux:5.4.08:x86 { modulename { "example pkcs #11 module" } mo...
...le can be installed on. for example: platforms { linux:5.4.08:x86 { modulename { "example pkcs #11 module" } modulefile { crypto.so } defaultmechanismflags{0x0000} cipherenableflags{0x0000} files { crypto.so { path{ /tmp/crypto.so } } setup.sh { executable path{ /tmp/setup.sh } } } } linux:6.0.0:x86 { equivalentplatform { linux:5.4.08:x86 } } } both the install script and the required libraries must be bundled in a jar file, which is specified with the -jar argument. modutil -dbdir sql:/home/mt"jar-install-filey/sharednssdb -jar install.jar -installdir sql:/home/my/sharednssdb this installation jar file was signed by: ---------------------------------------------- **subject name** c=us, st=california, l=mountain view, cn=cryptorific inc., ou=digital id class 3 - netscap...
...And 4 more matches

NSS tools : modutil
give a directory location where temporary files are created during the installation by the -jar option. if no temporary directory is specified, the current directory is used. usage and examples creating database files before any operations can be performed, there must be a set of security databases available. modutil can be used to create these files. the only required argument is the database that where the databases will be located. modutil -create -dbdir [sql:]directory adding a cryptographic module adding a pkcs #11 module means submitting a supporting library file, enabling its ciphers, and setting default provider status for various security mechanisms. this can be done by supplying all of the information through modutil directly or ...
...-mechanisms mechanism-list] for example: modutil -dbdir sql:/home/my/sharednssdb -add "example pkcs #11 module" -libfile "/tmp/crypto.so" -mechanisms rsa:dsa:rc2:random using database directory ... module "example pkcs #11 module" added to database. installing a cryptographic module from a jar file pkcs #11 modules can also be loaded using a jar file, which contains all of the required libraries and an installation script that describes how to install the module. the jar install script is described in more detail in [1]the section called “jar installation file format”. the jar installation script defines the setup information for each platform that the module can be installed on. for example: platforms { linux:5.4.08:x86 { modulename { "example pkc...
... modutil -dbdir sql:/home/mt"jar-install-filey/sharednssdb -jar install.jar -installdir sql:/home/my/sharednssdb this installation jar file was signed by: ---------------------------------------------- **subject name** c=us, st=california, l=mountain view, cn=cryptorific inc., ou=digital id class 3 - n...
...And 4 more matches

MediaTrackConstraints - Web APIs
...
...operty, or because it doesn't apply. for example, because rtp doesn't provide some of these values during negotiation of a webrtc connection, a track associated with a rtcpeerconnection will not include certain values, such as facingmode or groupid. properties of all media tracks deviceid a constraindomstring object specifying a device id or an array of device ids which are acceptable and/or required. ...
...webrtc connection, a track associated with a rtcpeerconnection will not include certain values, such as facingmode or groupid. properties of all media tracks deviceid a constraindomstring object specifying a device id or an array of device ids which are acceptable and/or required. groupid a constraindomstring object specifying a group id or an array of group ids which are acceptable and/or required. properties of audio tracks autogaincontrol a constrainboolean object which specifies whether automatic gain control is preferred and/or required. channelcount a constrainlong specifying the channel count or range of channel counts which are acceptable and/or required. echocancellation a constrainboolean object specifying whether or not echo cancellation is preferred and/or required. l...
...And 4 more matches

XRSessionInit - Web APIs
the webxr device api dictionary xrsessioninit specifies required and/or optional features when requesting a new xrsession by calling the navigator.xr.requestsession() method. properties the following parameters are all optional. if none are included, the device will use a default feature configuration for all options. optionalfeatures optional an array of values identifying features which the returned xrsession may optionally support. at this time, all features are identified using strings from the xrreferencespacetype enumeration, but future updates to the webxr standard may add more features. requiredfeatures optional an array of values which the returned xrsession must support. these values currently must come from the enumerated type xrreferencespacetype. more features may be added ...
...nal an array of values which the returned xrsession must support. these values currently must come from the enumerated type xrreferencespacetype. more features may be added in future updates to the webxr standard. default features immersive sessions all immersive (both immersive-vr and immersive-ar) sessions support both the viewer and local reference spaces. because immersive sessions are required to support the local reference space, any request to open an immersive xrsession is required to obtain explicit or implicit user consent. inline sessions all inline webxr sessions support the viewer reference space. security requirements each reference space or feature type has minimum safety requirements. by session type, those are: reference space type user consent rquirement ...
...rsive xrsession is required to obtain explicit or implicit user consent. inline sessions all inline webxr sessions support the viewer reference space. security requirements each reference space or feature type has minimum safety requirements. ...
...And 4 more matches

Basic form hints - Accessibility
separate <div> element. the aria-describedby attribute on the <button> references the id of the <div>. <button aria-describedby="descriptionrevert">revert</button> <div id="descriptionrevert">reverting will undo any changes that have been made since the last save.</div> note: the aria-describedby attribute is used for other purposes, in addition to form controls. required and invalid fields note: now that required is available to more than 97% of users globally, it is no longer recommended that you use both required and aria-required. web developers typically use presentational strategies to indicate required or invalid fields. assistive technologies (ats) cannot necessarily infer this information from the presentation. aria provides attributes for indicating ...
... the aria-invalid state can be programmatically applied, to indicate to an at which data fields have incorrect data, so that the user knows they have entered invalid data. the example below shows a simple form with three fields. ...
...le to more than 97% of users globally, it is no longer recommended that you use both required and aria-required. web developers typically use presentational strategies to indicate required or invalid fields. assistive technologies (ats) cannot necessarily infer this information from the presentation. aria provides attributes for indicating that form controls are required or invalid: the aria-required property can be applied to a form element, to indicate to an at that it is required to complete the form. the aria-invalid state can be programmatically applied, to indicate to an at which data fields have incorrect data, so that the user knows they have entered invalid data. ...
...And 4 more matches

<input type="datetime-local"> - HTML: Hypertext Markup Language
have a control (or controls) for setting the date/time and then deal with the locale in a separate control. for example, if you are creating a system where the user is likely to already be logged in, with their locale already set, you could provide the timezone in a hidden input type. ...
...local"> does not apply any validation to entered values. the ui implementations generally don't let you enter anything that isn't a date/time — which is helpful — but a user might still fill in no value and submit, or enter an invalid date and/or time (e.g. the 32nd of april). ...
... to restrict the available dates (see setting maximum and minimum dates), and you can use the required attribute to make filling in the date/time mandatory. as a result, supporting browsers will display an error if you try to submit a date that is outside the set bounds, or an empty date field. ...
...And 4 more matches

<input type="password"> - HTML: Hypertext Markup Language
ve information like passwords (e.g. login forms) should be served over https; many browsers now implement mechanisms to warn against insecure login forms; see insecure passwords. value a domstring representing a password, or empty events change and input supported common attributes autocomplete, inputmode, maxlength, minlength, pattern, placeholder, readonly, required, and size idl attributes selectionstart, selectionend, selectiondirection, and value methods select(), setrangetext(), and setselectionrange() value the value attribute contains a domstring whose value is the current contents of the text editing control being used to enter the password. if the user hasn't entered anything yet, this value is an empty string (""). if...
... size idl attributes selectionstart, selectionend, selectiondirection, and value methods select(), setrangetext(), and setselectionrange() value the value attribute contains a domstring whose value is the current contents of the text editing control being used to enter the password. if the user hasn't entered anything yet, this value is an empty string (""). if the required property is specified, then the password edit box must contain a value other than an empty string to be valid. if the pattern attribute is specified, the content of a password control is only considered valid if the value passes validation; see validation for more information. note: the line feed (u+000a) and carriage return (u+000d) characters are not permitted in a password value. when setti...
...ues with your content. see labels and placeholders in <input>: the input (form input) element for more information. readonly a boolean attribute which, if present, means this field cannot be edited by the user. its value can, however, still be changed from javascript code that directly sets the value of the htmlinputelement.value property. note: because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified. size the size attribute is a numeric value indicating how many characters wide the input field should be. the value must be a number greater than zero, and the default value is 20. since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or...
...And 4 more matches

<input type="url"> - HTML: Hypertext Markup Language
e to visually denote whether the current value of the field is a valid url or not. on browsers that don't support inputs of type url, a url input falls back to being a standard text input. value a domstring representing a url, or empty events change and input supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, required and size idl attributes list, value, selectionend, selectiondirection methods select(), setrangetext() and setselectionrange(). value the <input> element's value attribute contains a domstring which is automatically validated as conforming to url syntax. more specifically, there are two possible value formats that will pass validation: an empty string ("") indic...
...ted technical issues with your content. see labels and placeholders in <input>: the input (form input) element for more information. readonly a boolean attribute which, if present, means this field cannot be edited by the user. its value can, however, still be changed by javascript code directly setting the htmlinputelement.value property. note: because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified. size the size attribute is a numeric value indicating how many characters wide the input field should be. the value must be a number greater than zero, and the default value is 20. since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or...
...currently, all browsers which implement this element implement it as a standard text input field with basic validation features. in its most basic form, a url input can be implemented like this: <input id="myurl" name="myurl" type="url"> notice that it's considered valid when empty and when a single validly-formatted url address is entered, but is otherwise not considered valid. by adding the required attribute, only properly-formed urls are allowed; the input is no longer considered valid when empty. there is nothing magical going on here. submitting this form would cause the following data to be sent to the server: myurl=http%3a%2f%2fwww.example.com. note how characters are escaped as necessary. placeholders sometimes it's helpful to offer an in-context hint as to what form the input data...
...And 4 more matches

Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
s. so far, we've seen how components can share data using props, and communicate with their parents using events and two-way data binding. now we will see how components can also expose methods and variables. the following new components will be developed throughout the course of this article: moreactions: displays the check all and remove completed buttons, and emits the corresponding events required to handle their functionality. newtodo: displays the <input> field and add button for adding a new todo. todosstatus: displays the "x out of y items completed" status heading. code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/05-a...
...ks, by default, basically re-run all our javascript on every change against this virtual dom, and apply different methods to cache expensive calculations and optimize execution. they make little to no attempt to understand what our javascript code is doing. svelte doesn't use a virtual dom representation. instead, it parses and analyzes our code, creates a dependency tree, and then generates the required javascript to update only the parts of the dom that need to be updated. this approach usually generates optimal javascript code with minimal overhead, but it also has its limitations. sometimes svelte cannot detect changes to variables being watched. remember that to tell svelte that a variable has changed, you have to assign it a new value. a simple rule of thumb is that the name of the updated...
...anged and generate simpler and more performant code. for more information on <svelte:options...>, check the svelte options documentation. all of these solutions involve an assignment in which the updated variable is on the left side of the equation. any of this techniques will allow svelte to notice that our todos array has been modified. choose one, and update your checkalltodos() function as required. now you should be able to check and uncheck all your todos at once. try it! finishing our moreactions component we will add one usability detail to our component. we'll disable the buttons when there are no tasks to be processed. to create this we'll receive the todos array as a prop, and set the disabled property of each button accordingly. update your moreactions.svelte component like ...
...And 3 more matches

nss tech note3
nt ...... used to encrypt s/mime emails. certusageobjectsigner ........ used to verify signatures on files of executable code, e.g. jar files. certusagestatusresponder ..... used by an ocsp responder certusageverifyca ............ a ca of any kind. each cert has a "type" and a "key usage", each of which may contain one or more valid values. ...
...tures on files of executable code, e.g. jar files. certusagestatusresponder ..... used by an ocsp responder certusageverifyca ............ a ca of any kind. each cert has a "type" and a "key usage", each of which may contain one or more valid values. each of the above seccertusages translates into a required set of cert type and key usage for the certificate itself, and into another set of required cert type and key usage for all the ca certs in the cert chain. to determine if a cert is valid for a given cert usage, it must have the the cert type and key usage required for that cert usage, and all the ca certs in the cert chain must have the cert type and key usage required for ca certs for that cert usage. there are 8 key usages: cert_sign crl_sign data_encipherment digital_signature...
...s for that cert usage. ...
...And 3 more matches

NSS tools : certutil
guments modify a command option and are usually lower case, numbers, or symbols. -a use ascii format or allow the use of ascii format for input or output. this formatting follows rfc 1113. for certificate requests, ascii output defaults to standard output unless redirected. -b validity-time specify a time at which a certificate is required to be valid. use when checking certificate validity with the -v option. the format of the validity-time argument is yymmddhhmmss[+hhmm|-hhmm|z], which allows offsets to be set relative to the validity end time. specifying seconds (ss) is optional. when specifying an explicit time, use a z at the end of the term, yymmddhhmmssz, to ...
... nicknames. -k key-type-or-id specify the type or specific id of a key. the valid key type options are rsa, dsa, ec, or all. the default value is rsa. specifying the type of key can avoid mistakes caused by duplicate nicknames. giving a key type generates a new key pair; giving the id of an existing key reuses that key pair (which is required to renew certificates). -l display detailed information when validating a certificate with the -v option. -m serial-number assign a unique serial number to a certificate being created. this operation should be performed by a ca. if no serial number is provided a default serial number is made from the current time. serial numbers are limited t...
...ated independently using the -g command option. certutil -g -d [sql:]directory | -h tokenname -k key-type -g key-size [- y exponent-value] -q pqgfile|curve-name for example: $ certutil -g -h lunasa -k ec -g 256 -q sect193r2 listing certificates the -l command option lists all of the certificates listed in the certificate database. the path to the directory (-d) is required. $ certutil -l -d sql:/home/my/sharednssdb certificate nickname trust attri butes ssl,s/mime, jar/xpi ca administrator of instance pki-ca1's example domain id u,u,u tps administrator's example domain id u,u,u google internet authority ...
...And 3 more matches

NSS Tools modutil
e will not be checked. with the -changepw command, the password on the netscape internal module cannot be set or changed, since this password is stored in key3.db. usage the security module database tool's capabilities are grouped as follows, using these combinations of options and arguments. the options and arguments in square brackets are optional, those without square brackets are required. creating a set of security management database files (key3.db, cert8.db, and secmod.db): -create displaying basic module information or detailed information about the contents of a given module: -list [modulename] adding a pkcs #11 module, which includes setting a supporting library file, enabling ciphers, and setting default provider status for various security mechanisms: -add mo...
...platform keysper-file keys global keys forwardcompatible gives a list of platforms that are forward compatible. if the current platform cannot be found in the list of supported platforms, then the forwardcompatible list is checked for any platforms that have the same os and architecture in an earlier version. if one is found, its attributes are used for the current platform. platforms (required) gives a list of platforms. each entry in the list is itself a key-value pair: the key is the name of the platform and the value list contains various attributes of the platform. the modulename, modulefile, and files attributes must be specified for each platform unless an equivalentplatform attribute is specified. the platform string is in the following format: system name:os release:architect...
... os2 (x86) osf (alpha) reliantunix (mips) sco (x86) solaris (sparc) sony (mips) sunos (sparc) unixware (x86) win16 (x86) win95 (x86) winnt (x86) here are some examples of valid platform strings: irix:6.2:mipssunos:5.5.1:sparclinux:2.0.32:x86win95::x86. per-platform keys these keys have meaning only within the value list of an entry in the platforms list. modulename (required) gives the common name for the module. this name will be used to reference the module from netscape communicator, the security module database tool (modutil), servers, or any other program that uses the netscape security module database. modulefile (required) names the pkcs #11 module file (dll or .so) for this platform. the name is given as the relative path of the file within the jar arch...
...And 3 more matches

certutil
d key4.db). arguments option arguments modify an action and are lowercase. -a use ascii format or allow the use of ascii format for input or output. this formatting follows rfc 1113. for certificate requests, ascii output defaults to standard output unless redirected. -b validity-time specify a time at which a certificate is required to be valid. use when checking certificate validity with the -v option. the format of the validity-time argument is yymmddhhmmss[+hhmm|-hhmm|z], which allows offsets to be set relative to the validity end time. specifying seconds (ss) is optional. when specifying an explicit time, use a z at the end of the term, yymmddhhmmssz, to close it. ...
...cify the type of a key. the valid options are rsa, dsa, ecc, or all. the default value is rsa. specifying the type of key can avoid mistakes caused by duplicate nicknames. -k key-type-or-id specify the type or specific id of a key. giving a key type generates a new key pair; giving the id of an existing key reuses that key pair (which is required to renew certificates). -l display detailed information when validating a certificate with the -v option. -m serial-number assign a unique serial number to a certificate being created. this operation should be performed by a ca. the default serial number is 0 (zero). serial numbers are limited to integers. -n nickname ...
...lso be generated independently using the -g command option. certutil -g -d [sql:]directory | -h tokenname -k key-type -g key-size [-y exponent-value] -q pqgfile|curve-name for example: $ certutil -g -h lunasa -k ec -g 256 -q sect193r2 listing certificates the -l command option lists all of the certificates listed in the certificate database. the path to the directory (-d) is required. $ certutil -l -d sql:/home/my/sharednssdb certificate nickname trust attributes ssl,s/mime,jar/xpi ca administrator of instance pki-ca1's example domain id u,u,u tps administrator's example domain id u,u,u google internet authority ...
...And 3 more matches

Index
mpatibility 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 1.8 and 1.9, for example). the more likely case is that the component uses ...
...hen the gre began to be used). 103 component internals obsolete, xpcom let's start by examining how xpcom components are written in c++. the most common type of component is one that is written in c++ and compiled into a shared library (a dll on a windows system or a dso on unix). 104 creating the component code xpcom this chapter goes over the basic code required to handle the relationship between your component and xpcom. having the component found and registered properly is the goal of this first chapter of the tutorial. in the subsequent chapters, we can begin to work on the example weblock component functionality itself. 105 finishing the component xpcom at this point you have created most of the infrastructure of the component. t...
... use 198 moziplaceinfo no summary! 199 moziplacesautocomplete interfaces, interfaces:scriptable, places, xpcom, xpcom interface reference mark a page as being currently open. 200 moziregistry outdated_articles clients will rely on nsrepository to create instances of a given class. clients requiring dynamic "binding" of clsids will be required to use some higher-level services (tbd) to figure out the clsids they should use. the intent is that such services themselves be built on top of the new moziregistry interface. 201 mozirepresentativecolorcallback interfaces, interfaces:scriptable, places, xpcom api reference, xpcom interface reference will be called when color analysis finishes. 202 mozispellchecki...
...And 3 more matches

Video player styling basics - Developer guides
as mentioned earlier, a data-state attribute is now used to indicate whether the video controls are visible or not and these also need to be styled: .controls[data-state=hidden] { display:none; } .controls[data-state=visible] { display:block; } there are a nu...
...s set up the correct way: .controls { width:100%; height:8.0971659919028340080971659919028%; /* of figure's height */ position:relative; } the height of the .controls class is set to be (a very precise!) percentage of the enclosing <figure> element (this was worked out with experimentation based on the required button height). its position is also specifically set to relative, which is required for its responsiveness (more on that later). as mentioned earlier, a data-state attribute is now used to indicate whether the video controls are visible or not and these also need to be styled: .controls[data-state=hidden] { display:none; } .controls[data-state=visible] { display:block; } there are a number of properties that also need to be set for all elements within the video control...
...a value for margin-left is also set, but the first element (in this case the play/pause button) has this property overridden by the value 0. the <div> container for the <progress> element also requires some specific settings; it is set to be much wider than the other child elements and its cursor value is set to be pointer: .controls .progress...
...And 3 more matches

<textarea> - HTML: Hypertext Markup Language
you to specify an exact size for the <textarea> to take. setting these is a good idea for consistency, as browser defaults can differ. default content entered between the opening and closing tags. <textarea> does not support the value attribute. the <textarea> element also accepts several attributes common to form <input>s, such as autocomplete, autofocus, disabled, placeholder, readonly, and required. attributes this element includes the global attributes. autocapitalize this is a non-standard attribute supported by webkit on ios (therefore nearly all browsers running on ios, including safari, firefox, and chrome), which controls whether and how the text value should be automatically capitalized as it is entered/edited by the user. the non-deprecated values are available in ios 5 and ...
...e a descendant of a form element. this attribute enables you to place <textarea> elements anywhere within a document, not just as descendants of form elements. maxlength the maximum number of characters (utf-16 code units) that the user can enter. if this value isn't specified, the user can enter an unlimited number of characters. minlength the minimum number of characters (utf-16 code units) required that the user should enter. name the name of the control. placeholder a hint to the user of what can be entered in the control. carriage returns or line-feeds within the placeholder text must be treated as line breaks when rendering the hint. note: placeholders should only be used to show an example of the type of data that should be entered into a form; they are not a substitute for a prope...
...to the input. see labels and placeholders in <input>: the input (form input) element for a full explanation. readonly this boolean attribute indicates that the user cannot modify the value of the control. unlike the disabled attribute, the readonly attribute does not prevent the user from clicking or selecting in the control. the value of a read-only control is still submitted with the form. required this attribute specifies that the user must fill in a value before submitting a form. rows the number of visible text lines for the control. spellcheck specifies whether the <textarea> is subject to spell checking by the underlying browser/os. the value can be: true: indicates that the element needs to have its spelling and grammar checked. default : indicates that the element is to ac...
...And 3 more matches

HTTP response status codes - HTTP
was used in the first request, a post must be used in the second request. client error responses 400 bad request the server could not understand the request due to invalid syntax. 401 unauthorized although the http standard specifies "unauthorized", semantically this response means "unauthenticated". that is, the client must authenticate itself to get the requested response. 402 payment required this response code is reserved for future use. the initial aim for creating this code was using it for digital payment systems, however this status code is used very rarely and no standard convention exists. 403 forbidden the client does not have access rights to the content; that is, it is unauthorized, so the server is refusing to give the requested resource. unlike 401, the client's ident...
... and cannot be used. for example, an api may forbid delete-ing a resource. the two mandatory methods, get and head, must never be disabled and should not return this error code. 406 not acceptable this response is sent when the web server, after performing server-driven content negotiation, doesn't find any content that conforms to the criteria given by the user agent. 407 proxy authentication required this is similar to 401 but authentication is needed to be done by a proxy. 408 request timeout this response is sent on an idle connection by some servers, even without any previous request by the client. it means that the server would like to shut down this unused connection. this response is used much more since some browsers, like chrome, firefox 27+, or ie9, use http pre-connection mechani...
...is response is sent when the requested content has been permanently deleted from server, with no forwarding address. clients are expected to remove their caches and links to the resource. the http specification intends this status code to be used for "limited-time, promotional services". apis should not feel compelled to indicate resources that have been deleted with this status code. 411 length required server rejected the request because the content-length header field is not defined and the server requires it. 412 precondition failed the client has indicated preconditions in its headers which the server does not meet. 413 payload too large request entity is larger than limits defined by server; the server might close the connection or return an retry-after header field. 414 uri too long ...
...And 3 more matches

Web video codec guide - Web media technologies
ition (1920x1080) video in full color (4 bytes per pixel) is 8,294,400 bytes. at a typical 30 frames per second, each second of hd video would occupy 248,832,000 bytes (~249 mb). a minute of hd video would need 14.93 gb of storage. a fairly typical 30 minute video conference would need about 447.9 gb of storage, and a 2-hour movie would take almost 1.79 tb (that is, 1790 gb). not only is the required storage space enormous, but the network bandwidth needed to transmit an uncompressed video like that would be enormous, at 249 mb/sec—not including audio and overhead. this is where video codecs come in. just as audio codecs do for the sound data, video codecs compress the video data and encode it into a format that can later be decoded and played back or edited. most video codecs are lossy, i...
...rmat, 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 as the video is free for end users. non-web browser implementations of webrtc (any implementation which doesn't include the javascript apis) are required to support avc as a codec in webrtc calls. while web browsers are not required to do so, some do. in html content for web browsers, avc is broadly compatible and many platforms support hardware encoding and decoding of avc media. however, be aware of its licensing requirements before choosing to use avc in your project! supported bit rates varies by level supported frame ra...
...fari 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 effici...
...And 3 more matches

Install Manifests - Archive of obsolete content
d install.rdf and live at the top level of an add-on's xpi file. layout the basic layout of an install manifest is like so: <?xml version="1.0" encoding="utf-8"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <!-- properties --> </description> </rdf> some properties are required, some are optional. some have simple string values, some are complex resources. required property reference your install manifest must specify these properties correctly otherwise your add-on may not install. id the id of the extension, which must be one of the following: guid (firefox 1.0) a string formatted like so: extensionname@example.org the latter format is significantly easier t...
...ed by this add-on. this means that the add-on will work with the application identified by the id property (<em:id>) specified (for a comprehensive list of application ids and valid min/maxversions for them see valid application versions for add-on developers), from the minimum version (<em:minversion>) up to and including the maximum version (<em:maxversion>). however, while <em:maxversion> is a required property, it is ignored unless you also set <em:strictcompatibility> in the main <description> of your install.rdf (i.e. not in <em:targetapplication>). these version strings are formatted in the same fashion as the version property and will be compared to the application version; this allows the extension author to specify which versions of firefox an extension has been tested with. id, minvers...
...ess you also set <em:strictcompatibility> in the main <description> of your install.rdf (i.e. not in <em:targetapplication>). these version strings are formatted in the same fashion as the version property and will be compared to the application version; this allows the extension author to specify which versions of firefox an extension has been tested with. id, minversion, and maxversion are all required. note: extensions compatible 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...
...And 2 more matches

XUL Application Packaging - Archive of obsolete content
rovides metadata that allows xulrunner to launch the application properly. it is parsed as a windows-style ini file with [headings] and key=value pairs. lines beginning with ; or # are treated as comments. a sample application.ini file can be found in the mozilla source tree. the [app] section the app section specifies metadata about the application name specifies the application name. ...
... ini file with [headings] and key=value pairs. lines beginning with ; or # are treated as comments. a sample application.ini file can be found in the mozilla source tree. the [app] section the app section specifies metadata about the application name specifies the application name. required name example: name=testapplication version specifies the application version number. ...
...the email format is recommended for newly developed applications. ...
...And 2 more matches

CSS property compatibility table for form controls - Learn web development
not support text-shadow on form widgets and ie9 does not support it at all. text fields see the text, search, and password input types. property n t note css box model width yes yes height partial[1][2] yes webkit browsers (mostly on mac osx and ios) use the native look & feel for the search fields. ...
...the search fields. therefore, it's required to use -webkit-appearance:none to be able to apply this property to search fields. on windows 7, internet explorer 9 does not apply the border unless background:none is applied. border partial[1][2] yes webkit browsers (mostly on mac osx and ios) use the native look & feel for the search fields. therefore, it's required to use -webkit-appearance:none to be able to apply this property to search fields. on windows 7, internet explorer 9 does not apply the border unless background:none is applied. ...
... on windows 7, internet explorer 9 does not apply the border unless background:none is applied. ...
...And 2 more matches

Creating the Component Code
having the component found and registered properly is the goal of this first chapter of the tutorial. in the subsequent chapters, we can begin to work on the example weblock component functionality itself. use the calculator (after learning long division) you have to write a fair amount of code to create a component library that gets loaded into xpcom. an xpcom component needs to implement at least three interfaces that xpcom requires, and often others as well. there is more code in this chapter than you'll eventually need, however. ...
...id pair. moving another layer outward is the nsimodule. this interface provides yet another abstraction of the nsifactory object, and may allow for multiple nsifactory objects. the key to this interface is that the return type of getclassobject does not have to be an nsifactory. instead, the nsimodule can ask for implementation details about the xpcom object. this is very useful if the caller is required to know information about the component like its threading module, whether or not it's a singleton, its implementation language, and so forth. the interface used in this case is nsiclassinfo. starting from the outside in, onion peel view of xpcom component creation represents the sequence for constructing an xpcom object. onion peel view of xpcom component creation before we begin looking at ...
...onent to clients. these three interface implementations - for the component functionality, nsimodule interface, and for the nsifactory interface - are the basic pieces of code you need to write to create an xpcom component. basic structure of the weblock component source weblock1.cpp that defines these classes and the code you need to create a basic component has the following structure: * required includes and constants * weblock: public iweblock * weblockfactory: public nsifactory * weblockmodule: public nsimodule in xpcom, all of these classes also derive from the nsisupports base interface. digging in: required includes and constants let's take a look at the first several lines of code in the component and discuss what they mean in xpcom. the includes and definitions at th...
...And 2 more matches

Using XPCOM Utilities to Make Things Easier
writing your own implementation. but they have the advantage of allowing much more rapid development. to get an idea about how much can be handled with the macros described in this section, compare the code listing in weblock2.cpp at the end of the chapter with weblock1.cpp in the previous chapter. the module macros include one set of macros that define the exported nsgetmodule entry point, the required nsimodule implementation code and another that creates a generic factory for your implementation class. used together, these macros can take care of a lot of the component implementation code and leave you working on the actual logic for your component. note that all of the macros described in this section are similar but are used in slightly different situations. some differ only in whether or...
...ented by the components parameter. each structure describes a cid that is to be registered with xpcom. the first parameter for each of these macros is an arbitrary string that names the module. in a debugging environment, this string will be printed to the screen when the component library is loaded or unloaded. you should pick a name that makes sense and helps you keep track of things. the four required parts[other-parts] of the structure contain 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...
...-11d3-9337-00104ba0fd40 */ \ 0x9ac9e770, \ 0x18bc, \ 0x11d3, \ {0x93, 0x37, 0x00, 0x10, 0x4b, 0xa0, 0xfd, 0x40} \ } the next entry is the contract id string, which is also usually defined in a #define in a header file. these three entries constitute the required parameters for the registerfactorylocation method we looked at in the prior chapter. when you use these implementation macros, you must declare a constructor for the object, and this keeps you from having to write a factory object. factory macros the factory macro makes it easy to write factory implementations. given the class name concreteclass, the factory macro declaration is: ns_generic_fa...
...And 2 more matches

nsISecurityCheckedComponent
(xul controllers, the ui for the <video> tag, etc.). method overview string cancallmethod(in nsiidptr iid, in wstring methodname); string cancreatewrapper(in nsiidptr iid); string cangetproperty(in nsiidptr iid, in wstring propertyname); string cansetproperty(in nsiidptr iid, in wstring propertyname); methods cancallmethod() returns a capability string indicating what permissions are required to call the specified method on the given interface. string cancallmethod( in nsiidptr iid, in wstring methodname ); parameters iid the iid of the interface this method exists on. methodname the name of the method to be called on the interface. return value the capability required to call this method. see capability strings for details. cancreatewrapper() returns a string indicating what p...
...ecified method on the given interface. string cancallmethod( in nsiidptr iid, in wstring methodname ); parameters iid the iid of the interface this method exists on. methodname the name of the method to be called on the interface. return value the capability required to call this method. see capability strings for details. cancreatewrapper() returns a string indicating what permissions are required to create a wrapper for the given interface. string cancreatewrapper( in nsiidptr iid ); parameters iid the interface to reflect into javascript. return value the capability required to reflect this interface. note that if wrapper creation is prevented, the properties and methods will not be defined on the javascript object, whereas if wrapper creation succeeds but methods/properties are p...
...see capability strings for details. ...
...And 2 more matches

Using IndexedDB - Web APIs
the one returned. index.openkeycursor(null, "nextunique").onsuccess = function(event) { var cursor = event.target.result; if (cursor) { // do something with the entries. cursor.continue(); } }; please see "idbcursor constants" for the valid direction arguments. version changes while a web app is open in another tab when your web app changes in such a way that a version change is required for your database, you need to consider what happens if the user has the old version of your app open in one tab and then loads the new version of your app in another. when you call open() with a greater version than the actual version of the database, all other open databases must explicitly acknowledge the request before you can start making changes to the database (an onblocked event is fired ...
...3+. by default, indexeddb didn’t handle internationalization of sorting strings at all, and everything was sorted as if it were english text. for example, b, á, z, a would be sorted as: a b z á which is obviously not how users want their data to be sorted — aaron and Áaron for example should go next to one another in a contacts list. achieving proper international sorting therefore required the entire dataset to be called into memory, and sorting to be performed by client-side javascript, which is not very efficient. this new functionality enables developers to specify a locale when creating an index using idbobjectstore.createindex() (check out its parameters.) in such cases, when a cursor is then used to iterate through the dataset, and you want to specify locale-aware sorting, y...
...ibs/jquery/1.8.3/jquery.min.js"></script> <h1>indexeddb demo: storing blobs, e-publication example</h1> <div class="note"> <p> works and tested with: </p> <div id="compat"> </div> </div> <div id="msg"> </div> <form id="register-form"> <table> <tbody> <tr> <td> <label for="pub-title" class="required"> title: </label> </td> <td> <input type="text" id="pub-title" name="pub-title" /> </td> </tr> <tr> <td> <label for="pub-biblioid" class="required"> bibliographic id:<br/> <span class="note">(isbn, issn, etc.)</span> </label> ...
...And 2 more matches

SVGTests - Web APIs
svgtests.systemlanguage read only an svgstringlist corresponding to the systemlanguage attribute of the given element. ...
... svgtests.systemlanguage read only an svgstringlist corresponding to the systemlanguage attribute of the given element. ...
... svgtests.systemlanguage read only an svgstringlist corresponding to the systemlanguage attribute of the given element. ...
...And 2 more matches

Starting up and shutting down a WebXR session - Web APIs
system method issessionsupported(). this returns a promise which resolves to true if the given type of session is available for use or false otherwise. const immersiveok = await navigator.xr.issessionsupported("immersive-vr"); if (immersiveok) { // create and use an immersive vr session } else { // create an inline session instead, or tell the user about the // incompatibility if inline is required } creating and starting the session a webxr session is represented by an xrsession object. to obtain an xrsession, you call your xrsystem's requestsession() method, which returns a promise that resolves with an xrsession if it's able to establish one successfully. fundamentally, that looks like this: xr.requestsession("immersive-vr").then((session) => { xrsession = session; /* continue to...
... exception if an error occurs while creating the session. customizing the session in addition to the display mode, the requestsession() method can take an optional object with initialization parameters to customize the session. currently, the only configurable aspect of the session is which of the reference spaces should be used to represent the world's coordinate system. ...
...ize the session. currently, the only configurable aspect of the session is which of the reference spaces should be used to represent the world's coordinate system. you can specify either required or optional reference spaces in order to obtain a session compatible with the reference spaces you need or prefer to use. ...
...And 2 more matches

Using the aria-invalid attribute - Accessibility
description this technique demonstrates how to use the aria-invalid attribute. the aria-invalid attribute is used to indicate that the value entered into an input field does not conform to the format expected by the application.this may include formats such as email addresses or telephone numbers. aria-invalid can also be used to indicate that a required field has not been filled in.the attribute should be programmatically set as a result of a validation process. this attribute can be used with any typical html form element; it is not limited to elements that have an aria role assigned. values vocabulary: false (default) no errors detected grammar a grammatical error has been detected. spelling a spelling error has been detected. true the value has failed validation. any...
... being submitted. note: opinions may differ on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore not normative. examples example 1: simple form validation the following snippet shows a simplified version of two form fields with a validation function attached to the blur event. ...
...ion provided above is one of those opinions and therefore not normative. examples example 1: simple form validation the following snippet shows a simplified version of two form fields with a validation function attached to the blur event. note that since the default value for aria-required is false, it is not strictly necessary to add the attribute to input. ...
...And 2 more matches

ARIA Test Cases - Accessibility
n-mapped aria roles is given. documenting and filing bugs review the information on how to file a bug on an aria implementation. when documenting an issue, please also list it in the relevant compatibility table below. when possible provide a link to the bug in the database so that its status can be reviewed. widget test cases alert simple alert complex alert real alert example with aria-required and aria-invalid -- type in a email address without an at sign to test the alert expected at behavior: a screen reader or screen magnifier must speak an alert when it becomes visible. a screen magnifier should move the current view to the alert or open a new panel with the alert information optional, but desired: if there are widgets within the alert, their role and any keyboard mnemonic (...
...when pressing space, new state should be announced automatically. markup used: role="checkbox" aria-checked="true" or "false" notes: need testcase where ...
...leopard) pass n/a pass pass zoomtext - - - - orca - - - - img tiled image expected at behavior: screen readers should announce the image is a single graphic element along with its associated label, even though it is built from numerous sub-images. markup used: role="img" notes: if the screen reader does not provide the required behavior, then most likely it is a browser issue, for not respecting "children presentational: true" for that role. the accessible hierarchy should contain no children for the img. results: at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 - - - - voiceover (leopard) n/a n/a - fail window-eyes - ...
...And 2 more matches

Creating a cross-browser video player - Developer guides
this article describes a simple html5 video player that uses the media and fullscreen apis and works across most major desktop and mobile browsers. as well as working fullscreen, the player features custom controls rather than just using the browser defaults. the player controls themselves won't be styled beyond the basics required to get them working; full styling of the player will be taken care of in a future article. working example our example video player displays a clip from an open source movie called tears of steel, and includes typical video controls. note: you can see the example running live, or check out the source code on github. html markup to start off with, let's take a look at the html that makes up the player. the video first of all the <video> element is de...
...s developers access to and control of html5 media. this api will be used to make the custom control set defined above actually do something. in addition, the fullscreen button will use the fullscreen api, another w3c api that controls the ability of web browsers to show apps using your computer's full screen. setup before dealing with the individual buttons, a number of initialisation calls are required. to begin with, it's a good idea to first check if the browser actually supports the <video> element and to only setup the custom controls if it does. this is done by simply checking if a created <video> element supports the canplaytype() method, which any supported html5 <video> element should. var supportsvideo = !!document.createelement('video').canplaytype; if (supportsvideo) { // set up...
...deo> element supports the canplaytype() method, which any supported html5 <video> element should. var supportsvideo = !!document.createelement('video').canplaytype; if (supportsvideo) { // set up custom controls // ... } once it has been confirmed that the browser does indeed support html5 video, it's time to set up the custom controls. ...
...And 2 more matches

<input type="month"> - HTML: Hypertext Markup Language
. this value must be a year-month pairing which is earlier than or equal to the one specified by the max attribute. readonly a boolean attribute which, if present, means this field cannot be edited by the user. its value can, however, still be changed from javascript code that directly sets the value of the htmlinputelement.value property. note: because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified. step the step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. only values which are equal to the basis for stepping (min if specified, value otherwise, and an appropriate default value if neither of those is provided) are valid. ...
...apply any validation to entered values. the ui implementations generally don't let you enter anything that isn't a date — which is helpful — but you can still submit the form with the month input empty, or enter an invalid date (e.g. the 32nd of april). ...
... min and max to restrict the available dates (see setting maximum and minimum dates), and in addition use the required attribute to make filling in the date mandatory. as a result, supporting browsers will display an error if you try to submit a date that is outside the set bounds, or an empty date field. ...
...And 2 more matches

<input type="week"> - HTML: Hypertext Markup Language
isn't a valid week string, the input has no minimum value. this value must be less than or equal to the value of the max attribute. readonly a boolean attribute which, if present, means this field cannot be edited by the user. its value can, however, still be changed by javascript code directly setting the htmlinputelement.value property. note: because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified. step the step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. only values which are equal to the basis for stepping (min if specified, value otherwise, and an appropriate default value if neither of those is provided) are valid. ...
...="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } the result here is that only weeks between w01 and w52 in 2017 will be seen as valid and be selectable in supporting browsers. ...
...+ span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } the result here is that only weeks between w01 and w52 in 2017 will be seen as valid and be selectable in supporting browsers. ...
...And 2 more matches

SVG Attribute reference - SVG: Scalable Vector Graphics
calcmode cap-height class clip clippathunits clip-path clip-rule color color-interpolation color-interpolation-filters color-profile color-rendering contentscripttype contentstyletype cursor cx cy d d decelerate descent diffuseconstant direction display divisor dominant-baseline dur dx dy e edgemode elevation enable-background end exponent externalresourcesrequired f fill fill-opacity fill-rule filter filterres filterunits flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight format from fr fx fy g g1 g2 glyph-name glyph-orientation-horizontal glyph-orientation-vertical glyphref gradienttransform gradientunits h hanging height href hreflang horiz-adv-x ...
...erator order orient orientation origin overflow overline-position overline-thickness p panose-1 paint-order path pathlength patterncontentunits patterntransform patternunits ping pointer-events points pointsatx pointsaty pointsatz preservealpha preserveaspectratio primitiveunits r r radius referrerpolicy refx refy rel rendering-intent repeatcount repeatdur requiredextensions requiredfeatures restart result rotate rx ry s scale seed shape-rendering slope spacing specularconstant specularexponent speed spreadmethod startoffset stddeviation stemh stemv stitchtiles stop-color stop-opacity strikethrough-position strikethrough-thickness string stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterl...
... xlink attributes xlink:href, xlink:type, xlink:role, xlink:arcrole, xlink:title, xlink:show, xlink:actuate presentation attributes note that all svg presentation attributes can be used as css properties. alignment-baseline, baseline-shift, clip, clip-path, clip-rule, color, color-interpolation, color-interpolation-filters, color-profile,...
...And 2 more matches

passwords - Archive of obsolete content
the server may include a "realm" field as detailed in rfc 2617. if it does, this property contains the value for the "realm" field. otherwise, it is omitted. the realm is displayed in firefox's password manager, under "site", in brackets after the url. so: if a web server at http://www.example.com requested authentication with a response code like this: http/1.0 401 authorization required server: apache/1.3.27 www-authenticate: basic realm="exampleco login" the corresponding values for the credential (excluding username and password) should be: url: "http://www.example.com" realm: "exampleco login" oncomplete and onerror this api is explicitly asynchronous, so all its functions take two callback functions as additional options: oncomplete and onerror. oncomplete is called...
...it is passed all the matching credentials as a list. this is the only mandatory option. optional options: name type username string the username for the credential. password...
...m: "exampleco login", username: "joe", password: "secret123", }); see "credentials" above for more details on how to set these properties. the options parameter may also include oncomplete and onerror callback functions, which are called when the function has completed successfully and when it encounters an error, respectively. these options are both optional. parameters options : object required options: name type username string the username for the credential. password string the password for the credential. optional options: name type url string the url to which the credential applies. omitted for add-on credentials. formsubmiturl string the ur...
... password string the password for the credential. optional options: name type url string the url to which the credential applies. omitted for add-on credentials. formsubmiturl string the ur...

Appendix: What you should know about open-source software licenses - Archive of obsolete content
...
...st not be specific to a product; license must not interfere with other software. the “no discrimination may be made against individuals or organizations” rule means that you cannot prohibit it from any particular country. the “no discrimination may be made based on field of endeavor” rule means that you cannot prevent it from being used in warfare. the “no additional licensing can be required when redistributing” rule means that you cannot prohibit the software’s use from anyone who does not buy a separate license. because the oss license is intended to foster source-code reuse and mutual development, it avoids restrictions on source-code duplication, distribution, and modification to the greatest extent possible. types of oss licenses and their characteristics the details of o...
...sidered modifications? license revision addition static link dynamic link gpl y y y y lgpl y y y n mpl y y n n if you release software under the gpl, lgpl, or mpl, any modifications to it must also be released. however, if the modified version is never distributed, it need not be released. copyleft is not required a common misconception regarding open source is that any modification made to open-source code must also be released as open source. this condition only applies under some open-source licenses (such as the gpl). this condition, which is commonly referred to as “copyleft,” mandates that any modification to the source code, or any new code combined with the source code, must be released under...
...es 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 no modifications payment required certain uses are permitted depending on which license you choose english version is the official text nearly all oss licenses take english as their official texts. japanese versions, for example, are mentioned only as reference translations. thanks to the internet, published source code can be used all over the world, so the language that the most people will be able to under...

Updating addons broken by private browsing changes - Archive of obsolete content
fox 20 (and will require updating to work correctly in releases of firefox since the ones listed). idls nsitransferable: see using the clipboard for information about the new init method. imgicache: this must no longer be obtained as a service. see the imgicache article for more information. ...
...use privatebrowsingutils.getprivacycontextfromwindow(win) to obtain it from the relevant window. nsidownloadmanager/nsidownload: integer download ids (and specifically the id property of nsidownload) are deprecated, and don't allow access to private downloads. ...
...r to indicate desired properties of the window. passing {private: true} will cause a private window to open, otherwise the window will always be non-private. use {private: privatebrowsingutils.iswindowprivate(window)} to open a window that matches the current window's privacy status. openlinkin: can receive an extra private boolean property in the parameter object. internalsave: takes a new required document argument (prior to the optional boolean and string arguments) indicating the document that originated the save action. gprivatebrowsingui: can no longer be used to control private browsing of any kind. any new private browsing session should be opened using openbrowserwindow, and any queries for private browsing status should use privatebrowsingutils.iswindowprivate(win) on a relevant...
...l boolean and string arguments) indicating the document that originated the save action. gprivatebrowsingui: can no longer be used to control private browsing of any kind. any new private browsing session should be opened using openbrowserwindow, and any queries for private browsing status should use privatebrowsingutils.iswindowprivate(win) on a relevant window object. saveurl: takes a new required document argument indicating the source of the url being saved. ...

Creating a Help Content Pack - Archive of obsolete content
ows: rdf:about must be urn:root or your pack won't work. this attribute marks the start point in the rdf graph described by the file, and the help viewer searches for this element in order to query for further information (stored in child elements) about the content pack being parsed. nc:title is where you specify the title (e.g., "mozilla firefox help") for the help window. this attribute is required. nc:defaulttopic will hold the rdf:id of the topic you want displayed when the viewer first loads if none has been specified. this attribute also specifies what topic is loaded when the user hits the home button in the viewer. we'll get to exactly how to fill in this attribute later. this attribute is optional, with fallback to the value welcome. nc:base contains the base url relative to which ...
...ich the information stored in the referenced data sources applies. this attribute is useful when some of your help contents only apply to one specific platform. if this attribute is omitted, the information in the data sources applies to all platforms. the attribute is a space-separated list of platform strings. strings recognized from 1.8 onward are win, mac, os2, and unix; more will be added as required. unrecognized strings are ignored during parsing. an example of how to use this attribute follows: <!-- assumptions: win-toc.rdf contains windows- and os/2-specific info, unix-toc.rdf contains linux- and mac-specific info. --> <rdf:li> <rdf:description nc:panelid="toc" ...
...ssary definitions. nc:platform (added in mozilla 1.8b2/firefox 1.1) may be used on search data sources as it's used on table of contents, index, and glossary definitions. nc:emptysearchtext specifies the text that is shown when a search through help returns no results. nc:emptysearchlink specifies what uri should be shown when the pseudo-result "no results found" is accessed. this attribute is required. the sample page chrome://help/locale/welcome.xhtml has a section on searching which may be a useful link to use here. note that you can use the nc:datasources attribute to inherit content from other content packs. one common use of this is to inherit the small using the help window article provided with the viewer. for example, the following code uses a datasource outside the content pack you ...
... the outer framework of a glossary description file. to add data to it, add one of the following per entry in your glossary within the rdf:seq above: <rdf:li> <rdf:description nc:name="" nc:link=""/> </rdf:li> the rdf:li element serves purely to contain each separate entry. the rdf:description element describes the glossary entry. it has two required attributes: nc:name and nc:link. nc:name is the name for the entry - it's what's currently displayed in the glossary as the entry's title. nc:link contains a uri referencing what will be displayed in the viewer when the entry is accessed. the index file one important note on the index file is that there is no automatically generated set of top-level letters (e.g., a for accessibility and autom...

Microsummary XML grammar reference - Archive of obsolete content
elements in a microsummary generator document should be in this namespace except the descendants of the <template> element, which should be in the xslt namespace: http://www.w3.org/1999/xsl/transform the <generator> element the <generator> element is the root tag for all microsummary generators, and should contain the remainder of the xml code describing the generator. attributes: name (required) a descriptive, human-readable name for the microsummary created by the generator. uri (optional) a valid uri uniquely identifying the generator. only relevant for generators dynamically created by firefox code and extensions. generators installed from the web via nssidebar::addmicrosummarygenerator are identified by the remote url from which they were downloaded, and firefox...
...rator. uri (optional) a valid uri uniquely identifying the generator. only relevant for generators dynamically created by firefox code and extensions. generators installed from the web via nssidebar::addmicrosummarygenerator are identified by the remote url from which they were downloaded, and firefox ignores the value of this attribute for them. child elements: <template> (required) defines how to transform pages into their microsummaries. <pages> (required) identifies the set of pages that the generator is able to summarize. <update> (optional) specifies how frequently firefox should update the microsummaries. the <template> element the <template> element contains the xslt stylesheet which transforms web pages into their microsummaries. ...
... per xslt, you may specify the stylesheet child element using either the <stylesheet> or the <transform> tag, which are interchangeable. ...
...mmary if the cache contains a fresh copy of the page. the <condition> element the optional <condition> element specifies an xpath boolean expression along with a conditional interval of time, in minutes, that must elapse between updates if the expression evaluates to true when evaluated against the page being summarized. it must be a child of the <update> element. attributes: expression (required) an xpath boolean expression to be evaluated against the page being summarized. interval (required) an interval of time, in minutes, that must elapse between updates if the expression evaluates to true. child elements: none. for more information about the use of this element, see the entry for the <update> element. see also creating a microsummary xslt ...

Installer Script - Archive of obsolete content
logcomment(" available: " + spaceavailable + " k"); 15. return(false); 16. } 17. return(true); 18. } 19. ...
... logcomment(" available: " + spaceavailable + " k"); 15. return(false); 16. } 17. return(true); 18. } 19. var srdest = 17311; 20. ...
... logcomment(" available: " + spaceavailable + " k"); 15. ...
... logcomment(" available: " + spaceavailable + " k"); 15. return(false); 16. } 17. ...

Learn XPI Installer Scripting by Example - Archive of obsolete content
initialization process. verifying the target the first thing the installation script does when it's executed is to check that there is adequate disk space for the software to be installed, where the verifydiskspace function is called as a condition of the main installation block that starts at line 24). ...
...this input is defined in line 22, where getfolder() is used to assign...
...erequired) { var spaceavailable; // get the available disk space on the given path spaceavailable = filegetdiskspaceavailable(dirpath); // convert the available disk space into kilobytes spaceavailable = parseint(spaceavailable / 1024); // do the verification if(spaceavailable < spacerequired) { logcomment("insufficient disk space: " + dirpath); logcomment(" required : " + spacerequired + " k"); logcomment(" available: " + spaceavailable + " k"); return(false); } return(true); } in the verifydiskspace block, filegetdiskspaceavailable is called with dirpath as its expected input. this input is defined in line 22, where getfolder() is used to assign a value to the communicatorfolder variable representing the "program" folder on the local s...
... return(true); } in the verifydiskspace block, filegetdiskspaceavailable is called with dirpath as its expected input. this input is defined in line 22, where getfolder() is used to assign a value to the communicatorfolder variable representing the "program" folder on the local system: var communicatorfolder = getfolder("program"); spaceavailable = filegetdiskspaceavailable(dirpath); spacerequired, the other expected input to the verifydiskspace function, is given as 17311 kilobytes on line 19. inside the function, the two sizes are compared and if the available space is larger than the required space, the installation proceeds. adding files and directories (full of files) to the install once you have verified that the target can accomodate the software to be installed and initialized th...

Attribute - MDN Web Docs Glossary: Definitions of Web-related terms
an attribute extends an element, changing its behavior or providing metadata. an attribute always has the form name="value" (the attribute's identifier followed by its associated value). ...
... an attribute extends an element, changing its behavior or providing metadata. an attribute always has the form name="value" (the attribute's identifier followed by its associated value). ...
...ement, changing its behavior or providing metadata. an attribute always has the form name="value" (the attribute's identifier followed by its associated value). you may see attributes without the equals sign or a value. ...
...nging its behavior or providing metadata. an attribute always has the form name="value" (the attribute's identifier followed by its associated value). you may see attributes without the equals sign or a value. ...

Example - Learn web development
this the example for a basic payment form for the article how to structure an html form. ...
... this the example for a basic payment form for the article how to structure an html form. ...
... <input type="radio" id="title_2" name="title" value="k" > king </label> </li> <li> <label for="title_3"> <input type="radio" id="title_3" name="title" value="q"> queen </label> </li> </ul> </fieldset> <p> <label for="name"> <span>name: </span> <strong><abbr title="required">*</abbr></strong> </label> <input type="text" id="name" name="username"> </p> <p> <label for="mail"> <span>e-mail: </span> <strong><abbr title="required">*</abbr></strong> </label> <input type="email" id="mail" name="usermail"> </p> <p> <label for="pwd"> <span>password: </span> <strong><abbr title="required">*</a...
...ation</h2> <p> <label for="card"> <span>card type:</span> </label> <select id="card" name="usercard"> <option value="visa">visa</option> <option value="mc">mastercard</option> <option value="amex">american express</option> </select> </p> <p> <label for="number"> <span>card number:</span> <strong><abbr title="required">*</abbr></strong> </label> <input type="tel" id="number" name="cardnumber"> </p> <p> <label for="date"> <span>expiration date:</span> <strong><abbr title="required">*</abbr></strong> <em>formatted as mm/dd/yyyy</em> </label> <input type="date" id="date" name="expiration"> </p> </section> <section> <p> <button type="submit"...

Package management basics - Learn web development
idn’t install! parcel has spotted that you need the module, searched for it in the npmjs.com package registry, and installed it locally for us, automatically. you can prove this by looking in our package.json file again — you'll see that the dependencies field have been updated for us: "dependencies": { "date-fns": "^2.12.0", "parcel-bundler": "^1.12.4" } parcel has also added the files required for someone else to pick up this project and install any dependencies that we’ve used. if you take a look in the directory you ran the parcel command in, you’ll find a number of new files; the most interesting of which are: node_modules: the dependency files of parcel and date-fns. dist: the distribution directory — these are the automatically packaged, minified files parcel has built f...
...ode: webpack, rollup, and parcel. there will be more available than this, but these are popular ones: the rollup tool offers tree shaking and code splitting as it’s core features. webpack requires some configuration (though “some” might be understating the complexity of some developers’ webpack configurations). in the case of parcel (prior to parcel version 2), there's a special flag required — --experimental-scope-hoisting — which will tree shake while building. let’s stick with parcel for now, given that we’ve already got it installed. try running the following command: parcel build index.html --experimental-scope-hoisting you’ll see that this makes a huge difference: ✨ built in 7.87s. dist/my-project.86f8a5...
...following main package managers are available: npm at npmjs.org pnpm at pnpm.js.org yarn at yarnpkg.com npm and pnpm are similar from a command line point of view — in fact pnpm aims to have full parity over the argument options that npm offers. it differs in that it uses a different method for downloading and storing the packages on your computer, aiming to reduce the overall disk space required. where npm is shown in the examples below, pnpm can be swapped in and the command will work. yarn is often thought to be quicker than npm in terms of installation process (though your mileage may vary). this is important to developers because there can be a significant amount of time wasted on waiting for dependencies to install (and copy to the computer). note: the npm package manager is not...
... where npm is shown in the examples below, pnpm can be swapped in and the command will work. yarn is often thought to be quicker than npm in terms of installation process (though your mileage may vary). this is important to developers because there can be a significant amount of time wasted on waiting for dependencies to install (and copy to the computer). note: the npm package manager is not required to install packages from the npm registry, even though they share the same name. pnpm and yarn can consume the same package.json format as npm, and can install any package from the npm and other package registries. let’s review the common actions you’ll want to perform with package managers. initialise a new project npm init yarn init as shown above, this will prompt and walk you through...

Addon
an addon represents an add-on that is either installed or can be installed. instances can be created using the many getaddon methods on the addonmanager object. the interface can represent many different kinds of add-ons and as such, some of the methods and properties are considered "required" and others "optional," which means that the optional methods or property may not exist on addon instances for some types of add-ons. ...
... object. the interface can represent many different kinds of add-ons and as such, some of the methods and properties are considered "required" and others "optional," which means that the optional methods or property may not exist on addon instances for some types of add-ons. api consumers should take care to verify the existence of these methods or properties before relying on them. ...
... blockliststate read only integer the current blocklist state of this add-on; see nsiblocklistservice for possible values. creator read only addonauthor ...
...tus read only integer callbacks datadirectorycallback() a callback which is passed a directory path, and, when an error has occured, an error object. void datadirectorycallback( in string path, in error error ) parameters path a string representation of the addon's data directory. error if an error has occured, an error object relevant to the error, othereise null. required methods iscompatiblewith() tests whether this add-on is known to be compatible with a particular application and platform version. void iscompatiblewith( in string appversion, in string platformversion ) parameters appversion an application version to test against platformversion a platform version to test against findupdates() starts an update check for this add-on. this will pe...

sslerr.html
change algorithm." an ssl client has requested an ssl cipher suite that uses a key exchange algorithm for which the local server has no appropriate public key. this indicates a configuration error on the local server. ...
..."pkcs #11 token was inserted or removed while operation was in progress." a cryptographic operation required to complete the handshake failed because the token that was performing it was removed while the handshake was underway. another token may also have been inserted into the same slot. ssl_error_token_slot_not_found -12204 "no pkcs#11 token could be found to do a required operation." a cryptographic operation required a pkcs#11 token with specific abilities, and no token could be found in any slot, including the "soft token" in the internal virtual slot, that could do the job. may indicate a server configuration error, such as having a certificate that is inappropriate for the key exchange algorithm selected. ssl_error_no_compression_overla...
... returned by pkcs#11 routines that did not provide meaningful error codes of their own. these should rarely be seen. ...
... sec_error_baggage_not_created -8121 error while creating baggage object. xp_java_remove_principal_error -8120 couldn't remove the principal. xp_java_delete_privilege_error -8119 couldn't delete the privilege xp_java_cert_not_exists_error -8118 this principal doesn't have a certificate. sec_error_bad_export_algorithm -8117 required algorithm is not allowed. sec_error_exporting_certificates -8116 error attempting to export certificates. sec_error_importing_certificates -8115 error attempting to import certificates. sec_error_pkcs12_decoding_pfx -8114 unable to import. decoding error. file not valid. sec_error_pkcs12_invalid_mac -8113 unable to import. invalid mac. i...

Animated PNG graphics
st or second frame), the 'fctl' chunk must appear after all 'idat' chunks and before the 'fdat' chunks for the frame. for all subsequent frames, the 'fctl' chunk for frame n must appear after the 'fdat' chunks from frame n-1 and before the 'fdat' chunks for frame n. other ancillary chunks are allowed to appear among the apng chunks, including between 'fdat' chunks. exactly one 'fctl' chunk is required for each frame. byte offset field name field type description 0 sequence_number unsigned int sequence number of the animation chunk, starting with 0. 4 width unsigned int width of the following frame. 8 height unsigned int height of the following frame. 12 x_offset unsigned int x position at which to render...
... a fraction indicating the time to display the current frame, in seconds. if the denominator is 0, it is to be treated as if it were 100 (that is, delay_num then specifies 1/100ths of a second). if the the value of the numerator is 0 the decoder should render the next frame as quickly as possible, though viewers may impose a reasonable lower bound. frame timings should be independent of the time required for decoding and display of each frame, so that animations will run at the same rate regardless of the performance of the decoder implementation. dispose_op specifies how the output buffer should be changed at the end of the delay (before rendering the next frame). valid values for dispose_op are: value constant description 0 apng_dispose_op_none no disposal is do...
...ntical. for example, if the default image is included in the animation, and uses a blend_op of apng_blend_op_source, clearing is not necessary because the entire output buffer will be overwritten. 'fdat': the frame data chunk the 'fdat' chunk has the same purpose as an 'idat' chunk. it has the same structure as an 'idat' chunk, except preceded by a sequence number. at least one 'fdat' chunk is required for each frame. the compressed datastream is then the concatenation of the contents of the data fields of all the 'fdat' chunks within a frame. when decompressed, the datastream is the complete pixel data of a png image, including the filter byte at the beginning of each scanline, similar to the uncompressed data of all the 'idat' chunks. it utilizes the same bit depth, color type, compression me...
...nd adat from 0.6 the fdat chunk is no longer a container for other chunks, but rather a replacement for an idat chunk removed the fend chunk added a sequence number field to fdat reintroduced the width and height fields in fctl from 0.7 removed hidden flag, instead only the first frame can be hidden and it is signaled with a missing fctl idat, fctl and fdat are no longer required to have no other chunks in between them from 0.8 removed crcs for ihdr and plte from actl the actl fctl and adat are now not copy safe, renamed them to actl, fctl and adat from 0.9 split render_op into dispose_op and blend_op from 0.10 no changes test encoder and sample images sample images are available from the apng implementation page at http://littlesvr.ca/apng/ an enco...

How to build an XPCOM component in JavaScript
ion must be compiled into a binary format (xpt) in order to be registered and used within mozilla applications. the compilation can be done using the gecko sdk. you can learn how to get mac, linux, and windows versions of the gecko sdk by reading the article gecko sdk. for code outside the tree note: on windows if you download the gecko sdk without the whole build tree, you will be missing some required dlls for xpidl.exe and it will run with no errors but not do anything. to fix this download the mozilla build tools for windows and copy the dlls from windows\bin\x86 within the zip into the bin directory of the gecko sdk. note: the mac version of the sdk provided for download is powerpc-only. if you need an intel version, you'll need to compile it yourself as described on that page. execute th...
...if not // provided, the default factory is used, which returns // |(new mycomponent()).queryinterface(ii...
...f 'value' is not // specified, the concatenation of the string "service," and the object's contractid // is passed as avalue parameter of addcategoryentry. service: true }], // queryinterface implementation, e.g. ...
...oworld]; if ("generatensgetfactory" in xpcomutils) var nsgetfactory = xpcomutils.generatensgetfactory(components); // firefox 4.0 and higher else var nsgetmodule = xpcomutils.generatensgetmodule(components); // firefox 3.x note: starting with firefox 4.0 you will need to declare your component in chrome.manifest; classdescription and contractid properties on the other hand are no longer required. see xpcom changes in gecko 2.0 for more details. installation for extensions: copy helloworld.js, and helloworld.xpt (only if you defined and compiled the idl) to {extensiondir}/components/. delete compreg.dat and xpti.dat from your profile directory. restart application. for firefox: copy helloworld.js, and helloworld.xpt (only if you defined and compiled the idl) to the {objdir}/di...

Mailnews and Mail code review requirements
ui-review is obtained at an early stage in the patch development process. getting early ui-reviews this reduces the chance that work is rejected due to needing further user experience changes, and hence is aimed at saving time for the developer and reviewers. all patches that affect user experience or interfaces on thunderbird should have ui-review on those patches in addition to the reviews required below. to obtained a ui-review on an attachment, set ui-review to '?' and enter :bwinton (for blake winton) as the requestee. mike conley (:mconley) can also provide useful feedback, but blake is the current ultimate decider for ui choices in thunderbird. rules for all patches affecting mailnews/ and mail/ wherever possible, significant patches in a certain area should be reviewe...
...ne of the listed sub-module owner/reviewers. peers may grant review in any area covered by mailnews/, provided they feel confident in their knowledge of the code being changed. sub-module peers may only grant review in the listed sub-module. if a reviewer feels that the patch would benefit from additional reviews, they should request a second review from an appropriate person. ...
...ed sub-module. if a reviewer feels that the patch would benefit from additional reviews, they should request a second review from an appropriate person. super-review is required in certain situations: significant architectural refactoring, any change to any api, all changes that affect how code modules interact. see the full super-review policy for more details. unit test rules patches are required to include automated tests which are run during make check or via mozmill in thunderbird, but submitters are encouraged to request exceptions from reviewers in cases where the cost is believed to outweigh the benefit. once unit tests are committed, the in-testsuite+ flag should be set on the bug. unit tests must be included in patches and reviewed just like any other code. if an automated test ...
...ed on the try server. for xpcshell tests, it has either passed on try or has been run locally on the appropriate platform(s). specifically, if the xpcshell test will do different things on windows than it will do on os x or linux, it must be run on windows and one of os x / linux. the author of the patch is the module owner or a peer of the module to which the test corresponds. a bug is still required, even if it is immediately marked fixed. rs=orange-debugging requirements: the patch is trying to fix an intermittent orange test failure. the patch only touches test logic. the patch only adds/modifies logging statements, although the logs can be conditional. the patch must have been run at least once on the try server. (i have done some mozmill orange fixing where the try server would...

MediaDevices.getUserMedia() - Web APIs
audio source like a microphone, a/d converter, or the like), and possibly other track types. it returns a promise that resolves to a mediastream object. if the user denies permission, or matching media is not available, then the promise is rejected with notallowederror or notfounderror respectively. note: it's possible for the returned promise to neither resolve nor reject, as the user is not required to make a choice at all and may simply ignore the request. generally, you will access the mediadevices singleton object using navigator.mediadevices, like this: async function getmedia(constraints) { let stream = null; try { stream = await navigator.mediadevices.getusermedia(constraints); /* use the stream */ } catch(err) { /* handle the error */ } } similarly, using the...
...g the media types requested. either or both must be specified. if the browser cannot find all media tracks with the specified types that meet the constraints given, then the returned promise is rejected with notfounderror. the following requests both audio and video without any specific requirements: { audio: true, video: true } if true is specified for a media type, the resulting stream is required to have that type of track in it. if one cannot be included for any reason, the call to getusermedia() will result in an error. while information about a user's cameras and microphones are inaccessible for privacy reasons, an application can request the camera and microphone capabilities it needs and wants, using additional constraints. the following expresses a preference for 1280x720 camera r...
...y and security requirements that browsers are obligated to meet. getusermedia() is a powerful feature which can only be used in secure contexts; in insecure contexts, navigator.mediadevices is undefined, preventing access to getusermedia(). a secure context is, in short, a page loaded using https or the file:/// url scheme, or a page loaded from localhost. in addition, user permission is always required to access the user's audio and video inputs. only a window's top-level document context for a valid origin can even request permission to use getusermedia(), unless the top-level context expressly grants permission for a given <iframe> to do so using feature policy. otherwise, the user will never even be asked for permission to use the input devices. for additional details on these requirements ...
...permission management. first, getusermedia() must always get user permission before opening any media gathering input such as a webcam or microphone. browsers may offer a once-per-domain permission feature, but they must ask at least the first time, and the user must specifically grant ongoing permission if they choose to do so. of equal importance are the rules around notification. browsers are required to display an indicator that shows that a camera or microphone is in use, above and beyond any hardware indicator that may exist. they must also show an indicator that permission has been granted to use a device for input, even if the device is not actively recording at the moment. for example in firefox, the url bar displays a pulsing red icon to indicate that recording is underway. the icon is...

SecurityPolicyViolationEvent.SecurityPolicyViolationEvent() - Web APIs
properties type a domstring representing the type of security policy violation that occurred. eventinitdict optional a dictionary object containing information about the properties of the securitypolicyviolationevent to be constructed. this can include the following properties, but bear in mind that if you do include an eventinitdict, certain properties must be included (marked below with required): blockeduri: the blockeduri of the securitypolicyviolationevent. if not included, the default value is "". columnnumber: the columnnumber of the securitypolicyviolationevent. if not included, the default value is 0. disposition: the disposition of the securitypolicyviolationevent (required). documenturi: the documenturi of the securitypolicyviolationevent (required). effectivedirecti...
...event. if not included, the default value is "". columnnumber: the columnnumber of the securitypolicyviolationevent. if not included, the default value is 0. disposition: the disposition of the securitypolicyviolationevent (required). documenturi: the documenturi of the securitypolicyviolationevent (required). effectivedirective: the effectivedirective of the securitypolicyviolationevent (required). linenumber: the linenumber of the securitypolicyviolationevent. if not included, the default value is 0. originalpolicy: the originalpolicy of the securitypolicyviolationevent (required). referrer: the referrer of the securitypolicyviolationevent. if not included, the default value is "". sample: the sample of the securitypolicyviolationevent. if not included, the default value is "". ...
... return value a securitypolicyviolationevent object instance. example let spvevt = new securitypolicyviolationevent('foo', { ... ...
...included, the default value is "". sample: the sample of the securitypolicyviolationevent. if not included, the default value is "". sourcefile: the sourcefile of the securitypolicyviolationevent. if not included, the default value is "". statuscode: the statuscode of the securitypolicyviolationevent (required). violateddirective: the violateddirective of the securitypolicyviolationevent (required). return value a securitypolicyviolationevent object instance. example let spvevt = new securitypolicyviolationevent('foo', { ... }); specifications specification status comment content security policy level 3the definition of 'securitypolicyviolationevent' in that specification. working draft initial definition ...

Signaling and video calling - Web APIs
s a target property. if that property is present, it specifies the username of the client to which the message is to be sent, and we call sendtooneuser() to send the message to them. otherwise, the message is broadcast to all users by iterating over the connection list, sending the message to each user. as the existing code allows the sending of arbitrary message types, no additional changes are required. our clients can now send messages of unknown types to any specific user, letting them send signaling messages back and forth as desired. that's all we need to change on the server side of the equation. now let's consider the signaling protocol we will implement. designing the signaling protocol now that we've built a mechanism for exchanging messages, we need a protocol defining how those mes...
...advertently sending video and/or audio data when the user isn't prepared for it. as soon as media is attached to the rtcpeerconnection, a negotiationneeded event is triggered at the connection, so that ice negotiation can be started. if an error occurs while trying to get the local media stream, our catch clause calls handlegetusermediaerror(), which displays an appropriate error to the user as required. handling getusermedia() errors if the promise returned by getusermedia() concludes in a failure, our handlegetusermediaerror() function performs. function handlegetusermediaerror(e) { switch(e.name) { case "notfounderror": alert("unable to open your call because no camera and/or microphone" + "were found."); break; case "securityerror": case "permissionde...
...tun server but abusing these is bad form. each object in iceservers contains at least a urls field providing urls at which the specified server can be reached. it may also provide username and credential values to allow authentication to take place, if needed. after creating the rtcpeerconnection, we set up handlers for the events that matter to us. the first three of these event handlers are required; you have to handle them to do anything involving streamed media with webrtc. the rest aren't strictly required but can be useful, and we'll explore them. there are a few other events available that we're not using in this example, as well. here's a summary of each of the event handlers we will be implementing: rtcpeerconnection.onicecandidate the local ice layer calls your icecandidate event...
...idate". target the username the ice candidate needs to be delivered to. this lets the signaling server route the message. candidate the sdp representing the candidate the ice layer wants to transmit to the other peer. the format of this message (as is the case with everything you do when handling signaling) is entirely up to you, depending on your needs; you can provide other information as required. note: it's important to keep in mind that the icecandidate event is not sent when ice candidates arrive from the other end of the call. instead, they're sent by your own end of the call so that you can take on the job of transmitting the data over whatever channel you choose. this can be confusing when you're new to webrtc. receiving ice candidates the signaling server delivers each ice can...

Using bounded reference spaces - Web APIs
prepared to fall back to some other type of reference space. understanding boundaries as mentioned previously, the boundary is defined as an array of points located at floor level, each defining a corner of the boundary area, going around the origin in a clockwise manner. this is demonstrated in the diagram below. ...
...gram below. this diagram defines the boundaries of room with the origin in the center, as required, and a set of 12 points representing the vertices of the available physical space. there are two cut-out areas in the room, possibly representing a couch, sofa, or bench behind the user and a stand or table on which the computer or other hardware is located. as this suggests, the safe area is not required to be convex, but may have any number of indentations or extrusions, as long as it's a contiguous shape, note that the coordinates of the origin here, (0, 0), are indicative of the fact that the boundaries are defined at floor level and are essentially a 2d shape on the floor, like an invisible fence used to keep pets from getting away from home. the full coordinates here would be (0, 0, 0). th...
...ook at how to safely create a session that will work whether bounded spaces are supported or not. safely creating a bounded-preferred space before actually attempting to create a bounded reference space, you need to create a session that supports them. ...
...port bounded reference spaces as an option rather than as a required feature unless you have special knowledge of the environment in which your code will run. you can create a session that supports a bounded-floor reference space if available by using code such as the following: async function onactivatexrbutton(event) { if (!xrsession) { navgator.xr.requestsession("immersive-vr"), { requiredfeatures: ["local-floor"], optionalfeatures: ["bounded-floor"] }).then((session) => { xrsession = session; startsessionanimation(); }); } } this function, called when the user clicks on a button to start the xr experience, works as usual, exiting at once if a session is already in place, then requesting a new session using immersive-vr mode. the options specified when...

ARIA: checkbox role - Accessibility
hecked="false" tabindex="0" aria-labelledby="chk1-label"> </span> <label id="chk1-label">remember my preferences</label> the first rule of aria is if a native html element or attribute has the semantics and behavior you require, use it instead of re-purposing an element and adding aria. instead use the native html checkbox of <input type="checkbox">, which natively provides all the functionality required: <input type="checkbox" id="chk1-label"> <label for="chk1-label">remember my preferences</label> description the native html checkbox form control can only have two checked states ("checked" or "not checked"), with an indeterminate state settable via javascript. similarly, an element with role="checkbox" can expose three states through the aria-checked attribute: true, false, or mixed. sinc...
...arly, an element with role="checkbox" can expose three states through the aria-checked attribute: true, false, or mixed. since a checkbox is an interactive control, it must be focusable and keyboard accessible. if the role is applied to a non-focusable element, use the tabindex attribute to change this. the expected keyboard shortcut for activating a checkbox is the space key. the developer is required to change the value of the aria-checked attribute dynamically when the checkbox is activated. associated wai-aria roles, states, and properties aria-checked the value of aria-checked defines the state of a checkbox. this attribute has one of three possible values: true the checkbox is checked false the checkbox is not checked mixed the checkbox is partially check...
...te has one of three possible values: true the checkbox is checked false the checkbox is not checked mixed the checkbox is partially checked, or indeterminate tabindex="0" used to make it focusable so the assistive technology user can tab to it and start reading right away. ...
...ossible values: true the checkbox is checked false the checkbox is not checked mixed the checkbox is partially checked, or indeterminate tabindex="0" used to make it focusable so the assistive technology user can tab to it and start reading right away. ...

Understandable - Accessibility
s/words. your site should provide a glossary that contains definitions of such words/terms that you can then link to when they appear, or at the very least provide definitions somewhere in the surrounding text, or in a description list at the bottom of the page. 3.1.4 abbreviations (aaa) where abbreviations are used, you should provide an expansion of them, or a definition as required. the <abbr> element is often thought of as the preferred way to provide an expansion for an abbreviation — it takes a title attribute that contains the expansion, and this appears when the acronym is moused over. however, the title contents are not accessible via keyboard, nor are they reliably read out by screenreaders. a better way to handle this is to again provide links to glossary pag...
...a page, provide an option to stop it automatically advancing. better to avoid such functionality if possible. note: also see the wcag description for guideline 3.2 predictable: make web pages appear and operate in predictable ways. guideline 3.3 — input assistance: help users avoid and correct mistakes this guideline centers around helping users enter correct information when required with the minimum of mistakes. success criteria how to conform to the criteria practical resource 3.3.1 error identification (a) when a user is filling out a form or choosing between options, any error that is detected should be clearly reported to the user, along with the form control that the error relates to. it is advisable to implement client-side err...
...used alongside client-side validation. client-side validation is too easy to turn off or otherwise get around, so it can't be relied on alone. see form data validation for comprehensive validation information, and wai-aria: dynamic content updates for information on live regions. 3.3.2 labels or instructions (a) clear instructions should be provided when data input is required. ...
...e validation is too easy to turn off or otherwise get around, so it can't be relied on alone. see form data validation for comprehensive validation information, and wai-aria: dynamic content updates for information on live regions. 3.3.2 labels or instructions (a) clear instructions should be provided when data input is required. when a simple instruction or prompt is required, you can use <label> elements for single inputs like name or age, a combination or <label>s and <fieldset>s/<legend>s for multiple inputs that go together (like the elements of a date of birth or postal address). when more complex explanation is required, you can always include explanatory paragraphs too, or maybe you need to try to make your forms more intuitive. meaningfu...

HTML attribute: multiple - HTML: Hypertext Markup Language
aying a scrolling list box for a <select> control with the multiple attribute set versus a single line dropdown when the attribute is ommitted. the email input displays the same, but will match the :invalid pseudo-class if more than one comma-separated email address is included if the attribute is not present. when multiple is set on the email input type, the user can inlclude zero (if not also required), one or more comma-separated email addresses. <input type="email" multiple name="emails" id="emails"> 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. when multiple is set on the file input type, the user can select one or more files. th...
...> <option>sleepy</option> <option>bashful</option> <option>sneezy</option> <option>dopey</option> <option>doc</option> </select> when multiple is specified, most browsers will show a scrolling list box instead of a single line dropdown. ...
...ers.com">sneezy</option> <option value="dopey@woodworkers.com">dopey</option> <option value="doc@woodworkers.com">doc</option> </datalist> input:invalid {border: red solid 3px;} 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. if the required attribute is present, at least one email address is required. some browsers support the appearance of the list of options from the associated <datalist> for subsequent email addresses when multiple is present. others do not. file input when multiple is set on the file input type, the user can select one or more files: <form method="post" enctype="multipart/form-data"> <p> <label for="...
...specification status comment html living standardthe definition of 'multiple attribute' in that specification. living standard html5the definition of 'multiple attribute' in that specification. recommendation accessibility concerns provide instructions to help users understand how to complete the form and use individual form controls. indicate any required and optional input, data formats, and other relevant information. when using the multiple attribute, inform the user that multiple values are allowed and provide directions on how to provide multiple values, such as "separate email addresses with a comma." setting size="1" on a multiple select can make it appear as a single select in some browsers, but then it doesn't expand on focus, harming us...

HTML documentation index - HTML: Hypertext Markup Language
ttributes, constraint validation api, reference the pattern attribute specifies a regular expression the form control's value should match. if a non-null value doesn't conform to the constraints set by the pattern value, the validitystate object's read-only patternmismatch property will be true. 46 html attribute: readonly attribute, attributes, constraint validation, forms, required the boolean readonly attribute, when present, makes the element not mutable, meaning the user can not edit the control. 47 html attribute: rel attribute, attributes, constraint validation, link, form, rel the rel attribute defines the relationship between a linked resource and the current document. valid on <link>, <a>, <area>, and <form>, the supported values depend on...
...utable, meaning the user can not edit the control. 47 html attribute: rel attribute, attributes, constraint validation, link, form, rel the rel attribute defines the relationship between a linked resource and the current document. valid on <link>, <a>, <area>, and <form>, the supported values depend on the element on which the attribute is found. 48 html attribute: required attribute, attributes, constraint validation, forms, required the boolean required attribute 49 html attribute: size attribute, html, input, reference, select the size attribute defines the width of the <input> and the height of the <select> element. for the input, if the type attribute is text or password then it's the number of characters. this must be an integer ...
... reference, select, text, usernames, autocomplete, form, passwords, textarea autocomplete lets web developers specify what if any permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field. 52 disabled attribute, attributes, constraint validation, forms, required the boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. the user can neither edit nor focus on the control, nor it's form control descendants. 53 html documentation index html, index, mdn meta a comprehensive index list of all the available html documentation. 54 html elements reference basi...
...r; a wide variety of types of input data and control widgets are available, depending on the device and user agent. 119 <input type="button"> element, forms, html, html forms, input, input element, input type, reference, button <input> elements of type button are rendered as simple push buttons, which can be programmed to control custom functionality anywhere on a webpage as required when assigned an event handler function (typically for the click event). 120 <input type="checkbox"> element, html, html forms, input, input types, reference, checkbox, form <input> elements of type checkbox are rendered by default as boxes that are checked (ticked) when activated, like you might see in an official government paper form. the exact appearance depends upon the ...

Web audio codec guide - Web media technologies
lt in significantly smaller compressed audio than lossless codecs do. generally speaking, the most common reasons to choose lossless audio are because you require archival-quality storage, or because the audio samples will be remixed and recompressed, and you wish to avoid the amplification of artifacts in the audio due to recompression. for real-time streaming of audio, a lossy codec is usually required in order to ensure the flow of data can keep up with the audio playback rate regardless of network performance. maximum number of channels the audio delivered to each speaker in a sound system is provided by one audio channel in a stream. monaural sound is a single channel. stereo sound is two. 5.1 surround sound has five audio channels, plus one low frequency enhancement (lfe) channel. lfe ch...
...instead, firefox relies upon a platform's native support for aac. this capability was introduced on each platform in different firefox releases: aac support in firefox using external library, by platform platform first firefox ve...
...instead, firefox relies upon a platform's native support for aac. this capability was introduced on each platform in different firefox releases: aac support in firefox using external library, by platform platform first firefox version with aac support ...
...r networking environments. µ-law is primarily used in north america and japan, with a-law being predominant elsewhere. the drawbacks to g.711 are obvious: small 8-bit samples and narrow audio frequency bandwidth. that having been said, it's been in use for decades, is "good enough" for voice applications, and is vital if you may need to interface with a standard telephone network. this codec is required to be supported by all webrtc solutions because it's a simple, easy to implement, and widely-used and compatible codec. typically, most modern applications will use g.711 only as a fallback option, unless the limitations have specific value to their use cases. opus, for example, offers a narrowband encoding at a 40 kbps bit rate. still, g.711 provides a least common denominator which can be fall...

Image file type and format guide - Web media technologies
image file type details the following secti...
...idth as a 32-bit value: tag type size value 0x0100 (imagewidth) 0x0004 (long) 0x00000001 (1 entry) 0x00000280 (640 pixels) a single tiff file can contain multiple images; this may be used to represent multi-page documents, for example (such as a multi-page scanned document, or a received fax). however, software reading tiff files is only required to support the first image. tiff supports a variety of color spaces, not just rgb. these include cmyk, ycbcr, and others, making tiff a good choice for storing images intended for print, film, or television media. long ago, some browsers supported tiff images in web content; today, however, you need to use special libraries or browser add-ons to do so. as such, tiff files are not useful within ...
...or an associated, pre-multiplied alpha component, and 2 for unassociated alpha (a separate matte); however, alpha channels are rarely used in tiff files and may be unsupported by the user's software. compression most tiff files are uncompressed, but lossless packbits and lzw compression are supported, as is lossy jpeg compression. licensing no license required (aside from any associated with libraries you might use); all known patents have expired. webp image webp supports lossy compression via predictive coding based on the vp8 video codec, and lossless compression that uses substitutions for repeating data. lossy webp images average 25–35% smaller than jpeg images of visually similar compression levels. lossless webp images are typically 26...
... maximum dimensions 16,383×16,383 pixels supported color modes lossy webp stores the image in 8-bit y'cbcr 4:2:0 (yuv420) format. lossless webp uses 8-bit argb color, with each component taking 8 bits for a total of 32 bits per pixel. compression lossless (huffman, lz77, or color cache codes) or lossy (vp8). licensing no license required; source code is openly available. xbm (x window system bitmap file) xbm (x bitmap) files were the first to be supported on the web, but are no longer used and should be avoided, as their format has potential security concerns. modern browsers have not supported xbm files in many years, but when dealing with older content, you may find some still around. xbm uses a snippet of c code to re...

SVG documentation index - SVG: Scalable Vector Graphics
te specifies how the accumulation of the background image is managed. 68 end needscompattable, svg, svg attribute the end attribute defines an end value for the animation that can constrain the active duration. 69 exponent needscompattable, svg, svg attribute the exponent attribute defines the exponent of the gamma function. 70 externalresourcesrequired deprecated, needsexample, svg, svg attribute the externalresourcesrequired attribute specifies whether referenced resources that are not part of the current document are required for proper rendering of the given container or graphics element. 71 fill svg, svg attribute the fill attribute has two different meanings. for shapes and text it's a presentation attribute ...
...ring-intent attribute permits the specification of a color profile rendering intent other than the default. 175 repeatcount svg, svg attribute the repeatcount attribute indicates the number of times an animation will take place. 176 repeatdur svg, svg attribute the repeatdur attribute specifies the total duration for repeating an animation. 177 requiredfeatures svg, svg attribute the requiredfeatures attribute takes a list of feature strings, with the individual strings separated by white space. it determines whether or not all of the named features are supported by the browser; if all of them are supported, the attribute evaluates to true end the element is rendered; otherwise, the attribute evaluates to false and the current element ...
...307 <desc> element, svg, svg descriptive the <desc> element provides an accessible, long-text description of any svg container element or graphics element. 308 <discard> element, needsexample, reference, svg, svg animation the <discard> svg element allows authors to specify the time at which particular elements are to be discarded, thereby reducing the resources required by an svg user agent. this is particularly useful to help svg viewers conserve memory while displaying long-running documents. 309 <ellipse> element, reference, svg, svg graphics the <ellipse> element is an svg basic shape, used to create ellipses based on a center coordinate, and both their x and y radius. 310 <feblend> element, svg, svg filter the <febl...
...368 <svg> element, reference, svg, svg container, web the svg element is a container that defines a new coordinate system and viewport. it is used as the outermost element of svg documents, but it can also be used to embed an svg fragment inside an svg or html document. 369 <switch> element, needsexample, svg, svg container the <switch> svg element evaluates any requiredfeatures, requiredextensions and systemlanguage attributes on its direct child elements in order, and then renders the first child where these attributes evaluate to true. 370 <symbol> svg, svg container the <symbol> element is used to define graphical template objects which can be instantiated by a <use> element. 371 <text> element, reference, svg, svg text con...

/loader - Archive of obsolete content
: <script type='application/javascript' src='resource://gre/modules/commonjs/toolkit/loader.js'></script> this will expose a single loader object containing all of the api functions described in this document. it can be loaded as a javascript code module: let { loader, require, unload } = components.utils.import('resource://gre/modules/commonjs/toolkit/loader.js'); it can be required as a commonjs module from a module loaded in the loader itself: let { loader, require, unload } = require('toolkit/loader'); what is it good for ? create somewhat standardized js environments that people doing non-browser js are familiar with. provide an environment for loading commonjs style modules, which makes it possible to consume lots of interesting code that has already been dev...
...a globals, it's almost always better to use pseudo-modules or, even better, modules. resolve the optional resolve option enables you to completely customize module resolution logic. resolve is assigned a function that takes: the id of the module passed into require() the id of the module that called require() on each require() call, the supplied function is then called with the id of the required module and that of the requiring module. the function returns a string representing the resolved module id, which is then resolved to its location url using the mapping provided in the paths option. if this option is not provided, the loader will use plain path resolution. this feature may also be used to implement specific security constraints. for example, the sdk generates a manifest file a...
...s; if (id in manifest) return requirements[id]; else throw error('module "' + requirer + '" has no authority to require ' + 'module "' + id + "') } }); thrown exceptions will propagate to the caller of require(). if the function assigned to resolve does not return a string value, an exception will still be thrown as the loader will be unable to resolve the required module's location. id add-on debugging requires knowing which objects belong to which add-on. when created with this option, loader will transparently mark all new global objects with the provided value. all together all of these options can be combined to configure the loader for a specific use case. don't get too excited about configuration options, keep in mind that modules are more useful...

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
eferences listed in table 1 and double-click on them to set them accordingly. some of these preferences do not exist—to create them, right-click, select “new>boolean”, and type in the name and set the value accordingly. install the dom inspector the dom inspector is an extension that lets you examine html and xul dom tree structures, javascript objects and css properties, etc. this is not required for developing extensions, but it is handy to have around. install extensions for firefox from the mozilla add-ons website. optional - install firebug and chromebug chromebug is used by the firebug development team to develop firebug. you can use it to help debug firefox extensions as well as to inspect and learn how the firefox ui (chrome) is constructed. you can learn more about chromebug a...
...s, as discussed in chapter 4, they will be able to use xpcom functions (figure 1). extension/ chrome manifest chrome/ #registered in the chrome content package #run with privileges locale package skin package figure 1: chrome packages and chrome registration (fixme: not really explicit and not a figure) cross-package overlays the “overlay” technique introduced in chapter 3 required the use of the xul-overlay instruction in the xul document that is the overlay target. it is also possible to coerce an overlay without using the xul-overlay instruction in the xul document—this is called a “cross-package overlay” (figure 2). in fact, you need to use cross-package overlays to append buttons or menus to the firefox browser window. use the chrome manifest to invoke a cross-pa...
... chrome.manifest this is the chrome manifest described in the earlier section. registers packages and invokes cross-package overlays. content/overlay.xul xul file that will be overlaid on the firefox browser window, adding buttons, menu items, etc. content/clock.xul content/clock.js ...

Signing an XPI - Archive of obsolete content
\apps\nspr-4.6\lib\;%path% an easier way is to copy everything from your new directories c:\apps\nss-3.11.4\ and c:\apps\nspr-4.6\ including sub directories to the same directory - fx c:\apps\codesigning\ - and then run every command from that. initialize the certificate database decide which folder to create the certificate database in. use this command to create it (note the trailing dot is required). c:\projects\codesigning\> certutil -n -d . the dot will cause the database to be created in the current directory. you will be prompted for the nss certificate database password - don't forget it! c:\projects\codesigning\> certutil -n -d . enter a password which will be used to encrypt your keys. the password should be at least 8 characters long, and should contain at least one non-alphabe...
... hours i received a confirmation email from a human accepting the id images and giving me a hyperlink to the certifcate download area. install the certificate into mozilla firefox (which goes with the private key created earlier), and copy/paste the displayed 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 certific...
...cating mozilla's key database. it consists of two files named key3.db and cert8.db. they usually live in the mozilla firefox user profile folder. i found mine in c:\documents and settings\tj\application data\mozilla\firefox\profiles\xxxxxxxx.default\ where xxxxxxxx is a random string of characters. this procedure assumes you installed the new certificate into mozilla firefox here's the commands required to export it to a file, import it to the code signing database, and verify the signing attributes (u,u,u). ensure you use the nickname of your certificate in place of mine, and the directory where your mozilla firefox key database files are: c:\projects\codesigning> pk12util -o "certum code signing.pkcs12" -n "tj's unizeto sp. z o.o. id" -d "c:\documents and settings\tj\application data\mozilla\...

New Security Model for Web Services - Archive of obsolete content
special privileges. this is currently permitted for locally-saved scripts and signed scripts. this could be combined with the other options above such as whitelisting, signed scripts, etc. but the big problem with this is that the typical browser user really does not either understand or pay the consequences if he inadvertently opens a hole in his company's firewall. quite complex settings may be required to permit the user to allow access to desired external services without risking other resources. controlling resource access on the server access by untrusted scripts really needs to be under the control of the stake holder, which is the resource and server owner -- not the user -- to determine whether a resource should be insulated from web applications loaded from outside of the firewall. us...
...erver access by untrusted scripts really needs to be under the control of the stake holder, which is the resource and server owner -- not the user -- to determine whether a resource should be insulated from web applications loaded from outside of the firewall. using a soap header for verification soap messages have a distinct processing model allowing a header to be added that the recipient is required to understand and accept, which identifies the untrusted source of a script making a request. soap services which have not been cleared for access by untrusted scripts will reject the requests. this is offered in the mozilla implementation of soap today. unfortunately, this does not prevent soap messages from being sent to non-soap addresses, which is a big enough problem that the verification c...
...ss file are as follows. <!element webscriptaccess (delegate?|allow*)> <!element delegate empty> <!element allow empty> <!attlist allow type|from cdata #implied>. the root element the first element of the file should be the following: <wsa:webscriptaccess xmlns:wsa="http://www.mozilla.org/2002/soap/security"> delegation if the <delegate/> element is present then "web-scripts-access.xml" is required in the subdirectory for uris which are in a subdirectory. for example, if the script in question is "http://www.example.com/foo/bar.xml", then the declarations file http://www.example.com/web-scripts-access.xml which contains the "delegate" keyword delegates to http://www.example.com/foo/web-scripts-access.xml. if the uri is in a subdirectory, and the root directory's access file delegated but no...

Windows Install - Archive of obsolete content
windows install example this example shows the installation of a xpi in which user profile information is contained. note the disk space verification, the editing of the windows registry, the writing to the installation log, and the error checking before either performinstall or cancelinstall is called. ...
...l is called. ...
...(dirpath, spacerequired) { var spaceavailable; // get the available disk space on the given path spaceavailable = filegetdiskspaceavailable(dirpath); // convert the available disk space into kilobytes spaceavailable = parseint(spaceavailable / 1024); // do the verification if(spaceavailable < spacerequired) { logcomment("insufficient disk space: " + dirpath); logcomment(" required : " + spacerequired + " k"); logcomment(" available: " + spaceavailable + " k"); return(false); } return(true); } function updatewinreg4ren8dot3() { var fprogram = getfolder("program"); var ftemp = getfolder("temporary"); //notes: // can't use a double backslash before subkey // - windows already puts it in. // subkeys have to exist before values can be put ...

The Joy of XUL - Archive of obsolete content
lications (browser, messenger, address book, etc.) is written in xul with one single code base supporting all mozilla platforms. separation of presentation from application logic one of the major downfalls of most web applications is the tight coupling of user interface elements with client application logic. this poses a significant problem in team environments because the skills required to develop these two parts are often satisfied by different people. xul provides a clear separation among the client application definition and programmatic logic ("content" consisting of xul, xbl, and javascript), presentation ("skin" consisting of css and images), and language-specific text labels ("locale" consisting of dtds and string bundles in .properties files). the layout and appearan...
...ined virtually unchanged. porting xul applications to other platforms is trivial.the calendar originated as a linux application with no consideration given to porting it to other platforms. but later, when the original developer (oeone corporation) contributed the source to the mozilla project, the calendar had to be migrated to the windows and macintosh platforms. the ui for the xul application required zero porting effort because it worked with almost no alteration on both new platforms. similarly, since the ui code is written in javascript, the interaction logic worked with no effort. however, since the libical library is written in c, more significant effort was required to migrate this component to the other platforms. fortunately, an implementation of the libical library was already availa...
...s too was complete and mozilla had a working calendar for all three primary platforms: linux, macintosh, and windows. xpinstall is easy for developers and for users.the calendar is not a planned deliverable for the mozilla 1.0 release, and therefore is not included as a standard component in regular nightly and milestone release builds. developers who are equipped with the software and knowledge required to compile mozilla can set an optional environment variable and build the calendar themselves. but many mozilla users who want to try out the calendar can't afford this luxury. using xpinstall it was easy for the developers to package a version of calendar that could be installed directly over the internet by clicking a link. conclusion mozilla, featuring xul, delivers a compelling technology f...

The Implementation of the Application Object Model - Archive of obsolete content
nsulated from the layout dll should those interfaces change, imply that a layer needs to exist between the pluggable content and the content tree interfaces. this layer would serve several useful functions. first of all it could streamline the redundancy in the interface methods and present a new interface for pluggable content that was much smaller and easier to plug into than the 4-5 interfaces required if directly implementing the content tree interfaces. furthermore, should the content tree interfaces change, only this layer would need to be updated. the pluggable content, safe behind this layer, wouldn't have to change at all. one natural solution to try for implementing such a layer might be inheritance. however, in this xpcom world, where each type of pluggable content is off in its own dll...
... store its uri in a member variable, and it could use that as a basis for resolving the pluggable data source from which it would obtain its information. statement #2 all content nodes that reside in the aom and that implement the content tree interfaces must be the same class of object. so now we're on the right track, but there are still some flaws in our architecture. let's consider another required feature that has heretofore gone unmentioned in this document: the need to take the same set of data and present it as completely different content models. the perfect example of this requirement is the personal toolbar. the personal toolbar must show up in a tree widget (in which case it has to be faking a tree content model, complete with <tt><treeitem></tt> and <tt><treecell></tt> nodes), or i...
... falls outside of the domain of an existing data source, it must be possible for that change to be persistently remembered by recording the change into a new data source that can then be read in when the data is re-aggregated in future sessions of the application. the architecture that i have just described, the very architecture that i claim it is most desirable to have in order to implement our required feature set, is a combination of xul and rdf. the xul/rdf architecture if you've read this far, you should now have a general idea of what the architecture is like, as well as the motivations for choosing such an architecture. now it's time to fill in some of the details by mentioning xul and rdf specifically. a picture (provided by chris waterson) of the xul/rdf architecture is shown below. ...

Introduction to Public-Key Cryptography - Archive of obsolete content
mime also makes it possible 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, ...
...ions that follow explains how certificate hierarchies and certificate chains determine what certificates software can trust. ca hierarchies certificate chains verifying a certificate chain ca hierarchies in large organizations, it may be appropriate to delegate the responsibility for issuing certificates to several different certificate authorities. for example, the number of certificates required may be too large for a single ca to maintain; different organizational units may have different policy requirements; or it may be important for a ca to be physically located in the same geographic area as the people to whom it is issuing certificates. it's possible to delegate certificate-issuing responsibilities to subordinate cas. the x.509 standard includes a model for setting up a hierarchy ...
... their changing needs. issuing certificates is one of several managements tasks that can be handled by separate registration authorities. certificates and the ldap directory the lightweight directory access protocol (ldap) for accessing directory services supports great flexibility in the management of certificates within an organization. system administrators can store much of the information required to manage certificates in an ldap-compliant directory. for example, a ca can use information in a directory to prepopulate a certificate with a new employee's legal name and other information. the ca can leverage directory information in other ways to issue certificates one at a time or in bulk, using a range of different identification techniques depending on the security policies of a given org...

Building a Theme - Archive of obsolete content
note: this tutorial is about building themes for firefox 29 and later. other tutorials exist for building themes for earlier versions of firefox. for an older tutorial, see creating a skin for firefox. note: firefox for mac os x has changed some directories so the guide may be obsolete. setting up the development environment themes and extensions are packaged and distributed in zip files or bundles, with the xpi (pronounced “zippy”) file extension. ...
...we will be needing are located under the chrome\toolkit\skin\classic folder. create a folder called chrome in your theme's folder. next, the contents of the following directories to their respective folders into the folder. global to chrome/global mozapps to chrome/mozapps now that you've copied the global and mozapps folders, a handful of other folders from the browser/omni.ja archive are required. it is located in the browser folder in the location mentioned above. the files we will be needing from the browser/omni.ja archive are located under chrome/browser/skin/classic. copy the contents of the following directories to their respective folders. this gives us a base set of styles to work with. browser to chrome/browser/ communicator to chrome/communicator/ you should end up with t...
....*" indicates that the extension works with firefox 39 and any subsequent 39.x release. themes are compatible by default, unless you set strict compatibility mode for your theme. if you get a message that the install.rdf is malformed, it is helpful to load it into firefox using the file->open file command and it will report xml errors to you. see install manifests for a complete listing of the required and optional properties. save the file. styling the browser's ui with css firefox's user interface is written in xul and javascript. xul is an xml grammar that provides user interface widgets like buttons, menus, toolbars, trees, etc. user actions are bound to functionality using javascript. these xul elements are styled using css. if you don't know css, it's going to be a steep learning cur...

Index - MDN Web Docs Glossary: Definitions of Web-related terms
made to attack a single target, in order to swamp server resources and block legitimate users. 115 dos attack glossary, security dos (denial of service) is a network attack that prevents legitimate use of server resources by flooding the server with requests. 116 doctype browser, codingscripting, doctype, glossary, html, intro in html, the doctype is the required "<!doctype html>" preamble found at the top of all documents. its sole purpose is to prevent a browser from switching into so-called “quirks mode” when rendering a document; that is, the "<!doctype html>" doctype ensures that the browser makes a best-effort attempt at following the relevant specifications, rather than using a different rendering mode that is incompatible with some specificati...
...to content in a higher priority level when compared to normal users. 333 progressive enhancement accessibility, design, glossary progressive enhancement is a design philosophy that provides a baseline of essential content and functionality to as many users as possible, while delivering the best possible experience only to users of the most modern browsers that can run all the required code. 334 progressive web apps composing, glossary, progressive web apps progressive web apps is a term used to describe the modern state of web app development. this involves taking standard web sites/apps that enjoy all the best parts of the web — such as discoverability via search engines, being linkable via urls, and working across multiple form factors — and supercha...
...cryption. the key is usually called a "symmetric key" or a "secret key". 442 synchronous glossary, web, webmechanics synchronous refers to real-time communication where each party receives (and if necessary, processes and replies to) messages instantly (or as near to instantly as possible). 443 syntax codingscripting, glossary, syntax syntax specifies the required combination and sequence of characters making up correctly structured code. syntax generally includes grammar and the rules that apply to writing it, such as indentation requirements in python. 444 syntax error codingscripting, glossary, javascript an exception caused by the incorrect use of a pre-defined syntax. syntax errors are detected while compiling or parsing source co...

Web fonts - Learn web development
make sure that your designs look ok with each font, etc. web fonts but there is an alternative, which works very well, right back to ie version 6. web fonts are a css feature that allows you to specify font files to be downloaded along with your website as it is accessed, meaning that any browser that supports web fonts can have exactly the fonts you specify available to it. ...
...ont 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 the required code. fonts generally aren't free to use. you have to pay for them, and/or follow other license conditions such as crediting the font creator in the code (or on your site). you shouldn't steal fonts and use them without giving proper credit. note: web fonts as a technology have been supported in internet explorer since version 4! you can use the firefox font editor to investigate and manipu...
... 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 displayed choices. generating the required code now you'll need to generate the required code (and font formats). for each font, follow these steps: make sure you have satisfied any licensing requirement, if you are going to use this in a commercial and/or web project. go to the fontsquirrel webfont generator. upload your two font files using the upload fonts button. check the checkbox labeled "yes, the fonts i'm uploading are lega...

Example 1 - Learn web development
irst example of code that explains how to build a custom form widget. ...
...kground: #000; color: #ffffff; } result for basic state active state html <div class="select active"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { fon...
...ground: #000; color: #ffffff; } result for active state open state html <div class="select active"> <span class="value">cherry</span> <ul class="optlist"> <li class="option highlight">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { fon...

Tips for authoring fast-loading HTML pages - Learn web development
age structure. tools such as html tidy can automatically strip leading whitespace and extra blank lines from valid html source. other tools can "compress" javascript by reformatting the source or by obfuscating the source and replacing long identifiers with shorter versions. minimize the number of files reducing the number of files referenced in a web page lowers the number of http connections required to download a page, thereby reducing the time for these requests to be sent, and for their responses to be received. depending on a browser's cache settings, it may send a request with the if-modified-since header for each referenced file, asking whether the file has been modified since the last time it was downloaded. too much time spent querying the last modified time of the referenced files c...
...esearch on this subject is beneficial. it can be somewhat involved, but it will save a lot in page requests on pages which would normally not be cacheable. more information: http conditional get for rss hackers http 304: not modified http etag on wikipedia caching in http optimally order the components of the page download page content first, along with any css or javascript that may be required for its initial display, so that the user gets the quickest apparent response during the page loading. this content is typically text, and can, therefore, benefit from text compression in transit, thus providing an even quicker response to the user. any dynamic features that require the page to complete loading before being used, should be initially disabled, and then only enabled after the page...
...r anything that is after the script tags that do not have these attributes. note: even though these attributes do help a lot the first time a page is loaded, you should use them but not assume they will work in all browsers. if you already follow all javascript best practices, there is no need to change your code. example page structure · <html> · <head> · <link> ... css files required for page appearance. minimize the number of files for performance while keeping unrelated css in separate files for maintenance. · <script> ... javascript files for functions required during the loading of the page, but not any interaction related javascript that can only run after page loads. minimize the number of files for performance while keeping unrelated javascript in sep...

Index - Learn web development
etely ignored its look and feel up to now. in the next article, we'll concentrate on fixing this, looking at the different ways vue provides to style components. 272 advanced svelte: reactivity, lifecycle, accessibility accessibility, beginner, components, frameworks, javascript, learn, lifecycle, svelte, client-side, reactivity in this article we have finished adding all the required functionality to our app, plus we've taken care of a number of accessibility and usability issues. we also finished splitting our app into manageable components, each one with a unique responsibility. 273 beginning our react todo list app, beginner, frameworks, javascript, learn, react, style, client-side now our todo list app actually looks a bit more like a real app! the pr...
......
...quick to load and responsive to user interaction. this is known as web performance, and in this module you'll focus on the fundamentals of how to create performant websites. 338 css performance optimization css, performance, reference, tutorial css is render blockingto optimize the cssom construction, remove unnecessary styles, minify, compress and cache it, and split css not required at page load into additional files to reduce css render blocking. 339 html performance features html, learning, web performance html is by default fast and accessible. it is our job, as developers, to ensure that we preserve these two properties when creating or editing html code. complications can occur when, for example, the file size of a <video> embed is too large, or whe...

Introduction to the server side - Learn web development
server-side development is highly recommended. what is server-side website programming? web browsers communicate with web servers using the hypertext transfer protocol (http). when you click a link on a web page, submit a form, or run a search, an http request is sent from your browser to the target server. the request includes a url identifying the affected resource, a method that defines the required action (for example to get, delete, or post the resource), and may include additional information encoded in url parameters (the field-value pairs sent via a query string), as post data (data sent by the http post method), or in associated cookies. web servers wait for client request messages, process them when they arrive, and reply to the web browser with an http response message. the response...
...tp responses. requests for static resources are handled in the same way as for static sites (static resources are any files that don't change —typically: css, javascript, images, pre-created pdf files etc). requests for dynamic resources are instead forwarded (2) to server-side code (shown in the diagram as a web application). for "dynamic requests" the server interprets the request, reads required information from the database (3), combines the retrieved data with html templates (4), and sends back a response containing the generated html (5,6). are server-side and client-side programming the same? let's now turn our attention to the code involved in server-side and client-side programming. in each case, the code is significantly different: they have different purposes and concerns...
...ludes selecting and styling ui components, creating layouts, navigation, form validation, etc. by contrast, server-side website programming mostly involves choosing which content is returned to the browser in response to requests. the server-side code handles tasks like validating submitted data and requests, using databases to store and retrieve data and sending the correct data to the client as required. client-side code is written using html, css, and javascript — it is run inside a web browser and has little or no access to the underlying operating system (including limited access to the file system). web developers can't control what browser every user might be using to view a website — browsers provide inconsistent levels of compatibility with client-side code features, and part of th...

Introducing a complete toolchain - Learn web development
r best work possible, and they should also only need to be set up once, if done properly. in the same way, setting up your development environment, if done well, needs doing only once and should be reusable in many future projects. you will probably want to review this part of the toolchain semi-regularly and consider if there's any upgrades or changes you should introduce, but this shouldn't be required too often. your toolchain will depend on your own needs, but for this example of a (possible) complete toolchain, the tools that will be installed up front will be: library installation tools — for adding dependencies. code revision control. code tidying tools — for tidying javascript, css, and html. code linting tools — for linting our code. library installation tools we'll use n...
...de these dependencies will not be installed. a "typical" project can have many development dependencies which are not needed to actually run the code in production. keeping them as separate dependencies reduces any unnecessary work when deploying to production (which we will look at in the next chapter). before starting on the development of the actual application code, a little configuration is required for our tools to work properly. it's not a prerequisite of developing for the web, but it's useful to have the tools configured correctly if they’re going to help catch errors during development — which eslint is particularly useful for. configuring our tools in the root of the project (not in the src directory), we will add configuration files to configure some of our tools, namely prettie...
...s on the basis that it will try to configure your development requirements on the fly. parcel will watch the code and run a live-reloading web server during development. this also means that parcel will install our software dependencies automatically as they are referenced in the source code, as we saw in chapter 3. parcel will take care of installing any transformation tooling and configuration required without us needing to intervene (in most cases). then as a final bonus, parcel can bundle and prepare the code for production deployment, taking care of minification and browser compatibility requirements. we therefore need to install the parcel dependency in our project too — run the following command in your terminal: npm install --save-dev parcel-bundler using future features the code f...

Gecko info for Windows accessibility vendors
indicates that the absence of state_checked should be spoken as // "unchecked", and that event_state_change will be fired in the event that the // checkbox is toggled. const unsigned ...
...d states are supported gecko defines three state constants using previously unused states: const unsigned long state_checkable = state_marqueed; // useful on menuitem, listitem // and treeitem. indicates that the absence of state_checked should be spoken as // "unchecked", and that event_state_change will be fired in the event that the // checkbox is toggled. const unsigned long state_required = state_alert_low; // used on form controls // to indicate that this field must be filled out to submit the form const unsigned long state_invalid = state_alert_high; // used on form controls to // indicate the the field does not currently have a legal value const unsigned long state_??? = state_alert_medium; // reserved for future use. document structure exposed in msaa tree bst...
... it clear that the description is truly intended to be read. neither "description:" or "of" in the above strings is ever localized, so they should be parsed out. dhtml accessibility is supported this means that you may encounter roles that are not typically in html content. be prepared for new combinations of roles and states in content, such as role_slider, role_progressbar and state_required. in addition, check the state_focusable bit on tables, which indicates a traversable dhtml spreadsheet. please see the dhtml accessibility documentation page for more information on this topic. iaccessibles persist unless the document changes, retrieving the iaccessible more than once for the same object will return the same iaccessible*. the uniqueid will remain the same as well. if ...

Software accessibility: Where are we today?
ome, like stephen hawking, enter information by choosing among lists of options. they might press a switch down to begin moving a highlight bar through the list, and release the switch when the desired option is highlighted. special keyboards exist to make data entry easier. however, any special features are generally handled in the keyboard itself, so that no special programming is required. speech recognition technology lets people talk to the computer. this technology has come a long way, but still needs to be more integrated into mainstream software. consistent keyboard support and hotkeys many people can't use a mouse. extremely consistent keystroke support is a very important consideration. blind testers have knack for finding ways to improve keystro...
...ly partial success, largely due to the fact that it requires significant changes to applications which are made accessible. because most popular desktop and productivity applications are not open source, this forced disabled people to rely on the companies which produce this software to make it accessible. these companies were often reluctant for various reasons including the large amount of time required to do so. on a positive note, recent federal purchasing rules such as section 508 have caused many companies to pay attention and implement msaa support. enter open source software microsoft was on the right track with microsoft active accessibility, but because the source code to most popular desktop applications which are used in large corporations is not publicly available, they were never mad...
...designs, rather than tacked onto as an afterthought. it also gives disabled programmers a chance to control their own destiny, by giving them the opportunity and the right to directly fix the innaccessible software themselves. furthermore, any software solution that can enable equality should by all rights be free of charge - an integral part of society's infrastructure. if no special hardware is required, why should a disabled person pay extra money to use the same software as everyone else? that said, there is still an important role for adaptive technology vendors in creating special services and hardware, or even proprietary software on platforms where that is appropriate. . the ideal situation would be for adaptive technology professionals to make money on rehab, trainingand support - somethi...

Creating Sandboxed HTTP Connections
irect - when a redirect happens, a new nsichannel is created, and both the old and new ones are passed in as arguments. since nsistreamlistener does not cover cookies, the current channel being used will need to be stored as a global, since another listener will be used for cookie notifications (covered in the next section). it is usually best to use a javascript wrapper that implements all the required methods and calls the specified callback function when the connection has completed. below is an example: // global channel var gchannel; // init the channel // the io service var ioservice = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); // create an nsiuri var uri = ioservice.newuri(myurlstring, null, null);...
...e request header's value. if amerge is true, the new value is appened, otherwise the old value is overwritten. getresponseheader(aheader) - returns the response header value for the requested header. setresponseheader(aheader, avalue, amerge) - sets the response header's value. if amerge is true, the new value is appened, otherwise the old value is overwritten. these methods provide all the required functionality needed to modify cookies before they are processed/sent, allowing for sandboxed cookie connections that don't affect the user's cookies. http referrer if the http request needs to have a referrer set, two additional steps are needed after the nsichannel is created, but before it is opened. first, a nsiuri needs to be generated for the referrer url. like before, the nsiioservice is...
... first, a nsiinputstream instance is created, after which the setdata method is called. the first argument is the post data as a string, while the second argument is the length of that data. in this case, the data is url encoded, meaning that the string should look like this: foo=bar&baz=eek. var inputstream = components.classes["@mozilla.org/io/string-input-stre...

Updating NSPR or NSS in mozilla-central
spr and nss teams and always taken from exports of hg tags. do not check in individual changes. if you check in an individual change by mistake, your change will be lost when the nspr and nss teams push a new hg tag to mozilla-central. ...
...2784), you must manually add a dummy change (add or remove a blank line) to force a rebuild of nspr: mozilla/nsprpub/config/prdepend.h or nss: mozilla/security/nss/coreconf/coreconf.dep check directory mozilla/nsprpub/patches/ for patches that need to be applied to nspr, and directory mozilla/security/patches/ for patches that need to be applied to nss. apply the patches. if merging is required, update the patch file. if a patch is no longer needed, remove the patch from the directory and update the readme file. check for new or removed files $ hg addremove -n review the output to make sure it looks correct update the minimum required system nss version in old-configure.in. this is for builds with --with-system-nss. for example, in the following, "3.16.1" would be replaced w...
... push the update: $ hg push ...

Displaying Places information using views
ylesheet browser/components/places/content/places.css and overlay the file browser/components/places/content/placesoverlay.xul: <?xml-stylesheet href="chrome://browser/content/places/places.css" ?> <?xul-overlay href="chrome://browser/content/places/placesoverlay.xul" ?> it's this stylesheet that binds elements with the special type attribute to one of the views. the overlay contains javascript required by the views. it also contains the built-in places context menu and commands, which you may want to take advantage of in your own uses of the views. connecting a view to its data to hook up a built-in view to its data, use the view's special place attribute. note: starting in gecko 2.0, you can't use the place attribute with menus. see menu view for details. you may specify the attribute di...
...; treeview.selectnode(somehistoryresultnode); placestreeview note: this section describes the implementation of the places tree view. the built-in tree view is backed by an instance of placestreeview, a prototype defined in browser/components/places/content/treeview.js. placestreeview performs double duty for the built-in tree view: it implements both nsitreeview and much of the functionality required of a places view. the latter functionality is specified specifically by interface nsinavhistoryresulttreeviewer, which inherits from the more general nsinavhistoryresultobserver . because of placestreeview's double duty, you can use it to bridge a query result and a tree element: var result = historyservice.executequery(query, opts); // your places query result var tree = document.getelementbyi...
...e old nsitreeview to null. because the object implementing nsitreeview also implements nsinavhistoryresultobserver, the viewer then disconnects itself from the result by calling removeobserver().) is this still right when using nsinavhistoryresultobserver? creating custom tree views custom places tree views can be a lot of work. take a look at using the tree view above to get an idea of what's required. custom nsitreeviews in general are a lot of work, and if you are not familiar with creating custom nsitreeviews, see the custom tree views and tree view details pages in the xul tutorial. all of that information is relevant here. fortunately you can commandeer parts of the built-in tree view to suit your purposes. the javascript prototype backing the built-in view, placestreeview, is especially...

API-provided widgets
to create a widget, you should pass a specification object with its desired properties. this document details the available properties. properties property description id the id of the widget (required). type a string indicating the type of widget. possible types are button for simple button widgets (the default) view for buttons that open a panel or subview, depending on where they are placed. custom for fine-grained control over the creation of the widget. viewid only useful for views (and required there): the id of the that should be shown when clicking the widget. tooltiptext string to use for the tooltip of the widget label string to use for the label of the widget ...
... label string to use for the label of the widget removable whether the widget is removable (optional, default: true). nb: if you specify false here, you must provide a defaultarea, too. overflows whether widget can overflow when in an overflowable toolbar (optional, default: true) defaultarea default area to add the widget to (optional, default: none; required if non-removable) shortcutid id of an element that has a shortcut for this widget (optional, default: null). this is only used to display the shortcut as part of the tooltip for builtin widgets (which have strings inside customizablewidgets.properties). if you're in an add-on, you should not set this property, and should instead include the shortcut as part of the tooltiptext you pass...
...cut as part of the tooltiptext you pass in yourself. showinprivatebrowsing whether to show the widget in private browsing mode (optional, default: true) event handlers you can also define several event handlers which will be called at various stages in a widget's lifetime: event handler name description onbuild(adoc) only useful for custom widgets (and required there); a function that will be invoked with the document in which to build a widget. should return the dom node that has been constructed. nb: the dom node you construct should have the same id as the id property described above, so that customizableui can find the node again later. onbeforecreated(adoc) attached to all non-custom widgets; a function that will be invoked before the w...

Mozilla Web Developer FAQ
s2 box layout model the default vertical sizing of layout boxes and the default vertical alignment of images is different from the behavior of old browsers. these aspects of the layout can be changed by explicitly setting the display css property of the images (and possible surrounding <a> elements) to block. if the table cells that contain only an image are marked with <td class="imgcell">, the required css rule is: .imgcell img, .imgcell a { display: block; } longer explanation… why are there still gaps even between text rows in tables when the layout engine is in the standards mode or in the almost standards mode? in the standards mode and in the almost standards mode mozilla does not suppress the default margins of the first and last child element in table cells. therefore, the default m...
..., other authors don’t want to supply textual alternatives at all, because they don’t want tooltips to appear. (again, making things harder for people who don’t see the image.) there is another attribute that mozilla shows as a tooltip: title. in fact, the html 4.01 specification suggests that the title attribute may be displayed as a tooltip. however, this particular display method is not required and some other browsers show the title attribute in the browser status bar, for example. at this point some people feel compelled to post a “but ie…” rant in the newsgroups or in bugzilla. please note that mac ie 5 behaves in the same way as mozilla when it comes to the alt and title attributes. windows ie also shows the title attribute in a tooltip. does mozilla support downloadable font...
...er versions of mozilla as well as in old mozilla-based products, there is no pseudo-dtd catalog and the use of externally defined character entities (other than the five pre-defined ones) leads to an xml parsing error. there are also other xhtml user agents that do not support externally defined character entities (other than the five pre-defined ones). since non-validating xml processors are not required to support externally defined character entities (other than the five pre-defined ones), the use of externally defined character entities (other than the five pre-defined ones) is inherently unsafe in xml documents intended for the web. the best practice is to use straight utf-8 instead of entities. (numeric character references are safe, too.) document.write() is not supported. the stream tha...

NSS Sample Code Sample1
re persistant keys. steps // 1a through 1x show how to do this). // 1a. the primary host generates an rsa keypair that will be used // store keys locally. // 1b. the primary host wraps the newly generated key using the // rsa key and stores the wrapped key data in a local file. // 1c. the primary host unwraps the key using the rsa key each time // access to the key is required, such as at server startup. // 2. the secondary host generates an rsa keypair that will be used // to transport keys between the primary host and itself. this // key needs to exist long enough to be used to process the // response to a key transport request that is made to the primary // server. the example here shows how to create a permanent (token) // rsa key for this purpose. (...
...the wrapped // key data came from the primary host. the same methods outlined // in step 4 may be used here. // 7. the secondary host unwraps the the key using its own rsa private key. // note: currently nss does not support permanent symmetric keys. // the secondary host may store the wrapped value that was received // from the primary in a file, and unwrap it each time the key is required // (such as at server startup). // nss actually has some support for permanent symmetric keys. however this // example will need to be modified somewhat in order to demonstrate it. // utility function to print hex data static void printbuffer(unsigned char *digest, unsigned int len) { int i; cout << "length: " << len << endl; for(i = 0;i < len;i++) printf("%02x ", digest[i]); cout <...
...secitem_freeitem(mwrappedmackey, pr_true); if (menckey) pk11_freesymkey(menckey); if (mmackey) pk11_freesymkey(mmackey); } int server::init() { int rv = 0; seckeyprivatekey *prvkey = 0; seckeypublickey *pubkey = 0; pk11slotinfo *slot = 0; pk11rsagenparams rsaparams; secstatus s; // see if there is already a private key with this name. // if there is one, no further action is required. rv = getprivatekey(&prvkey); if (rv == 0 && prvkey) goto done; rv = 0; // these could be parameters to the init function rsaparams.keysizeinbits = 1024; rsaparams.pe = 65537; slot = pk11_getinternalkeyslot(); if (!slot) { rv = 1; goto done; } prvkey = pk11_generatekeypair(slot, ckm_rsa_pkcs_key_pair_gen, &rsaparams, &pubkey, pr_true, pr_true, 0); if (!prvke...

PKCS11 FAQ
dule, 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 currently use any of the callbacks. nss applications detect card insertion and deletion by means...
...il certificate for use with s/mime? an email address must be included in the attribute of the subject dn or the mail attribute of the subject dn. if the subject dn does not include an email address, the certificate extension subjectaltname must include an email address. the subjectaltname extension is part of the x.509 v3 and pkix specifications. if i have a multipurpose token that supports all required pkcs #11 functions and provides rsa_pkcs and dsa mechanisms but but not aes, des or rc4, will nss use the token for the rsa_pkcs mechanisms and the nss internal pkcs #11 module for aes, des or rc4 when making an ssl connection? once nss starts using a token for a given operation (like s/mime or ssl), it works hard to keep using that same token (so keys don't get moved around). symmetric operatio...
...isible to all sessions of the same application. nss explicitly depends on this semantic without the use of c_copyobject. if your module does not support this semantic, it will not work with nss. questions about pins will a password change ever be done on the token? yes, nss attempts to change the password in user mode only. (it goes to sso mode only if your token identifies itself as ckf_login_required, but not ckf_user_initialized). it's perfectly valid to reject the password change request with a return value such as ckr_function_not_supported. if you do this, nss applications display an appropriate error message for the user. if i have my smart card which has initial pin set at '9999', i insert it into my reader and download with my certificate (keygen completed), can i issue 'change passw...

TPS Bookmark Lists
" are all children of this) sub-folders are preceded with forward slashes, so "menu/folder1" denotes that "folder1" is a sub-folder of "menu". tps does not support forward slashes as part of a folder name. folder contents the contents for a folder are given as an array of objects, representing various bookmark types, described below. bookmark objects valid properties are: uri: the bookmark uri. required. title: the bookmark title. optional. defaults to the bookmark uri. loadinsidebar: true or false. optional. toggles the "load in sidebar" property. description: the bookmark description. optional. tags: an array of tags for the bookmark. optional. keyword: the keyword for the bookmark. optional. after: the title of the bookmark item expected to be found after this bookmark; used only in verify an...
...re this bookmark should be moved to (i.e., this bookmark would be inserted into the bookmark list at the position of the named bookmark, causing that bookmark to be positioned below the current one) example: { uri: "http://www.google.com", title: "google", loadinsidebar: false, tags: [ "google", "computers", "misc" ] } livemark objects valid properties are: livemark: the livemark name. required. siteuri: the livemark's uri. optional. feeduri: the livemark's feed uri. required. after: the title of the bookmark item expected to be found after this livemark; used only in verify and modify actions. before: the title of the bookmark item expected to be found before this livemark; used only in verify and modify actions. changes: an object containing new properties to be set for this livemark ...
..., this livemark would be inserted into the bookmark list at the position of the named bookmark, causing that bookmark to be positioned below the current one) example: { livemark: "livemarkone", feeduri: "http://rss.wunderground.com/blog/jeffmasters/rss.xml", siteuri: "http://www.wunderground.com/blog/jeffmasters/show.html" } folder objects valid properties are: folder: the folder's name. required. description: the folder's description. optional. after: the title of the bookmark item expected to be found after this folder; used only in verify and modify actions. before: the title of the bookmark item expected to be found before this folder; used only in verify and modify actions. changes: an object containing new properties to be set for this folder when this asset list is used in a modify...

Mozilla internal string guide
ent 8-bit class: naming convention for wide and narrow string classes wide narrow nsastring nsacstring nsstring nscstring nsautostring nsautocstring etc... the string classes distinguish, as part of the type hierarchy, between strings that must have a null-terminator at the end of their buffer (ns[c]string) and strings that are not required to have a null-terminator (nsa[c]string). nsa[c]string is the base of the string classes (since it imposes fewer requirements) and ns[c]string is a class derived from it. functions taking strings as parameters should generally take one of these four types. in order to avoid unnecessary copying of string data (which can have significant performance cost), the string classes support different owne...
...or_failure; ... // and later, still nothing to free } the resulting code is much simpler, and easy to read. literal strings a literal string is a raw string value that is written in some c++ code. for example, in the statement printf("hello world\n"); the value "hello world\n" is a literal string. it is often necessary to insert literal string values when an nsastring or nsacstring is required. two user-defined literals are provided that implicitly convert to const nsstring& resp. const nscstring&: ""_ns for 8-bit literals, converting implicitly to const nscstring& u""_ns for 16-bit literals, converting implicitly to const nsstring& the benefits of the user-defined literals may seem unclear, given that nsdependentcstring will also wrap a string value in an nscstring. the advantag...
...ill only copy the value into the nsautostring's buffer. moreover, using the string classes allows for sharing of string buffers. in many cases, assigning from one string object to another avoids copying in favor of simply incrementing a reference count. in strings using string classes often have their length pre-calculated. this can be a performance win. in cases where a raw-character buffer is required, string and wstring provide faster access than promiseflatstring. utf-8 strings defined with autf8string may need to be decoded when crossing xpconnect boundaries. this can be a performance hit. on the other hand, utf-8 strings take up less space for strings that are commonly ascii. utf-16 strings defined with wstring or astring are fast when the unicode value is required. however, if the value...

Reference Manual
// |nscomptr|s... nscomptr<nsifoo> foo; getfoo(getter_addrefs(foo)); getfoo2(*getter_addrefs(foo)); getsomething(getter_addrefs(foo)); why not just overload operator& to do this work? several reasons: it would become inconvenient take the address of an nscomptr in all other situations; the name "getter_addrefs" enforces the notion that a certain behavior is required of the getter; and once upon a time, there was another possibility (as you're about to learn). is there a getter_doesnt_addref( nscomptr& ) for getters that return non-addrefed results through a parameter? no, there isn't. once upon a time, there was, but it went away for three reasons: it is against the rules of xpcom for a getter to return a non-addrefed interface pointer through a parameter...
... with raw pointers. even if you don't follow these suggestions, your nscomptr code may still end up smaller, or at worst only negligibly bulkier than the raw pointer version. see code bloat [long, summary at top] for details, though the recommendations from that document are re-iterated here. time [[more time-performance measurements are needed.]] in places where two or more subroutines calls are required, i.e., of addref, release, and queryinterface, some nscomptr routines are factored, and hence, require additional time corresponding to invoking a subroutine. this time is negligable, especially in the face of work done by queryinterface, and the work that may be done by release. in all other cases, nscomptr does only the work you would have done by hand. the bulk of the work for which an nscompt...
... for which an nscomptr is used is dereferencing with operator->, just as it is with a primitive pointer. on every platform, this operation generates the exact same code, and takes the same time, as performing this operation on a raw xpcom interface pointer. the destructor, which corresponds to client code calling release against a raw xpcom interface pointer, is factored, requiring the extra time required to invoke a subroutine call, though this is balanced against the cost already present in both cases of calling release which may, in turn, invoke delete and the referents destructor. all nscomptrs constructors and assignment operators are inline. the simple constructors, i.e., those that don't query, do only exactly the same work that you would do by hand. any routines that call more than one of ...

xptcall FAQ
what is xptcall? xptcall is a small low level xpcom method call library. it is implemented using platform specific c/c++ and assembly language code. it is used to facilitate cross language and cross thread method calls. porting this code is required in order to make mozilla run on any given platform. why does xptcall exist? xptcall exists for two reasons: to support invoking arbitrary methods on xpcom interfaces. to support dynamically impersonating any xpcom interface. both of these facilities are required by xpconnect. these facilities are also used by xpcom/proxy. it may also be used by other subsystems in the future. the xptcall approach was chosen over an approach that would have required generating stub code for calling and implementing all interfaces. though the chosen app...
...rary pointer types). given the correct set of parameters, this function can call any method on any xpcom interface. xpconnect uses information from typelib files to reflect arbitrary xpcom interfaces into javascript and to make calls from javascript to xpcom using xptc_invokebyindex. the information in the typelibs allows xpconnect to convert function parameters and build the nsxptcvariant array required to make this call. the stubs (or impersonation) facility of xptcall allows for implementing a class which can, at runtime, pretend to be any xpcom interface. this is done by providing a vtbl full of generic function stubs in xptcall. these stubs forward calls to a shared function whose job it is to use the typelib information to extract the parameters from the platform specific calling conventio...
...te a bunch of platform specific code to build interface specific vtbls and method stubs. the method i choose was to use a single large vtbl with a lot of small generic stubs. this minimizes the platform specific code as much as possible. again, you just can't write code in c to do all this. the varargs stuff goes part way, but is just not enough. if anyone has credible ideas about how to get the required functionality in a cross platform way and/or without resorting to assembly code i'd love to hear about it. is xptcall a platform requirement for mozilla? yes. mozilla will not run properly without a functioning port of xptcall. non-functional stub code exists to allow building xptcall on non-supported platforms. but any browser feature that relies on xpconnect will fail. any platform that does ...

Address Book examples
.getservice(components.interfaces.nsiabmanager); let alladdressbooks = abmanager.directories; while (alladdressbooks.hasmoreelements()) { let ab = alladdressbooks.getnext(); if (ab instanceof components.interfaces.nsiabdirectory && !ab.isremote) { let searchresult = abmanager.getdirectory(ab.uri + "?" + searchquery).childcards; // ... use searchresult as required. } } note: this method doesn't work with remote address books (e.g. ldap). hence the additional !ab.isremote check how do i add/edit/delete contacts? note: not all address books can be written to. use the nsiabcollection.readonly attribute to determine the read-only status of an address book adding contacts create a card and set its properties using the nsiabcard interface (see the interf...
...delete it like this: var abmanager = components.classes["@mozilla.org/abmanager;1"] .createinstance(components.interfaces.nsiabmanager); abmanager.deleteaddressbook(maillist.uri); how do i display properties dialogs to the user? in the following examples: selectedab is the uri of an address book to default the dialog to saving the card in. this may be blank if not required. aburi and card are the uri of the address book and the card contained within that address book. new contact dialog window.opendialog("chrome://messenger/content/addressbook/abnewcarddialog.xul", "", "chrome,resizable=no,titlebar,modal,centerscreen", {selectedab:selectedab}); edit contact dialog window.opendialog("chrome://messenger/con...
... the onsave function. returns true on success. * if the function returns false, the generic photo handler onshow * function will be called. * * onsave: function(acard, adocument) * called when the editor wants to save this photo type. the * onsave method is responsible for analyzing the photo of this * type requested by the user, and storing it, as well as the * other fields required by onload/onshow to retrieve and display * the photo again. returns true on success. if the function * returns false, the generic photo handler onsave function will * be called. */ photo handlers are registered within the context of the contact editor dialog using the registerphotohandler function, as follows: registerphotohandler(atype, aphotohandler) ...where atype is a string w...

FileHandle API - Web APIs
be unique. note: the above code only creates a "temporary file" that exists only while you hold the filehandle instance. if you want a file to survive a page refresh/app relaunch, you need to store the handle in a more permanent location, like the database itself. see file storage below to learn more about this. perform read and write operations to read or write within a handled file, it is required to get a lockedfile. the filehandle.open() method provides such an object which can be readonly or readwrite. any attempt to perform a write action on a readonly lockedfile object will fail. writing there are three possible writing operations on a locked file: write : it's an arbitrary writing method which starts writing in the file at the lockedfile.location byte. append : this operation a...
...ss: ' + this.error); } reading it's possible to directly write the content of a lockedfile object without using an intermediate file object and a filereader object. the lockedfile interface provides a readastext method and a readasarraybuffer method. those two methods expect a size to indicate how many bytes must be read starting at the lockedfile.location byte. to read the whole file, it is required to know its size. this information (as well as the date of its last modification) can be retrieved through the lockedfile.getmetadata() method. // get a lockedfile object from the handle var myfile = myfilehandle.open('readwrite'); // retrieve the size of the file var getmeta = myfile.getmetadata(); getmeta.onsuccess = function () { var size = this.result.size; // the reading operation wi...
...ully stored and can be retrieved anytime.') } } } a file stored that way is physically put on the device. the database itself only stores a pointer to that file. it means that if the filehandle object is stored several times in several dbs or several data stores, all those objects will reference the same unique file. this is not a problem because to access the file, a lockedfile object is required and operations on such object are performed in isolation, meaning that once a lockedfile is active, all operations of this lockedfile are guaranteed to happen sequentially on the underlying file without being interleaved with operations from other lockedfile. secured write operation for performance reasons, write (and read) operations are done in memory. periodically, the results of those opera...

The HTML DOM API - Web APIs
tain the html, as well as to the browser's state, available plugins (if any), and various configuration options. barprop navigator window deprecated web app and browser integration interfaces external obsolete web app and browser integration interfaces applicationcache plugin pluginarray form support interfaces these interfaces provide structure and functionality required by the elements used to create and manage forms, including the <form> and <input> elements. formdataevent htmlformcontrolscollection htmloptionscollection radionodelist validitystate canvas and image interfaces these interfaces represent objects used by the canvas api as well as the <img> element and <picture> elements. canvasgradient canvaspattern canvasrenderingcontext2d imag...
...e of the input; if it's zero, then the "send" button is disabled if it's not already disabled. otherwise, the code ensures that the button is enabled. with this in place, the "send" button is always enabled whenever the user name input field has a value, and disabled when it's empty. html the html for the form looks like this: <p>please provide the information below. ...
... already disabled. otherwise, the code ensures that the button is enabled. with this in place, the "send" button is always enabled whenever the user name input field has a value, and disabled when it's empty. html the html for the form looks like this: <p>please provide the information below. ...

Ajax navigation example - Web APIs
used", 300: "multiple choices", 301: "moved permanently", 302: "found", 303: "see other", 304: "not modified", 305: "use proxy", 306: "reserved", 307: "temporary redirect", 308: "permanent redirect", 400: "bad request", 401: "unauthorized", 402: "payment required", 403: "forbidden", 404: "not found", 405: "method not allowed", 406: "not acceptable", 407: "proxy authentication required", 408: "request timeout", 409: "conflict", 410: "gone", 411: "length required", 412: "precondition failed", 413: "request entity too large", ...
...ndition failed", 413: "request entity too large", 414: "request-uri too long", 415: "unsupported media type", 416: "requested range not satisfiable", 417: "expectation failed", 422: "unprocessable entity", 423: "locked", 424: "failed dependency", 425: "unassigned", 426: "upgrade required", 427: "unassigned", 428: "precondition required", 429: "too many requests", 430: "unassigned", 431: "request header fields too large", 500: "internal server error", 501: "not implemented", 502: "bad gateway", 503: "service unavailable", 504: "gateway timeout", 505: ...
...ted", 502: "bad gateway", 503: "service unavailable", 504: "gateway timeout", 505: "http version not supported", 506: "variant also negotiates (experimental)", 507: "insufficient storage", 508: "loop detected", 509: "unassigned", 510: "not extended", 511: "network authentication required" }; var oreq, bisloading = false, bupdateurl = false; oloadingbox.id = "ajax-loader"; ocover.onclick = abortreq; oloadingimg.src = "data:image/gif;base64,r0lgodlheaaqapiaap///waaamlcwkjcqgaaagjiyokcgpkskih/c05fvfndqvbfmi4waweaaaah/hpdcmvhdgvkihdpdgggywphegxvywquaw5mbwah+qqjcgaaacwaaaaaeaaqaaadmwi63p4wyklre2mioggznadomgyjrbexwroumcg2lmdewnhqlvsyod2mbzkydadka+diaa...

Using the Payment Request API - Web APIs
al payment amount, tax, shipping cost, etc. options (optional) — an object containing addtional options related to the payment. ...
...show().then(function(paymentresponse) { // here we would process the payment. for this demo, simulate immediate success: paymentresponse.complete('success') .then(function() { // for demo purposes: intropanel.style.display = 'none'; successpanel.style.display = 'block'; }); }) this object provides the developer with access to details they can use to complete the logical steps required after the payment completes, such as an email address to contact the customer, a shipping address for mailing goods out to them, etc. in the code above, you'll see that we've called the paymentresponse.complete() method to signal that the interaction has finished — you'd use this to carry out finishing steps, like updating the user interface to tell the user the transaction is complete, etc. o...
... checkoutobject); request.show().then(function(paymentresponse) { // here we would process the payment. paymentresponse.complete('success') .then(function() { // finish handling payment }); }) } }) paymentrequest.abort() can be used to abort the payment request if required. detecting availability of the payment request api you can effectively detect support for the payment request api by checking if the user's browser supports paymentrequest, i.e. if (window.paymentrequest). in the following snippet, a merchant page performs this check, and if it returns true updates the checkout button to use paymentrequest instead of legacy web forms. const checkoutbutton = d...

PublicKeyCredentialCreationOptions.authenticatorSelection - Web APIs
h may be used across different platform (such as a usb or nfc device). requireresidentkeyoptional a boolean which indicated that the credential private key must be stored in the authenticator, the client or in a client device. the default value is false. userverificationoptional a string qualifying how the user verification should be part of the authentication process. ...
...latform (such as a usb or nfc device). requireresidentkeyoptional a boolean which indicated that the credential private key must be stored in the authenticator, the client or in a client device. the default value is false. userverificationoptional a string qualifying how the user verification should be part of the authentication process. ...
...or the creation of the public key credential must comply with the requirements. note: see publickeycredential.isuserverifyingplatformauthenticatoravailable() which resolves to true when a user-verifiying platform authenticator is available. ...

Web Authentication API - Web APIs
connected by https or is the localhost), and will not be available for use if the browser is not operating in a secure context. in their most basic forms, both create() and get() receive a very large random number called a challenge from the server and they return the challenge signed by the private key back to the server. this proves to the server that a user is in possession of the private key required for authentication without revealing any secrets over the network. in order to understand how the create() and get() methods fit into the bigger picture, it is important to understand that they sit between two components that are outside the browser: server - the web authentication api is intended to register new credentials on a server (also referred to as a service or a relying party) and l...
...authentication, the password is replaced with a key pair that is stored in an authenticator. the authenticator may be embedded into an operating system, such as windows hello, or may be a physical token, such as a usb or bluetooth security key. registration a typical registration process has six steps, as illustrated in figure 1 and described further below. this is a simplification of the data required for the registration process that is only intended to provide an overview. the full set of required fields, optional fields, and their meanings for creating a registration request can be found in the publickeycredentialcreationoptions dictionary. likewise, the full set of response fields can be found in the publickeycredential interface (where publickeycredential.response is the authenticatoratte...
...nse that is the authenticatorattestationresponse containing the authenticatorresponse.clientdatajson and authenticatorattestationresponse.attestationobject. the publickeycredential is sent back to the server using any desired formatting and protocol (note that the arraybuffer properties need to be be base64 encoded or similar). server validates and finalizes registration - finally, the server is required to perform a series of checks to ensure that the registration was complete and not tampered with. these include: verifying that the challenge is the same as the challenge that was sent ensuring that the origin was the origin expected validating that the signature over the clientdatahash and the attestation using the certificate chain for that specific model of the authenticator a...

ARIA: switch role - Accessibility
="button" role="switch" aria-checked="true" id="speakerpower" class="switch"> <span>off</span> <span>on</span> </button> <label for="speakerpower" class="switch">speaker power</label> description the aria switch role is identical to the checkbox role, except instead of being "checked" or "unchecked", it is either "on" and "off." like the checkbox role, the aria-checked attribute is required. the two possible values are true and false. unlike a <checkbox> or role="checkbox", there is no indeterminate or mixed state. the switch role does not support the value mixed for the aria-checked attribute; assigning a value of mixed to a switch instead sets the value to false. assistive technologies may choose to represent switch widgets with a specialized presentation to reflect the notion of...
...s may choose to represent switch widgets with a specialized presentation to reflect the notion of an on/off switch. since a switch is an interactive control, it must be focusable and keyboard accessible. if the role is applied to a non-focusable element, use the tabindex attribute to change this. the expected keyboard shortcut for toggling the value of a switch is the space key. the developer is required to change the value of the aria-checked attribute dynamically when the switch is toggled. associated aria roles, states, and properties aria-checked attribute the aria-checked attribute is required when using the switch role, as it represents the current state of the widget that the switch role is applied to. a value of true represents the "on" state; false represents the "off" state; a valu...
...ported by the switch role, and is treated as false. the default value is false. aria-readonly attribute the aria-readonly attribute is supported by the switch role. it indicates whether the widget's state is editable by the user. a value of false means that the user can change the widget's state; a value of true means that the user cannot change the widget's state. the default value is false. required javascript features handler for click events when the user clicks on the switch widget, a click event is fired, which must be handled in order to change the state of the widget. changing the aria-checked attribute when a click event is fired on the switch widget, the handler must change the value of the aria-checked attribute from true to false, or vice versa. possible effects on user age...

ARIA: listbox role - Accessibility
role of the listbox when it gets focus. if an option or item is focused within the list, it gets announced next, followed by an indication of the item's position with the list if the screen reader supports this. as focus moves within the list, the screen reader announces the relevant items. associated aria roles, states, and properties associated roles option one or more nested options are required. all selected options have aria-selected set to true. all options that are not selected have aria-selected set to false. if an option is not selectable, omit the aria-selected. list a section containing listitem elements states and properties aria-activedescendant holds the id string of the currently active element within the listbox. if that's an option element, then that would be the ...
...to true if the user can select more than one option. if set to true, every selectable option should have an aria-selected attribute included and set to true or false. options which are not selectable should not have the aria-selected attribute. if false or omitted, only the currently selected option, if any option is selected, needs the aria-selected attribute, and it must be set to true. aria-required a boolean attribute which indicates that an option with a non-empty string value must be selected. aria-readonly the user cannot change which options are selected or unselected, but the listbox is otherwise operable. aria-label a human-readable string value which identifies the listbox. if there's a visible label, then aria-labelledby should be used instead to refer to that label. aria-lab...
...the focused option and all options up to the first option. optionally, moves focus to the first option. control + shift + end (optional): selects the focused option and all options down to the last option. optionally, moves focus to the last option. control + a (optional): selects all options in the list. optionally, if all options are selected, it may also unselect all options. required javascript features selecting an option in a single select listbox when the user selects an option, the following must occur: deselect the previously selected option, setting the aria-selected to false, or removing the attribute altogether, changing the appearance of the newly unselected option to appear not selected. select the newly selected option, setting aria-selected="true" on the opt...

Cognitive accessibility - Accessibility
at least 20 seconds to extend the timeout duration by a factor of 10 with a simple action, such as hitting the space bar. provide a toggle on content that allows users to enable a longer session time limit, or no session time limit at all. examples of timed content include forms, timed reading exercises, and training materials. if the time limit is longer than 20 hours, accommodations are not required. moving, blinking, scrolling it is important not to distract users, especially ones with cognitive disabilities. if moving, blinking, scrolling, or auto-updating information starts automatically, lasts more than five seconds, and is presented in parallel with other content, the user must able to pause, stop, hide or control it, unless it's an essential functionality. "essential" means t...
...ors. convey automated error detection users need to be alerted to the error and informed of what is wrong. if there is client side error detection, observe the following guidelines to make the error as effective as possible when conveyed to the user: the error must be described in the text. ensure that the error message is as specific as possible. provide text to identify incomplete required fields and text descriptions if a value entered is invalid. if the error prevented a form submission, focus on the error. if multiple errors are present, provide a summary, with each error linking to the related input. include text along with use of icons, images, color and so on. some people have difficulty understanding the meaning of icons and other visual cues. other people may have diffi...
...ed to input information, using the <label>, <fieldset>, and <legend> elements to do so. labels should be descriptive and positioned close to the input they relate to. when requiring a specific format for input, provide an example formatted in the proper way. additionally, consider performing server-side validation to help format input data, to aid in the ease of user input. if a form control is required, indicate it both visually and via code. if a form control changes context, describe what will happen in a way that the user will understand it before they cause the context change to happen. error suggestion provide suggested input to the user if an input error is automatically detected and suggestions for correction are known (unless doing so would jeopardize the security or purpose of...

:invalid - CSS: Cascading Style Sheets
e user. syntax :invalid examples this example presents a simple form that colors elements green when they validate and red when they don't. ...
...nter an email address:</label> <input type="email" id="email_input" required> </div> </form> css label { display: block; margin: 1px; padding: 1px; } .field { margin: 1px; padding: 1px; } input:invalid { background-color: #ffdddd; } form:invalid { border: 5px solid #ffdddd; } input:valid { background-color: #ddffdd; } form:valid { border: 5px solid #ddffdd; } input:required { border-color: #800000; border-width: 3px; } input:required:invalid { border-color: #c00000; } result accessibility concerns the color red is commonly used to indicate invalid input. people who have certain types of color blindness will be unable to determine the input's state unless it is accompanied by an additional indicator that does not rely on color to convey meaning. typicall...
...blindness will be unable to determine the input's state unless it is accompanied by an additional indicator that does not rely on color to convey meaning. typically, descriptive text and/or an icon are used. mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.1 | w3c understanding wcag 2.0 notes radio buttons if any one of the radio buttons in a group is required, the :invalid pseudo-class is applied to all of them if none of the buttons in the group is selected. (grouped radio buttons share the same value for their name attribute.) gecko defaults by default, gecko does not apply a style to the :invalid pseudo-class. however, it does apply a style (a red "glow" using the box-shadow property) to the :-moz-ui-invalid pseudo-class, which applies in a subse...

Constraint validation - Developer guides
valuemissing constraint violation step date an integer number of days unless the step...
... limiting the si...
... document.getelementbyid("fs").onchange = checkfilesize; } you can see a live example of the file size constraint validation. visual styling of constraint validation apart from setting constraints, web developers want to control what messages are displayed to the users and how they are styled. controlling the look of elements the look of elements can be controlled via css pseudo-classes. :required and :optional css pseudo-classes the :required and :optional pseudo-classes allow writing selectors that match form elements that have the required attribute, or that don't have it. :placeholder-shown css pseudo-class see :placeholder-shown :valid :invalid css pseudo-classes the :valid and :invalid pseudo-classes are used to represent <input> elements whose content validates and fails to val...

<img>: The Image Embed element - HTML: Hypertext Markup Language
the html <img> element embeds an image into the document. 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 above example shows usage of the <img> element: the src attribute is required, and contains the path to the image you want to embed. the alt attribute holds a text description of the image, which isn't mandatory but is incredibly useful for accessibility — screen readers read this description out to their users so they know what the image means. alt text is also displayed on the page if the image can't be loaded for some reason: for example, network errors, content blocking, or linkrot. there are many o...
... image loading errors if an error occurs whil...
...e, so when images are used in an inline formatting context with vertical-align: baseline, the bottom of the image will be placed on the text baseline. you can use the object-position property to position the image within the element's box, and the object-fit property to adjust the sizing of the image within the box (for example, whether the image should fit the box or fill it even if clipping is required). depending on its type, an image may have an intrinsic width and height. for some image types, however, intrinsic dimensions are unnecessary. svg images, for instance, have no intrinsic dimensions if their root <svg> element doesn't have a width or height set on it. examples alternative text the following example embeds an image into the page and includes alternative text for accessibility. ...

<input type="date"> - HTML: Hypertext Markup Language
ke the 32nd of april). if you use min and max to restrict the available dates (see setting maximum and minimum dates), supporting browsers will display an error if you try to submit a date that is out of bounds. however, you'll need to double-check the submitted results to ensure the value is within these dates, if the date picker isn't fully supported on the user's device. ...
...he value is within these dates, if the date picker isn't fully supported on the user's device. you can also use the required attribute to make filling in the date mandatory — an error will be displayed if you try to submit an empty date field. this should work in most browsers, even if they fall back to a text input. let's look at an example of minimum and maximum dates, and also made a field required: <form> <label> choose your preferred party date (required, april 1st to 20th): <input type="date" name="party" min="2017-04-01" max="2017-04-20" required> <span class="validity"></span> </label> <p> <button>submit</button> </p> </form> if you try to submit the form with an incomplete date (or with a date outside the set bounds), the browser displays an error. try playi...
...people write dates. for example: ddmmyyyy dd/mm/yyyy mm/dd/yyyy dd-mm-yyyy mm-dd-yyyy month dd, yyyy one way around this is the pattern attribute on your date input. even though the date picker doesn't use it, the text input fallback will. for example, try viewing the following in a unsupporting browser: <form> <label for="bday">enter your birthday: <input type="date" name="bday" required pattern="\d{4}-\d{2}-\d{2}"> <span class="validity"></span> </label> <p> <button>submit</button> </p> </form> if you submit it, you'll see that the browser displays an error and highlights the input as invalid if your entry doesn't match the pattern ####-##-## (where # is a digit from 0 to 9). of course, this doesn't stop people from entering invalid dates, or incorrect formats. ...

Set-Cookie - HTTP
the set-cookie http response header is used to send a cookie from the server to the user agent, so the user agent can send it back to the server later. to send multiple cookies, multiple set-cookie headers should be sent in the same response. 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. header type response header forbidden header name no forbidden response-header name yes syntax set-cookie: <cookie-name>=<cookie-value> set-cookie: <cookie-name>=<cookie-value>; expires=<date> set-cookie: <cookie-name>=<co...
...ers, spaces, or tabs. it also must not contain a separator character like the following: ( ) < > @ , ; : \ " / [ ] ? = { }. a <cookie-value> can optionally be wrapped in double quotes and include any us-ascii characters excluding control characters, whitespace, double quotes, comma, semicolon, and backslash. encoding: many implementations perform url encoding on cookie values, however it is not required per the rfc specification. it does help satisfying the requirements about which characters are allowed for <cookie-value> though. __secure- prefix: cookies names starting with __secure- (dash is part of the prefix) must be set with the secure flag from a secure page (https). __host- prefix: cookies with names starting with __host- must be set with the secure flag, must be from a secure page (...
...must be set with the secure flag from a secure page (https). __host- prefix: cookies with names starting with __host- must be set with the secure flag, must be from a secure page (https), must not have a domain specified (and therefore aren't sent to subdomains) and the path must be /. expires=<date> optional the maximum lifetime of the cookie as an http-date timestamp. see date for the required formatting. if unspecified, the cookie becomes a session cookie. a session finishes when the client shuts down, and session cookies will be removed. warning: many web browsers have a session restore feature that will save all tabs and restore them next time the browser is used. session cookies will also be restored, as if the browser was never closed. when an expires date is set, the de...

encodeURIComponent() - JavaScript
, ', (, ), and *), even though these characters have no formalized uri delimiting uses, the following can be safely used: function fixedencodeuricomponent(str) { return encodeuricomponent(str).replace(/[!'()*]/g, function(c) { return '%' + c.charcodeat(0).tostring(16); }); } examples encoding for content-disposition and link headers the following example provides the special encoding required within utf-8 content-disposition and link server response header parameters (e.g., utf-8 filenames): var filename = 'my file(2).txt'; var header = "content-disposition: attachment; filename*=utf-8''" + encoderfc5987valuechars(filename); console.log(header); // logs "content-disposition: attachment; filename*=utf-8''my%20file%282%29.txt" function encoderfc5987valuechars(str) { ...
...er); // logs "content-disposition: attachment; filename*=utf-8''my%20file%282%29.txt" function encoderfc5987valuechars(str) { return encodeuricomponent(str). // note that although rfc3986 reserves "!", rfc5987 does not, // so we do not need to escape it replace(/['()]/g, escape). // i.e., %27 %28 %29 replace(/\*/g, '%2a'). // the following are not required for percent-encoding per rfc5987, // so we can allow for a little better readability over the wire: |`^ replace(/%(?:7c|60|5e)/g, unescape); } // here is an alternative to the above function function encoderfc5987valuechars2(str) { return encodeuricomponent(str). // note that although rfc3986 reserves "!", rfc5987 does not, // so we do not need to escape it ...
...t(str). // note that although rfc3986 reserves "!", rfc5987 does not, // so we do not need to escape it replace(/['()*]/g, c => "%" + c.charcodeat(0).tostring(16)). // i.e., %27 %28 %29 %2a (note that valid encoding of "*" is %2a // which necessitates calling touppercase() to properly encode) // the following are not required for percent-encoding per rfc5987, // so we can allow for a little better readability over the wire: |`^ replace(/%(7c|60|5e)/g, (str, hex) => string.fromcharcode(parseint(hex, 16))); } specifications specification ecmascript (ecma-262)the definition of 'encodeuricomponent' in that specification. ...

Critical rendering path - Web Performance
will be the width of the device instead of the default viewport width. the device-width changes when a user rotates their phone between landscape and portrait mode. layout happens every time a device is rotated or browser is otherwise resized. layout performance is impacted by the dom -- the greater the number of nodes, the longer layout takes. layout can become a bottleneck, leading to jank if required during scrolling or other animations. while a 20ms delay on load or orientation change may be fine, it will lead to jank on animation or scroll. any time the render tree is modified, such as by added nodes, altered content, or updated box model styles on a node, layout occurs. to reduce the frequency and duration of layout events, batch updates and avoid animating box model properties. paint t...
...ncy and duration of layout events, batch updates and avoid animating box model properties. paint the last step is painting the pixels to the screen. once the render tree is created and layout occurs, the pixels can be painted to the screen. onload, the entire screen is painted. after that, only impacted areas of the screen will be repainted, as browsers are optimized to repaint the minimum area required. paint time depends on what kind of updates are being applied to the render tree. while painting is a very fast process, and therefore likely not the most impactful place to focus on in improving performance, it is important to remember to allow for both layout and re-paint times when measuring how long an animation frame may take. the styles applied to each node increase the paint time, but remo...
...ptimization priority. optimizing for crp improve page load speed by prioritizing which resources get loaded, controlling the order in which they are loaded, and reducing the file sizes of those resources. performance tips include 1) minimizing the number of critical resources by deferring their download, marking them as async, or eliminating them altogether, 2) optimizing the number of requests required along with the file size of each request, and 3) optimizing the order in which critical resources are loaded by prioritizing the downloading critical assets, shorten the critical path length. ...

Introduction to progressive web apps - Progressive web apps (PWAs)
safe, so the connections between the user, the app, and your server are secured against any third parties trying to get access to sensitive data. offering these features and making use of all the advantages offered by web applications can create a compelling, highly flexible offering for your users and customers. is it worth doing all that? absolutely! with a relatively small amount of effort required to implement the core pwa features, the benefits are huge. for example: a decrease in loading times after the app has been installed, thanks to caching with service workers, along with saving precious bandwidth and time. pwas have near-instantaneous loading (from the second visit). the ability to update only the content that has changed when an app update is available. in contrast, with a nat...
...est-known success story is probably that of flipkart lite. india's largest e-commerce site was rebuilt as a progressive web app in 2015, which resulted in 70% increase in conversions. the aliexpress pwa has also seen much better results than either the web or the native app, with a 104% increase in conversion rates for new users. given their profit increase, and the relatively low amount of work required for the conversion of these apps to pwas, the advantage is clear. early stage emerging startups like couponmoto have also started using progressive web apps to drive more consumer engagement, showing that they can help small as well as big companies to (re-)engage users more effectively. you can check the list at pwa.rocks for more examples. particularly worth mentioning is the hnpwa.com page...
... of similarly-named apps, some of which may even be based on your own site, which only adds to the confusion. web apps eliminate that confusion and ensure that users get the best possible experience. browser support as mentioned before, pwas don't depend on a single api, but rather using various technologies to achieve the goal of delivering the best web experience possible. the key ingredient required for pwas is service worker support. thankfully service workers are now supported on all major browsers on desktop and mobile. other features such as web app manifest, push notifications, and add to home screen functionality have wide support too. currently, safari has limited support for web app manifest and add to home screen and no support for web push notifications. however, other major bro...

<a> - SVG: Scalable Vector Graphics
. value type: <list-of-link-types> ; default value: none; animatable: yes target where to display the linked url. value type: _self|_parent|_top|_blank|<name> ; default value: _self; animatable: yes type a mime type for the linked url. value type: <string> ; default value: none; animatable: yes xlink:href deprecated since svg 2 the url or url fragment that the hyperlink points to. ...
...t value: none; animatable: yes xlink:href deprecated since svg 2 the url or url fragment that the hyperlink points to. may be required for backwards compatibility for older browsers. ...
... aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippat...

<svg> - SVG: Scalable Vector Graphics
it is unnecessary for inner svg elements or inside html documents. ...
.... no effect on outermost svg elements. value type: <length>|<percentage> ; default value: 0; animatable: yes note: starting with svg2, x, y, width, and height are geometry properties, meaning these attributes can also be used as css properties. ...
... aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <al...

<use> - SVG: Scalable Vector Graphics
em using css inheritance. for security reasons, browsers may apply the same-origin policy on use elements and may refuse to load a cross-origin url in the href attribute. there is currently no defined way to set a cross-origin policy for use elements. since svg 2, the xlink:href attribute is deprecated in favor of href. see xlink:href page for more information. however, xlink:href can still be required in practice for cross-browser compatibility (see the compatibility table below). attributes href the url to an element/fragment that needs to be duplicated. value type: <url> ; default value: none; animatable: yes xlink:href an <iri> reference to an element/fragment that needs to be duplicated. value type: <iri> ; default value: none; animatable: yes x the x coordinate of the use ele...
...ed has a viewbox - i.e. they only have an effect when use refers to a svg or symbol element. note: starting with svg2, x, y, width, and height are geometry properties, meaning those attributes can also be used as css properties for that element. ...
... aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role xlink attributes xlink:href, xlink:title usage notes categoriesgraphics element, graphics referencing element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescr...

SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
status unknown svggraphicselement instead of svglocatable and svgtransformable implementation status unknown svggeometryelement with svggeometryelement.ispointinfill() and svggeometryelement.ispointinstroke() methods partially implemented (bug 1239100). the methods ispointinfill() and ispointinstroke() are not implemented yet (bug 1325319). ...
... moved pathlength attribute and gettotallength() and getpointatlength() methods from svgpathelement to svggeometryelement implemented (bug 1239100) document structure change notes svgsvgelement.suspendredraw(), svgsvgelement.unsuspendredraw(), and svgsvgelement.unsuspendredrawall() deprecated turned into no-ops (bug 734079) externalresourcesrequired attribute removed implementation status unknown auto value for width and height in <image> implementation status unknown referencing entire document with <use> implementation status unknown lang attribute on <desc> and <title> implemented (bug 721920) css transforms on outermost <svg> not affecting svgsvgelement.currentscale or svgsvgelement.current...
... attributes of <svg> implementation status unknown baseprofile and version attributes removed from <svg> implementation status unknown svgsvgelement.forceredraw() deprecated turned into a no-op (bug 733764) svgsvgelement.deselectall() deprecated not yet deprecated (bug 1302705) <switch> not affecting <style> implementation status unknown requiredfeatures attribute removed implementation status unknown svgsvgelement.currentview and svgsvgelement.usecurrentview removed svgsvgelement.currentview was never implemented, svgsvgelement.usecurrentview not removed yet (bug 1174097) svgunknownelement not implemented (bug 1239218) lang attribute without namespace implemented (bug 721920) svgsvgelement.

context-menu - Archive of obsolete content
essage: function(){ var cmitems = getmostrecentbrowserwindow().document.queryselectorall(".addon-context-menu-item[value^='"+ uuidstr +"']"); for(var i=0; i < cmitems.length; i++) cmitems[i].tooltiptext = cmitems[i].value.substring(36); } }); globals constructors item(options) creates a labeled menu item that can perform an action when clicked. parameters options : object required options: name type label string the item's label. it must either be a string or an object that implements tostring(). optional options: name type image string the item's icon, a string url. the url can be remote, a reference to an image in the add-on's data directory, or a data uri. data ...
...s that the item can use to interact with the page. onmessage function if the item is contained in the top-level context menu, this function will be called when the content script calls self.postmessage. it will be passed the data that was passed to postmessage. menu(options) creates a labeled menu item that expands into a submenu. parameters options : object required options: name type label string the item's label. it must either be a string or an object that implements tostring(). items array an array of menu items that the menu will contain. each must be an item, menu, or separator. optional options: name type image string the menu's icon,...

places/bookmarks - Archive of obsolete content
queries are or'd together, we also get bookmarks that // match the second query. the second query's properties // are and'd together, so results that are in the platform's unsorted // bookmarks folder, and are also tagged with 'mozilla', get returned // as well in this query }); globals constructors bookmark(options) creates an unsaved bookmark instance. parameters options : object required options: name type title string the title for the bookmark. required. url string the url for the bookmark. required. optional options: name type group group the parent group that the bookmark lives under. defaults to the bookmarks.unsorted group. index number ...
...p the parent group that the bookmark lives under. defaults to the bookmarks.unsorted group. index number the index of the bookmark within its group. last item within the group by default. tags set a set of tags to be applied to the bookmark. group(options) creates an unsaved bookmark group instance. parameters options : object required options: name type title string the title for the group. required. optional options: name type group group the parent group that the bookmark group lives under. defaults to the bookmarks.unsorted group. index number the index of the bookmark group within its parent group. last it...

platform/xpcom - Archive of obsolete content
this will typically return a descendant of unknown, although it may return a custom object that satisfies the nsisupports interface. optional options: name type contract string a contract id. users of xpcom can ...
... of the 'about' object if you will be getting the wrappedjsobject property from the returned object to access its javascript implementation, pass ci.nsisupports here: var custom = factory.createinstance(null, ci.nsisupports).wrappedjsobject; // you can now access the interface defined for the 'custom' object returns object : the component created by the factory. lockfactory() this method is required by the nsifactory interface, but as in most implementations it does nothing interesting. queryinterface() see the documentation for unknown.queryinterface(). properties interfaces the set of interfaces supported by this object. factory sets this to nsifactory. id this factory's class id. contract this factory's contract id. service use this class to register an xpcom service. to regist...

package.json - Archive of obsolete content
some of its entries, such as icon, name, and description, have direct analogues in the install manifest format, and entries from package.json are written into the install manifest when the add-on is built using jpm xpi. others, such as lib, permissions, and preferences, represent instructions to the jpm tool itself to generate and include particular code and data structures in your add-on. ...
...of packages that this add-on requires in order to function properly. description the add-on's description; this is a human-readable message describing what the add-on does. this defaults to the text "a basic add-on". this value will be used as the add-on's em:description element in its install.rdf. engines object with supported applications (key) and required version numbers (value). the version number can both specify a minimum and maximum version separated by a space. firefox: firefox desktop fennec: firefox for android thunderbird: thunderbird seamonkey: seamonkey any application uuid example: "engines": { "firefox": ">= 38.0a1", "fennec": ">= 38.0a1" } fullname note: this is de...

Displaying web content in an extension without security issues - Archive of obsolete content
equest.responsetext)); that way you can have the template in your extension but still strip it off all privileges when it is loaded in a frame. restricting what documents that contain untrusted data can do there are several restrictions that can be applied per frame. here it is most important to disable javascript and plugins. ...
...code and to insert it into the document via innerhtml. and scripts won’t run anyway when inserted via innerhtml, right? well, not quite. it is right that <script>alert('xss')</script> won’t run if inserted via innerhtml. but <img src="does_not_exist" onerror="alert('xss')"> for example will still run javascript code, and there are many more possibilities. so properly sanitizing input is still required when using innerhtml and it is far from trivial. it is much easier to use dom manipulation methods that won’t have unexpected side-effects. for example, your template document might have this code: <style type="text/css"> #entrytemplate { display: none; } </style> <div id="entrytemplate"> <div class="title"></div> <div class="description"></div> </div> now to insert a new entry in the d...

Enhanced Extension Installation - Archive of obsolete content
stored in the profile directory, there is no longer any need for special extension system handling of the -register command line flag, so support for that has been removed. datasource structure since there is now only a single rdf/xml datasource for storage of all installed items, the staggered datasource structure used by firefox 1.0 and the use of an internal composite datasource is no longer required. the extension system retains an object implementing nsirdfdatasource (so that it can supply special properties in addition to the set stored simply in the xml datasource) and an internal member that holds the single rdf/xml datasource. properties are read and are written directly to this, there are no shims. tracking install locations since there is now only a single datasource, install locati...
...ectory install location such as app-profile or app-global the location is functioning if it the directory exists. if any location is not functioning, or any of the manifests listed above does not exist, all manifests are removed and the system rebuilds everything from scratch. this should prevent against random file deletions and allow developers to easily reset their state by deleting one of the required system files. since we can now install by simply detecting the presence of a {guid} folder under the app-profile and app-global install locations, we no longer need installed-extensions.txt for registration of pre-configured items such as the default theme. the firefox build system will just create the {guid} folder for the default theme and place its install manifest inside, and on the first st...

How to convert an overlay extension to restartless - Archive of obsolete content
urce" line from your chrome.manifest file. it's probably a good idea to do this even if you aren't going fully restartless / extractionless due to the previously mentioned exposure to content of resource mappings. also, drop support for firefox 4 through 9 while you're at it. prior to firefox 10, the chrome.manifest file you rely on wasn't loaded automatically for restartless add-ons. hacks were required, and probably a bad idea. step 2b: audit any remaining resource:// uri usage internal to your extension if you don't need resource:// uris for anything else, then you may be able to skip the next step. if not, see if you still can't do things any other way. as with jsms, a chrome:// uri may be more appropriate. if you want to also make your add-on extractionless then you may need "step 3" if yo...
... stylesheetservice.unregistersheet(stylesheeturi, stylesheetservice.author_sheet); } } ... step 8: window icons firefox does not scan the chrome/icons/default directory of restartless or extrationless extensions for window icons. if you are using custom window icons, they will need to be moved to %mozdir%/icons/default/ upon load of your extension. removal upon unload is not required, but you must be able to handle overwriting them upon load. this is because your unload() will not always be called prior to an upgrade (e.g. upgrade might take place while the application is not running). further, this is a generic location for icons and the icon may still be in use by a different profile. thus, you will probably want to use version numbers in the icon name (the id of the wind...

MMgc - Archive of obsolete content
::gcroot { mygcobject* mygcobject; }; note that a gcroot is not a garbage-collected object. it is an unmanaged memory object that contains gc pointers. mmgc keeps a list of all gcroots in the system and makes sure that it marks them. gcroots are generally expected to be allocated using mmgc's unmanaged memory allocators, so that mmgc can figure out how big the gcroot object is. use of gcroot is required to have gc pointers from unmanaged memory, since without gcroot, those pointers won't be marked by the mark phase of the gc. note that gcroot can be used either by subclassing, or by creating a gcroot and passing it the memory locations to treat as a root: /** subclassing constructor */ gcroot(gc *gc); /** general constructor */ gcroot(gc *gc, const void *object, size_t size); allocating objects...
..., regardless of whether the object pointed to is gcobject, gcfinalizedobject, rcobject or rcfinalizedobject. the gc marks the entire stack during collection, and not incrementally, so write barriers aren't needed. write barriers are not needed for pointers to gc objects from unmanaged memory (gcroot). gcroots are marked at the end of the mark phase, and not incrementally, so no write barriers are required. drc() is required for rc objects, since the reference count must be maintained. write barriers are not needed for c++ objects that exist purely on the stack, and never in the heap. the flash player class "nativeinfo" is a good example. such objects are essentially the same as stack-based local variables. zeroing rcobjects all rcobjects (including all subclasses) must zero themselves out complete...

Creating a Firefox sidebar extension - Archive of obsolete content
extension for more detailed information about structuring, packaging, and deploying extensions. packages extensions to firefox are installed with packages ("bundles"). an extension package usually contains a "content" provider, which contains the xul code and application logic. optionally locales and skins can be included. most additions are provided with a default tree structure, although not required it is recommended to use this structure. here the package for the sidebar is created, the files included are listed below. example 1. package structure emptysidebar \- chrome |- content |- locale | \- en-us \- skin create all folders, except for skin. it is not used for this tutorial. the locale holds the locale, only the en-us locale is created. it is listed in example 2. the ...
...d openemptysidebar.modifierskey keys from the dtd, remove the <keyset> from the firefoxoverlay.xul file. one must then set the key attribute of the menuitem to "". the extension needs to provide some special manifest files that control how it is installed and where its chrome resources are stored. the first is install.rdf, the install manifest. see install manifests for a complete listing of the required and optional properties. the install manifest is listed in example 5. example 5. install.rdf <?xml version="1.0" encoding="utf-8"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>emptysidebar@yourdomain.com</em:id> <em:name>emptysidebar extension</em:name> <em:ver...

Using microformats - Archive of obsolete content
microformat to add to the microformat module. definition a javascript structure describing the microformat. see describing microformats in javascript for details. count() counts the number of microformats in a document that match specified criteria. var nummicroformats = microformats.count(name, rootelement, options); parameters name the name of the microformat to count. rootelement required. the dom element at which to begin the search. if you want to search the entire document, specify content.document. options optional. if provided, this is a javascript object that contains zero or more of the following flags: recurseexternalframes if true, child frames are included in the search. the default is true. showhidden if true, hidden microformats are added; otherwise they're l...
... the microformat object to dump. return value a string that describes the contents of the specified microformat object. get() returns an array of microformat objects corresponding to the microformats found that match specified criteria. var microformatsarray = microformats.get(name, rootelement, options, targetarray); parameters name the name of the microformat to find. rootelement required. the dom element at which to begin the search. if you want to search the entire document, specify content.document. options optional. if provided, this is a javascript object that contains zero or more of the following flags: recurseexternalframes if true, child frames that reference external content are included in the search. the default is true. showhidden if true, hidden microformat...

Mozilla Crypto FAQ - Archive of obsolete content
e outside the u.s. you do not need to provide such notification in any case, but you may need to take other actions to comply with laws and regulations in your own country concerning encryption technologies. as a mirror of the mozilla ftp site you will automatically be distributing open source encryption code as well. if you are a u.s. resident and/or your mirror site is in the u.s. then you are required to comply with applicable u.s. regulations governing the export of encryption software. your particular obligations depend on your exact circumstances, and we cannot provide legal advice to you. however, in an advisory opinion issued in reference to the bernstein case, the bureau of export administration (bxa) has stated the following: "concerning the posting onto a mirror or archive site of alr...
...ns governing the export of encryption software. your particular obligations depend on your exact circumstances, and we cannot provide legal advice to you. however, in an advisory opinion issued in reference to the bernstein case, the bureau of export administration (bxa) has stated the following: "concerning the posting onto a mirror or archive site of already-posted source code, notification is required only for the initial posting." bxa and nsa have already been notified of the posting of encryption-related source code on the mozilla site, and in light of this opinion we have therefore decidednot to ask mirror sites to provide notification themselves. note that in any case the notification procedures outlined in the export administration regulations apply only to u.s. residents and sites locat...

Table Layout Strategy - Archive of obsolete content
idths are balanced by basictablelayoutstrategy::balancecolumnwidths or the fixed layout counter part. in the following the basic table layout strategy is discussed. the functionality is distributed over a large number of subroutines as shown in the chart below. the words the table layout is width oriented and knows the following widths: minimum content width - min the minimum width that is required to layout the content, all linebreak possibilities will be used percent width - pct the cell width specified in percent, fixed width - fix the cell width specified as px, mm etc., proportional width - prop the cell width specified via 1*, 2* etc. and the desired width - des the width the content could fill without any linebreaks. cells can be members of colspans. these colspans have to d...
...ey include. this information is hold in the adjusted width's. due to this there are 10 width informations for every column. min_con des_con fix min_adj des_adj fix_adj pct pct_adj min_pro final the width parameter have the following meaning: #define width_not_set -1 #define num_widths 10 #define num_major_widths 3 // min, des, fix #define min_con 0 // minimum width required of the content + padding #define des_con 1 // desired width of the content + padding #define fix 2 // fixed width either from the content or cell, col, etc. + padding #define min_adj 3 // minimum width + padding due to col spans #define des_adj 4 // desired width + padding due to col spans #define fix_adj 5 // fixed width + padding due to col spans...

Binding Attachment and Detachment - Archive of obsolete content
f the dom load event for the bound document. when the load event fires, and if all binding documents loaded successfully, it can be assumed that all bindings are attached to all elements in the page. for elements that are created during or after the load event is fired, no assumptions can be made regarding order of binding attachment. when a binding is attached, the following events occur: if required, anonymous content is cloned from the binding's content template and inserted around the bound element. the methods and properties of the binding are installed on the element and become available to scripts that reference the bound element. any specified event handlers are installed on their requested targets. if the binding needs to execute any initialization code following its attachment to...
... share the same binding document. therefore if all the bindings in a chain come from binding documents that have already been loaded by the bound document, then the attachment of a binding (either through css or through the dom) is guaranteed to be synchronous. an author can ensure that all bindings are synchronously attached by calling loadbindingdocument to pre-fetch any xbl documents that are required. if the binding document is loaded prior to the firing of the load event, then any binding attachments that are placed following the load will be synchronous if they come from one of these previously loaded binding documents. the document obtained from loadbindingdocument is a copy of the binding document that is unique to the bound document. the bindings in the binding document can be modified ...

Introduction - Archive of obsolete content
ng features of a specific platform making building cross-platform software time-consuming and costly. a number of cross-platform solutions have been developed in the past. java, for example, has portability as a main selling point. xul is one such language designed specifically for building portable user interfaces. it takes a long time to build an application even for only one platform. the time required to compile and debug can be lengthy. with xul, an interface can be implemented and modified quickly and easily. xul has all the advantages of other xml languages. for example xhtml or other xml languages such as mathml or svg can be inserted within it. also, text displayed with xul is easily localizable, which means that it can be translated into other languages with little effort. what kinds o...
...alled an overlay, which allows the ui provided from one source, in this case, the firefox browser, to be merged together with the ui from the extension. extensions may also be applied to other mozilla based products such as thunderbird. standalone xulrunner application xulrunner is a packaged version of the mozilla platform which allows you to create standalone xul applications. a browser isn't required to run these applications, as they have their own executable file. xul package in between the other two are applications which are created in the same way as an extension, but they act like a separate application in a separate window. this is used when you don't want to have the larger size of a complete xulrunner application, but don't mind requiring a mozilla browser to be installed to be abl...

Using Remote XUL - Archive of obsolete content
owsers that understand it. this isn't a problem inside an organization that uses mozilla-based browsers exclusively, but for other sites you may need to provide another form of navigation as well. prerequisites to understand this tutorial you should have experience with tag-based languages like html along with basic javascript, css, and the dom. knowledge of xml and its syntax is useful but not required. you also need a text editor and a web browser that can render xul, like mozilla, or firefox. if you build a xul file along with this tutorial and put it onto a web server, you need to configure your web server to specify the content type of xul files as application/vnd.mozilla.xul+xml. for apache, you can do this by adding the following line to your mime.types file: application/vnd.mozilla.xul...
... to do is create a basic xul document. <?xml version="1.0"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" /> a xul document requires only two entities to be valid, an xml processing instruction on the first line that identifies the file as xml, and a window element that defines a xul application window (or in this case web page). the processing instruction is required because xul is an xml-based language, and this instruction tells browsers how to parse the document. the window element is the root (outermost) element in a xul document and encompasses all other elements. it is analogous to the <html> element in html. these two elements give us a valid xul document we can load and display in our web browser, even though there's nothing to see yet. source | ren...

XUL accessibility guidelines - Archive of obsolete content
t use images (i.e. image elements, buttons with images). for toolbar buttons with images it is recommended to use both a text label in the label attribute and image alt text in the tooltiptext attribute. view the code examples below. <image src="stop.png" tooltiptext="stop" /> <html:img src="stop.jpg" alt="stop" /> <html:img src="decorative_image.jpg" alt="" /> <!-- in html the alt attribute is required. --> <toolbarbutton label="stop" image="stop.png" tooltiptext="stop loading the page" /> title provide unique titles to window container elements such as windows, wizards, and dialogs. titles provide users the most basic information about the application. the title is often the first thing spoken by a screen reader when an application is opened or activated. users can also refer back to the t...
...een reader). interactive elements avoid small targets, which are difficult to see and click on. verify that the layout and contrast is sufficient to distinguish interactive elements one from another and from static portions of the application. error recovery when the user causes an error in an application allow for graceful recovery. for example, if the user provides letters where numbers are required in a form, this should not break the application. the user should be alerted to the problem and allowed to fix the error. response time when appropriate, alert the user to time limits and allow the user to adjust a time limit or request more time. one of the miracles of modern technology is that it allows people with even the most severe physical limitations to use computers. some users use mou...

Building XULRunner with Python - Archive of obsolete content
irst a word of warning that zonealarm has exhibited memory leaks that cause build machines to crash with rather spurious errors. you may want to uninstall it if you suspect this to be a problem. you will also want to disable any virus scanner resident monitoring as that will slow builds. ensure the pc is running xp with all the latest service packs and patches applied. microsoft c++ compiler is required and whilst the current free version is visual studio 8 express (msvc8) you will almost certainly want to use visual studio .net 2003 (msvc71) which is not longer officially available. the issue is that xulrunner must be built with the same version of c as python and with python 2.5 that is msvc71. both must use the same version of the c runtime library msvcrt?.dll or crashes will ensue. the alter...
...unstable. ...

NPAPI plugin reference - Archive of obsolete content
nd called by the plug-in. np_getmimedescription np_getmimedescription returns a supported mime type list for your plugin. it works on unix (linux) and macos. on windows you have to define supported mimetypes in the dll resource file. np_getvalue allows the browser to query the plug-in for information. np_initialize provides global initialization for a plug-in. np_port contains information required by the window field of an npwindow structure. np_shutdown provides global deinitialization for a plug-in. npanycallbackstruct contains information required during embedded mode printing. npapi plug-in side api this chapter describes methods in the plug-in api that are available from the plug-in object; these allow plug-ins to interact with the browser. the names of all of these methods begi...
... instance of the completion of a url request. npp_write delivers data to a plug-in instance. (remark: hence the name "npp_write" is misleading - just think of:"data_arrived") npp_writeready determines maximum number of bytes that the plug-in can consume. npprint contains information the plug-in needs to print itself in full-page or embedded mode. npprintcallbackstruct contains information required by the platformprint field of the npembedprint structure during embedded mode printing on unix systems. nppvariable see npn_setvalue. nprect represents a rectangular area of a plug-in's content area. npregion represents a platform-defined region of a page. npsaveddata block of instance information saved after the plug-in instance is deleted; can be returned to the plug-in to restore the d...

-ms-hyphenate-limit-chars - Archive of obsolete content
the -ms-hyphenate-limit-chars css property is a microsoft extension that specifies one to three values indicating the minimum number of characters in a hyphenated word. if the word does not meet the required minimum number of characters in the word, before the hyphen, or after the hyphen, then the word is not hyphenated. ...
...f characters in a hyphenated word. if the word does not meet the required minimum number of characters in the word, before the hyphen, or after the hyphen, then the word is not hyphenated. initial valueautoapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete syntax values auto corresponds to a value of 5 2 2, indicating a 5-character word limit, 2 characters required before a hyphenation break, and 2 characters required following a hyphenation break. <integer>{1,3} one to three integer values, corresponding to the word limit, the minimum number of characters required before a hyphenation break, and the minimum number of characters required following a hyphenation break, respectively. if the third value is missing it is equal to the second. if the se...

XForms Custom Controls - Archive of obsolete content
since firefox 4, xbl and xul are disabled by default for all pages not loaded from a chrome:// url. this also includes content loaded from file:// urls. it is possible to re-enable this by following the steps on using remote xul. this is required for all examples here to run! purpose you are in the right place if you would like to create your own custom renderings of the xforms controls like input, output, trigger, etc. we will also show you how to create custom controls that work with the xforms model and are automatically updated just like xforms controls. the purpose of this article is to give you enough background information so that you'll be able to get a good start. to really grasp the following information, a good understanding of xforms, xbl, javascript and css is needed. xpcom kn...
...stance node. */ domstring getvalue(); /** * set value of instance node. */ void setvalue(in domstring value); /** * return true if the instance node is readonly as determined by the mdg. */ boolean isreadonly(); /** * return true if the instance node is relevant as determined by the mdg. */ boolean isrelevant(); /** * return true if the instance node is required as determined by the mdg. */ boolean isrequired(); /** * return true if instance node is valid as determined by the mdg. */ boolean isvalid(); /** * return true if the control is bound to an instance node. */ boolean hasboundnode(); /** * return the bound instance node. */ nsidomnode getboundnode(); /** * set the content of the instance node. if aforce...

Implementation Status - Archive of obsolete content
.4.3 xforms-value-changed supported 4.4.4 xforms-valid supported 4.4.5 xforms-invalid supported 4.4.6 xforms-readonly supported 4.4.7 xforms-readwrite supported 4.4.8 xforms-required supported 4.4.9 xforms-optional supported 4.4.10 xforms-enabled supported 4.4.11 xforms-disabled supported 4.4.12 domactivate supported 4.4.13 domfocusin supported ...
...gnedlong, unsignedint, unsignedshort, byte, unsignedbyte, float, decimal, anyuri, base64binary, hexbinary, qname 6. ...

CSS and JavaScript accessibility best practices - Learn web development
nation of what you need to conform to the wcag criteria around color contrast. note: a high contrast ratio will also allow anyone using a smartphone or tablet with a glossy screen to better read pages when in a bright environment, such as sunlight. another tip is to not rely on color alone for signposts/information, as this will be no good for those who can't see the color. instead of marking required form fields in red, for example, mark them with an asterisk and in red. hiding things there are many instances where a visual design will require that not all content is shown at once. for example, in our tabbed info box example (see source code) we have three panels of information, but we are positioning them on top of one another and providing tabs that can be clicked to show each one (it is ...
... updating without a page reload (screen readers won't pick this up or alert users to it by default): <div class="errors" role="alert" aria-relevant="all"> <ul> </ul> </div> we will explain these attributes in our next article, which covers wai-aria in much more detail. note: some of you will probably be thinking about that fact that html5 forms have built-in validation mechanisms like the required, min/minlength, and max/maxlength attributes (see the <input> element reference for more information). we didn't end up using these in the demo because cross-browser support for them is patchy (for example ie10 and above only). note: webaim's usable and accessible form validation and error recovery provides some further useful information about accessible form validation. other javascript ac...

Pseudo-classes and pseudo-elements - Learn web development
e.g. 2n + 1 would match the last element of that type in the sequence, then two elements before that, then two elements before that, etc. all the odd ones, counting from the end.) :only-child matches an element that has no siblings. :only-of-type matches an element that is the only one of its type among its siblings. :optional matches form elements that are not required. :out-of-range matches an element with a range when its value is out of range. :past matches the elements before the current element. :placeholder-shown matches an input element that is showing placeholder text. :playing matches an element representing an audio, video, or similar resource that is capable of being “played” or “paused”, when t...
...being “played” or “paused”, when that element is “playing”. :paused matches an element representing an audio, video, or similar resource that is capable of being “played” or “paused”, when that element is “paused”. :read-only matches an element if it is not user-alterable. :read-write matches an element if it is user-alterable. :required matches form elements that are required. :right in paged media, matches right-hand pages. :root matches an element that is the root of the document. :scope matches any element that is a scope element. :valid matches an element such as an <input> element, in a valid state. :target matches an element if it is the target of the current u...

Legacy layout methods - Learn web development
l { float: left; margin-left: 20px; width: 60px; background: rgb(255, 150, 150); } the top row of single columns will now lay out neatly as a grid. note: we've also given each column a light red color so you can see exactly how much space each one takes up. layout containers that we want to span more than one column need to be given special classes to adjust their width values to the required number of columns (plus gutters in between). we need to create an additional class to allow containers to span 2 to 12 columns. each width is the result of adding up the column width of that number of columns plus the gutter widths, which will always number one less than the number of columns. add the following at the bottom of your css: /* two column widths (120px) plus one gutter width (20px)...
...sses on your elements or even adding and removing some containers, to see how you can vary the layout. for example, you could make the second row look like this: <div class="row"> <div class="col span8">13</div> <div class="col span4">14</div> </div> now you've got a grid system working, you can simply define the rows and the number of columns in each row, then fill each container with your required content. great! creating a fluid grid our grid works nicely, but it has a fixed width. we really want a flexible (fluid) grid that will grow and shrink with the available space in the browser viewport. to achieve this we can turn the reference pixel widths into percentages. the equation that turns a fixed width into a flexible percentage-based one is as follows. target / context = result for...

Practical positioning examples - Learn web development
impler, yes, but then each separate "page" view would actually be a newly-loaded webpage, which would make it harder to save information across views, and integrate this feature into a larger ui design. in addition, so-called "single page apps" are becoming very popular — especially for mobile web uis — because having everything served as a single file cuts down on the number of http requests required to view all the content, thereby improving performance. note: some web developers take things even further, only having one page of information loaded at once, and dynamically changing the information shown using a javascript feature such as xmlhttprequest. at this point in your learning however we want to keep things as simple as possible. there is some javascript later on, but only a tiny bit...
... our finished example will look like this: note: you can see the finished example running live at hidden-info-panel.html (source code). check it out to get an idea of what you will be building in this section of the article. as a starting point, make a local copy of hidden-info-panel-start.html from our github repo. this doesn't follow on from the previous example, so a fresh start file is required. let's have a look at the html in the file: <label for="toggle">❔</label> <input type="checkbox" id="toggle"> <aside> ... </aside> to start with here we've got a <label> element and an <input> element — <label> elements are normally used to associate a text label with a form element for accessibility purposes (allowing a screen user to see what description goes with what form element). ...

Fundamental text and font styling - Learn web development
em. the maths can be complicated, so you need to be careful about how you style things. it is best to use rem where you can, to keep things simple, and avoid setting the font-size of container elements where possible. a simple sizing example when sizing your text, it is usually a good idea to set the base font-size of the document to 10 px, so that then the maths is a lot easier to work out — required (r)em values are then the pixel font size divided by 10, not 16. after doing that, you can easily size the different types of text in your document to what you want. it is a good idea to list all your font-size rulesets in a designated area in your stylesheet, so they are easy to find. our new result is like so: <h1>tommy the cat</h1> <p>well i remember it as though it were a meal ago...</p> ...
...er lines of text are laid out horizontally or vertically and the direction in which subsequent lines flow. font shorthand many font properties can also be set through the shorthand property font. these are written in the following order: font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family. among all those properties, only font-size and font-family are required when using the font shorthand property. a forward slash has to be put in between the font-size and line-height properties. a full example would look like this: font: italic normal bold normal 3em/1.5 helvetica, arial, sans-serif; active learning: playing with styling text in this active learning session, we don't have any specific exercises for you to do: we'd just like you to have a good pl...

What is a URL? - Learn web development
a urls). using ftp, for example, is not secure and is no longer supported by modern browsers. other technologies, such as css or javascript, use urls extensively, and these are really the heart of the web. absolute urls vs relative urls what we saw above is called an absolute url, but there is also something called a relative url. let's examine what that distinction means in more detail. ...
... when a url is used within a document, such as in an html page, things are a bit different. ...

How to build custom form controls - Learn web development
structure, we can start designing our control. the whole point of building this custom control is to be able to style it exactly how we want. to that end, we will split our css work into two parts: the first part will be the css rules absolutely necessary to make our control behave like a <select> element, and the second part will consist of the fancy styles used to make it look the way we want. required styles the required styles are those necessary to handle the three states of our control. .select { /* this will create a positioning context for the list of options; adding this to .select:focus-within will be a better option when fully supported */ position: relative; /* this will make our control become part of the text flow and sizable at the same time */ display : inline-bl...
...nd sizable at the same time */ display : inline-block; } we need an extra class active to define the look and feel of our control when it is in its active state. because our control is focusable, we double this custom style with the :focus pseudo-class in order to be sure they will behave the same. .select .active, .select:focus { outline: none; /* this box-shadow property is not exactly required, however it's imperative to ensure active state is visible, especially to keyboard users, that we use it as a default value. */ box-shadow: 0 0 3px 1px #227755; } now, let's handle the list of options: /* the .select selector here helps to make we only select element inside our control. */ .select .optlist { /* this will make sure our list of options will be displayed below the valu...

Sending forms through JavaScript - Learn web development
xhr.send( urlencodeddata ); } btn.addeventlistener( 'click', function() { senddata( {test:'ok'} ); } ) here's the live result: note: this use of xmlhttprequest is subject to the same-origin policy if you want to send data to a third party ...
... xhr.send( data ); } // access our form... const form = document.getelementbyid( "theform" ); // ...to take over the submit event form.addeventlistener( 'submit', function ( event ) { event.preventde...

Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
ppens when you need to run the code over and over again—for example, in the case of an animation? this is where setinterval() comes in. this works in a very similar way to settimeout(), except that the function you pass as the first parameter is executed repeatedly at no less than the number of milliseconds given by the second parameter apart, rather than once. you can also pass any parameters required by the function being executed as subsequent parameters of the setinterval() call. let's look at an example. the following function creates a new date() object, extracts a time string out of it using tolocaletimestring(), and then displays it in the ui. it then runs the function once per second using setinterval(), creating the effect of a digital clock that updates once per second (see this liv...
... raf = requestanimationframe(draw); } now it is time to set up the initial state of the app when the page first loads. add the following two lines, which simply hide the results paragraph and spinner container using display: none;. result.style.display = 'none'; spinnercontainer.style.display = 'none'; next, define a reset() function, which sets the app back to the original state required to start the game again after it has been played. add the following at the bottom 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 i...

Third-party APIs - Learn web development
t the example off, make copies of nytimes_start.html and nytimes.css in a new directory on your computer. if you've already cloned the examples repository, you'll already have a copy of these files, which you can find in the javascript/apis/third-party-apis/nytimes directory. initially the <script> element contains a number of variables needed for the setup of the example; below we'll fill in the required functionality. the app will end up allowing you to type in a search term and optional start and end dates, which it will then use to query the article search api and display the search results. connect the api to your app first, you'll need to make a connection between the api and your app. in the case of this api, you need to include the api key as a get parameter every time you request ...
...c/search/v2/articlesearch.json?api-key=your-api-key-here&page=0&q=cats &fq=document_type:("article")&begin_date=20170301&end_date=20170312 note: you can find more details of what url parameters can be included at the nytimes developer docs. note: the example has rudimentary form data validation — the search term field has to be filled in before the form can be submitted (achieved using the required attribute), and the date fields have pattern attributes specified, which means they won't submit unless their values consist of 8 numbers (pattern="[0-9]{8}"). see form data validation for more details on how these work. requesting data from the api now we've constructed our url, let's make a request to it. we'll do this using the fetch api. add the following code block inside the fetchresult...

Object-oriented JavaScript for beginners - Learn web development
tructors and object instances javascript uses special functions called constructor functions to define and initialize objects and their features. they are useful because you'll often come across situations in which you don't know how many objects you will be creating; constructors provide the means to create as many objects as you need in an effective way, attaching data and functions to them as required. let's explore creating classes via constructors and creating object instances from them in javascript. first of all, we'd like you to make a new local copy of the oojs.html file we saw in our first objects article. a simple example let's start by looking at how you could define a person with a normal function. add this function within the script element: function createnewperson(name) { ...
... to them when they were created; this is one reason why it is very important to use this, so each one uses its own value, and not some other value. let's look at the constructor calls again: let person1 = new person('bob'); let person2 = new person('sarah'); in each case, the new keyword is used to tell the browser we want to create a new object instance, followed by the function name with its required parameters contained in parentheses, and the result is stored in a variable — very similar to how a standard function is called. each instance is created according to this definition: function person(name) { this.name = name; this.greeting = function() { alert('hi! i\'m ' + this.name + '.'); }; } after the new objects have been created, the person1 and person2 variables contain the ...

Aprender y obtener ayuda - Learn web development
n activity, we have found out that you can't really engage in both ways of learning — or thinking — at once. so which one should you choose? you might think that focused learning is better for studying, but in reality, both are very important. focused thinking is great for concentrating hard on specific subjects, getting into deep problem solving, and improving your mastery of the techniques required — strengthening the neural pathways in your brain where that information is stored. it isn't however very good at getting an understanding of "the big picture", and unlocking new neural pathways when you are trying to understand new subjects or solve new problems that you haven't come across before. for that, you need diffuse thinking. this is the opposite of focus — you let your brain wand...
... build web sites and web applications (we can definitely help you with this one!). how to get a domain, hosting, and use them to put a web site or application online. how to run a small business. how to advertise my business and attract clients. how much time and money will it take? estimate the time and cost of getting these things. if you'll need to work to earn money to buy the materials required, then the time to do that will have to be factored in. once you have a time estimate, you can start to build a plan around your life. how many hours per week do i need to do? once you know what you need to do, and how long you think it'll take you, you can start writing out a plan to follow, to achieve your goal. it can be as simple as: "it'll take me 500 hours to learn what i need to know, an...

CSS performance optimization - Learn web development
rently needed. the browser can paint the page once it has downloaded the css and built the css object model. browsers follow a specific rendering path: paint only occurs after layout, which occurs after the render tree is created, which in turn requires both the dom and the cssom trees. to optimize the cssom construction, remove unnecessary styles, minify, compress and cache it, and split css not required at page load into additional files to reduce css render 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, ...
...wn as composited, animating transform properties is done in the gpu, resulting in improved performance, especially on mobile. will-change property the css will-change property tells browsers which properties of an element are expected to change enabling browsers to set up optimizations before the element is actually changed, improving performance by doing potentially expensive work before it is required. will-change: opacity, transform; the font-display property applied to the @font-face rule, the font-display property defines how font files are loaded and displayed by the browser, allowing text to appear with a fallback font while a font loads, or fails to load. this improves performance by making the text visible instead of having a blank screen, with a trade-off being a flash of unstyled t...

Client-Server Overview - Learn web development
(a primer) web browsers communicate with web servers using the hypertext transfer protocol (http). when you click a link on a web page, submit a form, or run a search, the browser sends an http request to the server. this request includes: a url identifying the target server and resource (e.g. an html file, a particular data point on the server, or a tool to run). a method that defines the required action (for example, to get a file or to save or update some data). the different methods/verbs and their associated actions are listed below: get: get a specific resource (e.g. an html file containing information about a product, or a list of products). post: create a new resource (e.g. add a new article to a wiki, add a new contact to a database). head: get the metadata informatio...
...hing data (not modifying data). the web server detects that the request is "dynamic" and forwards it to the web application for processing (the web server determines how to handle different urls based on pattern matching rules defined in its configuration). the web application identifies that the intention of the request is to get the "best team list" based on the url (/best/) and finds out the required team name and number of players from the url. the web application then gets the required information from the database (using additional "internal" parameters to define which players are "best", and possibly also getting the identity of the logged in coach from a client-side cookie). the web application dynamically creates an html page by putting the data (from the database) into placeholders in...

Server-side web frameworks - Learn web development
will generate server-side code to work with these requests and responses. this means that you will have an easier job, interacting with easier, higher-level code rather than lower level networking primitives. the example below shows how this works in the django (python) web framework. every "view" function (a request handler) receives an httprequest object containing request information, and is required to return an httpresponse object with the formatted output (in this case a string). # django view function from django.http import httpresponse def index(request): # get an httprequest (request) # perform operations using information from the request. # return httpresponse return httpresponse('output string to return') route requests to the appropriate handler most sites will...
...mappings between a url pattern and a view function. urlpatterns = [ url(r'^$', views.index), # example: /best/myteamname/5/ url(r'^best/(?p<team_name>\w.+?)/(?p<team_number>[0-9]+)/$', views.best), ] make it easy to access data in the request data can be encoded in an http request in a number of ways. an http get request to get files or data from the server may encode what data is required in url parameters or within the url structure. an http post request to update a resource on the server will instead include the update information as "post data" within the body of the request. the http request may also include information about the current session or user in a client-side cookie. web frameworks provide programming-language-appropriate mechanisms to access this information. for ...

Server-side website programming - Learn web development
the dynamic websites – server-side programming topic is a series of modules that show how to create dynamic websites; websites that deliver customised information in response to http requests. the modules provide a general introduction to server-side programming. most major websites use some kind of server-side technology to dynamically display data as required. for example, imagine how many products are available on amazon, and imagine how many posts have been written on facebook. displaying all of these using different static pages would be extremely inefficient, so instead such sites display static templates (built using html, css, and javascript), and then dynamically update the data displayed inside those templates when needed, such as when you want to view a different product on amazon. ...
...playing it in a page, validating user-entered data and saving it in a database, checking user permissions and logging users in, etc.), and are constructed using web frameworks that make these and other common web server operations easy. basic knowledge of programming concepts (or of a particular programming language) is useful, but not essential. similarly, expertise in client-side coding is not required, but a basic knowledge will help you work better with the developers creating your client-side web "front end". you will need to understand "how the web works". we recommend that you first read the following topics: what is a web server what software do i need to build a website? how do you upload files to a web server? with that basic understanding, you'll be ready to work your way throu...

Getting started with Svelte - Learn web development
t which files or folder to ignore from the project — useful if you decide to include your app in a git repo. rollup.config.js: svelte uses rollup.js as a module bundler. this configuration file tells rollup how to compile and build your app. if you prefer webpack you can create your starter project with npx degit sveltejs/template-webpack svelte-app instead. scripts: contains setup scripts as required. currently should only contain setuptypescript.js, a script that sets up typescript support in svelte. we'll talk about this more in the last article. src: this directory is where the source code for your application lives — where you'll be creating the code for your app. app.svelte: this is the top-level component of your app. so far it just renders the 'hello world!' message. main.j...
...h is based on a hash of the component styles. you can see this in action by opening localhost:5000 in a new browser tab, right/ctrl-clicking on the hello world! label, and choosing inspect: when compiling the app, svelte changes our h1 styles definition to h1.svelte-1tky8bj, and then modifies every <h1> element in our component to <h1 class="svelte-1tky8bj">, so that it picks up the styles as required. note: you can override this behavior and apply styles to a selector globally using the :global(...) modifier (see the svelte <style> docs for more information). making a couple of changes now that we have a general idea of how it all fits together, we can start making a few changes. at this point you can try updating your app.svelte component — for example change the <h1> element on line...

Rendering a list of Vue components - Learn web development
ance for a slight refactor there's one little bit of refactoring we can do here. instead of generating the id for the checkboxes inside your todoitem component, we can turn the id into a prop. while this isn't strictly necessary, it makes it easier for us to manage since we already need to create a unique id for each todo item anyway. add a new prop to your todoitem component — id. ...
...e it required, and make its type a string. to prevent name collisions, remove the id field from your data attribute. you are no longer using uniqueid, so you need to remove the import uniqueid from 'lodash.uniqueid'; line, otherwise your app will throw an error. the <script> contents in your todoitem component should now look something like this: export default { props: { label: {required: true, type: string}, done: {default: false, type: boolean}, id: {required: true, type: string} }, data() { return { isdone : this.done, } }, } now, over in your app.vue component, pass item.id as a prop to the todoitem component. your app.vue template should now look like this: <template> <div id="app"> <h1>my to-do list</h1> <ul...

Introduction to cross browser testing - Learn web development
e should be — what content and functionality should it have, what should it look like, etc. at this point you'll also want to know how much time you have to develop the site — what is their deadline, and how much are they going to pay you for your work? we won't go into much detail about this, but cross-browser issues can have a serious effect on such planning. once you've got an idea of the required featureset, and what technologies you will likely build these features with, you should start exploring the target audience — what browsers, devices, etc. will the target audience for this site be using? the client might already have data about this from previous research they've done, e.g. from other web sites they own, or from previous versions of the web site you are now working on. if not, ...
...versions of the most popular desktop and mobile (ios, android, windows phone) browsers — this should include chrome (and opera as it is based on the same rendering engine as chrome), firefox, ie/edge, and safari. it should also provide an acceptable experience on ie 8 and 9, and be accessible with wcag aa compliance. now you know your target testing platforms, you should go back and review the required featureset and what technologies you are going to use. for example, if the e-commerce site owner wants a webgl-powered 3d tour of each product built into the product pages, they will need to accept that this just won't work in ie versions before 11. you'd have to agree to provide a version of the site without this feature to users of older ie versions. you should compile a list of the potential ...

Strategies for carrying out testing - Learn web development
e, as well as installing the browsers you want to test, install an anti-virus program to protect it from viruses. having multiple virtual machines is very useful, particularly for windows ie/edge testing — on windows, you are not able to have multiple versions of the default browser installed side by side, so you might want to build up a library of virtual machines to handle different tests as required, e.g.: windows 10 with edge 14 windows 10 with edge 13 windows 8.1 with ie11 windows 8 with ie10 windows 7 with ie9 windows xp with ie8 windows xp with ie7 windows xp with ie6 note: another good thing about virtual machines is that the virtual disk images are fairly self-contained. if you are working on a team, you can create one virtual disk image, then copy it and pass it around. j...
...edge 14 windows 10 with edge 13 windows 8.1 with ie11 windows 8 with ie10 windows 7 with ie9 windows xp with ie8 windows xp with ie7 windows xp with ie6 note: another good thing about virtual machines is that the virtual disk images are fairly self-contained. if you are working on a team, you can create one virtual disk image, then copy it and pass it around. just make sure you have the required licenses to run all those copies of windows or whatever else you are running if it is a licensed product. automation and commercial apps as mentioned in the last chapter, you can take a lot of the pain out of browser testing by using some kind of automation system. you can set up your own testing automation system (selenium being the popular app of choice), which does take some setup, but can ...

Setting up your own test automation environment - Learn web development
h as "open this web page", "move over this element on the page", "click this link", "see whether the link opens this url", etc. this is ideal for running automated tests. how you install and use webdriver depends on what programming environment you want to use to write and run your tests. most popular environments have available a package or framework that will install webdriver and the bindings required to communicate with webdriver using this language, for example, java, c#, ruby, python, javascript (node), etc. see setting up a selenium-webdriver project for more details of selenium setups for different languages. different browsers require different drivers to allow webdriver to communicate with and control them. see platforms supported by selenium for more information on where to get browse...
...above examples using simple console.log() statements, but this is all done in javascript, so you can use whatever test running and reporting system you want, be it mocha, chai, or some other tool. for example, try making a local copy of our mocha_test.js example inside your project directory. put it inside a subfolder called test. this example uses a long chain of promises to run all the steps required in our test — the promise-based methods webdriver uses need to resolve for it to work properly. install the mocha test harness by running the following command inside your project directory: npm install --save-dev mocha you can now run the test (and any others you put inside your test directory) using the following command: mocha --no-timeouts you should include the --no-timeouts fla...

Deploying our app - Learn web development
se netlify's wonderful static hosting offering to host our project. netlify gives us hosting or more specifically, a url to view your project online and to share it with your friends, family, and colleagues. deploying to hosting tends to be at the tail-end of the project life cycle, but with services such as netlify bringing down the cost of deployments (both in financial terms and also the time required to actually deploy) it's possible to deploy during development to either share work in progress or to have a pre-release for some other purpose. netlify, amongst other things, also allows you to run pre-deployment tasks, which in our case means that all the production code build processes can be performed inside of netlify and if the build is successful, the website changes will be deployed. al...
... with npx parcel src/index.html, we can run it with npx parcel build src/index.html and parcel will build everything ready for production instead of just running it for development and testing purposes. this includes doing minification and tree-shaking of code, and cache-busting on filenames. the newly-created production code is placed in a new directory called dist, which contains all the files required to run the website, ready for you to upload to a server. however, doing this step manually isn't our final aim — what we want is for the build to happen automatically and the result of the dist directory to be deployed live on our website. this is where our code, github, and netlify need to be set up to talk to one another, so that each time we update our github code repository, netlify will ...

Creating a spell check dictionary add-on
tionaries/ locale-code.dic locale-code.aff the .dic and .aff files must be placed in a subfolder named dictionaries within the zip file. both files must have the locale code as their file name. you also have to add a file named install.rdf to the root of the zip file. this file contains information about your add-on such as name and version number (see below). in addition to these required files, you may add optional files, for example to give your add-on an icon or to describe the license of the dictionary. here is an example of the install.rdf file. you can create and edit it with a plain text editor such as notepad. <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mo...
... em:id, or your users will not be updated to the latest version. the em:version should follow the rules of mozilla add-on version numbers, and if you update an existing dictionary add-on, the new version number must be greater than the old one. don't change em:type or em:unpack, and don't add a em:bootstrap element. type = 64 indicates that the add-on is in the restartless format, and unpack is required for hunspell to read the dictionary. although the restartless format for dictionary add-ons were introduced in gecko 10, dictionary updates only works starting from gecko 18. the em:minversion should therefore be the same as in the example above (or greater). if you set em:minversion to a lower value, gecko 10-17 will not be able to update your dictionary add-on once the restartless dictionary i...

Debugging on Mac OS X
w entitlement allowed by submitting a try build and downloading the dmg generated by the "rpk" shippable build job. a debugger can be attached to firefox processes of these builds. try builds use the developer.entitlements.xml file from the source tree while production builds use production.entitlements.xml. on macos 10.15+, downloaded try builds will not launch by default because notarization is required. to workaround this problem, remove the quarantine extended attribute from the downloaded nightly: $ xattr -r -d com.apple.quarantine /path/to/nightly.app local builds local builds of mozilla-central do not enable hardened runtime and hence do not have debugging restrictions. as a result, some functionality will be permitted on local builds, but blocked on production builds which have harden...
...o enable hardened runtime by default and eliminate this discrepancy. to obtain a hardened runtime build without using try infrastructure, a developer can manually codesign builds using the macos codesign(1) command with the developer.entitlements.xml file from the tree. this requires creating a codesigning identity. disabling system integrity protection (sip) if debugging a production build is required, follow apple's documented steps for disabling system integrity protection (sip). note that disabling sip bypasses hardened runtime restrictions which can mask some bugs that only occur with hardened runtime so it is recommended to test fixes with sip enabled. disabling sip has system security implications that should be understood before taking this step. creating an xcode project if you try ...

Configuring Build Options
the default options are the most well-supported, so it is preferable to add as few options as possible. please read the following directions carefully before building, and follow them in order. skipping any step may cause the build to fail, or the built software to be unusable. ...
...g and patch the mozilla source. disabling these tests can speed build time and reduce disk space considerably. developers should generally not use this option. localization mk_add_options moz_co_locales=isocode tbd. ac_add_options --enable-ui-locale=isocode tbd. ac_add_options --with-l10n-base=/path/to/base/dir tbd. other options mk_add_options autoclobber=1 if a clobber would be required before a build, this will cause mach to clobber and continue with the build instead of asking the user to manually clobber and exiting. ac_add_options --disable-crypto cryptography is enabled by default. in some countries, it may be illegal to use or export cryptographic software. you should become familiar with the cryptography laws in your country. on the 1.7 and aviary branches, cryptograph...

Eclipse CDT
o keep the code assistance working well. since the compiler options used to build the source change relatively infrequently, the "build" step above doesn't need to be rerun all that often. rerun it (and then rebuild the index) once a week or so, or as necessary when you start to notice unusual code assistance issues that aren't fixed by rebuilding the index alone. rebuilding the index itself is required much more frequently since the source changes more frequently. in principle, you can set the index to rebuild automatically by opening the workspace preferences, selecting "c/c++ > indexer", and reenabling "automatically update the index". however, you may find this too disruptive, since re-indexing will then happen very frequently and code assistance can be broken while the index is rebuilding. ...
...once, using the compiler options for the first source file it encounters that includes that header (eclipse bug 380511). this is responsible for most of the parse errors in the source files displayed in eclipse. one problem with the "parse once" strategy is that the compiler options for the original source file may ifdef out sections of the header, that would not be ifdef'ed out - and in fact are required by - source files in other parts of the tree. for example, in content/svg/content/src/nssvgellipseelement.cpp eclipse shows a parse error due to ns_dom_interface_map_entry_classinfo not being defined. this define is in nsdomclassinfoid.h, which is included via the following include chain: content/svg/content/src/nssvgellipseelement.cpp content/svg/content/src/nssvgpathgeometryelement.h conte...

Using the Browser API
ns, which always run in a separate content process from web content. aside from the iframe, there are some basic controls: <button> elements, a simple <form> to implement the browser controls, and a search bar. the search bar also contains buttons, as well as a form to type search requests into. you can see the full html listing here. ...
...note that this doesn't include simple errors due to incorrect urls being entered. see the mo...

mozbrowseropenwindow
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowseropenwindow event is fired when a new window is required — usually when the content of a browser <iframe> successfully calls the window.open() method, or the user clicks on a link with an unknown target. the embedder must use the <iframe> passed in the event.details.frameelement property as the new window content. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property typ...
...seropenwindow", function( event ) { console.log("a new window has opened containing the content at " + event.details.url + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

DownloadTarget
at metadata is no longer available and the file has been deleted, then this value is zero. for single-file downloads, this property's value will always match the actual size of the file on disk, while the download.totalbytes property, when available, may indicate the size of the data as encoded for transfer instead. for downloads of multiple files, such as downloading a web page and its required media to disk, the meaning of this property is undefined. it currently indicates the size of the main file (such as the html document) rather than the sum of all of the files' sizes, but you must not rely upon this behavior, as it is subject to change. this is a dynamic property, which is updated when the download finishes or whenever the download.refresh() method is called. you can use this...
...it currently indicates the size of the main file (such as the html document) rather than the sum of all of the files' sizes, but you must not rely upon this behavior, as it is subject to change. this is a dynamic property, which is updated when the download finishes or whenever the download.refresh() method is called. you can use this value from the front-end to reduce file i/o that would be required to check the file directly. methods refresh() updates the state of a finished, failed, or canceled download based on the current state as indicated by the file system. if the download is in progress or has been finalized, this method does nothing and returns a resolved promise. calling this method lets the download object's properties be updated if the user moves or deletes the targ...

JNI.jsm
to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/jni.jsm"); this module was available in firefox since version 17. if you would like to support versions before that, you can copy and paste the contents of the jsm file int jni stands for java native interface; this library allows calling java code running in java virtual machines (jvms), etc. the most common use for this module is in add-ons and other works on firefox for android (fennec). with this module, all of the android sdk functions that firefox has permissions for are at your fingertips. ...
... will cause a crash. therefore, it is always recommended to use slash notation. so for geckoappshell we would pass here "org/mozilla/gecko/geckoappshell" and for geckointerface we would use "org/mozilla/gecko/geckoappshell$geckointerface". adeclares optional if this is omitted, then afullyqualifiedname must be an array type. if this is provided, then afullyqualifiedname must be a class name. a required object that contains up to five fields of key names: constructors, fields, static_fields, methods, and static_methods. return value blah blah newstring() blah blah cdata newstring( ajenv, astr ); parameters ajenv the return value of getforthread(). astr a javascript string, use any encoding desired. return value blah blah readstring() blah blah string readstring( ajenv, aj...

Sqlite.jsm
chrome -- that is, from within the application itself or an add-on. before you can use this module, you need to import it into your scope: components.utils.import("resource://gre/modules/sqlite.jsm") obtaining a connection sqlite.jsm exports the sqlite symbol. this symbol is an object with a single function: openconnection. this function 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. shar...
...ection. these are arguably the most important apis in this type. executecached(sql, params, onrow) execute(sql, params, onrow) these similar functions are used to execute a single sql statement on the connection. as you might have guessed by the name, there are 2 flavors: cached and non-cached. other than that, they behave identically. these functions receive the following arguments: sql (required) string sql statement to execute. the trailing semicolon is not required. params (optional) parameters to bind to this statement. this can be an array or an object. see notes below. onrow (optional) function that is called when a row has been received. the return value is a promise that is resolved when the statement has finished execution. when a statement is executed via executecached(),...

XPCOMUtils.jsm
lained previously. declare the class (or multiple classes) implementing the component(s). create an array of component constructors. define the nsgetfactory() or nsgetmodule() entry point. pseudocode this section provides some pseudocode that demonstrates how to put together a javascript class based on the steps listed above. ...
...n provides some pseudocode that demonstrates how to put together a javascript class based on the steps listed above. constructor the constructor is a simple method that handles any required initialization tasks. function mycomponent() { // initialize the component here } class declaration declare the class prototype, using a form similar to this. mycomponent.prototype = { // properties required for xpcom registration: classdescription: "unique text description", classid: components.id("{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}"), contractid: "@example.com/xxx;1", // [optional] custom factory (an object implementing nsifactory). if not // provided, the default factory is used, which returns // |(new mycomponent()).queryinterface(iid)| in its createinstance(). _...

Application Translation with Mercurial
branch has already been translated. either translate a different product now or contact the person responsible for localization from the team's page (see above) so he can notify you by mail when the next strings for translation become available. if it is a red text consisting of a number and the word 'missing', then there are untranslated texts and you can move on with this guide. required tools build pre-requisites first, get the required programs to compile mozilla applications like firefox and thunderbird from build instructions. this is only necessary once. mozillabuild must be installed into an absolute file path without whitespaces, else it will break. file comparison program for the translation, it is recommend to use file comparison program to compare the english fil...
... uses winmerge: download and install it. a comparison of alternatives (e.g. for linux and mac os) is available on wikipedia. file and text editor for editing individual files a text editor can be a better choice than a file comparion program, e.g. because the file is new and everything has to be translated, the file is too customized to compare it to the english one, or special functionality is required (e.g. bookmarking untranslated lines). use a text editor you are comfortable with. this example uses notepad++. progress tracking tool to track which strings and files already have been translated and later also to see which new strings have already been tested in the product as being a good translation for the functionality behind the translated strings and that the translated texts fit into t...

Localizing with Mercurial
ibuted scm (version 1.3.1)), you have installed mercurial successfully! more details for more details on installing hg on linux systems, refer to the instructions on mercurial's download page. mercurial on windows with windows, you have a couple of install options: for a command line interface, download and install mozillabuild package. this will not only install hg, but also all the tools required to build mozilla products on windows. trust us, you'll want this eventually. for a graphical interface, you may want to install tortoisehg, which integrates with your windows explorer shell. it also installs the command line utility. part of the command line hg install for windows involves making sure the hg executable is in the system's %path% variable (tortoisehg doesn't need this step). use...
...n-us files for any combination of firefox, seamonkey, thunderbird: hg clone https://hg.mozilla.org/comm-central/ cd comm-central python client.py checkout the first command will create a clone of the comm-central repository. the second command will move you into that directory. the third command will do a clone of mozilla-central, and pull some other hg repositories. the other directories are required for seamonkey and thunderbird. cloning your localization repository for the first time is just as easy. for example, to clone your firefox nightly l10n repo, run the following command, replacing ab-cd with your locale code: hg clone https://hg.mozilla.org/l10n-central/ab-cd/ updating your local repos to update your working copy of mozilla-central, go to your local mozilla-central directo...

Extras
rl(#grad1)"/> <g transform="translate(150,125)"> <g> <animatetransform attributename="transform" attributetype="xml" type="rotate" from="0" to="360" dur="6s" repeatcount="indefinite"/> <g transform="translate(-50,-35)"> <rect width="100" height="70" fill="url(#grad2)"/> <switch> <foreignobject width="100" height="70" requiredextensions="http://www.w3.org/1998/math/mathml"> <math display="block"> <mrow> <mo>(</mo> <mtable> <mtr> <mtd><mi>cos</mi><mi>θ</mi></mtd> <mtd><mo>−</mo><mi>sin</mi><mi>θ</mi></mtd> </mtr> <mtr> <mtd><mi>sin</mi><mi>θ</mi></mtd> <mtd><mi>cos</mi><mi>θ</mi></mtd> </mtr> </mtable> <mo>)</mo> </mrow> </math> </foreignobject> <text>rotation matrix</text> </switch> </g></g></g> <g> <animatemotio...
... 32,69 z" begin="0s" dur="20s" repeatcount="indefinite"/> <animatetransform attributename="transform" attributetype="xml" type="scale" values="1;2;.5;1" keytimes="0;.25;.75;1" dur="20s" repeatcount="indefinite"/> <circle fill="url(#grad3)" r="30"/> <g transform="translate(-30,-30)"> <switch> <foreignobject width="60" height="60" requiredextensions="http://www.w3.org/1998/math/mathml"> <math display="block"> <mrow> <munderover> <mo>∑</mo> <mrow> <mi>n</mi> <mo>=</mo> <mn>0</mn> </mrow> <mrow> <mo>+</mo> <mi>∞</mi> </mrow> </munderover> <mfrac> <msup> <mi>α</mi> <mi>n</mi> </msup> <mrow> <mi>n</mi> <mo>!</mo> </mrow> </mfrac> </mrow> </math> </foreignobject> <text>exp(α)</text> </switch> </g> </g> </svg> </div> inline ja...

Fonts for Mozilla 2.0's MathML engine
d display a box containing the hexadecimal representation of the unicode code point for the character. some mathematical operators are also drawn by using glyphs for larger variants of the character (e.g. summation symbol) or by assembling glyphs for a few pieces of the character (e.g braces). these variant or part glyphs do not in general have unicode assignments, and so font-specific support is required for some characters. mozilla has general support for the common delimiters and arrows that have the necessary unicode assignments. for other characters, mozilla has font-specific support. in general, if the necessary glyphs are not available on the system then mozilla tries to stretch symbols using scale transforms, but that may result in a less pleasant rendering. to see mathml as intended, you ...
...y unicode assignments. for other characters, mozilla has font-specific support. in general, if the necessary glyphs are not available on the system then mozilla tries to stretch symbols using scale transforms, but that may result in a less pleasant rendering. to see mathml as intended, you need sufficient font support, which may mean installing some fonts. note that some web sites may provide the required mathematical fonts as web fonts. in that case, you will see the correct rendering on these pages if you use gecko 15.0 (firefox 15.0 / thunderbird 15.0 / seamonkey 2.12) or greater. recommended fonts the stix fonts project has been developing a comprehensive set of fonts that cover all the symbols in mathml and also contains glyphs to stretch mathematical operators. they are available under the s...

Mozilla Port Blocking
unsigned mail through a mail server behind your firewall: a really nasty hole. mozilla responded by modifying how protocols can access ports. by default, mozilla now blocks access to specific ports which are used by vulnerable services in order to prevent security vulnerabilites due to "cross-protocol scripting". each protocol's handler can override this blocking for itself in order to enable the required access for that protocol. potential problems caused by port blocking port blocking can cause problems if a site or web application requires access to one of the ports which is blocked in mozilla. if a user attempts to access a uri on a blocked port, mozilla shows one of the following alerts to the user or in the error console. "access to the port number given has been disabled for security reason...
...st have a good reason for the change, a deep understanding of the security risk involved and be able to justify it. things to do allow user preference to override default port blocking. currently you need to add preferences to either user.js or all.js. see bug 85601. per protocol port blocking/enabling preferences. better user interface allow the user to decide if the blocking is really required. some kind of way to manage the ports which are blocked. more information nsioservice.cpp gbadportlist bug 83401 vulnerability note vu#476267 dougt@netscape.com original document information author(s): doug turner last updated date: august 15, 2007 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available ...

Power profiling overview
ected by running programs but also by other things such as (for laptops) how bright the monitor backlight is. devices such as ammeters give the best results, but these can be expensive and difficult to set up. a cruder technique that works with mobile machines and devices is to run a program for a long time and simply time how long it takes for the battery to drain. the long measurement times required are a disadvantage, though. power estimates the next best measurements come from recent (sandy bridge and later) intel processors that implement the rapl (running average power limit) interface that provides msrs containing energy consumption estimates for up to four power planes or domains of a machine, as seen in the diagram above. pkg: the entire package. pp0: the cores. pp1: an...
...up frequency identifies the problem, more ingenuity may be needed. looking at other measurements (c-state residency, gpu usage, etc.) may be helpful. animations are sometimes the cause of high power consumption. the animation inspector in the firefox devtools can identify them. alternatively, here is an explanation of how one developer diagnosed two animation-related problems the hard way (which required genuine platform expertise). the approximate cause of power problems often isn't that hard to find. fixing them is often the hard part. good luck. if you do fix a problem by improving a proxy measurement, you should verify that it also improves a power measurement or estimate. that way you know the fix had a genuine effect. further reading chapter 13 of the intel optimization manual has many...

HTTP delegation
xplicitly destroyed (sec_httpserver_freesessionfcn). should the application be unable to keep a physical connection alive all the time, the application is expected to create new connections automatically. nss may choose to repeatedly call a "network connection keep alive" function (sec_httpserver_keepalivesessionfcn) on the server session object, giving application code a chance to do whatever is required. for each individual http request, nss will request the creation of a "http request object" (sec_httprequest_createfcn). no full uri is provided as a parameter. instead, the parameters are a server session object (that carries host and port information already) and the request path. in our example the path is "/cgi-bin/ocsp-responder". (when issueing get requests, the "?query-string=data" portion...
...ns associated with the server session object. once the http response has been obtained from the http server, the function will provide the results in its "out parameters". please read the source code documentation to learn how to use this api synchronously or asynchronously. now that we have explained the interaction between nss, the callback functions and the application, let's look at the steps required by the application to initially register the callbacks. make sure you have completed the nss initialization before you attempt to register the callbacks. look at sec_httpclientfcn, which is a (versioned) table of function pointers. create an instance of this type and supply a pointer to your implementation for each entry in the function table. finally register your http client implementation with...

HTTP delegation
xplicitly destroyed (sec_httpserver_freesessionfcn). should the application be unable to keep a physical connection alive all the time, the application is expected to create new connections automatically. nss may choose to repeatedly call a "network connection keep alive" function (sec_httpserver_keepalivesessionfcn) on the server session object, giving application code a chance to do whatever is required. for each individual http request, nss will request the creation of a "http request object" (sec_httprequest_createfcn). no full uri is provided as a parameter. instead, the parameters are a server session object (that carries host and port information already) and the request path. in our example the path is "/cgi-bin/ocsp-responder". (when issuing get requests, the "?query-string=data" portion ...
...ns associated with the server session object. once the http response has been obtained from the http server, the function will provide the results in its "out parameters". please read the source code documentation to learn how to use this api synchronously or asynchronously. now that we have explained the interaction between nss, the callback functions and the application, let's look at the steps required by the application to initially register the callbacks. make sure you have completed the nss initialization before you attempt to register the callbacks. look at sec_httpclientfcn, which is a (versioned) table of function pointers. create an instance of this type and supply a pointer to your implementation for each entry in the function table. finally register your http client implementation with...

NSS 3.12.4 release notes
rovided it does not also match the expression bar. either expression or both may be a union. except between brackets, any unescaped ~ is an exclusion. at most one exclusion is permitted. exclusions cannot be nested (contain other exclusions). example: *~abc will match any string except abc unions: (foo|bar) will match either the expression foo, or the expression bar. at least one '|' separator is required. more are permitted. expressions inside unions may not include unions or exclusions. inside a union, to be matched and not treated as a special character, these characters must be escaped: \ ( | ) [ ~ except when they occur inside a bracketed expression, where only \ and ] require escaping. new functions in the nss shared library: pk11_isinternalkeyslot (see pk11pub.h) secmod_opennewslot (see ...
...dir>) causes nss to look for sql:<dbdir>/libnssckbi.so bug 495365: add const to the 'nickname' parameter of sec_certnicknameconflict bug 495656: nss_initreadwrite(sql:<configdir>) leaves behind a pkcs11.txu file if libnssckbi.so is in <configdir>. bug 495717: unable to compile nss/cmd/certutil/keystuff.c on wince bug 496961: provide truncated hmac support for testing tool fipstest bug 497002: lab required nspr-free freebl changes. bug 497217: the first random value ever generated by the rng should be discarded bug 498163: assert if profile path contains cyrillic chars. [[@isspace - secmod_argisblank - secmod_arghasblanks - secmod_formatpair - secmod_mknewmodulespec] bug 498509: produce debuggable optimized builds for mozilla on macosx bug 498511: produce debuggable optimized nss builds for mozilla...

PKCS #11 Module Specs
flags valid flags are: nomoddb don't open secmod.db and try to supply the strings. the mod db function is not through standard pkcs #11 interfaces. readonly databases should be opened read only. nocertdb don't try to open a certificate database. nokeydb don't try to open a key database. forceopen don't fail to initialize the token if the databases could not be opened. passwordrequired zero length passwords are not acceptable (valid only if there is a keydb). optimizespace allocate smaller hash tables and lock tables. when this flag is not specified, softoken will allocate large tables to prevent lock contention. tokens configure 'tokens' by hand. the tokens parameter specifies a space separated list of slotids, each of which specify their own set of parameters affectin...
...d). minpwlen minimum password length for this token. flags comma separated list of flag values, parsed case-insensitive. valid flags are: readonly databases should be opened read only. nocertdb don't try to open a certificate database. nokeydb don't try to open a key database. forceopen don't fail to initialize the token if the databases could not be opened. passwordrequired zero length passwords are not acceptable (valid only if there is a keydb). optimizespace allocate smaller hash tables and lock tables. when this flag is not specified, softoken will allocate large tables to prevent lock contention. examples: ...

FC_GetTokenInfo
the device, "nss 3", padded with spaces to 16 characters and not null-terminated. serialnumber: the device's serial number as a string, "0000000000000000", 16 characters and not null-terminated. flags: bit flags indicating capabilities and status of the device. ...
...device is read-only ckf_login_required (0x00000004): this device requires the user to log in to use some of its services ckf_user_pin_initialized (0x00000008): the user's password has been initialized ckf_dual_crypto_operations (0x00000200): a single session with the token can perform dual cryptographic operations ckf_token_initialized (0x00000400): the token has been initialized. if login is required (which is true for the fips mode of operation), this flag means the user's password has been initialized. ulsessioncount: number of sessions that this application currently has open with the token ulrwsessioncount: number of read/write sessions that this application currently has open with the token hardwareversion: hardware version number, for example, 8.3 (major=0x08, minor=0x03), which are...

NSS functions
the mozilla cross reference (mxr) link for each function provides access to the function definition, prototype definition, and source code references. the nss version column indicates which versions of nss support the function. function name/documentation source code nss versions sec_pkcs7addce...
...the mozilla cross reference (mxr) link for each function provides access to the function definition, prototype definition, and source code references. the nss version column indicates which versions of nss support the function. function name/documentation source code nss versions sec_pkcs12addcertandkey ...

gtstd.html
e the use of nss command line tools to operate a simple root certificate authority for test purposes only. the ca, ssl server and ssl client certificates produced by these instructions work correctly for short term testing purposes. although it is possible to use nss command line tools to operate a proper ca, these instructions do not provide nearly enough understanding of the many considerations required to competently operate a ca. the nss teams strongly recommends that users should not attempt to operate a ca for use in mission critical production business uses using nss's command line tools, nor with the simple command line test tools that come with any package of cryptographic libraries. many who have attempted it have eventually come to regret that decision. for production deployment, the ns...
...uses the ca's databases. this step leaves the client's new certificate in a file. >certutil -c -d ca_db -c "myco's root ca" -a -i client_db/client.req -o client_db/client.crt -2 -6 enter password or pin for "communicator certificate db": add the new client certificate to the client's certificate database in the client_db directory with the appropriate nickname. notice that no trust is required for this certificate. >certutil -a -d client_db -n "joe client" -a -i client_db/client.crt -t ",," display the contents of the client's certificate databases. >certutil -l -d client_db the trust flag settings "u,u,u" indicate that the client's databases contain the private key for this certificate. this is necessary for the ssl client to be able to authenticate to the server. ve...

NSS Tools certutil
t all available modules or print a single named module. arguments -a use ascii format or allow the use of ascii format for input or output. this formatting follows rfc 1113. for certificate requests, ascii output defaults to standard output unless redirected. -b validity-time specify a time at which a certificate is required to be valid. use when checking certificate validity with the -v option. the format of thevalidity-time argument is "yymmddhhmmss[+hhmm|-hhmm|z]". specifying seconds (ss) is optional. when specifying an explicit time, use "yymmddhhmmssz". when specifying an offset time, use "yymmddhhmmss+hhmm" or "yymmddhhmmss-hhmm". if this option is not used, the validity check defaults to the current system tim...
...on of a certificate or certificate request that is being created or added to the database. subject alternative name extensions are described in section 4.2.1.7 of rfc 32800 usage the certificate database tool's capabilities are grouped as follows, using these combinations of options and arguments. options and arguments in square brackets are optional, those without square brackets are required. -n [-d certdir ] -s -k rsa|dsa -n certname -s subject [-c issuer |-x] -t trustargs [-h tokenname ] [-m serial-number ] [-v valid-months ] [-w offset-months ] [-d certdir ] [-p phone ] [-f password-file ] [-1] [-2] [-3] [-4] -r -k rsa|dsa -s subject [-h tokenname ] [-d certdir ] [-p phone ] [-o output-file ] [-f password-file ] -c -c issuer [-f password-file ] [-h tokenname ] -i cert-reque...

NSS tools : signtool
s imported into browser software such as communicator, it behaves like an object-signing ca and cannot be used to sign objects. the -g option is available in netscape signing tool 1.0 and later versions only. by default, it produces only rsa certificates with 1024-byte keys in the internal token. however, you can use the -s option specify the required key size and the -t option to specify the token. for more information about the use of the -g option, see "generating test object-signing certificates""generating test object-signing certificates" on page 1241. -l lists signing certificates, including issuing cas. if any of your certificates are expired or invalid, the list wi...
... validated mode, see "netscape signing tool and fips-140-1". --norecurse blocks recursion into subdirectories when signing a directory's contents or when parsing html. -o optimizes the archive for size. use this only if you are signing very large archives containing hundreds of files. this option makes the manifest files (required by the jar format) considerably smaller, but they contain slightly less information. --outfile outputfile specifies a file to receive redirected output from netscape signing tool. -p password specifies a password for the private-key database. note that the password entered on the command line is displayed as plain text. -s keysi...

Scripting Java
interfaces that clients must implement. one example of this is the thread class: its constructor takes a runnable that contains a single method run that will be called when the new thread is started. to address this need, rhino provides the ability to create new java objects that implement interfaces. first we must define a javascript object with function properties whose names match the methods required by the java interface. to implement a runnable, we need only define a single method run with no parameters. if you remember from chapter 3, it is possible to define a javascript object with the {propertyname: value} notation. we can use that syntax here in combination with a function expression to define a javascript object with a run method: js> obj = { run: function () { print("\nrunning"); } ...
...the scenes, rhino generates the bytecode for a new java class that implements runnable and forwards all calls to its run method over to an associated javascript object. the object that implements this class is called a java adapter. because the forwarding to javascript occurs at runtime, it is possible to delay defining the methods implementing an interface until they are called. while omitting a required method is bad practice for programming in the large, it's useful for small scripts and for exploratory programming. the javaadapter constructor in the previous section we created java adapters using the new operator with java interfaces. this approach has its limitations: it's not possible to implement multiple interfaces, nor can we extend non-abstract classes. for these reasons there is a jav...

SpiderMonkey Build Documentation
lems. see js_setgczeal() for details. for a list of other available build options, type (assuming the current working directory is one of the above-created build directories): /bin/sh ../configure.in --help generating a compilation database some tools (like ides, static analyzers and refactoring tools) consume a file called compile_commands.json which contains a description of all the pieces required to build a piece of software so that tools don't have to also understand a build system. to generate a compile_commands.json with the spidermonkey configure script, enable the compiledb backend, like this: /bin/sh ../configure.in <options> --enable-build-backends=compiledb,recursivemake (recursivemake is there as you'd likely also want to be able to build!) windows builds since version 28,...
...pidermonkey developers frequently and deliberately change the jsapi abi. you cannot use headers built for one version/configuration of jsapi to create object files which will be linked against another. support for js_threadsafe was recently removed, and threadsafe builds are now enabled by default. the js-config script, described below, is the recommended way to determine correct include paths, required libraries, etc. for your embedding to use during compilation. we highly recommend calling the js-config script from your embedding's makefile to set your cflags, ldflags, and so forth. to install spidermonkey somewhere other than the default, you must use the configure --prefix option, as described above. failure to do so may break your js-config.h header or js-config script. some features dete...

GCIntegration - SpiderMonkey Redirect 1
g it the value the pointer held before the write. there are several examples of this usage in xpconnect. the js::objectptr class is intended to serve as a drop-in replacement for jsobject *. it has an assignment operator that automatically invokes a write barrier. so far, though, there hasn't been much use for this class—there aren't many places outside of spidermonkey where a write barrier is required. read barriers "weak pointers" are a major complication to the scheme described above. for the purposes of this article, a weak pointer is one that is not traced during gc. at the end of the gc, if the pointer refers to an object that is not reachable via some other path, then it will be nulled out or dropped in some way. if the object is still reachable, then the pointer will be left alone. to...
..., that will allow us to avoid write barriers in some cases. only strings and objects without finalizers will be stored in the nursery, at least initially. consequently, if the thing being stored is known to have a finalizer, then there is no need for a write barrier. note that what matters is the value being written—if the object being written to has a finalizer, a write barrier may still be required. if a pointer is not traced, as by js_call_tracer, then there is no need for a write barrier. if a pointer is a root, then that pointer will be scanned during every nursery collection, so there is no need for a write barrier. as above, this means that classes governed by ns_decl_cycle_collection_script_holder_class do not need a write barrier on their fields. we have not decided yet on an api...

Index
false. 43 js::float32value jsapi reference, reference, référence(2), spidermonkey js::float32value converts a c floating-point number of type float to js::value, the type of javascript values. 44 js::getdeflatedutf8stringlength jsapi reference, reference, référence(2), spidermonkey js::getdeflatedutf8stringlength returns the length of the char buffer required to encode s as utf8. the returned length does not include the null-terminator. 45 js::getfirstargumentastypehint jsapi reference, reference, référence(2), spidermonkey js::getfirstargumentastypehint converts first argument of @@toprimitive method to jstype. 46 js::getselfhostedfunction jsapi reference, reference, référence(2), spidermonkey js::getself...
...ull, it must come from the *propp out parameter of a prior jsobjectops.defineproperty or jsobjectops.lookupproperty call. 136 jsobjectops.getproperty jsapi reference, obsolete, spidermonkey get, set, or delete obj[id], returning js_false on error or exception, js_true on success. if getting or setting, the new value is returned in *vp on success. 137 jsobjectops.getrequiredslot jsapi reference, obsolete, spidermonkey get and set a required slot, one that should already have been allocated. these operations are infallible, so required slots must be pre-allocated, or implementations must suppress out-of-memory errors. the native ops (js_objectops, see js/src/jsobj.cpp) access slots reserved by including a call to the jsclass_has_reserved_slots(n) macro in th...

Garbage collection
le: exact stack rooting. marking todo incremental marking incremental marking means being able to do a bit of marking work, then let the mutator (javascript program) run a bit, then do another bit of marking work. thus, instead of one long pause for marking, the gc does a series of short pauses. the pauses can be set to be 10ms or less. there is always a possibility that a long pause will be required. if the allocation rate is high during incremental gc, the engine may run out of memory before finishing the incremental gc. if so, the engine must immediately restart a full, non-incremental gc in order to reclaim some memory and continue execution. incremental write barrier the problem that requires a write barrier incremental gc requires a write barrier for correctness. todo decent diagram...
...moved, just read). so we barrier the read instead; if you ever read a weak reference in the middle of an ongoing incremental gc, then the target of the weak ref will be marked. implementation details write barriers have a runtime cost, so spidermonkey tries to skip them when an incremental gc cycle is not active. each zone has a flag needsincrementalbarrier() that indicates whether barriers are required. for each type t such that fields of type t* need a write barrier, there is a functiont::writebarrierpre(old). for example, fields of type jsobject* need a write barrier, so there is a function jsobject::writebarrierpre(jsobject* old). if zone->needsincrementalbarrier(), then writebarrierpre() marks old. that's it. the class heap<t> is provided to make it easy to invoke write barriers. a heap<t...

JSAPI reference
jsgetmethodop obsolete since javascript 1.8.5 jssetmethodop obsolete since javascript 1.8.5 jsenumeratevaluesop obsolete since javascript 1.8.5 jsconcatenateop obsolete since javascript 1.8.5 arrays js_newarrayobje...
... jsgetmethodop obsolete since javascript 1.8.5 jssetmethodop obsolete since javascript 1.8.5 jsenumeratevaluesop obsolete since javascript 1.8.5 jsconcatenateop obsolete since javascript 1.8.5 arrays js_newarrayobject js_isarrayobject js_getarraylength js_setarr...

A Web PKI x509 certificate primer
nt, keycertsign, and crlsign. for ca certificates the keycertsign bit must be set. extended key usages this is another bitfield to constrain the usages of the key of the certificate. its is directed mostly at what type of application the certificate was issued for. examples of extended key usages are: serverauth, clientauth, and ocspsigning. for end-entity certificates for pki this extension is required to exist with the serverauth bit asserted. name constraints this is an extension exclusive for ca and indicates limits on the name space for its children. this is one of the most powerful extensions for businesses to have to help limit risk imposed by losing the private key of the ca. authority information access this extension is primarily used to to describe the ocsp location for revocation...
...r_expired_certificate a certificate is too old to be used re-generate the certificate sec_error_extension_value_invalid a certificate has an extension with an empty value re-generate the certificate without the extension, or re-generate it with a non-empty value sec_error_inadequate_cert_type a certificate has an extended key usage extension that does not assert a required usage, or an end-entity certificate asserts the id-kp-ocspsigning usage when it shouldn't re-generate the certificate with the appropriate extended key usage values sec_error_inadequate_key_usage a certificate has a key usage extension that does not assert a required usage re-generate the certificate with the appropriate key usage values sec_error_invalid_algorithm a...

Places utilities for JavaScript
array ob...
... array object getannotationsforitem(aitemid) parameters aitemid the identifier of the itme for which annotations are to be retrieved. return type return array of objects, each containing the following properties: name, flags, expires, mimetype, type, value setannotationsforuri() annotate a uri with a batch of annotations. ...

mozIRegistry
body knows it is the place to come to in order to find out how they are supposed to link together the various xpcom components that together form the mozilla browser. the information below is intended to tell you everything you need to know about how to do that. summary clients will rely on nsrepository to create instances of a given class. clients requiring dynamic "binding" of clsids will be required to use some higher-level services (tbd) to figure out the clsids they should use. the intent is that such services themselves be built on top of the new moziregistry interface. we are proposing a new "moziregistry" xpcom interface that provides the same level of function as is currently provided by the "netscape registry" implemented in libreg. nsrepository will be modified to use this interface,...
...ed at run/link time. there will be two registry interface implementations: one based solely on libreg (for "compatibility") and a fancier rdf-based one. open issues we have identified two open issues, neither of which appear to be so hard that it we won't be able to solve them in a timely fashion: if and when we remove what is currently a static binding of clsids, there will be the risk that required clsids won't be present. a corollary is that the build/install process will require updates to user "registry" to enable new class implementations to be accessible. our current build/install process doesn't quite step up to these problems as of yet. there are some bootstrapping issues related to using the service manager to access the moziregistry interface. currently, nsiservicemanager requires...

nsIComponentRegistrar
actory); void unregisterfactorylocation(in nscidref aclass, in nsifile afile); methods autoregister() register a component (.manifest) file or all component files in a directory. registration lasts for this run only, and is not cached. note: formerly this method would register component files directly. this is no longer supported. component files must have an associated loader and export the required symbols which this loader defines. for example, if the given file is a native library, it must export the symbol nsgetmodule. other loaders may have different semantics. this method may only be called from the main thread. void autoregister( in nsifile aspec ); parameters aspec this parameter indicates either a component file to be registered or a directory containing component files to be r...
... afile, in string aloaderstr, in string atype ); parameters aclass the classid of the class being registered. aclassname the name of the class being registered. this value is intended as a human-readable name for the class and need not be globally unique. acontractid the contractid of the class being registered. afile a component file. this file must have an associated loader and export the required symbols, which the loader specifies. aloaderstr opaque loader specific string. this value is passed into the nsimodule.registerself() callback and must be forwarded unmodified when registering factories via their location. atype component type of aclass. this value is passed into thensimodule.registerself() callback and must be forwarded unmodified when registering factories via their location. ...

nsIHttpChannel
(uri) of the resource from which this channel's uri was obtained (see rfc2616 section 14.36). this attribute may only be set before the channel is opened. note: the channel may silently refuse to set the referer: header if the uri does not pass certain security checks (e.g., a "https://" url will never be sent as the referrer for a plaintext http request). the implementation is not required to throw an exception when the referrer uri is rejected. exceptions thrown ns_error_in_progress if set after the channel has been opened. ns_error_failure if used for setting referrer during visitrequestheaders(). getting the value will not throw. requestmethod acstring set or get the http request method (default is "get"). setter ...
...se code indicates success. the value of nsirequest.status() will be ns_ok even when processing a 404 file not found response because such a response may include a message body that (in some cases) should be shown to the user. use this attribute to distinguish server error pages from normal pages, instead of comparing the response status manually against the set of valid response codes, if that is required by your application. read only. exceptions thrown ns_error_not_available if called before the response has been received (before onstartrequest()). responsestatus unsigned long get the http response code (for example 200). read only. exceptions thrown ns_error_not_available if called before the response has been received (before ons...

nsIOutputStream
m number of bytes to copy from the buffer. return value this method returns the number of bytes copied from the buffer (may be less than acount). exceptions thrown ns_base_stream_would_block if writing to the output stream would block the calling thread (non-blocking mode only) writefrom() this method copies data from an nsiinputstream to this nsioutputstream. a nsioutputstream is not required to implement this method. in some contexts, writefrom may be guaranteed to be implemented, but in general it is not. this method serves as an optimization. note: this method is defined by this interface in order to allow the output stream to efficiently copy the data from the input stream into its internal buffer (if any). if this method was provided as an external facility, a separate char* buf...
...ve 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 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 ...

nsIParserUtils
nd flattens out svg. sanitizerlogremovals (1 << 6) flag for sanitizer: log messages to the console for everything that gets sanitized. methods converttoplaintext() converts html to plain text. astring converttoplaintext( in astring src, in unsigned long flags, in unsigned long wrapcol ); parameters src the html source to parse (c++ callers are allowed but not required to use the same string for the return value.) flags conversion option flags defined in nsidocumentencoder. wrapcol number of characters per line; 0 for no auto-wrapping. return value the plain text conversion of the html specified in src. parsefragment() parses markup into a sanitized document fragment. nsidomdocumentfragment parsefragment( in astring fragment, in unsigned long flag...
...sn't recognize can get removed as a side effect. note: if -moz-binding is not present, <style> elements and style attributes, and if sanitizerallowstyle is specified, the sanitized content may still be xss dangerous if loaded into a non-gecko web engine! astring sanitize( in astring src, in unsigned long flags ); parameters src the html source to parse (c++ callers are allowed but not required to use the same string for the return value). flags sanitization option flags defined above. return value the resulting text. ...

nsIPluginHost
ewindowptr apluginnativewindow ); parameters apluginnativewindow native code only!destroy void destroy(); parameters none. native code only!findproxyforurl fetches a url. (corresponds to npn_geturl and npn_geturlnotify.) posts to a url with post data and/or post headers. (corresponds to npn_posturl and npn_posturlnotify.) returns the proxy info for a given url. the caller is required to free the resulting memory with nsimalloc.free(). the result will be in the following format. "direct" -- no proxy "proxy xxx.xxx.xxx.xxx" -- use proxy "socks xxx.xxx.xxx.xxx" -- use socks mixed. for example "proxy 111.111.111.111;proxy 112.112.112.112", "proxy 111.111.111.111;socks 112.112.112.112".... which proxy/socks to use is determined by the plugin. void findproxyforurl( in st...
...ing and cr or lf some where after that, then it assumes there is http headers in the input buffer and continue to search for end of headers (crlfcrlf or lflf). it will *always malloc()* output buffer (caller is responsible to free it) if input buffer starts with lf, which comes from 4.x spec http://developer.netscape.com/docs/manuals/communicator/plugin/pgfn2.htm#1007754 "if no custom headers are required, simply add a blank line ('\n') to the beginning of the file or buffer.", it skips that '\n' and considers rest of the input buffer as data. if "content-length" string and end of headers is found it substitutes single lf with crlf in the headers, so the end of headers always will be crlfcrlf (single cr in headers, if any, remain untouched) else it puts "content-length: "+size_of_data+crlfcrlf at ...

nsITextInputProcessor
string, specify commit string with its argument: tip.commitcompositionwith("foo-bar-buzz"); when you cancel composition, just do this: tip.cancelcomposition(); when you dispatch keydown event (and one or more keypress events), just do this: var keyevent = new keyboardevent("", // type attribute value should be empty. { key: "enter", // required. code: "enter", // optional. keycode: keyboardevent.dom_vk_return, // required if printable key, but optional if non-printable key. location: keyboardevent.dom_vk_standard, // optional, may be computed from code attribute value. repeat: false, // optional. }); // the other att...
...rdevent instance for a call of either keydown() or keyup(), this value should be empty string. otherwise, when you use the keyboardevent instance for a call of startcomposition(), flushpendingcomposition(), commitcomposition(), commitcompositionwith(), or cancelcomposition(), you can specify "keydown" or empty string. if "keydown" is specified, the methods don't dispatch the "keyup" event. key required. when you dispatch printable key events, this value should be the text to be inputted. even if the key event shouldn't cause text input actually, e.g., ctrl key is pressed, this value should be the text when such modifiers causing suppressing text input are not pressed. for example, ctrl+c should be "c", ctrl+shift+cshould be "c", altgr+c may be "©" and then, ctrl+altgr+c should be "©". when ...

nsITextInputProcessorNotification
or notification to ime. when gecko supports new notification to ime, this interface may have some new attributes. so, nsitextinputprocessorcallback won't be changed for keeping backward compatibility. attributes attribute type description type acstring the type of request or notification to ime. see type values below. types "request-to-commit" this is required to be handled. when this is requested, the callback should commit composition synchronously, i.e., nsitextinputprocessor.commitcomposition() should be called. if the callback doesn't want to commit the composition synchronously, it's okay to commit it later (i.e., asynchronously). however, gecko will commit the composition with the last composing string internally. this is typically notified w...
...() should be called. if the callback doesn't want to commit the composition synchronously, it's okay to commit it later (i.e., asynchronously). however, gecko will commit the composition with the last composing string internally. this is typically notified when user clicks somewhere, focus is moved, or web contents modify the value of the editor during composition. "request-to-cancel" this is required to be handled. when this is requested, the callback should cancel composition synchronously, i.e., nsitextinputprocessor.cancelcomposition() should be called. if the callback doesn't want to cancel the composition synchronously, it's okay to cancel it later (i.e., asynchronously). however, gecko will cancel the composition with empty string internally. this is typically notified when the edito...

XPCOM
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, for example). the more likely case is that the component uses ...
...bjects (e.g. mutex::lock()) has a matching function in nspr (pr_lock()). this is no accident, as mozilla:: primitives are merely bare-minimum wrappers around nspr's.xptcall faqxptcall is a small low level xpcom method call library. it is implemented using platform specific c/c++ and assembly language code. it is used to facilitate cross language and cross thread method calls. porting this code is required in order to make mozilla run on any given platform.xptcall porting guideoriginal author: john bandhauer, 31 may 1999.xptcall porting statusthis is a status page for the multiplatform porting of xptcall. xptcall has a faq and a porting guide. join the xpcom community choose your preferred method for joining the discussion: mailing list n...

WebIDL bindings
> (e.g. rootedtypedarray<int16array>). typed arrays on the heap need to be traced. dictionary types a dictionary argument is represented by a const reference to a struct whose name is the dictionary name in the mozilla::dom namespace. the struct has one member for each of the dictionary's members with the same name except the first letter uppercased and prefixed with "m". the members that are required or have default values have types as described under the corresponding webidl type in this document. the members that are not required and don't have default values have those types wrapped in optional<>. dictionary return values are represented by an out parameter whose type is a non-const reference to the struct described above, with all the members that have default values preinitialized to t...
...ethods for the interface to access. iterable interfaces have different requirements, based on if they are single or pair value iterators. example interface for a single value iterator: interface longiterable { iterable<long>; getter long(unsigned long index); readonly attribute unsigned long length; }; for single value iterator interfaces, we treat the interface as an indexed getter, as required by the spec. see the indexed getter implementation section for more information on building this kind of structure. example interface for a pair value iterator: interface stringandlongiterable { iterable<domstring, long>; }; the bindings for this pair value iterator interface require the following methods be implemented in the c++ object: class stringandlongiterable { public: // returns t...

PKCS #11 Netscape Trust Objects - Network Security Services
cific to a certificate, they do not need to be stored on the same token as the certificate. trust objects are of the class cko_netscape_trust and have the following attributes. trust object attributes. attribute type description cka_class ck_object_class cko_netscape_trust cka_issuer byte array der-encoding of the certificate issuer name. required for non-trust anchor objects. cka_subject byte array der-encoding of the certificate subject name. optional. cka_serial_number byte array der-encoding of the certificate serial number. required for non-trust anchor objects. cka_cert_sha1_hash byte array sha1 hash of the der-encoding of the certificate. required for trust anchor objects. ck...
... cka_trust_server_auth ck_trust level of trust for server authentication purpose. cka_trust_client_auth ck_trust level of trust for client authentication purpose. ...

Plug-in Basics - Plugins
uivalent to the src attribute of embed. codebase represents the url of the plug-in; this is the same as the codebase attribute of the applet element. for plug-ins, codebase is the same as pluginspace. type represents the mime type of the plug-in; this is the same as the type attribute of embed. height, width, align are basic img/embed/applet attributes supported by object. height and width are required for object elements that resolve to embed elements. use the id attribute, which specifies the name of the plug-in, if the plug-in is communicating with javascript. this is equivalent to the name attribute of applet and embed. it must be unique. using the appropriate attributes it's up to you to provide enough attributes and to make sure that they do not conflict; for example, the values of wi...
...ile format). the embed element has a number of attributes that determine the appearance and size of the plug-in instance, including these: the border and frameborder attributes specify the size of a border for the plug-in or draw a borderless plug-in. height, width, and units determine the size of the plug-in in the html page. if the plug-in is not hidden, the height and width attributes are required. hspace and vspace create a margin of the specified width, in pixels, around the plug-in. align specifies the alignment for the plug-in relative to the web page. use the hidden attribute if you do not want the plug-in to be visible. in this case, you do not need the attributes that describe plug-in appearance. in fact, hidden overrides those attributes if they are present. use the name attri...

Structures - Plugins
« previousnext » this chapter describes the data structures that are used to represent the various objects in the plug-in api. structure summary npanycallbackstruct contains information required during embedded mode printing. npbyterange represents a particular range of bytes from a stream. npembedprint substructure of npprint that contains platform-specific information used during embedded mode printing. npevent represents an event passed by npp_handleevent to a windowless plug-in. ...
...that contains platform-specific information used during embedded mode printing. npevent represents an event passed by npp_handleevent to a windowless plug-in. npfullprint substructure of npprint that contains platform-specific information used during full-page mode printing. npp represents a single instance of a plug-in. np_port contains information required by the window field of an npwindow structure. npprint contains information the plug-in needs to print itself in full-page or embedded mode. npprintcallbackstruct contains information required by the platformprint field of the npembedprint during embedded mode printing. nprect represents a rectangular area of a page. npregion represents a platform-de...

DevTools API - Firefox Developer Tools
be used. the parameter is a toolpanel object. {toolid}-selected(panel) a tool has been selected. the parameter is a toolpanel object. {toolid}-destroy(panel) a tool is about to be destroyed. the parameter is a toolpanel object. destroy the toolbox is about to be destroyed. destroyed the toolbox has been destroyed. tooldefinition a tooldefinition object contains all the required information for a tool to be shown in the toolbox. methods istargetsupported(target) a method that is called during toolbox construction to check if the tool supports debugging the given target. parameters: target {target} - the target to check. return value: a boolean indicating if the tool supports the given target. build(window, toolbox) a method that builds the toolpane...
...ile the tool is the active tool. parameters: panel {toolpanel} - the toolpanel for the tool. toolbox {toolbox} - the toolbox for the shortcut was triggered for. return value: undefined. properties the tooldefinition object can contain following properties. most of them are optional and can be used to customize the presense of the tool in the browser and the toolbox. id string, required. an unique identifier for the tool. it must be a valid id for an html element. url string, required. an url of the panel document. label string, optional. the tool's name. if undefined the icon should be specified. tooltip string, optional. the tooltip for the tool's tab. panellabel string, optional. an accessibility label for the panel. ordinal integer, optional. th...

Constraint validation API - Web APIs
however, you may want to impose more complex constraints, or to provide clearer reporting of validation failures than the defaults. ...
...set, the validity state is set to invalid. to clear this state, invoke the function with an empty string passed as its argument. in this case the custom error message is cleared, the element is considered valid, and no message is shown. examples take the following form: <form> <label for="name">enter username (upper and lowercase letters): </label> <input type="text" name="name" id="name" required pattern="[a-za-z]+"> <button>submit</button> </form> the basic html form validation features will cause this to produce a default error message if you try to submit the form with either no valid filled in, or a value that does not match the pattern. if you wanted to instead display custom error messages, you could use javascript like the following: const nameinput = document.queryselector('i...

CredentialsContainer.create() - Web APIs
effect. syntax var promise = credentialscontainer.create([options]) parameters options an object of type credentialcreationoptions that contains options for the requested new credentials object. it must include one of the options "password", "federated", or "publickey". the options are: password: optional either an htmlformelement, or a passwordcredentialdata object. tbd id: (required) usvstring inherited from credentialdata. name: optional usvstring tbd iconurl: optional usvstring tbd password: (required) usvstring tbd federated: optional an federatedcredentialinit object. contains requirements for creating/obtaining federated credentials. the available options are: id: (required) usvstring inherited from credentialdata. name: optional usvstri...
... returns a promise that resolves with a credential instance, such as passwordcredential, federatedcredential, or publickeycredential. ...

CredentialsContainer.get() - Web APIs
redential.[[collectfromcredentialstore]] is called. this method is restricted to top-level contexts. calls to it within an <iframe> element will resolve without effect. syntax var promise = credentialscontainer.get([options]) parameters options optional an object of type credentialrequestoptions that contains options for the request. the options include criteria that the credentials are required or allowed to have, and options for interacting with the user. it can contain the following properties: password: a boolean indicating that returned credential instances should include user (as opposed to federated) credentials. federated: a federatedcredentialrequestoptions object containing requirements for returned federated credentials. the available options are: providers: an ...
...ated credentials. the available options are: providers: an array of domstring instances of identity providers to search for. protocols an array of domstring instances of federation protocols to search for. publickey: an publickeycredentialrequestoptions object containing requirements for returned webauthn credentials. mediation: a string indicating whether the user will be required to log on for every visit to the website. valid values are "silent", "optional", or "required". unmediated: a boolean indicating the returned credential instance should not require user mediation. signal: an instance of abortsignal that can indicate that an ongoing get() operation should be halted. an aborted operation may complete normally (generally if the abort was received after the ope...

Using FormData Objects - Web APIs
nclude additional information that's not necessarily user-editable. sending files using a formdata object you can also send files using formdata. ...
...m enctype="multipart/form-data" method="post" name="fileinfo"> <label>your email address:</label> <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br /> <label>custom file label:</label> <input type="text" name="filelabel" size="12" maxlength="32" /><br /> <label>file to stash:</label> <input type="file" name="file" required /> <input type="submit" value="stash the file!" /> </form> <div></div> then you can send it using code like the following: var form = document.forms.nameditem("fileinfo"); form.addeventlistener('submit', function(ev) { var ooutput = document.queryselector("div"), odata = new formdata(form); odata.append("customfield", "this is some extra data"); var oreq = new xmlhttprequest()...

HTMLInputElement - Web APIs
s the element's autofocus attribute, which specifies that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. only one form element in a document can have the autofocus attribute. it cannot be applied if the type attribute is set to hidden (that is, you cannot automatically set focus to a hidden control). required boolean: returns / sets the element's required attribute, indicating that the user must fill in a value before submitting a form. value string: returns / sets the current value of the control. note: if the user enters a value different from the value expected, this may return an empty string. validity read only validitystate object: returns the element's current...
...ccesskey 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' in that specification. obsolet...

HTMLSelectElement - Web APIs
tiple 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 this element. htmlselectelement.required a boolean reflecting the required html attribute, which indicates whether the user is required to select a value before submitting the form. htmlselectelement.selectedindex 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 t...
...tus comment html living standardthe definition of 'htmlselectelement' in that specification. living standard since the latest snapshot, html5, it adds the autocomplete property and the reportvalidity() method. html5the definition of 'htmlselectelement' in that specification. recommendation is a snapshot of html living standard. it adds the autofocus, form, required, labels, selectedoptions, willvalidate, validity and validationmessage properties. the tabindex property and the blur() and focus() methods have been moved to htmlelement. the methods item(), nameditem(), checkvalidity() and setcustomvalidity(). document object model (dom) level 2 html specificationthe definition of 'htmlselectelement' in that specification. obsolete option...

HTMLTextAreaElement - Web APIs
name string: returns / sets the element's name attribute, containing the name of the control. placeholder string: returns / sets the element's placeholder attribute, containing a hint to the user about what to enter in the control. readonly boolean: returns / sets the element's readonly attribute, indicating that the user cannot modify the value of the control. required boolean: returns / sets the element's required attribute, indicating that the user must specify a value before submitting the form. rows unsigned long: returns / sets the element's rows attribute, indicating the number of visible text lines for the control. selectiondirection string: returns / sets the direction in which selection occurred. this is "forward" if selectio...
...tandardthe definition of 'htmltextareaelement' in that specification. living standard html5the definition of 'htmltextareaelement' in that specification. recommendation the attributes tabindex and accesskey, as well as the methods blur() and focus() are now defined on htmlelement. the following attributes have been added: autofocus, placeholder, dirname, wrap, maxlength, required, textlength, labels, selectionstart, selectionend, selectiondirection, validity, validationmessage, and willvalidate. the following methods have been added: checkvalidity(), setcustomvalidity(), and setselectionrange(). document object model (dom) level 2 html specificationthe definition of 'htmltextareaelement' in that specification. obsolete the property defaultvalue doesn't ...

IDBIndexSync - Web APIs
sor over the records of this index. the range of the new cursor matches the specified key range; if the key range is not specified or is null, then the range includes all the records. void opencursor ( in optional idbkeyrange range, in optional unsigned short direction ) raises (idbdatabaseexception); parameters range the key range to use as the cursor's range. direction the cursor's required direction. returns void exceptions this method can raise an idbdatabaseexception with the following code: not_found_err if no records exist in this index for the requested key range. openobjectcursor() creates a cursor over the records of this index's referenced object store, as arranged by this index. the range of the new cursor matches the specified key range; if the key range is no...
...e, as arranged by this index. the range of the new cursor matches the specified key range; if the key range is not specified or is null, then the range includes all the records. void openobjectcursor ( in optional idbkeyrange range, in optional unsigned short direction ) raises (idbdatabaseexception); parameters range the key range to use as the cursor's range. direction the cursor's required direction. returns void exceptions this method can raise an idbdatabaseexception with the following code: not_found_err if no records exist in this index for the requested key range. put() stores the given value in this index and returns the key for the stored record. if a record already exists with the given key, the record is overwritten. any put ( in any value, in optional any...

Checking when a deadline is due - Web APIs
li>data not submitted — form incomplete.</li>'; return; } in this segment, we check to see if the form fields have all been filled in. if not, we drop a message into our developer notifications pane (see the bottom left of the app ui) to tell the user what is going on, and exit out of the function. ...
... note.innerhtml += '<li>transaction not opened due to error. duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store var request = objectstore.add(newitem[0]); in this section we create an object called newitem that stores the data in the format required to insert it into the database. the next few lines open the database transaction and provide messages to notify the user if this was successful or failed.then an objectstore is created into which the new item is added. the notified property of the data object indicates that the to-do list item's deadline has not yet come up and been notified - more on this later! note: the db variable stores a ...

MediaTrackConstraints.aspectRatio - Web APIs
g the value of mediatracksupportedconstraints.aspectratio as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. syntax var constraintsobject = { aspectratio: constraint }; constraintsobject.aspectratio = constraint; value a constraindouble describing the acceptable or required value(s) for a video track's aspect ratio. the value is the width divided by the height and is rounded to ten decimal places. for example, the standard high-definition video aspect ratio of 16:9 can be computed as 1920/1080, or 1.7777777778. if this value is a number, the user agent will attempt to obtain media whose aspect ratio is as close as possible to this number given the capabilities of t...
... video aspect ratio of 16:9 can be computed as 1920/1080, or 1.7777777778. if this value is a number, the user agent will attempt to obtain media whose aspect ratio is as close as possible to this number given the capabilities of the hardware and the other constraints specified. otherwise, the value of this constraindouble will guide the user agent in its efforts to provide an exact match to the required aspect ratio (if exact is specified or both min and max are provided and have the same value) or to a best-possible value. example see example: constraint exerciser in capabilities, constraints, and settings for an example. specifications specification status comment media capture and streamsthe definition of 'aspectratio' in that specification. candidate recomm...

MediaTrackConstraints.frameRate - Web APIs
hecking the value of mediatracksupportedconstraints.framerate as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. ...
... example see example: constraint exerciser in capabilities, constraints, and settings for an example. specifications specification status comment media capture and streamsthe definition of 'framerate' in that specification. ...

MediaTrackConstraints.latency - Web APIs
however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. because rtp doesn't include this information, tracks associated with a webrtc rtcpeerconnection will never include this property. syntax var constraintsobject = { latency: constraint }; constraintsobject.latency = constraint; value a constraindouble describing the acceptable or required value(s) for an audio track's latency, with values specified in seconds. in audio processing, latency is the time between the start of processing (when sound occurs in the real world, or is generated by a hardware device) and the data being made available to the next step in the audio input or output process. in most cases, low latency is desirable for performance and user experience purposes, bu...
...e otherwise acceptable, higher latency might be acceptable. if this property's value is a number, the user agent will attempt to obtain media whose latency tends to be as close as possible to this number given the capabilities of the hardware and the other constraints specified. otherwise, the value of this constraindouble will guide the user agent in its efforts to provide an exact match to the required latency (if exact is specified or both min and max are provided and have the same value) or to a best-possible value. latency is always prone to some variation due to hardware usage demands, network constraints, and so forth, so even in an "exact" match, some variation should be expected. example see example: constraint exerciser in capabilities, constraints, and settings for an example. sp...

MediaTrackControls.volume - Web APIs
rted by checking the value of mediatracksupportedconstraints.volume as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. syntax var constraintsobject = { volume: constraint }; constraintsobject.volume = constraint; value a constraindouble describing the acceptable or required value(s) for an audio track's volume, on a linear scale where 0.0 means silence and 1.0 is the highest supported volume. if this value is a number, the user agent will attempt to obtain media whose volume is as close as possible to this number given the capabilities of the hardware and the other constraints specified. otherwise, the value of this constraindouble will guide the user agent in its ...
... a linear scale where 0.0 means silence and 1.0 is the highest supported volume. if this value is a number, the user agent will attempt to obtain media whose volume is as close as possible to this number given the capabilities of the hardware and the other constraints specified. otherwise, the value of this constraindouble will guide the user agent in its efforts to provide an exact match to the required volume (if exact is specified or both min and max are provided and have the same value) or to a best-possible value. any constraint set which only permits values outside the range 0.0 to 1.0 cannot be satisfied and will result in failure. example see example: constraint exerciser in capabilities, constraints, and settings for an example. ...

Media Capabilities API - Web APIs
consists of a media decoding type and a videoconfiguration or audioconfiguration dictionary. mediaencodingconfiguration defines the valid values for allowed types of media when the media configuration is submitted as the parameter for mediacapabilities.encodinginfo(). consists of a media encoding type and a videoconfiguration or audioconfiguration dictionary. ...
...nginfo(). consists of a media encoding type and a videoconfiguration or audioconfiguration dictionary. videoconfiguration describes the required video properties that must be configured when querying a video configuration to be passed as part of a mediaconfiguration parameter to the mediacapabilities.encodinginfo() and mediacapabilities.decodinginfo() methods. audioconfiguration describes the required audio properties that must be configured when querying an audio configuration to be passed as part of a mediaconfiguration parameter to the mediacapabilities.encodinginfo() and mediacapabilities.decodinginfo() methods. specifications specification status comment media capabilities draft initial definition ...

Media Source API - Web APIs
emory 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 assets that work with mse in modern browsers is a laborious process, taking significant time, computing power, and energy. the usage of external utilities to massage the content into a suitable format is required. while browser support for the various media containers with mse is spotty, usage of the h.264 video codec, aac audio codec, and mp4 container format is a common baseline. mse also provides an api for runtime detection of container and codec support. if you do not require explicit control of video quality over time, the rate at which content is fetched, or the rate at which memory is evicted, th...
...protocols available (such as http live streaming (hls)), dash has the most platform support. dash moves lots of logic out of the network protocol and into the client side application logic, using the simpler http protocol to fetch files. indeed, one can support dash with 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 n...

PublicKeyCredentialRequestOptions.userVerification - Web APIs
ss. note: an analogous option exists for the creation operation (navigators.credentials.create()), see the userverification property of publickeycredentialcreationoptions.authenticatorselection. syntax userverification = publickeycredentialrequestoptions.userverification value a string qualifying how the user verification should be part of the authentication process. ...
...exists for the creation operation (navigators.credentials.create()), see the userverification property of publickeycredentialcreationoptions.authenticatorselection. syntax userverification = publickeycredentialrequestoptions.userverification value a string qualifying how the user verification should be part of the authentication process. ...

RTCIceCandidate.usernameFragment - Web APIs
ty on the rtcicecandidate interface is a string indicating the username fragment ("ufrag") that uniquely identifies a single ice interaction session. this value is specified when creating the rtcicecandidate by setting the corresponding usernamefragment value in the rtcicecandidateinit object when creating a new candidate with new rtcicecandidate(). note that 24 bits of the username fragment are required to be randomized by the browser. see randomization below for details. if you instead call rtcicecandidate() with a string parameter containing the candidate m-line text, the value of usernamefragment is extracted from the m-line. syntax var ufrag = rtcicecandidate.usernamefragment; value a domstring containing the username fragment (usually referred to in shorthand as "ufrag" or "ice-ufrag")...
...alue a domstring containing the username fragment (usually referred to in shorthand as "ufrag" or "ice-ufrag") that, along with the ice password ("ice-pwd"), uniquely identifies a single ongoing ice interaction, including for any communication with the stun server. the string may be up to 256 characters long, and has no default value. randomization at least 24 bits of the text in the ufrag are required to be randomly selected by the ice layer at the beginning of the ice session. the specifics for which bits are random and what the remainder of the ufrag text are are left up to the browser implementation to decide. for example, a browser might choose to always use a 24-character ufrag in which bit 4 of each character is randomly selected between 0 and 1. another example: it might take a user-def...

SVGFontElement - Web APIs
specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgfontelement' in that specification. recommendation initial definition ...
...ent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement and implements properties from svgexternalresourcesrequired and svgstylable. methods this interface has no methods but inherits methods from its parent, svgelement and implements methods from svgexternalresourcesrequired and svgstylable. specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgfontelement' in that specification. recommendation initial definition ...

Using readable streams - Web APIs
constructor allows you to do this via a syntax that looks complex at first, but actually isn’t too bad. the generic syntax skeleton looks like this: const stream = new readablestream({ start(controller) { }, pull(controller) { }, cancel() { }, type, autoallocatechunksize }, { highwatermark, size() }); the constructor takes two objects as parameters. ...
...inside this method, you should include code that sets up the stream functionality, e.g. beginning generation of data or otherwise getting access to the source. ...

Using writable streams - Web APIs
we use the writablestream() constructor; the syntax looks complex at first, but actually isn’t too bad. the syntax skeleton looks like this: const stream = new writablestream({ start(controller) { }, write(chunk,controller) { }, close(controller) { }, abort(reason) { } }, { highwatermark, size() }); the constructor takes two objects as parameters. the first object is required, and creates a model in javascript of the underlying sink the data is being written to. the second object is optional, and allows you to specify a custom queueing strategy to use for your stream, which takes the form of an instance of bytelengthqueuingstrategy or countqueuingstrategy. the first object can contain up to four members, all of which are optional: start(controller) — a method th...
...fied inside the writablestream() constructor, as discussed above. controllers as you'll have noticed when studying the writablestream() syntax skeleton, the start(), write(), and close() methods can optionally have a controller parameter passed to them. this contains an instance of the writablestreamdefaultcontroller interface, which can be used by the developer to further control the stream as required. this currently only has one method available on it — writablestreamdefaultcontroller.error(), which when invoked causes future interactions with the stream to error. this is useful when another part of an app goes wrong, and you want to propagate the error to the stream so that the whole system fails cleanly, rather than risking garbage being silently written to the stream (or something simil...

SubtleCrypto.unwrapKey() - Web APIs
kcs8: pkcs #8 format. spki: subjectpublickeyinfo format. jwk: json web key format. wrappedkey is an arraybuffer containing the wrapped key in the given format. unwrappingkey is the cryptokey to use to decrypt the wrapped key. the key must have the unwrapkey usage set. unwrapalgo is an object specifying the algorithm to be used to encrypt the exported key, and any extra parameters as required: to use rsa-oaep, pass an rsaoaepparams object. to use aes-ctr, pass an aesctrparams object. to use aes-cbc, pass an aescbcparams object. to use aes-gcm, pass an aesgcmparams object. to use aes-kw, pass the string "aes-kw" or an object of the form { "name": "aes-kw }. unwrappedkeyalgo is a dictionary object defining the type of key to unwrap and providing extra algorithm-s...
...p, pass an rsaoaepparams object. to use aes-ctr, pass an aesctrparams object. to use aes-cbc, pass an aescbcparams object. to use aes-gcm, pass an aesgcmparams object. to use aes-kw, pass the string "aes-kw" or an object of the form { "name": "aes-kw }. unwrappedkeyalgo is a dictionary object defining the type of key to unwrap and providing extra algorithm-specific parameters as required. for rsassa-pkcs1-v1_5, rsa-pss, or rsa-oaep: pass an rsahashedimportparams object. for ecdsa or ecdh: pass an eckeyimportparams object. for hmac: pass an hmacimportparams object. for aes-ctr, aes-cbc, aes-gcm, or aes-kw: pass the string identifying the algorithm or an object of the form { "name": algorithm }, where algorithm is the name of the algorithm. extractable is a boo...

SyncManager.register() - Web APIs
resolves to an instance of syncregistration. parameters options optional an object that sets options for an instance of syncregistration. the available options are: allowonbattery: a boolean that determines whether synchronization is allowed when the user agent is on a battery-powered device. the default is true. id: the unique identifier of the specified syncregistration object. idlerequired: a boolean that determines whether synchronization is allowed when the user agent's device is idle. the default is false. maxdelay: the maximum delay in milliseconds before the next sync event (or the first sync event if it is periodic). the default is 0, meaning there is no maximum delay. mindelay: the minimum delay in milliseconds before the next sync event (or the first sync event if it is...
...econds before the next sync event (or the first sync event if it is periodic). the default is 0, meaning there is no maximum delay. mindelay: the minimum delay in milliseconds before the next sync event (or the first sync event if it is periodic). the default is 0. minperiod: the minimum time in milliseconds between periodic sync events. the default is 0, meaning events are not periodic. minrequirednetwork: the network condition under which background synchronization will occur. valid values are 'network-any', 'network-offline', 'network-online', 'network-non-mobile'. the default value is 'network-online'. ...

Touch() - Web APIs
"clientx", optional and defaulting to 0, of type double, that is the horizontal position of the touch on the client window of user's screen, excluding any scroll offset. ...
... "clientx", optional and defaulting to 0, of type double, that is the horizontal position of the touch on the client window of user's screen, excluding any scroll offset. ...

ValidityState - Web APIs
nge css pseudo-classes. tooshort read only a boolean that is true if the value fails to meet the specified minlength for htmlinputelement or htmltextareaelement objects, or false if its length is greater than or equal to the minimum length. if true, the element matches the :invalid and :out-of-range css pseudo-classes. typemismatch read only a boolean that is true if the value is not in the required syntax (when type is email or url), or false if the syntax is correct. if true, the element matches the :invalid css pseudo-class. valid read only a boolean that is true if the element meets all its validation constraints, and is therefore considered to be valid, or false if it fails any constraint. if true, the element matches the :valid css pseudo-class; the :invalid css pseudo-class otherwi...
... true, the element matches the :invalid css pseudo-class. valid read only a boolean that is true if the element meets all its validation constraints, and is therefore considered to be valid, or false if it fails any constraint. if true, the element matches the :valid css pseudo-class; the :invalid css pseudo-class otherwise. valuemissing read only a boolean that is true if the element has a required attribute, but no value, or false otherwise. if true, the element matches the :invalid css pseudo-class. specifications specification status comment html living standardthe definition of 'validitystate' in that specification. living standard living standard html 5.1the definition of 'validitystate' in that specification. recommendation no change fro...

Lifetime of a WebRTC session - Web APIs
nto a browser application. in this article, we'll look at the lifetime of a webrtc session, from establishing the connection all the way through closing the connection when it's no longer needed. this article doesn't get into details of the actual apis involved in establishing and handling a webrtc connection; it simply reviews the process in general with some information about why each step is required. see signaling and video calling for an actual example with a step-by-step explanation of what the code does. this page is currently under construction, and some of the content will move to other pages as the webrtc guide material is built out. pardon our dust! establishing the connection the internet is big. really big. it’s so big that years ago, smart people saw how big it was, how fast...
... you don't know her address. you need to look up her address and include it on the package, or she'll wind up wondering why you forgot her birthday again. this is where signaling comes in. signaling signaling is the process of sending control information between two devices to determine the communication protocols, channels, media codecs and formats, and method of data transfer, as well as any required routing information. the most important thing to know about the signaling process for webrtc: it is not defined in the specification. why, you may wonder, is something fundamental to the process of establishing a webrtc connection left out of the specification? the answer is simple: since the two devices have no way to directly contact each other, and the specification can’t predict every poss...

Writing WebSocket servers - Web APIs
guage that is capable of berkeley sockets, such as c(++), python, php, or server-side javascript. this is not a tutorial in any specific language, but serves as a guide to facilitate writing your own server. this article assumes you're already familiar with how http works, and that you have a moderate level of programming experience. depending on language support, knowledge of tcp sockets may be required. the scope of this guide is to present the minimum knowledge you need to write a websocket server. note: read the latest official websockets specification, rfc 6455. sections 1 and 4-7 are especially interesting to server implementors. section 10 discusses security and you should definitely peruse it before exposing your server. a websocket server is explained on a very low level here. websoc...
...json parser. practically speaking, this will be part of a library, but the server needs to pass the data around. tip: to avoid name conflict, it's recommended to make your subprotocol name part of a domain string. if you are building a custom chat app that uses a proprietary format exclusive to example inc., then you might use this: sec-websocket-protocol: chat.example.com. note that this isn't required, it's just an optional convention, and you can use any string you wish. related websocket handshake library in c++ writing websocket client applications tutorial: websocket server in c# tutorial: websocket server in vb.net tutorial: websocket server in java ...

Geometry and reference spaces in WebXR - Web APIs
to cover how the physical position and orientation of the user's head, as well as potentially other parts of their body such as the hands, are mapped into the digital world, as well as how the relative positions of both physical and virtual objects are tracked as they move around, so that the scene can be properly rendered and composited. fundamentals of 3d geometry while we'll examine here the required math operations used to compute the positions, orientations, and movement of objects in virtual space—plus the need to integrate the human viewer of the scene into the mix—a thorough introduction to geometry and the use of matrices and vectors to manage 3d representations of a scene is well beyond the scope of what can be accomplished in this article. you can learn more about the individual o...
...ence space that offers the lowest amount of functionality needed, or provide a fallback mechanism that detects failed attempts to obtain reference spaces and tries again with a less powerful alternative. the compatibility issues that arise may be as fundamental as being unable to support immersive-ar mode (augmented reality sessions) on a vr-only headset, or may involve a request for one or more required options which cannot be met when attempting to create the xr session. xr sessions are created using the navigator.xr.requestsession() method. one of its optional parameters is an object conforming to the xrsessioninit dictionary which you can use to specify required and/or optional features that the session must (or should ideally) support. currently, the only supported options are strings ident...

Lighting a WebXR setting - Web APIs
potential security issues involved with collecting all of this data in order to generate and apply lighting to your virtual objects using real-world data. of course, many ar applications make it pretty clear where the user is located. if the user is running an app called touring the louvre, there's a very good chance the user is located in the musée du louvre in paris, france. but browsers are required to take a number of steps to make it difficult to physically locate the user without their consent. ambient light sensor api the collection of light data using the ambient light sensor api introduces various potential privacy issues. lighting information can leak to the web information about the user's surroundings and device usage patterns. such information can be used to enhance user profi...
...re devices access content that uses the same third-party script, that script can be used to correlate lighting information and how it changes over time to attempt to determine a spatial relationship between the devices; this could in theory indicate that the devices are in the same general area, for example. how browsers mitigate these issues in order to help mitigate these risks, browsers are required by the webxr lighting estimation api specification to report lighting information that is fudged somewhat from the true value. there are many ways this could be done. spherical harmonics precision browsers can mitigate the risk of fingerprinting by reducing the precision of spherical harmonics. when performing real-time rendering—as is the case with any virtual or augmented reality applicatio...

Window.open() - Web APIs
d as well. size if only one of them is specified, the behavior is implementation-dependent, and web author should not rely on it. width or innerwidth specifies the width of the content area, viewing area of the new secondary window in pixels. the width value includes the width of the vertical scrollbar if present. the width value does not include the sidebar if it is expanded. the minimum required value is 100. height or innerheight specifies the height of the content area, viewing area of the new secondary window in pixels. the height value includes the height of the horizontal scrollbar if present. the height value does not include other ui parts such as location bar, title bar, tab bar, etc. the minimum required value is 100. if the windowfeatures parameter is non-empty and no size ...
...ow in pixels. this outerwidth value includes the window vertical scrollbar (if present) and left and right window resizing borders. outerheight (only on firefox, obsolete from firefox 80) specifies the height of the whole browser window in pixels. this outerheight value includes any/all present toolbar, window horizontal scrollbar (if present) and top and bottom window resizing borders. minimal required value is 100. toolbar and ui parts features in modern browsers (firefox 76 or newer, google chrome, safari, chromium edge), the following features are just a condition for whether to open popup or not. see popup condition section. the following features control the visibility of each ui parts, all features can be set to yes or 1, or just be present to be on. set them to no or 0, or in most ...

XRPermissionDescriptor.mode - Web APIs
the mode property of the xrpermissiondescriptor dictionary is a string taken from the xrsessionmode enumerated type, specifying which web xr session mode (inline, immersive-vr, or immersive-ar) the described permissions will be used for. syntax xrpermissiondescriptor = { mode: xrsessionmode, requiredfeatures: reqfeaturelist, optionalfeatures: optfeaturelist }; xrpermissiondescriptor.mode = xrsessionmode; xrmode = xrpermissiondescriptor.mode; value a domstring whose value is one of the strings found in the xrsessionmode enumerated type: immersive-ar the session's output will be given exclusive access to the immersive device, but the rendered content will be blended with the real-world environment. the session's environmentblendmode indicates the method to be used to blend the...
...mode, and may or may not have viewer tracking available. inline sessions don't require special hardware and should be avalable on any user agent offering webxr api support. usage notes examples the example below checks to ensure that permission has been granted to allow the user to use webxr for an immersive virtual reality experience. no specific features are specified during this query; see requiredfeatures and optionalfeatures for more information on specifying features during a webxr permission check. let xrpermissiondesc = { name: "xr", mode: "immersive-vr" }; if (navigator.permissions) { navigator.permissions.query(xrpermissiondesc).then(({state}) => { switch(state) { case "granted": setupxr(); break; case "prompt": promptandsetupxr(); ...

XRPermissionDescriptor - Web APIs
ties in addition to inheriting the properties of the parent interface, permissiondescriptor, xrpermissiondescriptor provides the following properties. mode an xrsessionmode value indicating the xr mode (inline, immersive-vr, or immersive-ar) for which the permissions are requested. optionalfeatures an array of strings, each specifying the name of a webxr feature which is requested but not required for the app to function. the available features are the same as those used by xrsessioninit; see default features in xrsessioninit for further information. requiredfeatures an array of strings giving the names of the webxr features for which permission must be obtained in order to use your app or site. examples the example below demonstrates performing the permission request for an applicati...
... (currently by just dumping it to the console using domxref("console.log()")}}). if the permissions api isn't available at all, this example simply assumes that webxr will report an appropriate error if permission isn't available, and tries to start up the webxr session using the same setupxr() function called by the granted case. ...

Using ARIA: Roles, states, and properties - Accessibility
on to a browser's accessibility api, and does not affect a page's dom. roles widget roles button checkbox gridcell link menuitem menuitemcheckbox menuitemradio option progressbar radio scrollbar searchbox separator (when focusable) slider spinbutton switch tab tabpanel textbox treeitem composite roles the techniques below describe each composite role as well as their required and optional child roles. combobox grid (including row, gridcell, rowheader, columnheader roles) listbox (including option role) menu menubar radiogroup (see radio role) tablist (including tab and tabpanel roles) tree treegrid document structure roles application article cell columnheader definition directory document feed figure group heading img list listitem ma...
... log marquee status timer window roles alertdialog dialog states and properties widget attributes aria-autocomplete aria-checked aria-current aria-disabled aria-errormessage aria-expanded aria-haspopup aria-hidden aria-invalid aria-label aria-level aria-modal aria-multiline aria-multiselectable aria-orientation aria-placeholder aria-pressed aria-readonly aria-required aria-selected aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext live region attributes aria-live aria-relevant aria-atomic aria-busy drag & drop attributes aria-dropeffect aria-dragged relationship attributes aria-activedescendant aria-colcount aria-colindex aria-colspan aria-controls aria-describedby aria-details aria-errormessage aria-flow...

ARIA: cell role - Accessibility
and table cell element (<td>) whenever possible is strongly encouraged. associated wai-aria roles, states, and properties context roles role="row" an element with role="row" is a row of cells within a tabular structure. a row contains one or more cells, grid cells, column headers, or row headers within a grid, table or treegrid, and optionally within a rowgroup. role="rowgroup" row is a required cell parent. rowgroup is an optional contextual row parent. it establishes a relationship between descendant rows. it is a structural equivalent to the thead, tfoot, and tbody elements in an html table element. role="table" one of the three possible contexts (along with grid and treegrid) in which you'll find a row containing cells. table identifies the cell as being part of a non-interactive t...
...he first header would likely have aria-rowindex="1" set, and cells in row 47 would have aria-rowindex="47", if aria-rowindex were needed due to not all rows being in the dom. if the rows that are visible are contiguous, and there are no cells with a colspan or rowspan greater than one, this property can be added to the parent rows instead of all the rows' cells. keyboard interactions none required javascript features the first rule of aria use is if you can use a native feature with the semantics and behavior you require already built in, instead of repurposing an element and adding an aria role, state or property to make it accessible, then do so. employ the html <td> element instead of the aria role of cell whenever possible. examples <div role="table" aria-label="semantic elements...

ARIA: table role - Accessibility
nd tfoot. role="row" a row within the table, and optionally within a rowgroup, that is a container for one or more cells, columnheaders, or rowheaders. aria-describedby attribute takes as its value the id of the element that serves as a description for the table. aria-label attribute the aria-label provides an accessible name for the table. ...
...aria-label provides an accessible name for the table. aria-colcount attribute this attribute is only required if the columns are not present in the dom all the time. it provides an explicit indication of the number of columns in the full table. set the value to the total number of columns in the full table. if unknown, set aria-colcount="-1". aria-rowcount attribute this attribute is only required if the rows are not present in the dom all the time, such as scrollable tables that reuse rows to minimize the number of dom nodes. it provides an explicit indication of the number of rows in the full table. set the value to the total number of rows in the full table. if unknown, set aria-colcount="-1". keyboard interactions none required javascript features none. for sortable columns, se...

ARIA: button role - Accessibility
for example, if clicking the button opens a dialog, the focus should move to the dialog. if the button closes a dialog, focus should returns to the button that opened the dialog unless the function performed in the dialog context logically leads to a different element. if the button alters the current context, then focus typically remains on the button, such as muting and unmuting an audio file. required javascript features required event handlers buttons can be operated by mouse, touch, and keyboard users. for native html <button> elements, the button's onclick event fires for mouse clicks and when the user presses space or enter while the button has focus. but if another tag is used to create a button, the onclick event only fires when clicked by the mouse cursor, even if role="button" is use...
...ey on the keyboard. (note not the deprecated onkeypress) changing attribute values aria-pressed the value of aria-pressed defines the state of a toggle button. this attribute has one of four possible values: true, false, mixed, undefined examples basic button example in this example, a span element has been given the button role. because a <span> element is used, the tabindex attribute is required to make the button focusable and part of the page's tab order. the included css style is provided to make the <span> element look like a button, and to provide visual cues when the button has focus. the handlebtnclick and handlebtnkeydown event handlers perform the button's action when activated using a mouse click or the space or enter key. in this case, the action is to add a new name to the l...

ARIA: dialog role - Accessibility
the dialog's content as being grouped and separated from the rest of the page content. however, adding role="dialog" alone is not sufficient to make a dialog accessible. additionally, the following needs to be done: the dialog must be properly labeled keyboard focus must be managed correctly the sections below describe how these two requirements can be met. labeling even though it is not required for the dialog itself to be able to receive focus, it still needs to be labeled. the label given to the dialog will provide contextual information for the interactive controls inside the dialog. in other words, the dialog's label acts like a grouping label for the controls inside it (similar to how a <legend> element provides a grouping label for the controls inside a <fieldset> element). if a d...
...ils at any time in the user account section.</p> <button>close</button> </div> keep in mind that a dialog's title and description text do not have to be focusable in order to be perceived by screen readers operating in a non-virtual mode. the combination of the aria dialog role and labeling techniques should make the screen reader announce the dialog's information when focus is moved into it. required javascript features focus management a dialog has particular requirements for how keyboard focus should be managed: dialogs should always have at least one focusable control. for many dialogs, there will be a button like "close", "ok" or "cancel". in addition to the needed control, dialogs can contain any number of focusable elements, even entire forms or other container widgets like tabs. ...

ARIA: textbox role - Accessibility
input field --> <div id="txtboxlabel">enter your five-digit zipcode</div> <div role="textbox" contenteditable="true" aria-placeholder="5-digit zipcode" aria-labelledby="txtboxlabel"></div> <!-- multi-line text area --> <div id="txtboxmultilinelabel">enter the tags for the article</div> <div role="textbox" contenteditable="true" aria-multiline="true" aria-labelledby="txtboxmultilinelabel" aria-required="true"></div> semantic elements are more concise and require no javascript to support textbox features. <label for="txtbox">enter your five-digit zipcode</label> <input type="text" placeholder="5-digit zipcode" id="txtbox"/> <!-- multi-line text area --> <label for="txtboxmultiline">enter the tags for the article</label> <textarea id="txtboxmultiline" required></textarea> where a text f...
...rol first receives focus and when users remove a previously-entered value. instead of using aria-placeholder, use the semantic <input type="text"> or <textarea> with a placeholder attribute. aria-readonly attribute indicates that the user cannot modify the value of the text field. instead of using aria-readonly, use the semantic <input type="text"> or <textarea> with a readonly attribute. aria-required attribute indicates that a value must be provided for the field before it is submitted. instead of using aria-required, use the semantic <input type="text"> or <textarea> with a required attribute. keyboard interactions in a single-line use (when aria-multiline is false or not used), the return or enter key submits the form. in a multi-line use (when aria-multiline is true), return or enter k...

An overview of accessible web applications and widgets - Accessibility
lopers should always prefer using the correct semantic html element over using aria. the aria specification is split up into three different types of attributes: roles, states, and properties. roles describe widgets that aren't otherwise available in html 4, such as sliders, menu bars, tabs, and dialogs. properties describe characteristics of these widgets, such as if they are draggable, have a required element, or have a popup associated with them. states describe the current interaction state of an element, informing the assistive technology if it is busy, disabled, selected, or hidden. aria attributes are interpreted automatically by the browser and translated to the operating system's native accessibility apis. so an element with role="slider" will be controlled in the same way as a native ...
...with the entry fields. in this example, the html for the tooltip has the form shown in example 2a. line 9 sets the aria-hidden state to true. example 2a. html for a tooltip <div class="text"> <label id="tp1-label" for="first">first name:</label> <input type="text" id="first" name="first" size="20" aria-labelledby="tp1-label" aria-describedby="tp1" aria-required="false" /> <div id="tp1" class="tooltip" role="tooltip" aria-hidden="true">your first name is optional</div> </div> the css for this markup is shown in example 2b. note that there is no custom classname used, only the status of the aria-hidden attribute on line 1. example 2b. attribute-based selector for indicating state div.tooltip[aria-hidden="true"] { display: none;...

Accessibility documentation index - Accessibility
aria, accessibility, attribute, codingscripting, html, javascript, needscontent, role(2), agent, alert, user, useragent the aria-invalid attribute is used to indicate that the value entered into an input field does not conform to the format expected by the application.this may include formats such as email addresses or telephone numbers. aria-invalid can also be used to indicate that a required field has not been filled in.the attribute should be programmatically set as a result of a validation process. 21 using the aria-label attribute aria, accessibility, codingscripting, html, needscontent, reference, référence(2), agent, aria-label, user, useragent the aria-label attribute is used to define a string that labels the current element. use it in cases where a text...
...he aria-relevant attribute aria, accessibility, needsexample, arialive, attri the aria-relevant attribute is an optional value used to describe what types of changes have occurred to an aria-live region, and which are relevant and should be announced. any change that is not relevant acts in the same manner it would if the aria-live attribute were set to off. 25 using the aria-required attribute aria, accessibility, needscontent the aria-required attribute is used to indicate that user input is required on an element before a form can be submitted. this attribute can be used with any typical html form element; it is not limited to elements that have an aria role assigned. 26 using the aria-valuemax attribute aria, accessibility the aria-valuemax a...

Perceivable - Accessibility
e 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 not be able to swipe the screen, either due to disability or because their device does not support touch. an alternative should be provided, such as a keyboard shortcut or button that can be activated by keyboard or other means. note: conveying instructions solely by color is related, but...
...rom backgrounds and other decoration. the classic example is color (both color contrast and use of color to convey instructions), but it applies in other situations too. success criteria 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 <bu...

:-moz-ui-invalid - CSS: Cascading Style Sheets
his pseudo-class is applied according to the following rules: if the control does not have focus, and the value is invalid, apply this pseudo-class. if the control has focus, and the value was valid (including empty) when it gained focus, do not apply the pseudo-class. if the control has focus, and the value was invalid when it gained focus, re-validate on every keystroke. if the element is required, the preceding rules apply only if the user has changed the value or attempted to submit the form. the result is that if the control was valid when the user started interacting with it, the validity styling is changed only when the user shifts focus to another control. however, if the user is trying to correct a previously-flagged value, the control shows immediately when the value becomes vali...
...he preceding rules apply only if the user has changed the value or attempted to submit the form. the result is that if the control was valid when the user started interacting with it, the validity styling is changed only when the user shifts focus to another control. however, if the user is trying to correct a previously-flagged value, the control shows immediately when the value becomes valid. required items have the pseudo-class applied only if the user changes them or attempts to submit an unchanged valid value. by default, gecko applies a style that creates a red "glow" (using the box-shadow property) around items, which have this pseudo-class applied. see the :invalid pseudo-class for an example that shows how to override the default style. the specification for :user-invalid is still in p...

:-moz-ui-valid - CSS: Cascading Style Sheets
ints. this pseudo-class is applied according to the following rules: if the control does not have focus, and the value is valid, apply this pseudo-class. if the control has focus, and the value was valid (including empty) when it gained focus, apply this pseudo-class. if the control has focus, and the value was invalid when it gained focus, re-validate on every keystroke. if the element is required, the preceding rules apply only if the user has changed the value or attempted to submit the form. the result is that if the control was valid when the user started interacting with it, the validity styling is changed only when the user shifts focus to another control. however, if the user is trying to correct a previously-flagged value, the control shows immediately when the value becomes vali...
...he preceding rules apply only if the user has changed the value or attempted to submit the form. the result is that if the control was valid when the user started interacting with it, the validity styling is changed only when the user shifts focus to another control. however, if the user is trying to correct a previously-flagged value, the control shows immediately when the value becomes valid. required items are flagged as invalid only if the user changes them or attempts to submit an unchanged invalid value. syntax syntax not found in db! specifications not part of any standard. ...

:first-child - CSS: Cascading Style Sheets
the :first-child css pseudo-class represents the first element among a group of sibling elements. /* selects any <p> that is the first element among its siblings */ p:first-child { color: lime; } note: as originally defined, the selected element had to have a parent. beginning with selectors level 4, this is no longer required. syntax :first-child examples basic example html <div> <p>this text is selected!</p> <p>this text isn't selected.</p> </div> <div> <h2>this text isn't selected: it's not a `p`.</h2> <p>this text isn't selected.</p> </div> css p:first-child { color: lime; background-color: black; padding: 5px; } result styling a list html <ul> <li>item 1</li> <li>item 2</li> <li>item 3 <ul> <li>item 3.1</li> <li>item 3.2</li> ...
... selectors level 3the definition of ':first-child' in that specification. recommendation no change. css level 2 (revision 1)the definition of ':first-child' in that specification. recommendation initial definition. ...

:first-of-type - CSS: Cascading Style Sheets
the :first-of-type css pseudo-class represents the first element of its type among a group of sibling elements. /* selects any <p> that is the first element of its type among its siblings */ p:first-of-type { color: red; } note: as originally defined, the selected element had to have a parent. beginning with selectors level 4, this is no longer required. syntax :first-of-type examples styling the first paragraph html <h2>heading</h2> <p>paragraph 1</p> <p>paragraph 2</p> css p:first-of-type { color: red; font-style: italic; } result nested elements this example shows how nested elements can also be targeted. note that the universal selector (*) is implied when no simple selector is written. html <article> <div>this `div` is first!</div> <div>this <span>nested `spa...
... selectors level 3the definition of ':first-of-type' in that specification. recommendation initial definition. ...

:last-child - CSS: Cascading Style Sheets
the :last-child css pseudo-class represents the last element among a group of sibling elements. /* selects any <p> that is the last element among its siblings */ p:last-child { color: lime; } note: as originally defined, the selected element had to have a parent. beginning with selectors level 4, this is no longer required. syntax :last-child examples basic example html <div> <p>this text isn't selected.</p> <p>this text is selected!</p> </div> <div> <p>this text isn't selected.</p> <h2>this text isn't selected: it's not a `p`.</h2> </div> css p:last-child { color: lime; background-color: black; padding: 5px; } result styling a list html <ul> <li>item 1</li> <li>item 2</li> <li>item 3 <ul> <li>item 3.1</li> <li>item 3.2</li> <li>...
... selectors level 3the definition of ':last-child' in that specification. recommendation initial definition. ...

:last-of-type - CSS: Cascading Style Sheets
the :last-of-type css pseudo-class represents the last element of its type among a group of sibling elements. /* selects any <p> that is the last element of its type among its siblings */ p:last-of-type { color: lime; } note: as originally defined, the selected element had to have a parent. beginning with selectors level 4, this is no longer required. syntax :last-of-type examples styling the last paragraph html <h2>heading</h2> <p>paragraph 1</p> <p>paragraph 2</p> css p:last-of-type { color: red; font-style: italic; } result nested elements this example shows how nested elements can also be targeted. note that the universal selector (*) is implied when no simple selector is written. html <article> <div>this `div` is first.</div> <div>this <span>nested `span` is ...
... selectors level 3the definition of ':last-of-type' in that specification. recommendation initial definition. ...

:only-child - CSS: Cascading Style Sheets
epresents an element without any siblings. this is the same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity. /* selects each <p>, but only if it is the */ /* only child of its parent */ p:only-child { background-color: lime; } note: as originally defined, the selected element had to have a parent. beginning with selectors level 4, this is no longer required. syntax :only-child examples basic example html <div> <div>i am an only child.</div> </div> <div> <div>i am the 1st sibling.</div> <div>i am the 2nd sibling.</div> <div>i am the 3rd sibling, <div>but this is an only child.</div></div> </div> css div:only-child { color: red; } div { display: inline-block; margin: 6px; outline: 1px solid; } result a list example h...
... selectors level 3the definition of ':only-child' in that specification. recommendation initial definition. ...

:only-of-type - CSS: Cascading Style Sheets
the :only-of-type css pseudo-class represents an element that has no siblings of the same type. /* selects each <p>, but only if it is the */ /* only <p> element inside its parent */ p:only-of-type { background-color: lime; } note: as originally defined, the selected element had to have a parent. beginning with selectors level 4, this is no longer required. syntax :only-of-type examples styling elements with no siblings of the same type html <main> <div>i am `div` #1.</div> <p>i am the only `p` among my siblings.</p> <div>i am `div` #2.</div> <div>i am `div` #3. <i>i am the only `i` child.</i> <em>i am `em` #1.</em> <em>i am `em` #2.</em> </div> </main> css main :only-of-type { color: red; } result specifications specification status co...
...>i am `div` #2.</div> <div>i am `div` #3. <i>i am the only `i` child.</i> <em>i am `em` #1.</em> <em>i am `em` #2.</em> </div> </main> css main :only-of-type { color: red; } result specifications specification status comment selectors level 4the definition of ':only-of-type' in that specification. working draft matching elements are not required to have a parent. selectors level 3the definition of ':only-of-type' in that specification. recommendation initial definition. ...

:optional - CSS: Cascading Style Sheets
the :optional css pseudo-class represents any <input>, <select>, or <textarea> element that does not have the required attribute set on it. /* selects any optional <input> */ input:optional { border: 1px dashed black; } this pseudo-class is useful for styling fields that are not required to submit a form. note: the :required pseudo-class selects required form fields. syntax :optional examples see :invalid for an example. accessibility concerns if a form contains optional <input>s, required inputs should be indicated using the required attribute. ...
...typically, descriptive text and/or an icon are used. ...

:valid - CSS: Cascading Style Sheets
this pseudo-class is useful for highlighting correct fields for the user. ...
...generated content relative to them. we then absolutely position different generated content depending on whether the form's data is valid or invalid — a green check or a red cross, respectively. to add a bit of extra urgency to the invalid data, we've also given the inputs a thick red border when invalid. note: we've used ::before to add these labels, as we were already using ::after for the "required" labels. you can try it below: notice how the required text inputs are invalid when empty, but valid when they have something filled in. the email input on the other hand is valid when empty, as it is not required, but invalid when it contains something that is not a proper email address. accessibility concerns the color green is commonly used to indicate valid input. people who have certa...

src - CSS: Cascading Style Sheets
the src css descriptor of the @font-face rule specifies the resource containing font data. it is required for the @font-face rule to be valid. syntax /* <url> values */ src: url(https://somewebsite.com/path/to/font.woff); /* absolute url */ src: url(path/to/font.woff); /* relative url */ src: url(path/to/font.woff) format("woff"); /* explicit format */ src: url('path/to/font.woff'); /* quoted url */ src: url(path/to/svgfont.svg#example); /* fragment identifying font */ /* <font-face-name> values */ src: local(font); /* unquoted name */ src: local(some font); /* name containing space */ src: local("font"); /* quoted name */ /* multiple items */ src: local(font), url(path/to/font.svg) format("svg"), url(path/to/fo...
...re than one font load only one of the fonts for a given @font-face rule. fragment identifiers are used to indicate which font to load. if a container format lacks a defined fragment identifier scheme, a simple 1-based indexing scheme (e.g., "font-collection#1" for the first font, "font-collection#2" for the second font, etc.) is used. ...

CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
this version does not include auto-placement capability, or grid template areas. some simple grid layouts could be implemented for ie10, through to edge 15, using the -ms properties. as these properties are vendor prefixed, they will not effect any browser supporting the up to date and unprefixed specification. autoprefixer ...
... this, right in my css. feature queries will look very familiar if you have ever used a media query to create a responsive layout. rather than checking a viewport width, or some feature of the browser or device, we check for support of a css property and value pair using an @supports rule. inside the feature query, we can then write any css we need to apply our modern layout, and remove anything required for the older layout. @supports (display: grid) { .wrapper { /* do anything for grid supporting browsers here. */ } } feature queries have excellent browser support, and all of the browsers that support the updated grid specification support feature queries too. you can use them to deal with the issue we have with our enhanced: floated layout. i use an @supports rule to check ...

CSS values and units - CSS: Cascading Style Sheets
entimeters 1cm = 96px/2.54 mm millimeters 1mm = 1/10th of 1cm q quarter-millimeters 1q = 1/40th of 1cm in inches 1in = 2.54cm = 96px pc picas 1pc = 1/16th of 1in pt points 1pt = 1/72th of 1in px pixels 1px = 1/96th of 1in when including a length value, if the length is 0, the unit identifier is not required. otherwise, the unit identifier is required, is case insensitive, and must come immediately after the numeric part of the value, with no space in-between. angle units angle values are represented by the type <angle> and accept the following values: unit name description deg degrees there are 360 degrees in a full circle. grad gradians there are ...
... deg degrees there are 360 degrees in a full circle. grad gradians there are 400 gradians in a full circle. rad radians there are 2π radians in a full circle. turn turns there is 1 turn in a full circle. time units time values are represented by the type <time>. when including a time value, the unit identifier -- the s or ms -- is required. it accepts the following values. unit name description s seconds ms milliseconds there are 1,000 milliseconds in a second. frequency units frequency values are represented by the type <frequency>. it accepts the following values. unit name description hz hertz represents the number of occurrences per se...

Pseudo-classes - CSS: Cascading Style Sheets
html living standard living standard defines when particular selectors match html elements. selectors level 4 working draft de...
...e like :-moz-only-whitespace . no significant change for other pseudo-classes defined in selectors level 3 and html5 (though semantic meaning not taken over). html5 recommendation copies the relevant section from the canonical (whatwg) html spec. css basic user interface module level 3 recommendation defined :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only and :read-write, but without the associated semantic meaning. selectors level 3 recommendation defined :target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty and :not(). defined the syntax of :enabled, :disabled, :checked, and :indeterminate, b...

outline-color - CSS: Cascading Style Sheets
* keyword value */ outline-color: invert; /* global values */ outline-color: inherit; outline-color: initial; outline-color: unset; the outline-color property is specified as any one of the values listed below. values <color> the color of the outline, specified as a <color>. invert to ensure the outline is visible, performs a color inversion of the background. note that browsers are not required to support this value; if they don't, this keyword is considered invalid. description an outline is a line that is drawn around an element, outside the border. unlike the element's border, the outline is drawn outside the element's frame, and may overlap other content. the border, on the other hand, will actually alter the page's layout to ensure that it fits without overlapping anything else ...
...usted, it is important to ensure that the contrast ratio between it and the background the outline is placed over is high enough that people experiencing low vision conditions will be able to perceive it. color contrast ratio is determined by comparing the luminosity of the text and background color values. in order to meet current web content accessibility guidelines (wcag), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. large text is defined as 18.66px and bold or larger, or 24px or larger. webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 formal definition initial valueinvert, for browsers supporting it, currentcolor for the otherapplies toall ele...

will-change - CSS: Cascading Style Sheets
important: will-change is intended to be used as a last resort, in order to try to deal with existing performance problems. it should not be used to anticipate performance problems. ...
...e memory use and will cause more complex rendering to occur as the browser attempts to prepare for the possible change. this will lead to worse performance. give it sufficient time to work. this property is intended as a method for authors to let the user-agent know about properties that are likely to change ahead of time. then the browser can choose to apply any ahead-of-time optimizations required for the property change before the property change actually happens. so it is important to give the browser some time to actually do the optimizations. find some way to predict at least slightly ahead of time that something will change, and set will-change then. be aware, that will-change may actually influence the visual appearance of elements, when used with property values, that create a...

Adding captions and subtitles to HTML5 video - Developer guides
once the menu is built, it is then inserted into the dom at the bottom of the video...
... this.setattribute('data-state', 'active'); } else { video.texttracks[i].mode = 'hidden'; } } subtitlesmenu.style.display = 'none'; }); subtitlemenubuttons.push(button); return listitem; } this function builds the required <li> and <button> elements, and returns them so they can be added to the subtitles menu list. it also sets up the required event listeners on the button to toggle the relevant subtitle set on or off. this is done by simply setting the required subtlte's mode attribute to showing, and setting the others to hidden. once the menu is built, it is then inserted into the dom at the bottom of the videocontainer. initially the menu is hidden by default, so an event listener needs to be added to our subtitles button to to...

Setting up adaptive streaming media sources - Developer guides
how, looking at two of the most common formats: mpeg-dash and hls (http live streaming.) choosing formats in terms of adaptive streaming formats, there are many to choose from; we decided to choose the following two as between them we can support most modern browsers. mpeg-dash hls (http live streaming) in order to adaptively stream media we need to split the media up into chunks. we are required to provide several different quality files split up over several time points. the more qualities and time points there are, the more 'adaptive' your stream will be, but we will usually want to find a pragmatic balance between size, time to encode and adaptiveness. the good news is that once we have encoded our media in the appropriate format we are pretty good to go. for adaptive streaming over ...
...split up over several time points. the more qualities and time points there are, the more 'adaptive' your stream will be, but we will usually want to find a pragmatic balance between size, time to encode and adaptiveness. the good news is that once we have encoded our media in the appropriate format we are pretty good to go. for adaptive streaming over http, no special server-side components are required. both mpeg-dash and hls use a playlist format to structure the component piece of media that make the possible streams. various bitrate streams are broken into segments and placed in appropriate server folders — we have to provide our media players with a link to lookup files or playlists specifying the name and location of these stream folders. mpeg-dash encoding mpeg-dash is an adaptive bi...

HTML attribute: rel - HTML: Hypertext Markup Language
server that handles pingbacks to the current document. external resource not allowed not allowed preconnect specifies that the user agent should preemptively connect to the target resource's origin. external resource not allowed not allowed prefetch specifies that the user agent should preemptively fetch and cache the target resource as it is likely to be required for a followup navigation. external resource not allowed not allowed preload specifies that the user agent must preemptively fetch and cache the target resource for current navigation according to the potential destination given by the as attribute (and the priority associated with the corresponding destination). external resource not allowed not allowed pre...
... "_blank" as target attribute value). effectively, the opposite of noopener. pingback gives the address of the pingback server that handles pingbacks to the current document. preconnect specifies that the user agent should preemptively connect to the target resource's origin. prefetch specifies that the user agent should preemptively fetch and cache the target resource as it is likely to be required for a followup navigation. preload specifies that the user agent must preemptively fetch and cache the target resource for current navigation according to the potential destination given by the as attribute (and the priority associated with the corresponding destination). prerender specifies that the user agent should preemptively fetch the target resource and process it in a way that helps d...

HTML attribute reference - HTML: Hypertext Markup Language
hould be preloaded. radiogroup <command> readonly <input>, <textarea> indicates whether the element can be edited. referrerpolicy <a>, <area>, <iframe>, <img>, <link>, <script> specifies which referrer is sent when fetching the resource. rel <a>, <area>, <link> specifies the relationship of the target object to the link object. required <input>, <select>, <textarea> indicates whether this element is required to fill out or not. reversed <ol> indicates whether the list should be displayed in a descending order instead of a ascending. rows <textarea> defines the number of rows in a text area. rowspan <td>, <th> defines the number of rows a table cell should span over. san...
...st of the time, it will follow the rules laid out in the specification, but sometimes it doesn't. html specifications try to make this as developer-friendly as possible, but for various reasons (mostly historical), some attributes behave oddly (select.size, for example) and you should read the specifications to understand how exactly they behave. boolean attributes some content attributes (e.g. required, readonly, disabled) are called boolean attributes. if a boolean attribute is present, its value is true, and if it’s absent, its value is false. html5 defines restrictions on the allowed values of boolean attributes: if the attribute is present, its value must either be the empty string (equivalently, the attribute may have an unassigned value), or a value that is an ascii case-insensitive ma...

<select>: The HTML Select element - HTML: Hypertext Markup Language
lement. 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-down content. attributes this element includes the global attributes. autocomplete a domstring providing a hint for a user agent's autocomplete feature. see the html autocomplete attri...
... <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-empty string value must be selected. size if the control is presented as a scrolling list box (e.g. when multiple is specified), this attribute represents the number of rows in the list that should be visible at one time. browsers are not required to present a select element as a scrolled list box. the default value is 0. note: accor...

HTTP authentication - HTTP
shown in the figure, the exchange must happen over an https (tls) connection to be secure. proxy authentication the same challenge and response mechanism can be used for proxy authentication. as both resource authentication and proxy authentication can coexist, a different set of headers and status codes is needed. in the case of proxies, the challenging status code is 407 (proxy authentication required), the proxy-authenticate response header contains at least one challenge applicable to the proxy, and the proxy-authorization request header is used for providing the credentials to the proxy server. access forbidden if a (proxy) server receives valid credentials that are inadequate to access a given resource, the server should respond with the 403 forbidden status code. unlike 401 unauthorized...
...ponse header contains at least one challenge applicable to the proxy, and the proxy-authorization request header is used for providing the credentials to the proxy server. access forbidden if a (proxy) server receives valid credentials that are inadequate to access a given resource, the server should respond with the 403 forbidden status code. unlike 401 unauthorized or 407 proxy authentication required, authentication is impossible for this user. authentication of cross-origin images a potential security hole recently been fixed by browsers is authentication of cross-site images. from firefox 59 onwards, image resources loaded from different origins to the current document are no longer able to trigger http authentication dialogs (bug 1423146), preventing user credentials being stolen if atta...

Data URLs - HTTP
ncoding is needed to preserve the line endings that delimit rows of the spreadsheet. data:text/plain;base64,sgvsbg8sifdvcmxkiq== base64-encoded version of the above data:text/html,%3ch1%3ehello%2c%20world!%3c%2fh1%3e an html document with <h1>hello, world!</h1> data:text/html,<script>alert('hi');</script> an html document that executes a javascript alert. note that the closing script tag is required. encoding data into base64 format base64 is a group of binary-to-text encoding schemes that represent binary data in an ascii string format by translating it into a radix-64 representation. by consisting only in ascii characters, base64 strings are generally url-safe, and that's why they can be used to encode data in data urls. encoding in javascript the web apis have native methods to encod...
...ing in html a data url provides a file within a file, which can potentially be very wide relative to the width of the enclosing document. as a url, the data should be formatable with whitespace (linefeed, tab, or spaces), but there are practical issues that arise when using base64 encoding. length limitations although firefox supports data urls of essentially unlimited length, browsers are not required to support any particular maximum length of data. for example, the opera 11 browser limited urls to 65535 characters long which limits data urls to 65529 characters (65529 characters being the length of the encoded data, not the source, if you use the plain data:, without specifying a mime type). lack of error handling invalid parameters in media, or typos when specifying 'base64', are ignored,...

CSP: base-uri - HTTP
in of example.com using the http: url scheme. mail.example.com:443: matches all attempts to access port 443 on mail.example.com. https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a scheme such as http: or https:. the colon is required. unlike other values below, single quotes shouldn't be used. you can also specify data schemes (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be us...
...hes' allows enabling specific inline event handlers. if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expression. 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <style> elements. the single quotes are required. 'none' refers to the empty set; that is, no urls match. the single quotes are required. 'nonce-<base64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once). the server must generate a unique nonce value each time it transmits a policy. it is critical to provide an unguessable nonce, as bypassing a resource’s policy is otherwise trivial. see unsaf...

CSP: child-src - HTTP
f example.com using the http: url scheme. mail.example.com:443: matches all attempts to access port 443 on mail.example.com. https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a schema such as 'http:' or 'https:'. the colon is required, single quotes shouldn't be used. you can also specify data schemas (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be used as a content source. f...
... and not inline <script> elements or javascript: urls, this is a safer method compared to using the unsafe-inline expression. 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <style> elements. you must include the single quotes. 'none' refers to the empty set; that is, no urls match. the single quotes are required. 'nonce-<base64-value>' a whitelist for specific inline scripts using a cryptographic nonce (number used once). the server must generate a unique nonce value each time it transmits a policy. it is critical to provide an unguessable nonce, as bypassing a resource’s policy is otherwise trivial. see unsafe inline script for an example. specifying nonce makes a modern browser ignore 'unsafe-inlin...

CSP: connect-src - HTTP
in of example.com using the http: url scheme. mail.example.com:443: matches all attempts to access port 443 on mail.example.com. https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a scheme such as http: or https:. the colon is required. unlike other values below, single quotes shouldn't be used. you can also specify data schemes (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be us...
...hes' allows enabling specific inline event handlers. if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expression. 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <style> elements. the single quotes are required. 'none' refers to the empty set; that is, no urls match. the single quotes are required. 'nonce-<base64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once). the server must generate a unique nonce value each time it transmits a policy. it is critical to provide an unguessable nonce, as bypassing a resource’s policy is otherwise trivial. see unsaf...

CSP: default-src - HTTP
in of example.com using the http: url scheme. mail.example.com:443: matches all attempts to access port 443 on mail.example.com. https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a scheme such as http: or https:. the colon is required. unlike other values below, single quotes shouldn't be used. you can also specify data schemes (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be us...
...hes' allows enabling specific inline event handlers. if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expression. 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <style> elements. the single quotes are required. 'none' refers to the empty set; that is, no urls match. the single quotes are required. 'nonce-<base64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once). the server must generate a unique nonce value each time it transmits a policy. it is critical to provide an unguessable nonce, as bypassing a resource’s policy is otherwise trivial. see unsaf...

CSP: font-src - HTTP
f example.com using the http: url scheme. mail.example.com:443: matches all attempts to access port 443 on mail.example.com. https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a schema such as 'http:' or 'https:'. the colon is required, single quotes shouldn't be used. you can also specify data schemas (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be used as a content source. f...
... and not inline <script> elements or javascript: urls, this is a safer method compared to using the unsafe-inline expression. 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <style> elements. you must include the single quotes. 'none' refers to the empty set; that is, no urls match. the single quotes are required. 'nonce-<base64-value>' a whitelist for specific inline scripts using a cryptographic nonce (number used once). the server must generate a unique nonce value each time it transmits a policy. it is critical to provide an unguessable nonce, as bypassing a resource’s policy is otherwise trivial. see unsafe inline script for an example. specifying nonce makes a modern browser ignore 'unsafe-inlin...

CSP: form-action - HTTP
in of example.com using the http: url scheme. mail.example.com:443: matches all attempts to access port 443 on mail.example.com. https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a scheme such as http: or https:. the colon is required. unlike other values below, single quotes shouldn't be used. you can also specify data schemes (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be us...
...hes' allows enabling specific inline event handlers. if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expression. 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <style> elements. the single quotes are required. 'none' refers to the empty set; that is, no urls match. the single quotes are required. 'nonce-<base64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once). the server must generate a unique nonce value each time it transmits a policy. it is critical to provide an unguessable nonce, as bypassing a resource’s policy is otherwise trivial. see unsaf...

CSP: frame-ancestors - HTTP
s port 443 on mail.example.com. https://store.example.com: matches all attempts to access store.example.com using https:. if no url scheme is specified for a host-source and the iframe is loaded from an https url, the url for the page loading the iframe must also be https, per the w3c spec on matching source expressions. <scheme-source> a scheme such as http: or https:. the colon is required and scheme should not be quoted. you can also specify data schemes (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be used as a content source. fi...
...refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content types can specify them using the data attribute. 'none' refers to the empty set; that is, no urls match. the single quotes are required. examples content-security-policy: frame-ancestors 'none'; content-security-policy: frame-ancestors 'self' https://www.example.org; specifications specification status comment content security policy level 3the definition of 'frame-ancestors' in that specification. working draft no changes. content security policy level 2the definition of 'frame-ancest...

CSP: frame-src - HTTP
f example.com using the http: url scheme. mail.example.com:443: matches all attempts to access port 443 on mail.example.com. https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a schema such as 'http:' or 'https:'. the colon is required, single quotes shouldn't be used. you can also specify data schemas (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be used as a content source. f...
... and not inline <script> elements or javascript: urls, this is a safer method compared to using the unsafe-inline expression. 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <style> elements. you must include the single quotes. 'none' refers to the empty set; that is, no urls match. the single quotes are required. 'nonce-<base64-value>' a whitelist for specific inline scripts using a cryptographic nonce (number used once). the server must generate a unique nonce value each time it transmits a policy. it is critical to provide an unguessable nonce, as bypassing a resource’s policy is otherwise trivial. see unsafe inline script for an example. specifying nonce makes a modern browser ignore 'unsafe-inlin...

CSP: img-src - HTTP
in of example.com using the http: url scheme. mail.example.com:443: matches all attempts to access port 443 on mail.example.com. https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a scheme such as http: or https:. the colon is required. unlike other values below, single quotes shouldn't be used. you can also specify data schemes (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be us...
...hes' allows enabling specific inline event handlers. if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expression. 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <style> elements. the single quotes are required. 'none' refers to the empty set; that is, no urls match. the single quotes are required. 'nonce-<base64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once). the server must generate a unique nonce value each time it transmits a policy. it is critical to provide an unguessable nonce, as bypassing a resource’s policy is otherwise trivial. see unsaf...

CSP: manifest-src - HTTP
f example.com using the http: url scheme. mail.example.com:443: matches all attempts to access port 443 on mail.example.com. https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a schema such as 'http:' or 'https:'. the colon is required, single quotes shouldn't be used. you can also specify data schemas (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be used as a content source. f...
... and not inline <script> elements or javascript: urls, this is a safer method compared to using the unsafe-inline expression. 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <style> elements. you must include the single quotes. 'none' refers to the empty set; that is, no urls match. the single quotes are required. 'nonce-<base64-value>' a whitelist for specific inline scripts using a cryptographic nonce (number used once). the server must generate a unique nonce value each time it transmits a policy. it is critical to provide an unguessable nonce, as bypassing a resource’s policy is otherwise trivial. see unsafe inline script for an example. specifying nonce makes a modern browser ignore 'unsafe-inlin...

CSP: media-src - HTTP
f example.com using the http: url scheme. mail.example.com:443: matches all attempts to access port 443 on mail.example.com. https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a schema such as 'http:' or 'https:'. the colon is required, single quotes shouldn't be used. you can also specify data schemas (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be used as a content source. f...
... and not inline <script> elements or javascript: urls, this is a safer method compared to using the unsafe-inline expression. 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <style> elements. you must include the single quotes. 'none' refers to the empty set; that is, no urls match. the single quotes are required. 'nonce-<base64-value>' a whitelist for specific inline scripts using a cryptographic nonce (number used once). the server must generate a unique nonce value each time it transmits a policy. it is critical to provide an unguessable nonce, as bypassing a resource’s policy is otherwise trivial. see unsafe inline script for an example. specifying nonce makes a modern browser ignore 'unsafe-inlin...

CSP: navigate-to - HTTP
in of example.com using the http: url scheme. mail.example.com:443: matches all attempts to access port 443 on mail.example.com. https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a scheme such as http: or https:. the colon is required. unlike other values below, single quotes shouldn't be used. you can also specify data schemes (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be us...
...hes' allows enabling specific inline event handlers. if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expression. 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <style> elements. the single quotes are required. 'none' refers to the empty set; that is, no urls match. the single quotes are required. 'nonce-<base64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once). the server must generate a unique nonce value each time it transmits a policy. it is critical to provide an unguessable nonce, as bypassing a resource’s policy is otherwise trivial. see unsaf...

CSP: object-src - HTTP
f example.com using the http: url scheme. mail.example.com:443: matches all attempts to access port 443 on mail.example.com. https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a schema such as 'http:' or 'https:'. the colon is required, single quotes shouldn't be used. you can also specify data schemas (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be used as a content source. f...
... and not inline <script> elements or javascript: urls, this is a safer method compared to using the unsafe-inline expression. 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <style> elements. you must include the single quotes. 'none' refers to the empty set; that is, no urls match. the single quotes are required. 'nonce-<base64-value>' a whitelist for specific inline scripts using a cryptographic nonce (number used once). the server must generate a unique nonce value each time it transmits a policy. it is critical to provide an unguessable nonce, as bypassing a resource’s policy is otherwise trivial. see unsafe inline script for an example. specifying nonce makes a modern browser ignore 'unsafe-inlin...

CSP: prefetch-src - HTTP
in of example.com using the http: url scheme. mail.example.com:443: matches all attempts to access port 443 on mail.example.com. https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a scheme such as http: or https:. the colon is required. unlike other values below, single quotes shouldn't be used. you can also specify data schemes (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be us...
...hes' allows enabling specific inline event handlers. if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expression. 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <style> elements. the single quotes are required. 'none' refers to the empty set; that is, no urls match. the single quotes are required. 'nonce-<base64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once). the server must generate a unique nonce value each time it transmits a policy. it is critical to provide an unguessable nonce, as bypassing a resource’s policy is otherwise trivial. see unsaf...

CSP: script-src-attr - HTTP
in of example.com using the http: url scheme. mail.example.com:443: matches all attempts to access port 443 on mail.example.com. https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a scheme such as http: or https:. the colon is required. unlike other values below, single quotes shouldn't be used. you can also specify data schemes (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be us...
...hes' allows enabling specific inline event handlers. if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expression. 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <style> elements. the single quotes are required. 'none' refers to the empty set; that is, no urls match. the single quotes are required. 'nonce-<base64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once). the server must generate a unique nonce value each time it transmits a policy. it is critical to provide an unguessable nonce, as bypassing a resource’s policy is otherwise trivial. see unsaf...

CSP: script-src-elem - HTTP
in of example.com using the http: url scheme. mail.example.com:443: matches all attempts to access port 443 on mail.example.com. https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a scheme such as http: or https:. the colon is required. unlike other values below, single quotes shouldn't be used. you can also specify data schemes (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be us...
...hes' allows enabling specific inline event handlers. if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expression. 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <style> elements. the single quotes are required. 'none' refers to the empty set; that is, no urls match. the single quotes are required. 'nonce-<base64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once). the server must generate a unique nonce value each time it transmits a policy. it is critical to provide an unguessable nonce, as bypassing a resource’s policy is otherwise trivial. see unsaf...

CSP: script-src - HTTP
in of example.com using the http: url scheme. mail.example.com:443: matches all attempts to access port 443 on mail.example.com. https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a scheme such as http: or https:. the colon is required. unlike other values below, single quotes shouldn't be used. you can also specify data schemes (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be us...
...hes' allows enabling specific inline event handlers. if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expression. 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <style> elements. the single quotes are required. 'none' refers to the empty set; that is, no urls match. the single quotes are required. 'nonce-<base64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once). the server must generate a unique nonce value each time it transmits a policy. it is critical to provide an unguessable nonce, as bypassing a resource’s policy is otherwise trivial. see unsaf...

CSP: style-src-attr - HTTP
in of example.com using the http: url scheme. mail.example.com:443: matches all attempts to access port 443 on mail.example.com. https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a scheme such as http: or https:. the colon is required. unlike other values below, single quotes shouldn't be used. you can also specify data schemes (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be us...
...hes' allows enabling specific inline event handlers. if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expression. 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <style> elements. the single quotes are required. 'none' refers to the empty set; that is, no urls match. the single quotes are required. 'nonce-<base64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once). the server must generate a unique nonce value each time it transmits a policy. it is critical to provide an unguessable nonce, as bypassing a resource’s policy is otherwise trivial. see unsaf...

CSP: style-src-elem - HTTP
in of example.com using the http: url scheme. mail.example.com:443: matches all attempts to access port 443 on mail.example.com. https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a scheme such as http: or https:. the colon is required. unlike other values below, single quotes shouldn't be used. you can also specify data schemes (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be us...
...hes' allows enabling specific inline event handlers. if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expression. 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <style> elements. the single quotes are required. 'none' refers to the empty set; that is, no urls match. the single quotes are required. 'nonce-<base64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once). the server must generate a unique nonce value each time it transmits a policy. it is critical to provide an unguessable nonce, as bypassing a resource’s policy is otherwise trivial. see unsaf...

CSP: style-src - HTTP
in of example.com using the http: url scheme. mail.example.com:443: matches all attempts to access port 443 on mail.example.com. https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a scheme such as http: or https:. the colon is required. unlike other values below, single quotes shouldn't be used. you can also specify data schemes (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be us...
...hes' allows enabling specific inline event handlers. if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expression. 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <style> elements. the single quotes are required. 'none' refers to the empty set; that is, no urls match. the single quotes are required. 'nonce-<base64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once). the server must generate a unique nonce value each time it transmits a policy. it is critical to provide an unguessable nonce, as bypassing a resource’s policy is otherwise trivial. see unsaf...

CSP: worker-src - HTTP
f example.com using the http: url scheme. mail.example.com:443: matches all attempts to access port 443 on mail.example.com. https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a schema such as 'http:' or 'https:'. the colon is required, single quotes shouldn't be used. you can also specify data schemas (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be used as a content source. f...
... and not inline <script> elements or javascript: urls, this is a safer method compared to using the unsafe-inline expression. 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <style> elements. you must include the single quotes. 'none' refers to the empty set; that is, no urls match. the single quotes are required. 'nonce-<base64-value>' a whitelist for specific inline scripts using a cryptographic nonce (number used once). the server must generate a unique nonce value each time it transmits a policy. it is critical to provide an unguessable nonce, as bypassing a resource’s policy is otherwise trivial. see unsafe inline script for an example. specifying nonce makes a modern browser ignore 'unsafe-inlin...

Protocol upgrade mechanism - HTTP
ients to invite the server to switch to one of the listed protocols, in descending preference order. because upgrade is a hop-by-hop header, it also needs to be listed in the connection header field. this means that a typical request that includes upgrade would look something like: get /index.html http/1.1 host: www.example.com connection: upgrade upgrade: example/1, foo/2 other headers may be required depending on the requested protocol; for example, websocket upgrades allow additional headers to configure details about the websocket connection as well as to offer a degree of security in opening the connection. see upgrading to a websocket connection for more details. if the server decides to upgrade the connection, it sends back a 101 switching protocols response status with an upgrade heade...
...n the client wishes to use when communicating with the server. this number should be the most recent version possible listed in the iana websocket version number registry. the most recent final version of the websocket protocol is version 13. response header if the server can't communicate using the specified version of the websocket protocol, it will respond with an error (such as 426 upgrade required) that includes in its headers a sec-websocket-version header with a comma-separated list of the supported protocol versions. if the server does support the requested protocol version, no sec-websocket-version header is included in the response. sec-websocket-version: supportedversions supportedversions a comma-delineated list of the websocket protocol versions supported by the server. resp...

Date.prototype.toUTCString() - JavaScript
quest. syntax dateobj.toutcstring() return value a string representing the given date using the utc time zone. description the value returned by toutcstring() is a string in the form www, dd mmm yyyy hh:mm:ss gmt, where: format sring description www day of week, as three letters (e.g. ...
...returned by toutcstring() is a string in the form www, dd mmm yyyy hh:mm:ss gmt, where: format sring description www day of week, as three letters (e.g. sun, mon, ...) dd day of month, as two digits with leading zero if required mmm month, as three letters (e.g. jan, feb, ...) yyyy year, as four or more digits with leading zeroes if required hh hour, as two digits with leading zero if required mm minute, as two digits with leading zero if required ss seconds, as two digits with leading zero if required prior to ecmascript 2018, the format of the return value varied according to the platform. the most common return value was an rfc-1123 formatted date stamp, which is a slightly updated versio...

Intl.Collator() constructor - JavaScript
unctuation should be ignored. possible values are true and false; the default is false. numeric whether numeric collation should be used, such that "1" < "2" < "10". possible values are true and false; the default is false. this option can be set through an options property or through a unicode extension key; if both are provided, the options property takes precedence. ...
.... implementations are not required to support this property. casefirst whether upper case or lower case should sort first. possible values are "upper", "lower", or "false" (use the locale's default); the default is "false". this option can be set through an options property or through a unicode extension key; if both are provided, the options property takes precedence. implementations are not required to support this property. examples using collator the following example demonstrates the different potential results for a string occurring before, after, or at the same level as another: console.log(new intl.collator().compare('a', 'c')); // → a negative value console.log(new intl.collator().compare('c', 'a')); // → a positive value console.log(new intl.collator().compare('a', 'a'))...

Number.prototype.toLocaleString() - JavaScript
orted in all browsers yet. ...
...umber = 0; try { number.tolocalestring('i'); } catch (e) { return e.name === 'rangeerror'; } return false; } prior to es5.1, implementations were not required to throw a range error exception if tolocalestring is called with arguments. a check that works in all hosts, including those supporting ecma-262 prior to ed 5.1, is to test for the features specified in ecma-402 that are required to support regional options for number.prototype.tolocalestring directly: function tolocalestringsupportsoptions() { return !!(typeof intl == 'object' && intl && typeof intl.numberformat == 'function'); } this tests for a global intl object, checks that it's not null and that it has a numberformat property that is a function. using locales this example shows some of the variations in local...

with - JavaScript
nded, as it may be the source of confusing bugs and compatibility issues. see the "ambiguity contra" paragraph in the "description" section below for details. the with statement extends the scope chain for a statement. syntax with (expression) statement expression adds the given expression to the scope chain used when evaluating the statement. the parentheses around the expression are required. statement any statement. to execute multiple statements, use a block statement ({ ... }) to group those statements. description javascript looks up an unqualified name by searching a scope chain associated with the execution context of the script or function containing that unqualified name. the 'with' statement adds the given object to the head of this scope chain during the evaluation of ...
...renceerror is thrown. using with is not recommended, and is forbidden in ecmascript 5 strict mode. the recommended alternative is to assign the object whose properties you want to access to a temporary variable. performance pro & contra pro: the with statement can help reduce file size by reducing the need to repeat a lengthy object reference without performance penalty. the scope chain change required by 'with' is not computationally expensive. use of 'with' will relieve the interpreter of parsing repeated object references. note, however, that in many cases this benefit can be achieved by using a temporary variable to store a reference to the desired object. contra: the with statement forces the specified object to be searched first for all name lookups. therefore all identifiers that aren't...

Digital audio concepts - Web media technologies
los...
...anything outside the range of human hearing (or possibly even more, depending on how willing the algorithm is willing to risk losing detail at the high and/or low end of the frequency band. that means that the codec can discard audio whose frequency is lower than about 20 hz or higher than about 20,000 hz (20 khz). this narrows the audio bandwidth of the sound, thereby reducing the amoung of data required to represent the signal in its compressed form. the audio bandwidth can't be reduced nearly as much as for a speech-only codec, but it is still a helpful start. some people can hear outside this range to some extent. more often, people's ability to hear higher frequencies is rather lower than this; in particular, it's worth noting that by middle age, the high end of that frequency range usually ...

The "codecs" parameter in common media types - Web media technologies
lash character (/), then the container format used to contain the media: audio/mpeg an audio file using the mpeg file type, such as an mp3. video/ogg a video file using the ogg file type. video/mp4 a video file using the mpeg-4 file type. video/quicktime a video file in apple's quicktime format. as noted elsewhere, this format was once commonly used on the web but no longer is, since it required a plugin to use. however, each of these mime types is vague. all of these file types support a variety of codecs, and those codecs may have any number of profiles, levels, and other configuration factors. for this reason, you can add the codecs parameter to the media type. to do so, append a semicolon (;) followed by codecs= and then the string describing the format of the contents of the file...
...ormat binding, in the section codecs parameter string. the audio codec continues to be indicated as either vorbis or opus. in this format, the codecs parameter's value begins with a four-character code identifying the codec being used in the container, which is then followed by a series of period (.) separated two-digit values. cccc.pp.ll.dd.cc[.cp[.tc[.mc[.ff]]]] the first five components are required; everything from cp (color primaries) onward is optional; you can stop including components at any point from then onward. each of these components is described in the following table. following the table are some examples. webm codecs parameter components component details cccc a four-character code indicating which indicates which of the possible codecs is bei...

The building blocks of responsive design - Progressive web apps (PWAs)
: 40%; float: left; height: 100%; overflow: auto; padding: 2rem; } so we're giving the first two columns a width of 30%, and the third a width of 40%, floating the columns all left. this way they end up side-by-side, and their proportions remain the same as the browser window size varies. this is just a simple grid example, but you can apply this principle to more complex grid layouts as required. border-box sizing the padding does not affect the overall width and height of the containers because we have set the box-sizing of all elements to border-box: *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } this basically means that width and height will now set the dimensions of an element all the way up to and including th...
... x-card:nth-child(1) video, x-card:nth-child(2) img, x-card:nth-child(3) { margin-top: 17.5vw; } x-card:nth-child(1) button, x-card:nth-child(2) button { position: absolute; bottom: 0; } x-card:nth-child(2) button:nth-of-type(2) { bottom: 5.9rem; } x-card:nth-child(1) button { font-size: 7vw; } x-card:nth-child(2) button { font-s...

SVG Conditional Processing Attributes - SVG: Scalable Vector Graphics
the svg conditional processing attributes are all the attributes that can be specified on some svg elements to control whether or not the element on which it appears should be rendered. externalresourcesrequired requiredextensions requiredfeatures systemlanguage attributes externalresourcesrequired deprecated since svg 2 if set to true, it indicates that the browser must wait for all the external resources necessary to render that element to be loaded before processing the associated element. ...
... which it appears should be rendered. externalresourcesrequired requiredextensions requiredfeatures systemlanguage attributes externalresourcesrequired deprecated since svg 2 if set to true, it indicates that the browser must wait for all the external resources necessary to render that element to be loaded before processing the associated element. value: false|true; animatable: no requiredextensions list all the browser specific capabilities that must be supported by the borwser to be allowed to render the associated element. value: a list of space-separated uri; animatable: no requiredfeatures deprecated since svg 2 list all the features, as defined is the svg 1.1 specification, that must be supported by the borwser to be allowed to render the associated element.. value: a li...

<circle> - SVG: Scalable Vector Graphics
he circle's circumference, in user units. value type: <number> ; default value: none; animatable: yes note: starting with svg2, cx, cy, and r are geometry properties, meaning those attributes can also be used as css properties for that element. ...
... aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification ...

<ellipse> - SVG: Scalable Vector Graphics
al length for the path, in user units. value type: <number> ; default value: none; animatable: yes note: starting with svg2 cx, cy, rx and ry are geometry properties, meaning those attributes can also be used as css properties for that element. ...
... aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification ...

<foreignObject> - SVG: Scalable Vector Graphics
of the foreignobject. value type: <length>|<percentage> ; default value: 0; animatable: yes note: starting with svg2, x, y, width, and height are geometry properties, meaning those attributes can also be used as css properties for that element. ...
... aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesnonepermitted contentany elements or character data specifications specification status comment scalable vector graphics (svg) 2the definition of '<foreignobject>' in that...

<g> - SVG: Scalable Vector Graphics
using g to inherit presentation attributes --> <g fill="white" stroke="green" stroke-width="5"> <circle cx="40" cy="40" r="25" /> <circle cx="60" cy="60" r="25" /> </g> </svg> attributes this element only includes global attributes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterl...
... aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <al...

<line> - SVG: Scalable Vector Graphics
s the y-axis coordinate of the line ending point. value type: <length>|<percentage>|<number> ; default value: 0; animatable: yes pathlength defines the total path length in user units. ...
... aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification ...

<marker> - SVG: Scalable Vector Graphics
rker. value type: top|center|bottom|<coordinate> ; default value: 0; animatable: yes viewbox this attribute defines the bound of the svg viewport for the current svg fragment. ...
... aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippat...

<path> - SVG: Scalable Vector Graphics
te defines the shape of the path. value type: <string> ; default value: ''; animatable: yes pathlength this attribute lets authors specify the total length for the path, in user units. ...
... aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesgraphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment ...

<polygon> - SVG: Scalable Vector Graphics
ttp://www.w3.org/2000/svg"> <!-- example of a polygon with the default fill --> <polygon points="0,100 50,25 50,75 100,0" /> <!-- example of the same polygon shape with stroke and no fill --> <polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" /> </svg> attributes points this attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polygon. value type: <number>+ ; default value: ""; animatable: yes pathlength this attribute lets specify the total length for the path, in user units. value type: <number> ; default value: none; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions,...
... aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification ...

<polyline> - SVG: Scalable Vector Graphics
//www.w3.org/2000/svg"> <!-- example of a polyline with the default fill --> <polyline points="0,100 50,25 50,75 100,0" /> <!-- example of the same polyline shape with stroke and no fill --> <polyline points="100,100 150,25 150,75 200,0" fill="none" stroke="black" /> </svg> attributes points this attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polyline value type: <number>+ ; default value: ""; animatable: yes pathlength this attribute lets specify the total length for the path, in user units. value type: <number> ; default value: none; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions,...
... aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification ...

<rect> - SVG: Scalable Vector Graphics
erimeter, in user units. value type: <number> ; default value: none; animatable: yes note: starting with svg2, x, y, width, height, rx and ry are geometry properties, meaning those attributes can also be used as css properties for that element. ...
... aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification ...

<switch> - SVG: Scalable Vector Graphics
other direct children will be bypassed and therefore not rendered. if a child element is a container element, like <g>, then its subtree is also processed/rendered or bypassed/not rendered. the display and visibility properties have no effect on <switch> element processing. in particular, setting display:none on a child has no effect on the true/false testing for <switch> processing. ...
... svg <switch> example this example demonstrates showing different text content depending on the browser's language settings. the switch element will display the first of its child elements whose systemlanguage attribute matches the user's language, or the fallback element with no systemlanguage attribute if none ...

<text> - SVG: Scalable Vector Graphics
ng; animatable: yes textlength a width that the text should be scaled to fit. ...
... aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesgraphics element, text content elementpermitted contentcharacter data and any number of the following elements, in any order:animation elementsdescriptive elementstext content elements<a> specificatio...

<textPath> - SVG: Scalable Vector Graphics
ing of the path. value type: <length>|<percentage>|<number> ; default value: 0; animatable: yes textlength the width of the space into which the text will render. ...
... aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role xlink attributes xlink:title usage notes categoriestext content element, text content child elementpermitted contentcharacter data and any number of the following elements, in any order:descriptive elements<a>, <altglyph>...

<tspan> - SVG: Scalable Vector Graphics
efined by the textlength attribute. value type: spacing|spacingandglyphs; default value: spacing; animatable: yes textlength a width that the text should be scaled to fit. ...
... aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriestext content element, text content child elementpermitted contentcharacter data and any number of the following elements, in any order:descriptive elements<a>, <altglyph>, <animate>, <animatecolor>, <s...

Namespaces crash course - SVG: Scalable Vector Graphics
now and it will save you all sorts of headaches in the future. background it has been a long standing goal of the w3c to make it possible for different types of xml based content to be mixed together in the same xml file. for example, svg and mathml might be incorporated directly into an xhtml based scientific document. being able to mix content types like this has many advantages, but it also required a very real problem to be solved. naturally, each xml dialect defines the meaning of the markup element names described in its specification. the problem with mixing content from different xml dialects in a single xml document is that the elements defined by one dialect may have the same name as elements defined by another. for example, both xhtml and svg have a <title> element. how should the u...
...o the same xml dialect as the element). parameters such as xlink:href require the namespace name that was assigned to that prefix (http://www.w3.org/1999/xlink for xlink). hence to get the value of the xlink:href parameter of an <a> element in svg you would write: elt.getattributens('http://www.w3.org/1999/xlink', 'href'); for setting parameters that have a namespace, it is recommended (but not required) that you also include their prefix in the second parameter so that the dom can later be more easily converted back to xml (if for instance you want to send it back to the server). for example: elt.setattributens('http://www.w3.org/1999/xlink', 'xlink:href', 'otherdoc.svg'); as a final example, here's a demonstration of how you should dynamically create an <image> element using script: var svg...

Certificate Transparency - Web security
tamp sent during the handshake ocsp stapling (that is, the status_request tls extension) and providing a signedcertificatetimestamplist with one or more scts with the x.509 certificate extension, the included scts are decided by the issuing ca. there should be no need for web servers to be modified if this mechanism is used. ...
... apple requires a varying number of scts in order for safari and other servers to trust server certificates. firefox does not currently check or require the use of ct logs for sites that users visit. ...

<xsl:stylesheet> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:stylesheet> element (or the equivalent <xsl:transform> element) is the outermost element of a stylesheet. namespace declaration a pseudo-attribute required to identify the document as an xslt stylesheet. typically this is xmlns:xsl="http://www.w3.org/1999/xsl/transform". syntax <xsl:stylesheet version="number" xmlns:xsl="http://www.w3.org/1999/xsl/transform" id="name" extension-element-prefixes="list-of-names" exclude-result-prefixes="list-of-names"> entire stylesheet </xsl:stylesheet> required attributes version specifies the version of xslt required by this stylesheet. optional attributes exclude-result-prefixes specifies any namespace used in this document that should ...
... element so the same results are produced whether the source documents have been validated against a schema or not. use-when determines whether the element and all the nodes that have it as ancestor are excluded from the stylesheet. xpath-default-namespace specifies the namespace that will be used if the element name is unprefixed or an unprefixed type name within an xpath expression. type required outermost element of stylesheet. specifications specification status comment xslt 3.0the definition of '<xsl:stylesheet>' in that specification. recommendation added the attributes default-mode, expand-text, and use-when. xslt 2.0 added the attributes xpath-default-namespace, default-validation, default-collation, and input-type-annotations and ...

Private Properties - Archive of obsolete content
looks at how ordinary objects can be used as hash maps, by creating a simple image cache: let images = {}; function getimage(name) { let image = images[name]; if (!image) { image = loadimage(name); images[name] = image; } return image; } now suppose there's a need to associate a thumbnail with each image. moreover, to create each thumbnail only when it's first required: function getthumbnail(image) { let thumbnail = image._thumbnail; if (!thumbnail) { thumbnail = createthumbnail(image); image._thumbnail = thumbnail; } return thumbnail; } this approach is straightforward, but relies on the use of prefixes. a better approach would be to store thumbnails in their own, separate hash map: let thumbnails = {}; function getthumbnai...

XUL Migration Guide - Archive of obsolete content
ed to respect this distinction. the main reason for this design is security: it reduces the risk that a malicious web page will be able to access privileged apis. there's much more information on content scripts in the working with content scripts guide. using the supported apis the sdk provides a set of high level apis providing some basic user interface components and functionality commonly required by add-ons. because we expect to keep these apis compatible as new versions of firefox are released, we call them the "supported" apis. see the tutorials and the high-level api reference. if the supported apis do what you need, they're the best option: you get the benefits of compatibility across firefox releases and of the sdk's security model. apis like ui and panel are very generic and with ...

hotkeys - Archive of obsolete content
to clash with some other add-on, so consider making the combination you choose user-configurable. globals constructors hotkey(options) creates a hotkey whose onpress listener method is invoked when key combination defined by hotkey is pressed. if more than one hotkey is created for the same key combination, the listener is executed only on the last one created. parameters options : object required options: name type combo string any function key: "f1, f2, ..., f24" or key combination in the format of 'modifier-key': "accel-s" "meta-shift-i" "control-alt-d" all hotkeys require at least one modifier as well as the key. these are the possible modifiers you can supply: shift: the shift key. alt: the alt key. on the macintosh, ...

page-mod - Archive of obsolete content
e-mods will not attach content scripts to documents loaded into private windows, even if their urls match the pattern you have specified. to learn more about private windows, how to opt into private browsing, and how to support private browsing, refer to the documentation for the private-browsing module. globals constructors pagemod(options) creates a page-mod. parameters options : object required options: name: include type: string, regexp, or array of (string or regexp) a match pattern string or an array of match pattern strings. these define the documents to which the page-mod applies. at least one match pattern must be supplied. you can specify a url exactly: var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "http://www.iana.org/domains/example/", conte...

tabs - Archive of obsolete content
newwindow: true }); // open a new tab on active window in the background. tabs.open({ url: "http://www.mysite.com", inbackground: true }); // open a new tab as an app tab and do something once it's open. tabs.open({ url: "http://www.mysite.com", ispinned: true, onopen: function onopen(tab) { // do stuff like listen for content // loading. } }); parameters options : object required options: name type url string string url to be opened in the new tab. this is a required property. optional options: name type isprivate boolean boolean which will determine whether the new tab should be private or not. if your add-on does not support private browsing this will have no effect. see the p...

widget - Archive of obsolete content
nction(message) {' + ' alert("got message: " + message);' + '});' + 'self.postmessage("ready");', onmessage: function(message) { if (message == "ready") widget.postmessage("me too"); } }); globals constructors widget(options) creates a new widget. the widget is immediately added to the add-on bar. parameters options : object required options: name type label string a string description of the widget used for accessibility, title bars, and error reporting. id string a string used to identify your widget in order to save its location when the user moves it in the browser. this string has to be unique and must not be changed over time. optional options:...

windows - Archive of obsolete content
was opened: var windows = require("sdk/windows").browserwindows; var example = windows.open("http://www.example.com"); require("sdk/ui/button/action").actionbutton({ id: "read", label: "read", icon: "./read.png", onclick: function() { example.close(); } }); this example uses the action button api, which is only available from firefox 29 onwards. parameters options : object required options: name type url string string url to be opened in the new window. this is a required property. isprivate boolean boolean which will determine whether the new window should be private or not. if your add-on does not support private browsing this will have no effect. see the private-browsing documentation for more information.

content/worker - Archive of obsolete content
ntent scripts and the add-on code to exchange messages using the port or postmessage apis. the worker is similar to the web worker interface defined by the w3c. but unlike "web workers," these workers run in the same process as web content and browser chrome, so code within workers can block the ui. globals constructors worker(options) creates a content worker. parameters options : object required options: name type window object the content window to create javascript sandbox for communication with. optional options: name type contentscriptfile string,array the local file urls of content scripts to load. content scripts specified by this option are loaded before those specified by the contentscr...

core/heritage - Archive of obsolete content
ceof behavior you need to make a dance with // another special `constructor` property of the `prototype` object. object.defineproperty(pet.prototype, 'constructor', { value: pet }); // finally you can define some properties. pet.prototype.call = function(name) { return this.name === name ? this.bark() : ''; }; since sdk apis may be interacting with untrusted code an extra security measures are required to guarantee that documented behavior can't be changed at runtime. to do that we need to freeze constructor's prototype chain to make sure functions are frozen: object.freeze(dog.prototype); object.freeze(pet.prototype); note: also, this is not quite enough as object.prototype stays mutable & in fact we do little bit more in sdk to address that, but it's not in the scope of this documentation. ...

event/target - Archive of obsolete content
events. this module provides an exemplar eventtarget object, that implements an interface for adding and removing event listeners of a specific type. eventtarget is the base class for all objects in sdk on which events are emitted. also see the tutorial on implementing event targets to get started with this api. instantiation it's easy to create event target objects, no special arguments are required. const { eventtarget } = require("sdk/event/target"); let target = eventtarget(); for a convenience though optional options arguments may be used, in which case all the function properties with keys like: onmessage, onmyevent... will be auto registered for associated 'message', 'myevent' events on the created instance. all other properties of options will be ignored. adding listeners eventtar...

frame/hidden-frame - Archive of obsolete content
nt.contentwindow.location = "http://www.mozilla.org/"; let self = this; this.element.addeventlistener("domcontentloaded", function() { console.log(self.element.contentdocument.title); }, true, true); } })); see the panel module for a real-world example of usage of this module. globals constructors hiddenframe(options) creates a hidden frame. parameters options : object required options: name type onready function,array functions to call when the frame is ready to load content. you must specify an onready callback and refrain from using the hidden frame until the callback gets called, because hidden frames are not always ready to load content the moment they are added. functions add(hiddenframe) register a hidden fra...

preferences/event-target - Archive of obsolete content
the system-wide settings. these are the same preferences that are exposed to users in the about:config page. preferences/service gives you full access to the preferences system. you can also use the simple-prefs module to access just the preferences for your own add-on and expose them to the user in the add-on manager. globals constructor prefstarget(options) parameters options : object required options: name type branchname string by default this is "", the root. example var { prefstarget } = require("sdk/preferences/event-target"); // listen to the same branch which reqire("sdk/simple-prefs") does var target = prefstarget({ branchname: "extensions." + require("sdk/self").preferencesbranch + "." }); target.once("test", function(pre...

stylesheet/style - Archive of obsolete content
ructor creates an object that represents style modifications via stylesheet file(s) or/and css rules. stylesheet file url(s) are verified to be local to an add-on, while css rules are verified to be a string or array of strings. the style created can be applied to a content by calling attach, and removed using detach. those functions are part of content/mod module. parameters options : object required options: name type uri string,array a string, or an array of strings, that represents local uri to stylesheet. source string,array a string, or an array of strings, that contains css rules. those rules are applied after the rules in the stylesheet specified with uri options, if provided. optional options: name ...

ui/button/action - Archive of obsolete content
tate("tab").label; to learn more about this, see the api documentation for state(). destroying buttons when you've finished with a button, destroy it by calling its destroy() method. after that, any attempts to access any of its properties or to call any of its methods will throw exceptions. globals constructors actionbutton(options) creates an action button. parameters options : object required options: name type id string the button's id. this is used internally to keep track of this button. the id must be unique within your add-on. label string the button's human-readable label. when the button is in the toolbar, this appears in a tooltip, and when the button is in the menu, it appears underneath the button as a legend.

ui/button/toggle - Archive of obsolete content
{ checked } = this.state('tab'); this.state('tab', {checked: !checked}); } }); destroying buttons when you've finished with a button, destroy it by calling its destroy() method. after that, any attempts to access any of its properties or to call any of its methods will throw exceptions. globals constructors togglebutton(options) creates a toggle button. parameters options : object required options: name type id string the button's id. this is used internally to keep track of this button. the id must be unique within your add-on. label string the button's human-readable label. when the button is in the toolbar, this appears in a tooltip, and when the button is in the menu, it appears underneath the button as a legend.

ui/frame - Archive of obsolete content
} } globals constructors frame(options) creates an frame. once created, the frame needs to be added to a toolbar for it to be visible: var { frame } = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var frame = new frame({ url: "./frame.html" }); var toolbar = toolbar({ name: "my-toolbar", title: "my toolbar", items: [frame] }); parameters options : object required options: name type url url, string a url pointing to the html file specifying the frame's content. the file must be bundled with the add-on under its "data" directory. you can specify the url in one of two ways: as a resource:// url pointing at a file under your add-on's "data" directory, typically constructed using self.data.url(filename) ...

ui/sidebar - Archive of obsolete content
this will be used for the label for your sidebar in the "sidebar" submenu in firefox, and will be shown at the top of your sidebar when it is open. url string the url of the content to load in the sidebar. this must be a local url (typically, loaded from the "data" folder usi...

ui/toolbar - Archive of obsolete content
this appears as the name of the toolbar in the firefox "toolbars" menu. it must be unique. optional options: name type items array adding buttons to toolbars is only supported from firefox 30 onwards. in firefox 29, you can only add frames. ...

jpm - Archive of obsolete content
and watchpost for more information. -v --verbose verbose operation: jpm watchpost --post-url http://localhost:8888/ -v jpm sign this feature is only supported from jpm 1.0.4 onwards. this command retrieves a new xpi for your add-on signed by mozilla. this allows you to self-host your add-on so that users can install it without error when signed add-ons are required. you can sign an xpi you've already generated by passing the xpi file in the --xpi argument, like this: jpm sign --api-key ${jwt_issuer} --api-secret ${jwt_secret} --xpi <xpi file> alternatively, you can omit the --xpi argument, in which case jpm sign will generate an xpi from the current directory (or --addon-dir). jpm sign --api-key ${jwt_issuer} --api-secret ${jwt_secret} this submits an ...

Tools - Archive of obsolete content
...

Getting Started (jpm) - Archive of obsolete content
vigate to the "@my-addon.xpi" file, open it and follow the prompts to install the add-on. note that firefox by default requires add-ons, even locally developed ones, to be signed. after installation they'll show up disabled in the list of installed add-ons, noting the missing signature. during development, or if you don't plan to distribute, you can open about:config and set xpinstall.signatures.required to false to run it unsigned. this setting applies to any add-on, so take extra care to not accidently install a malicious one from elsewhere. to distribute your add-on, submit the xpi file to addons.mozilla.org or run jpm sign if you wish to distribute the add-on on your own server. summary in this tutorial we've built and packaged an add-on using three commands: jpm init to initialize an e...

Localization - Archive of obsolete content
import the l10n module, and assign its get function to "_" (underscore). wrap all references to localizable strings with the _() function. if you run it you'll see the expected output for the current locale: info: hello! info: bonjour ! note...

Bootstrapped extensions - Archive of obsolete content
u can get access to the menu bar in firefox with document.getelementbyid("main-menubar"). be sure that at shutdown time, you remove any user interface you've added. creating a bootstrapped extension to mark an extension as bootstrappable, you need to add the following element to its install manifest: <em:bootstrap>true</em:bootstrap> then you need to add a bootstrap.js file that contains the required functions; this should be alongside the install.rdf file in the extension's package. backward compatibility because older versions of firefox don't know about the bootstrap property or bootstrap.js file, it's not overly difficult to create an xpi that will work on both as a bootstrappable extension and as a traditional extension. create your extension as a bootstrappable extension, then add the...

Customizing the download progress bar - Archive of obsolete content
oads-overlay.xul, reference the new stylesheet: <?xml version="1.0"?> <?xml-stylesheet href="chrome://myextension/skin/myextension.css" type="text/css"?> <overlay id="mydownloadoverlay" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> </overlay> in jar.mn, make sure that there is an asterisk in front of the entry for myextension.css so that it will be preprocessed. this is required since it contains platform-specific directives, as we will see. the myextension.css file will look something like this: richlistitem progressmeter { %ifdef xp_win min-height: 17px !important; %else %ifdef xp_macosx -moz-appearance: none !important; background-image: url(chrome://myextension/skin/progress_bg_osx.png) !important; %endif %endif } richlistitem .progress-bar { %if...

Preferences - Archive of obsolete content
ling display properties in xul components). this technique will work no matter how or where the preferences are changed: in another browser window, directly in the about:config interface, or even by another extension. note: during gecko 13 development, nsiprefbranch2 was deprecated, and its methods moved to nsiprefbranch. calling .queryinterface(components.interfaces.nsiprefbranch2) is no longer required, although it still works. here is a straightforward example: var myprefobserver = { register: function() { // first we'll need the preference services to look for preferences. var prefservice = components.classes["@mozilla.org/preferences-service;1"] .getservice(components.interfaces.nsiprefservice); // for this.branch we ask for the preferences fo...

View Source for XUL Applications - Archive of obsolete content
irectly is the viewsource method. the rest of those methods should be considered private, and might become inaccessible in the future. void viewsource(aobject); methods viewsource opens a viewer to the source code for some document or uri. parameters the viewsource method takes an object as its first and only parameter. the object can include the following properties: url (required) a string url for the document to view the source of. browser (optional) the browser containing the document that we would like to view the source of. this is optional if outerwindowid is not passed. outerwindowid (optional) the outerwindowid of the content window containing the document that we want to view the source of. pass this if you want to attempt to load the document source out of t...

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

Installing Extensions and Themes From Web Pages - Archive of obsolete content
ce you've effectively invoked two install requests, one from the installtrigger, one from trying to load the xpi file directly. available parameters for the install object the installtrigger.install method accepts a javascript object as a parameter, with several properties on that object used to affect the install. url the url property specifies the url of the xpi to install. this property is required. iconurl the iconurl property specifies an icon to be displayed in the installation dialog. this property is optional. if you do not specify an icon, the default icon will be used, usually a green puzzle piece. the icon can be any image format supported by firefox, and should be 32x32 pixels in size. hash the hash property specifies a cryptographic hash of the xpi file contents. this is used ...

Migrating from Internal Linkage to Frozen Linkage - Archive of obsolete content
extension code using internal linkage will need to migrate to use frozen linkage because internal linkage will not be available in firefox 3. this document is a guide to common code patterns that may need to change to work with frozen linkage. strings the most obvious change required by frozen linkage is using the frozen string api. - #include "nsastring.h"- #include "nsstring.h"- #include "nsreadableutils.h"- #include "nsescape.h" + #include "nsstringapi.h" on windows, if you see the following error, you are including a header you shouldn't be: nsstringfwd.h(60) : fatal error c1001: internal compiler error to debug this error, make in the failing directory, adding the /showincludes directive to figure out what is being included incorrectly: make -c directory/that/failed os_cppflags=-showinclud...

Multiple item extension packaging - Archive of obsolete content
l manifest to determine if this is a multiple item package and then start the installation of the individual packages it contains automatically. no other files besides the install.rdf install manifest and the files with a jar and xpi file extension will be extracted or utilized. install.rdf a multiple item package does not have the same requirements as an extension for its install.rdf. the only required properties are em:id, em:targetapplication, and em:type. for the firefox and thunderbird 1.5 extension manager to determine that the package is a multiple item package, the em:type specified in your install.rdf must be 32 and specified as <em:type nc:parsetype="integer">32</em:type>. the xml namespace xmlns:nc="http://home.netscape.com/nc-rdf#" must also be declared in your install.rdf as shown ...

Chapter 2: Technologies used in developing extensions - Archive of obsolete content
d xpcom. extensions are also built using these four technologies. figure 1: role of each technology in firefox in addition to these technologies, extension development will require you to learn about how to confer privileges to overcome security restrictions on code that you write, and how to embed your code into the firefox ui. these issues are discussed in chapter 5. the minimum knowledge required in the interest of brevity, i will omit explanations of widely understood technologies, and focus instead on introducing new technologies you will need to understand in order to develop for firefox. i will assume that you have experience developing with dynamic html, as well as the topics below. for more information on these technologies, please refer to other sources. xml coding css coding ...

Adding Toolbars and Toolbar Buttons - Archive of obsolete content
the toolbox is the collection of toolbars in firefox, including the main menu bar. let's look at the attributes we used: the toolbarname is the name that will appear on the view > toolbars menulist. this menu allows hiding and showing any toolbar. the customizable attribute determines if the user can customiz...

Adding sidebars - Archive of obsolete content
d rich interfaces without requiring new windows or complicated overlays. sidebars take as much space as the user wants them to, and provide a frame where you can add elaborate data and controls. you're probably familiar with the bookmarks and history sidebars. if not, you can open either one from the view > sidebar menu. they also have shortcuts to open or close them using the keyboard. the code required to add a sidebar is very simple, as explained in creating a firefox sidebar. it's even simpler than that. all you need is to overlay the view sidebar menu. <menupopup id="viewsidebarmenu"> <menuitem id="xulschoolhello-sidebar" label="&xulschoolhello.sidebar.title;" accesskey="&xulschoolhello.sidebar.accesskey;" type="checkbox" autocheck="false" group="sidebar" sidebarurl="chr...

Appendix F: Monitoring DOM changes - Archive of obsolete content
code below contains an inefficient fallback implementation for older browsers. it is worth noting, however, that while the animation-based implementation will fire any time an element which previously did not match the given selector is changed so that it does (when a class is added, for instance), the fallback will only match nodes when they are inserted into the dom tree. minor changes are also required if one wishes to support other browsers, or to run in non-chrome-privileged scopes. /** * watches for nodes matching the given css selector to become * available. * * @param {string} selector the css selector of nodes about which you * want to be notified. * @param {function(event)} callback the function which is to be called * when matching nodes become available. * @param {docu...

Connecting to Remote Content - Archive of obsolete content
ponsexml property will hold an xmldocument object that can be manipulated using dom methods. sometimes the server doesn't specify an xml content-type header, which is necessary for the xml parsing to happen automatically. you can use overridemimetype to force the response to be parsed as xml. request.overridemimetype("text/xml"); // do this before sending the request! the open method takes two required parameters: the http request method and the url to send the request. the http request method can be "get", "post" or "put". sending a post request requires you to set the content type of the request and to pass the post data to the send() method as below. request.open("post", url, true); request.setrequestheader("content-type", "application/x-www-form-urlencoded"); request.send("data=hello&versi...

Getting Started with Firefox Extensions - Archive of obsolete content
ns too. we'll now begin with a basic "hello world" extension. let's start by installing it. click on the link below. note: this extension is unsigned. starting with firefox 43, extensions need to be signed by mozilla before they can be installed in firefox. unsigned add-ons can still be installed in developer edition, nightly, and esr versions of firefox, after toggling the xpinstall.signatures.required preference in about:config. install hello world click the above link and then click "allow" in the pop-up bubble. you should see another pop-up telling you that you are installing an unverified add-on. click "install". after the extension is installed, you'll be asked to restart firefox. installing, uninstalling, enabling and disabling add-ons require a restart to complete, with the exception o...

Handling Preferences - Archive of obsolete content
eferences system provides a simple, unified storage facility for name / value mappings. when your storage needs are more complicated than this, you'll need more advanced apis that will be discussed in a section further ahead. to add preferences to your extension you should first create a js preferences file that describes the preferences and their default values, although setting defaults is not required. as mentioned earlier, a preference with no default value can be set later on. note: we recommend that you include all of your extension preferences in the js defaults file. it makes it easier to compile a list of the preferences your extensions handle, and to document what they do. the preferences file you need to create should be defaults/preferences/yourextensionname.js, under your exten...

JavaScript Object Management - Archive of obsolete content
t any moment you want. this is an odd, but powerful feature that comes in handy at times when things get complicated. for instance, 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 load...

The Essentials of an Extension - Archive of obsolete content
ntral storage mechanism for firefox, but it is now being replaced for a simpler database system. we'll discuss both of these storage systems further ahead in the tutorial. now let's look at the important parts of the file. <em:id>helloworld@xulschool.com</em:id> this is the unique identifier for the extension. firefox needs this to distinguish your extension from other extensions, so it is required that you have an id that is unique. there are two accepted standards for add-on ids. one is the email-like format in the hello world example, which should be something like <project-name>@<yourdomain>. the other standard practice is to use a generated uuid string, which is extremely unlikely to be duplicated. unix-based systems have a command line tool called uuidgen that generates uuids. there ...

Session store API - Archive of obsolete content
hed. this is something you may need to keep in mind if you rely on the behavior of the session store system. the session restore process the exact sequence of events that occurs when a session is being restored is: a session state is about to be restored. this can be on startup or in response to undo close tab, since closed tabs are restored as single-tab sessions. new windows are opened as required (one for each window that was saved in the session store), and cookies and the list of recently closed tabs are restored. after that, the following steps are taken for each tab being restored: either an existing tab is reused or a new tab is created. in the latter case, a tabopen event is sent. the tab's persistent xul attributes (those saved due to calls to persisttabattribute()) and permi...

Using Dependent Libraries In Extension Components - Archive of obsolete content
.get(), nsaddimage_option_return_on_error | nsaddimage_option_with_searching | nsaddimage_option_match_filename_by_installname); // 1) we don't care if this failed! if you update your dependencies in your component, // but forget to remove a dependant library in the stubloader, then we don't want to // fail loading the component since the dependant library isn't required. // // 2) we are going to leak this library. we don't care about that either. // nsaddimage adds the image to the process. when the process terminates, the library // will be properly unloaded. } library->setnativeleafname(ns_literal_cstring(krealcomponent)); rv = library->getnativepath(path); if (ns_failed(rv)) return rv; const mach_header * componentlib = nsaddimage(pat...

An Interview With Douglas Bowman of Wired News - Archive of obsolete content
oning? in trying to eliminate that last table i was using to set the column structure of our pages, i took a close look at both floated divs and positioned divs. i went back and forth between each one for two weeks, and finally narrowed in on positioned divs as the choice for wired news. why did you choose positioning over floats? floats had a few disadvantages from my perspective. one was the required order of content within generic markup. for wired news, the center (or main) column usually contains the most important content for each page. i wanted center column content to appear first in browsers that got the un-styled version. with floats, either the left column or the right column always had to be drawn first. for sites that rely on a left or right column for primary navigation, this cont...

CSS3 - Archive of obsolete content
, 2018 adds: the ability to tweak the box model using the css box-sizing property. at risk: due to insufficient browser support, standardization of the padding-box value may be postponed to the next iteration of this module. allow the styling of forms according their content using the css :indeterminate, :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only, and :read-write pseudo-classes and the ::value, ::choices, ::repeat-item, and ::repeat-index pseudo-elements. at risk: due to insufficient browser support, standardization of the pseudo-elements ::value, ::choices, ::repeat-item, and ::repeat-index may be postponed to the next iteration of this module . support for icons, defined by the css icon property simult...

Creating a status bar extension - Archive of obsolete content
em:name the extension's name. this name is displayed in the extensions window. em:description a short, one-line description of the extension. this text is also displayed in the extensions window. em:creator the author's name. homepageurl the url of a web site the user can visit to get information 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...

Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
rates data request from data binding. this approach allows us to untie from the traditional navigation model. a request to a web server no longer requires a new page to be loaded, in order to update information in a page seamlessly. 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 s...

List of Mozilla-Based Applications - Archive of obsolete content
ey prism (was webrunner) single-site browser xulrunner application pro/engineer wildfire cadcam product psycrunner chat, messenger, multicast toolkit about 1,000 users – xulrunner version of psyczilla extension pyjamas-desktop a python web widget toolkit uses xulrunner dom to implement the widgets and event handling. python-hulahop is required python-hulahop a python gtk widget uses embedded xulrunner, providing full access to nsi dom and all other xulrunner interfaces, in a gtk window. it's possible to create your own python web browser with hulahop, and much much more besides. qsos xul editor tool for the qsos method qsos stands for qualification and selection of opensource software qtrax mus...

Source code directories overview - Archive of obsolete content
subdirectories a common naming scheme is used throughout the mozilla source trees. at the top level is the name of the product (e.g. seamonkey). at the second level is the name of the module (e.g. the editor directory in seamonkey). the third level is where the common naming scheme usually takes over. many third level directories contain the base, the public and the idl directories. although not required, these common names are typically used for a common purpose. if files can be grouped into submodules, they are usually put in their own third level directory and given a unique name (e.g. txmgr in the editor directory in seamonkey). beneath this third level directory, there may be fourth level base, public and idl directories. thus, the scheme is recursive; it can apply to submodules, sub-submodu...

Installing Dehydra - Archive of obsolete content
to generate preprocessed mozilla source files (*.ii), see the pork install instructions. see also dehydra_manual treehydra build instructions ...

Embedding FAQ - Archive of obsolete content
scroll down to "initalization and teardown. how to customize document retrieval one method is to implement your own protocol method. you can find more information on adding new protocols here how to embedding mozilla inside of java there hasn't been any good code examples found. however, there is a stripped down, uncommented code with eclipse libraries in this thread. ...

Block and Line Layout Cheat Sheet - Archive of obsolete content
her up the parent chain. used in nsblockreflowcontext::computecollapsedtopmargin(). this flag causes the nsblockreflowstate's constructor to set the brs_istopmarginroot and brs_isbottommarginroot flags. this is set by default for document, table cell inner, and absolutely positioned wrapper frames. ns_block_space_mgr this indicates that a block frame should create its own space manager. this is required by each block frame that can contain floaters: the space manager is used to reserve space for the floated frames. this is set by default for document frames, area frames, table cell inner frames, absolutely positioned wrapper frames, and floated frames when the frame is created. nslinebox a block consists of lines and other blocks, stacked vertically. a block frame has one nslinebox for each l...

Layout System Overview - Archive of obsolete content
layout's job: provide the presentation layout is primarily concerned with providing a presentation to an html or xml document. this presentation is typically formatted in accordance with the requirements of the css1 and css2 specifications from the w3c. presentation formatting is also required to provide compatibility with legacy browsers (microsoft internet explorer and netscape navigator 4.x). the decision about when to apply css-specified formatting and when to apply legacy formatting is controlled by the document's doctype specification. these layout modes are referred to as 'standards' and 'navquirks' modes. (doctype and modes are explained in more detail in article mozilla's doctype sniffing. galley and page presentations: the presentation generally is constrained by the width of the window...

Repackaging Firefox - Archive of obsolete content
ge_welcome_url=<string> url to the first-run page. this is loaded in addition to the homepage, the very first time that firefox is run. browser.search.defaultenginename=<string> name of the default search engine. note that this does not change the order of the search engines in the drop-down, only selects the default. capitalization is significant. repackaging firefox once you have all the required pieces in place, all you need to do is launch the repackager tool and fill in the fields to set up your customized installers. the "extension" section describes your dex. click the "choose" button to select the xpi file containing your extension; the id and name fields will be filled out automatically. when repacking firefox 2.0.0.3 or lower, be sure to download the latest version of t...

Style System Overview - Archive of obsolete content
tions from the style sheets, and the css stylesheets force one cssruleprocessor per origin (rather than one per stylesheet). htmlstylesheetimpl (html attributes) and htmlcssstylesheet (style attributes) also implement nsistyleruleprocessor. the nsistyleruleprocessor interface implemented by cssruleprocessor, htmlstylesheetimpl, and htmlcssstylesheetimpl has a rulesmatching method, which is required to call nsrulewalker::forward on any rules that match the element. (we'll see what this does later.) the main argument to rulesmatching is a structure of enumeration data that implementations use to determine more quickly which rules match. has a separate rulesmatching method for pseudo-elements. cssruleprocessor one cssruleprocessor per origin (ua, user, author) css rule processor sorts ...

JavaScript Client API - Archive of obsolete content
managed and protected; (b) that your third party client will only store data in encrypted form on the firefox sync servers operated by mozilla; (c) that you and your third party client will use the firefox sync apis solely for their intended purpose; (d) that your third party client will not hide or mask its identity as it uses the services and/or firefox sync apis, including by failing to follow required identification conventions; and (e) that you and your third party client will not use the firefox sync apis for any application or service that replicates or attempts to replicate the services or firefox sync experience unless such use is non-confusing (by non-confusing, we mean that people should always know with whom they are dealing and where the information or software they are downloading ca...

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
1; u; linux i686; en-us; rv:1.5) gecko/20031016 while using the useragent to sniff the browser provides detailed information on the browser in use, code that handles useragents often can make mistakes when new browser versions arrive, thus requiring code changes. it is much better and more reliable to sniff by browser capability or object feature support. you can usually do this by testing the required functionality in javascript. for example, rather than: if (ismozilla || isie5) you would use: if (document.getelementbyid) this would allow other browsers that support that w3c standard method, such as opera or safari, to work without any changes. useragent sniffing makes sense in very limited cases where you really do want to know the exact browser in use, such as when you need to work a...

Nanojit - Archive of obsolete content
ret twoplustwo this adds two and two in the most hardcoded way possible. the conversion from lir to a program like one shown above is the task of the parser. guards guards are special lir instructions, similar to conditional branches, with the difference that when they are called, instead of going to a particular address, they leave the jit code entirely, and stop the trace. need guards are required in a cross platform dynamic language like javascript. certain assumptions are made when a particular jit code is generated. for example, in an instruction inr x, a guard would check that x doesn't overflow the range for a 32 bit integer. the jit code would have a guard checking this condition(an xt guard), and would return to the interpreter if the condition turns out to be true. the interpreter...

Plug-n-Hack - Archive of obsolete content
configuring a browser to work with a security tool can be a non-trivial process, and this can discourage people with less experience from using such tools. ...

Build - Archive of obsolete content
grab the latest release source code from mozilla's ftp site. extract the source code, and you should have a directory called mozilla/. ...

Priority Content - Archive of obsolete content
permission to use any of his materials in devedge in the devmo wiki under the cc:by-sa license (yay!) started: browser feature detection original: browser feature detection wiki location: browser feature detection migrators: serge k. keller mostly completed*: rich-text editing in mozilla 1.3 "mostly completed" means i'm waiting for a location to store example and source files which are required for demoing the information in the articles. original: rich-text editing in mozilla 1.3 wiki location: rich-text editing in mozilla i dropped the 1.3, as the article still applies and shouldn't sound outdated. migrators: joel coreson note: the article links some external example files, not sure how to migrate them (perhaps via "upload file" function that's normally used for images?) also ch...

New Skin Notes - Archive of obsolete content
devmo has a new skin that is ready for testing. if you go to your user preferences, you can change the skin to "devmo". this is currently just a preview, but we would appreciate help with testing. please add any feedback to this page. thanks! feedback fix weird width bug on preferences page. --dria css classes for feature and subfeature boxes, including required graphics. -- dria when will these fixes be on the live site? --nickolay 10:38, 31 aug 2005 (pdt) existing fixes should be on test/docs/ now. --dria stuff that's been fixed note that while i've made these fixes, they haven't necessarily been checked in yet. edit page textarea needs to 'scale' better with page width (so large whitespace area's are non-existant), suggest min-width:some-em-size; width: 88%; and max-widt...

Remotely debugging Firefox for Metro - Archive of obsolete content
irefox on the desktop. prerequisites you will need: windows 8 (metro-style) firefox running in the touch-friendly "metro" mode on a windows 8 computer. firefox running in classic "desktop" mode on windows, mac os x, or linux, either on a separate computer or in a separate profile on the same computer. ...

Frequently Asked Questions - Archive of obsolete content
grey area at the top of the source with the text "this xml file does not appear to have any style information associated with it" then the problem is with the svg file. to be valid the root <svg> tag in svg files must have at least the following two "namespace bindings". <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> actually the second binding isn't always required, but unless you understand namespaces, we'd strongly recommend you include it. for more information see this link. if source code is displayed without a gray area at the top, or if you just see gibberish, then the problem is server misconfiguration. when servers send user agents an svg file they must tell the user agent that the file has the mime type "image/svg+xml", and if the svg file is stor...

Space Manager Detailed Design - Archive of obsolete content
pace. the client provides a vertical offset, the yoffset, that corresponds to the band that is of interest. this will be the y offset of the frame that is being reflowed. the caller also provides a collection of banddata objects (an array) and the number of items that the collection can handle. if the collection is too small, then an error is returned and the count is updated to indicate the size required. the algorithm to provide the band data is as follows: get a vertical offset in world coordinates (instead of frame-relative coordinates) by adding the y-origin of the spacemanager to the y offset passed in if the (adjusted) y value passed in is greater than the greatest band being managed, then all space is available so a single trapezoid is returned,marked as available and sized to the maxim...

Abc Assembler Tests - Archive of obsolete content
h case the provisions of the gpl or the lgpl are applicable instead * of those above. if you wish to allow use of your version of this file only * under the terms of either the gpl or the lgpl, and not to allow others to * use your version of this file under the terms of the mpl, indicate your * decision by deleting the provisions above and replace them with the notice * and other provisions required by the gpl or the lgpl. if you do not delete * the provisions above, a recipient may use your version of this file under * the terms of any one of the mpl, the gpl or the lgpl. * * ***** end license block ***** */ function main() { getlocal0 pushscope findproperty start pushstring "instructions that start with the letter l" callpropvoid start 1 newfunction .function_i...

Tamarin Acceptance Test Template - Archive of obsolete content
h case the provisions of the gpl or the lgpl are applicable instead * of those above. if you wish to allow use of your version of this file only * under the terms of either the gpl or the lgpl, and not to allow others to * use your version of this file under the terms of the mpl, indicate your * decision by deleting the provisions above and replace them with the notice * and other provisions required by the gpl or the lgpl. if you do not delete * the provisions above, a recipient may use your version of this file under * the terms of any one of the mpl, the gpl or the lgpl. * * ***** end license block ***** */ var section = "test"; // provide a document reference (ie, actionscript section) var version = "as3"; // version of ecmascript or actionscript var title = "test"; ...

Actionscript Acceptance Tests - Archive of obsolete content
ated. the name is case-sensitive. e.g: given a test named inheritclass.as, the user can create a directory named inheritclass and place files a.as and b.as in that directory. when the harness compiles the inheritclass.as test, the files in inheritclass will be included: java -jar asc.jar -import builtin.abc -in shell.as -in inheritclass/a.as -in inheritclass/b.as inheritclass.as additional files required by a test: if a test requires additional files to run, but are not to be included when compiling, a testname_support directory can be created. the directory name should not include any testname extensions. any .as files in this directory will be compiled, but will not be run by the harness. note that if you have .as files in the _support dir, they will be compiled as if they are regular tests. ...

Running Tamarin performance tests - Archive of obsolete content
o compile.py. --vmversion specify vmversion e.g. ...

Tamarin Acceptance Testing - Archive of obsolete content
in order to ensure that changes to the tamarin code base are high quality before submitting, all developers are required to complete the following steps. successfully build release and debug versions of the shell with the debugger enabled [info] successfully run the following test suites: acceptance test suite [info] self tests [info] submit a sandbox build request to test against platforms that you may not have locally [info] available tamarin acceptance test suites actionscript acceptance tests: actionscript acceptance tests running tamarin acceptance tests abc assembler tests cmdline tests performance tests actionscript performance tests running tamarin performance tests built-in self tests ...

URIs and URLs - Archive of obsolete content
is stored in a matrix. also a string should not be escaped more than once. necko will not escape an already escaped character unless forced by a special mask that can be used if it is known that a string is not escaped. parsing urls rfc 2396 defines an url parser that can deal with the syntax that is common to most url schemes that are currently in existence. sometimes scheme specific parsing is required. also to be somewhat tolerant to syntax errors the parser has to know more about the specific syntax of the urls for that scheme. to stay almost generic necko contains three parsers for the main classes of standard urls. which one has to be used is defined by the implementation of nsiprotocolhandler for the scheme in question. the three main classes are: authority the urls have an author...

Mac stub installer - Archive of obsolete content
t>.jst install script template file (the jst extension stands for javascript template indicating this is a template for the final install.js for the <component>.xpi. checkin the <component>.jst to the: <http://lxr.mozilla.org/seamonkey/sou.../packager/mac/> directory. note that there are two macro strings in the .jsts: $version$ which is replaced at packages time with the browser version. $spacerequired$ which is replaced at package time with the amount of space in kb required for the package when it is fully extracted. add a [componentx] section to the config.ini template file named config.ini_tmpl found at: <http://lxr.mozilla.org/seamonkey/sou...onfig.ini_tmpl>. then add the componentx into the appropriate setup types so the installer module installs when users select the setup types you ch...

Unix stub installer - Archive of obsolete content
t>.jst install script template file (the jst extension stands for javascript template indicating this is a template for the final install.js for the <component>.xpi. checkin the <component>.jst to the: <http://lxr.mozilla.org/seamonkey/sou.../packager/unix> directory. note that there are two macro strings in the .jsts: $version$ which is replaced at packages time with the browser version. $spacerequired$ which is replaced at package time with the amount of space in kb required for the package when it is fully extracted. add a [componentx] section to the config.ini template file named config.it found at: <http://lxr.mozilla.org/seamonkey/sou...unix/config.it>. then add the componentx into the appropriate setup types so the installer module installs it when users select the setup types you choos...

Windows stub installer - Archive of obsolete content
template indicating this is a template for the final install.js for the <component>.xpi. checkin the <component>.jst to the: <http://lxr.mozilla.org/seamonkey/sou...ckager/windows> directory. note that there are several macro strings--a macro name wrapped in dollar ($) signs--which may be used in the .jsts, including: $version$ which is replaced at packages time with the browser version. $spacerequired$ which is replaced at package time with the amount of space in kb required for the package when it is fully extracted. other macro strings listed in makejs.pl can be found by searching for "version", which is one of the macro strings, until you find the line $line =~ s/\$version\$/$inversion/i; other macro strings are grouped in this section. as with "version", the macro name will be the fi...

Using XPInstall to Install Plugins - Archive of obsolete content
's desktop. in particular, like many ocx files (activex controls) it installs to a special directory within c:\winnt\system32\, called c:\winnt\system32\myplugin. xpinstall is able to determine what directory this is by the getfolder api call. we have written our own javascript function to contain all the secondary installation code -- function createsecondaryinstall() and finally, it writes the required registry keys to windows. this is done via the created function, called function registerplid(). certainly, this script is windows-centric, but it is easy to port it to any other platform. easier, perhaps, since the lengthy win32 registry manipulation need not occur on linux or mac osx. the getfolder api provides you with enough "syntactic sugar" to determine other locations on the user's comput...

File Object - Archive of obsolete content
w packaging scheme with an install.rdf manifest. in particular plugin developers should see how to package a plugin as an extension. file use the file object to manipulate local files and directories during the installation process. overview the file object has methods for analyzing the file system and preparing it (as when new directories, program shortcuts, version comparisons, or deletions are required) for newly installed software packages. the file object works in conjunction with the install object. ...

init - Archive of obsolete content
...

execute - Archive of obsolete content
esent, passes a string to the executable as command-line parameters. the following line, for example, passes the "-c" command-line parameter to the executable: err = file.execute(myfile, "-c", true); when you want to pass more than one parameter to the executable itself, however, you must format the args string in a particular way so that the parameters can be broken up and passed separately as required. in general, you should use single quotes for the args string and double quotes to delimit the command-line arguments within args. the following parsing rules apply: double quotes are treated as quotes; single quotes are ignored by the executable but legal in the execute() method. the outer quotes that frame the args string itself are stripped off when the string is passed to the executable...

registerChrome - Archive of obsolete content
t of skin and/or locale, and ensures that everything in the xpi is registered. one final option for the switch parameter is delayed_chrome, which registers the switch only after a relaunch of the browser. note that you can combine switches as in the example below. srcdir srcdir is a filespecobject representing the source destination of the installation. filespecobjects like that required by this function are created using the getfolder method on the install object. xpipath xpipath is the path within the xpi in where the contents.rdf file defining the chrome is located. for example, "locale/mylocale/aim," points to the locale/mylocale/aim subdirectory of the same xpi file in which the installation script is located. returns an integer error code. for a list of poss...

Return Codes - Archive of obsolete content
. on windows nt, you may only need to restart the application as long as you did not replace operating system files. bad_package_name -200 a problem occurred with the package name supplied to initinstall unexpected_error -201 an unrecognized error occurred. access_denied -202 the user (or the os) did not grant the required security privilege. execution_error -203 an error occurred executing the script no_install_script -204 installation script was not signed no_certificate -205 extracted file is not signed or the file (and, therefore, its certificate) could not be found. no_matching_certificate -206 extra...

equalsize - Archive of obsolete content
ualsize type: one of the values below this attribute can be used to make the children of the element equal in size. always for a horizontally oriented element, this will make all of its children have the width of the widest child. for a vertically oriented element, this will make its children all have the height of the tallest child. never all of the children are displayed at the size required by the content or as specified by the width and height attributes or the css width and height properties. ...

Deprecated and defunct markup - Archive of obsolete content
bel> or <description> but does not wrap; like <label crop="end">; had been used in menus/toolbars) <textfield> (like <textbox>) <thumb> (<button> with deprecated <gripper>; implements sliding box in center of scrolbar) <title> (to add a caption on a <titledbox> <titledbox> (box with a frame) <titledbutton> (attempt to combine text and images before <button>) <toolbarpaletteitem> required to embed non-buttons in customisable toolbars --neil 03 march 2011 <treebody> (old/experimental and unsupported xul tags) lives on as the internal name for the ancestor <treechildren> element --neil 03 march 2011 <treecaption> (old/experimental and unsupported xul tags) <treecolgroup> (former name for <treecols> <treecolpicker> (internal use only; part of xbl for <tree>) <treefoot> ...

SQLite Templates - Archive of obsolete content
<label value="?name"/> <label value="?email"/> </hbox> </action> </template> </vbox> this template displays the results of two columns. any occurance of a question mark in the action body is replaced with the value from the query results. here, this is used two times, once to display the name and the second to display the email. the uri attribute on the hbox element is required on one element within the action body. for sqlite queries it will almost always be on the outermost node. note also that the query statement has a where clause which restricts the rows to those with an age greater or equal to 30. query parameters sometimes, you will want to adjust the query depending on certain criteria. one possibility is to simply use methods to adjust the text within the query...

Simple Query Syntax - Archive of obsolete content
bel value="rdf:http://purl.org/dc/elements/1.1/title http://www.xulplanet.com/rdf/country"/> the 'rdf:' form is really equivalent to the <binding> tag in the full syntax. the subject of the binding is the result member resource, the predicate is the string that comes after 'rdf:' and the object isn't necessary as the value is replaced directly in the attribute. as with bindings, the value is not required to match, so the data doesn't have to exist in the rdf graph. if one photo doesn't have a title, it will be replaced with an empty string. the special value 'rdf:*' means the uri of the result resource, rather than referring to a predicate. it would be equivalent to ?photo variable in this example if the full syntax was used. you can see in the example that the value 'rdf:*' is used in two places...

SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
adds a customizable button to all seamonkey's toolbars. it adds a menu choice to chatzilla's menu bar (because chatzilla has no toolbar). note: for a similar tutorial that applies to seamonkey 2, firefox, thunderbird and sunbird, see: custom toolbar button earlier versions and other mozilla applications also support extensions, but some parts of this tutorial are not appropriate for them. required tools you will need two tools. your operating system normally provides them: a way to create and work with files and directories a text editor for plain text files character encoding some text editors have a setting for character encoding. if your language uses only plain latin (ascii) characters, set your text editor to use any encoding except unicode. if your language uses accents or othe...

Custom toolbar button - Archive of obsolete content
lphas, betas and release candidates) are also ok. in the rest of this page, the term application means the mozilla application where you want to add the button. note: there is a similar tutorial for seamonkey 1.x on the page: custom toolbar button:seamonkey earlier versions and other mozilla applications also support extensions, but some parts of this tutorial are not appropriate for them. required tools you will need two tools. your operating system normally provides them: a way to create and work with files and directories a text editor for plain text files character encoding some text editors have a setting for character encoding. if your language uses only plain latin (ascii) characters, set your text editor to use any encoding except unicode. if your language uses accents or ...

Tree Widget Changes - Archive of obsolete content
that means that the ids can be left out, although it's probably a good idea to use them anyway. instead of identifying columns by id, a new column object is used. this object implements the nsitreecolumn interface and holds information about a single column in the tree. a tree will have one of these objects for each column (each treecol element) in the tree. the columns are grouped into a list which implements the nsitreecolumns interface. ...

Creating Dialogs - Archive of obsolete content
false should be returned instead. this would be used, for example, if an invalid value was entered in a field in the dialog. amongst other useful attributes are buttonlabelaccept - label to appear on the accept button egsave buttonaccesskeyaccept - access key to use for the accept button egs defaultbutton - button is activated when the enter key is pressed note: the label attributes are required by remote sites and are probably missing in the above examples due to bug 224996. example dialog with more features <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog id="mydialog" title="my dialog" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="window.sizetocontent();" buttons="accept,...

Creating an Installer - Archive of obsolete content
lled. our find files example let's try this with the find files dialog. function donefn ( name , result ){ if (result) alert("an error occured: " + result); } var xpi = new object(); xpi["find files"] = "findfile.xpi"; installtrigger.install(xpi,donefn); the xpi archive note: if you want to create a new xulrunner application, extension, or theme, see bundles. the installer xpi file is required to contain one file called install.js which is a javascript file which is executed during the installation. the remaining files are the files to be installed. these files will typically be placed inside a directory in the archive but they do not have to be. for chrome files, they might be structured like the chrome directory. often, the only files placed in an xpi archive will be the install scr...

More Event Handlers - Archive of obsolete content
nts are described. the event object every event handler is passed an event object. in the attribute form of the event handler, the event object is an implied argument to the script code which can be referred to using the name 'event'. in the addeventlistener form, the first argument passed to the listener function will be the event object. other arguments can be passed to a listener function, if required. the event object has a number of properties which can be examined during an event. for a full list, see the reference. we already saw the event's target property in the last section. it holds a reference to the element where the event occurred. a similar property currenttarget holds the element that is currently having its event listeners handled. in the example below, currenttarget is always t...

Skinning XUL Files by Hand - Archive of obsolete content
cessary. software components and users will be able to update the chrome registry and change the global skin. and with the advent of new css2 conventions like positioning, the changes you can make to the presentation and behavior of the basic structure in a xul file is dramatic. the syntax for creating all this information with text -- added to the distributed nature and the sheer volume of text required to define a single chrome -- can sometimes make the progress seem slow. but the advantages of using xul so far outweigh those of using the standard c++ toolkits that xul authoring should rightfully be considered in a separate category of development. xul represents, as one evangelist put it, the "democratization" of interface design and ofapplications development, about which we will have more to...

Tree View Details - Archive of obsolete content
nerempty and iscontaineropen that are used to handle a parent item in the tree. the iscontainer method should return true if a row is a container and might contain children. the iscontainerempty method should return true if a row is an empty container, for instance, a directory with no files in it. the iscontaineropen method is used to determine which items are opened and closed. the view is required to keep track of this. the tree will call this method to determine which containers are open and which are closed. note that the tree will call neither iscontainerempty nor iscontaineropen for rows that are not containers as indicated by the return value of the iscontainer method. a container may be rendered differently than a non-container. for instance, a container may have a folder icon bes...

Trees - Archive of obsolete content
placeholder for a set of treecol elements. treecol this is used to declare a column of the tree. by using this element, you can specify additional information about how the data in the columns are sorted and if the user can resize the columns. you should always place an id attribute on a column, as mozilla uses the ids to identify the columns when rearranging and hiding them. this is no longer required in mozilla 1.8 and later, but it is still a good idea to use ids on columns. treechildren this contains the main body of the tree where the individual rows of data will be displayed. example tree with two columns example 1 : source view <tree flex="1"> <treecols> <treecol id="namecolumn" label="name" flex="1"/> <treecol id="addresscolumn" label="address" flex="2"/> </treecols> ...

XUL Structure - Archive of obsolete content
files will be installed onto the user's machine. the extension will hook into the browser using a xul specific feature called an overlay which allows the xul from the extension to mesh with the xul in the browser. to the user, it may seem like the extension has modified the browser, but in reality, the code is all separate, and the extension may be easily uninstalled. registered packages are not required to use overlays, of course. if they don't, you won't be able to access them via the main browser interface, but you can still access them via the chrome url, if you know what it is. standalone xul applications may include xul code in a similar way, but, of course, the xul for the application will be included as part of the installation, instead of having to be installed separately as an extensio...

XUL element attributes - Archive of obsolete content
ualsize type: one of the values below this attribute can be used to make the children of the element equal in size. always for a horizontally oriented element, this will make all of its children have the width of the widest child. for a vertically oriented element, this will make its children all have the height of the tallest child. never all of the children are displayed at the size required by the content or as specified by the width and height attributes or the css width and height properties. flags type: space-separated list of the values below a set of flags used for miscellaneous purposes. two flags are defined, which may be the value of this attribute. dont-test-empty: for template generated content, the builder will not check that a container is empty. dont-...

key - Archive of obsolete content
o indiciate that a modifier key may optionally be pressed, place the word 'any' after listing the optional modifier key. for example: <key key="r" modifiers="shift any control"/> in this example, the shift key may or may not be pressed, while the control key must be pressed. this allows keys to match more loosely for modifier keys that aren't relevant, yet still allows specific modifiers to be required. if the modifiers attribute is not specified, then no modifiers may be pressed for the key to match. if neither the key or keycode attribute are used, the key element will handle all key events. however, if one of the attributes is set to an empty string, the element doesn't handle any key events. for example: <!-- this element handles all key events --> <key/> <!-- these elements don't handl...

Application Update - Archive of obsolete content
ng for incompatibilities only if there are versioninfo // updates available to installed addons that resolve them, not newer // versions. pref("app.update.incompatible.mode", 0); update server follow the instructions here to setup an update server for your xulrunner application to query. i opted for the simpler approach of not using the update php script. https is recommended but not required (yet). update.xml the format is outlined here process as best i can tell here's how the update process works. at the scheduled interval the application checks the update server for update.xml, search for the correct one using the software name, versions, build id's, channels, and other information like locales. if the update.xml file doesn't exist there is no update. update.xml contains ...

Custom app bundles for Mac OS X - Archive of obsolete content
the first sub-directory is called contents and within that directory you will place several files and folders that are needed by your applic...

Getting started with XULRunner - Archive of obsolete content
this might also be simplified using a very simple shell script (i call mine "run.sh"): #!/bin/sh /library/frameworks/xul.framework/xulrunner-bin `pwd`/application.ini linux on ubuntu, you can run the application from a terminal. first change into the \myapp folder, then start the application by: xulrunner application.

XULRunner Hall of Fame - Archive of obsolete content
asy way to experiment with xul" xulexplorer a patched version of xul explorer to re-enable application and extension skeleton generation. foxkeh clock (for japanese page) a clock application based charactor foxkeh. pyjamas-desktop a python web widget toolkit (similar to pyqt4 and pygtk2) that uses xulrunner dom to implement the widgets and event handling. python-hulahop is required python-hulahop from the olpc sugarlabs a python gtk widget with xulrunner embedded, providing full access to nsi dom and all other xulrunner interfaces, in a gtk window. it's possible to create your own python web browser with hulahop, and much much more besides. xuljet a framework that helps to create platform independent desktop applications directly in javascript ...

application/http-index-format specification - Archive of obsolete content
le. syntax every line in the file must conform to the following generic syntax: number: data where number is at least a three digit number (note that more digits are possible in the future) and data is separated from number by a colon and a space. the syntax of data is defined by the syntax spec for every number type. if a number is encountered that a parser does not understand the parser is required to ignore that line. there is no line length limit. all lines must be terminated by a carriage return followed by a line feed. number codes 100 a human readable comment line. machine parsers should ignore this data. this data is not intended for display to the end user and is only meant as a comment to make the file format clear to a human interpreter. 101 pre formatted human readable inf...

calICalendarView - Archive of obsolete content
the current state of those nodes. it should be noted, however, that the methods and attributes implemented by a calicalendarview need not behave in any predictable fashion. for instance, when the showdate method of the the calendar-multiday-view (an implementation of this interface) will sometimes show an entire week of dates, and sometimes show only the single date passed in. this allows lack of required predictability allows calicalendarview implementations to be re-used in a variety of sitatuations. it also fueled the development, however, of the more predictable, but less flexible calidecoratedview, which usually contains an embedded calicalendarview. calendar/base/public/calicalendarview.idlscriptable please add a summary to this article. last changed in gecko ? interface code [s...

2006-10-06 - Archive of obsolete content
hence, they are looking for a mac user to test out the new features by building a mac.rdf file with all of the various .mac account properties mentioned in the document here. ...

2006-11-17 - Archive of obsolete content
sed. discussions how to translate mozilla to a language called quiché how to translate mozilla to a language called quiché. how to start a localization how to start a localization po format usage discussion on how to make l10n easier due to expansion to 100 locales. quick builds for localisers (full or partial) discussion on moz-l10n-builder, which automates many of the functions required in localization process. link is located here. going to fosdem 2007 fosdem 2007 (free and open source software developers' european meeting), february 24th - 25th. mozilla developers will be having a room, and everyone is invited. link to the event here. meetings none for this week. authors paul yanchun gu (gpaul) aditya nanda kuswanto(vipers101) ...

2006-10-20 - Archive of obsolete content
summary: mozilla.dev.quality - october 13-october 20, 2006 announcements completed rc3 testing - the key testing activities for rc3 has been completed. there are a few concerns with the software updates, and a decision is required on this before a "go" for rc3 release can be given. announced by tim on friday october 13, 2006. help required designing new home for quality.mozilla.org - talented web designers and/or artists interested in helping the design for quality.mozilla.org please read this posting. if your theme is chosen you will be placed on the hall of fame and will receive a gift from mozilla. posted by jay patel on october 18th, 2006. discussions none for this week meetings upcoming firefox test day - testing will be emphasized on ajax/web 2.0, dhtml, and plugin heavy site...

NPAnyCallbackStruct - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary note: this structure is only used on unix platforms. contains information required during embedded mode printing. syntax typedef struct { int32 type; } npanycallbackstruct; fields the data structure has the following field: type always contains np_print. description callback structures are used to pass platform-specific information. the npanycallbackstruct structure contains information required by the platformprint field of the npembedprint structure during embedded mode printing. during printing in embedded mode, the platformprint field of the npembedprint structure points to an npanycallbackstruct. this structure contains the file pointer to which the plug-in should write its postscript data. at the time ...

NPN_PostURL - Archive of obsolete content
rm data to cgi scripts using http or upload files to a remote server using ftp. you cannot use npn_posturl to specify headers (even a blank line) in a memory buffer. to do this, use npn_posturlnotify. for protocols in which the headers must be distinguished from the body, such as http, the buffer or file should contain the headers, followed by a blank line, then the body. if no custom headers are required, simply add a blank line ('\n') to the beginning of the file or buffer. npn_posturl is typically asynchronous: it returns immediately and only later handles the request. for this reason, you may find it useful to call npn_posturlnotify instead; this function notifies your plug-in upon successful or unsuccessful completion of the request. see also npn_geturl, npn_geturlnotify, npn_posturlnotify, n...

NPP_WriteReady - Archive of obsolete content
description the browser calls npp_writeready before each call to npp_write to determine whether a plug-in can receive data and how many bytes it can receive. this function allows the browser to send only as much data to the instance as it can handle at one time, making resource use more efficient for both the browser and plug-in. the npp_write function may pass a larger buffer, but the plug-in is required to consume only the amount of data returned by npp_writeready. the browser can write a smaller amount of data if desired or necessary; for example, if only 8k of data is available in a network buffer. if the plug-in is allocating memory for the entire stream at once (an as_file stream), it can return a very large number. because it is not processing streaming data, the browser can pass as much da...

NPPrintCallbackStruct - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary contains information required by the platformprint field of the npembedprint structure during embedded mode printing on unix systems. this structure is only used on unix. syntax typedef struct { int32 type; file* fp; } npprintcallbackstruct; fields the data structure has the following fields: type always contains np_print. fp pointer to the file to which the plug-in should write its postscript data. description callback structures are used to pass platform-specific information. the npprintcallbackstruct structure contains the file pointer to which the plug-in should write its postscript data. this information is required by the platformprint field of the npembedprint structure during embedded mode printing. ...

NPSetWindowCallbackStruct - Archive of obsolete content
ribute. x visual for the plug-in window or drawable. colormap standard x toolkit attribute. colormap for the plug-in window or drawable. depth standard x toolkit attribute. depth of the plug-in window or drawable. description callback structures are used to pass platform-specific information. the npsetwindowcallbackstruct object, allocated by the browser, contains information required for the ws_info field of an npwindow. the npp_setwindow() function passes a pointer to this structure to the plug-in. the structure is valid for the lifetime of the npwindow, that is, until npp_setwindow() is called again or the instance is destroyed. the type field of this structure always contains np_setwindow. the remaining fields are standard x toolkit attributes of the top-level shell window...

NP_Port - Archive of obsolete content
syntax typedef struct np_port { cgrafptr port; /* grafport */ int32 portx; /* position inside the topmost window */ int32 porty; } np_port; fields the data structure has the following fields: port standard mac os port into which the plug-in should draw. portx, porty top-left corner of the plug-in rectangle in port coordinates (taking the scroll position into account). ...

Shipping a plugin as a Toolkit bundle - Archive of obsolete content
every add-on must have a unique id. this can be in a guid form but the simpler email form is preferred now. you should aim to use a domain-name that you own and then your own unique short-name for the plugin before 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 ve...

The First Install Problem - Archive of obsolete content
ule. this is the path to the actual dll. (note that the file name must still begin with "np", just as it must when the file is loaded from the .\plugins directory.) example: [hkey_local_machine\software\mozillaplugins\@mycompany.com/myapplication,version=5.01] path=c:\mycompany\myapplication\netscape\npmyapp.dll "xptpath" -- string value -- absolute path to xpt module required for scripting plug-in, if applicable example: [hkey_local_machine\software\mozillaplugins\@mycompany.com/myapplication,version=5.01] xptpath=c:\mycompany\myapplication\netscape\npmyapp.xpt "geckoversion" -- this is the optional mention of the minimal gecko version that the browser is compatible with. example: [hkey_local_machine\software\mozillaplugins...

Syndicating content with RSS - Archive of obsolete content
icons rss (and other) feeds use a special icon. it is recommended that you too use this icon when creating the special <a> link to your feed. the icon looks like the following: you can get more icons like this from feed icons. (other sizes and colors, along with their source files, are available too.) advanced syndication techniques although this advanced technique for syndication is not required, support of this is recommended, especially for web sites and applications with high performance needs. the http protocol, one of the core technologies behind the web, provides a way of prioritizing the content type that an http client prefers to receive. this technique takes advantage by having the client prefer rss (over html or other formats). here's a simple example of it being done: accept...

Security Controls - Archive of obsolete content
nfidentiality, integrity, or availability. protection measures (otherwise known as security controls) tend to fall into two categories. first, security weaknesses in the system need to be resolved. for example, if a system has a known vulnerability that attackers could exploit, the system should be patched so that the vulnerability is removed or mitigated. second, the system should offer only the required functionality to each authorized user, so that no one can use functions that are not necessary. this principle is known as least privilege. limiting functionality and resolving security weaknesses have a common goal: give attackers as few opportunities as possible to breach a system. there are three types of security controls, as follows: management controls: the security controls that focus ...

Introduction to SSL - Archive of obsolete content
server authentication, the client encrypts the premaster secret with the server's public key. only the corresponding private key can correctly decrypt the secret, so the client has some assurance that the identity associated with the public key is in fact the server with which the client is connected. otherwise, the server cannot decrypt the premaster secret and cannot generate the symmetric keys required for the session, and the session will be terminated. in the case of client authentication, the client encrypts some random data with the client's private key-that is, it creates a digital signature. the public key in the client's certificate can correctly validate the digital signature only if the corresponding private key was used. otherwise, the server cannot validate the digital signature and...

SSL and TLS - Archive of obsolete content
y will use to authenticate each other, to transmit certificates, and to establish session keys. key-exchange algorithms like rsa and elliptic curve cryptography (ecc) govern the way the server and client determine the symmetric keys to use during an ssl session. the most common ssl cipher suites use rsa key exchange, while tls supports ecc cipher suites as well as rsa. note: longer rsa keys are required to provide security as computing capabilities increase. the recommended rsa key-length is 2048 bits. though many web servers continue to use 1024-bit keys, web servers should migrate to at least 2048 bits. for 64-bit machines, consider using stronger keys. all cas should use at least 2048-bit keys, and stronger keys (such as 3072 or 4096 bits) if possible. as pkis using rsa keys and certificates...

Common Firefox theme issues and solutions - Archive of obsolete content
when text only toolbar buttons are selected in customize toolbars, text labels in toolbar buttons may not align properly. the common cause of this is style rules that reference [iconsize="small"] without excluding [mode="text"]. the solution usually is to append :not ([mode="text"]) to those style rules. for instance use toolbar[iconsize="small"]:not ([mode="text"]). a little experimenting may be required to fully address this issue with your theme. address bar identity box is missing padlock icons for secure sites in firefox 14 and later the identity box has been significantly changed and the favicon has been replaced by an icon that indicates the website's status. in the case of secure sites the icon must be a padlock. to fix this issue, you need to copy the files chrome://browser/skin/identi...

Browser Detection and Cross Browser Support - Archive of obsolete content
features authoring content which is standards compliant is the easiest way to support the widest range of user agents and to decrease your maintenance costs. while it is not always possible to avoid vendor/version specific differences between browsers, the use of such features and the distinction between browsers based on vendor/version should be strictly limited to those areas where it is still required. limit the use of user agent string based detection server side browser detection requires the use of user agent strings. we recommend that the use of user agent string based detection be limited to server side situations and except in those circumstances where it is absolutely required such as when details of the gecko branch are required. there are legitimate reasons to use the user agent st...

CSS - Archive of obsolete content
ontrast-adjust css property is a microsoft extension that gets or sets a value indicating whether to override any css properties that would have been set in high contrast mode.-ms-hyphenate-limit-charsthe -ms-hyphenate-limit-chars css property is a microsoft extension that specifies one to three values indicating the minimum number of characters in a hyphenated word. ...

Date.getVarDate() - Archive of obsolete content
return value returns a vt_date value. remarks the getvardate() method is used when javascript code interacts with com objects, activex objects, or other objects that accept and return date values in vt_date format. these include objects in visual basic and visual basic scripting edition (vbscript). the actual format of the returned value depends on regional settings. ...

Enumerator.atEnd - Archive of obsolete content
the atend method returns true if the current item is the last one in the collection, the collection is empty, or the current item is undefined. otherwise, it returns false. ...

Enumerator.item - Archive of obsolete content
the item method returns the current item. if the collection is empty or the current item is undefined, it returns undefined. ...

Enumerator.moveFirst - Archive of obsolete content
if there are no items in the collection, the current item is set to undefined. ...

Enumerator.moveNext - Archive of obsolete content
if the enumerator is at the end of the collection or the collection is empty, the current item is set to undefined. ...

Error.description - Archive of obsolete content
any instance of an error object. stringexpression optional. a string expression containing a description of the error. remarks the description property contains the error message string associated with a specific error. ...

GetObject - Archive of obsolete content
non-standard. do not use! this object is a microsoft extension and is only supported in internet explorer versions prior to ie 9 (standards mode). the getobject function returns a reference to an automation object from a file. syntax getobject([pathname] [, class]) parameters pathname full path and name of the file containing the object to retrieve. if pathname is omitted, class is required. class optional class of the object. the class argument uses the syntax appname.objectype and has these parts: appname name of the application providing the object. objectype type or class of object to create. remarks the getobject function is not supported in internet explorer 9 standards mode, internet explorer 10 standards mode, internet explorer 11 standards mode, and windows store ...

VBArray.dimensions - Archive of obsolete content
example the dimensions method provides a way to retrieve the number of dimensions in a specified vbarray. the following example consists of three parts. the first part is vbscript code to create a visual basic safe array. ...

VBArray.toArray - Archive of obsolete content
the conversion translates the multidimensional vbarray into a single dimensional javascript array. each successive dimension is appended to the end of the previous one. ...

Old Proxy API - Archive of obsolete content
fundamental traps isn't implemented and the proxy is used in a way that expects the fundamental trap to be defined, then an error is thrown. if a derived trap is implemented, then that trap's code is called whenever the corresponding behavior happens on the proxy. if the derived trap is undefined, a default implementation using the fundamental traps is used. in other words: fundamental traps are required, derived traps are optional. fundamental traps emulated javascript code handler method description object.getownpropertydescriptor(proxy, name) getownpropertydescriptor: function(name) -> propertydescriptor | undefined should return a valid property descriptor object, or undefined to indicate that no property with name exists in the emulated object. object...

Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
passes validation client-side, submit results to the processor if( validatecomments( name, email, message ) ) { formprocessor( name, email, message ); // update the logger with the most recent entry document.getelementbyid( "out-logger" ).innerhtml += "name: " + name + "<br/>email: " + email + "<br/>message: " + message + "<br/><br/>"; } else { ext.msg.alert( "error", "please enter the required fields" ); } } </script> <!-- processes the form contents --> <script runat="server"> function formprocessor( name, email, message ) { // perform the same validation of the data server-side if( !validatecomments( name, email, message ) ) { throw "incomplete data was submitted."; } // assemble the string var s = "name: " + name + "<br/>" + "email: " + email + "<br/>" + "message: " + mes...

Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
the internet. you could see the actual fish in the mythical netscape headquarters, any time of the day or night! (assuming the lights were on.) it was cool, it was funny, it was pretty amazing. it's also a weird feeling when someone asks you to work on something that has near-legendary status in your mind. it's like a scuba enthusiast getting to join jacques cousteau on a dive, even down to the required time travel. i dove right in and decided to have some fun with with the redesign, which is why i rather like the final result. to share the joy, i herein present a look into just one piece of the redesign, and how i accomplished certain effects using simple html and some css. marking up the fish in the old fish cam page, there was a table that contained the pictures and descriptions of the fish...

Building Mozilla XForms - Archive of obsolete content
irefox 3.6 any more not developed any more last release: 0.8.6 firefox 4 gecko 2.0 mercurial, repositories mozilla-central xforms schema-validation mostly works upcoming 0.8.7 release if you have your first working firefox build, you can go on with building the xforms extension. firefox 3.5 and up: get the source code if you want to build xforms for firefox up to 3.0, you already have the required source code, it's part of your cvs checkout. skip to the next section. starting with firefox 3.5, you need to do two more mercurial checkouts: cd extensions hg clone http://hg.mozilla.org/xforms hg clone http://hg.mozilla.org/schema-validation that's it, you now have everything you need to get started. configure your build: the .mozconfig file mozilla uses a file called .mozconfig in your home di...

XForms Submit Element - Archive of obsolete content
the submission element (see the spec) specified in its submission attibute. attributes ui common appearance - the value of this attribute gives a hint to the xforms processor as to which type of widget(s) to use to represent this control. accesskey - used to specify the keyboard shortcut for focusing this control. single-node binding special submission - required reference to element submission. type restrictions the submit element can be bound to a node containing data of any type. actually, the submit element doesn't interact with the data in the bound node. however, the relevant model item property on the bound node has an effect on a submit. if the bound node is irrelevant, then the submit will be hidden. representations the xforms submit ele...

Mozilla XForms User Interface - Archive of obsolete content
nds to a node that has a type of xsd:date, we output the date value as plain text. an output bound to a date and also having @appearance='full' will display as a calendar. this article uses several notations. if you see fx 3.0 only, that means that the control will only be available for firefox 3.0 (gecko 1.9). there are several possible reasons for this restriction. the first is that the changes required for such controls could not be safely made to firefox 1.5 or firefox 2.0. the second is that the control is introduced in xforms 1.1 and we don't feel adding the enhancement would be prudent until the 1.1 spec is more stable. for instance, when the spec reaches 'recommendation'-level status. if you see xhtml/xul then it means the control is available when xforms is hosted in either xhtml or xul. ...

Choosing Standards Compliance Over Proprietary Practices - Archive of obsolete content
maximizes the organization's investment. other standards it is also important to follow other types of standards across an organization. there are numerous standards organizations that affect how and why we do what we do. for example, in the accounting arena there is fasb (financial accounting standards board) and iasb (international accounting standards board). all businesses are expected and required to follow the guidelines set forth by the fasb. when auditors evaluate an organizations financial health, they do so by following the fasb rules. focusing on the software development portion of an organization, there are numerous standards bodies that can affect development decisions. for example, if an organization is developing a web-based client, they may have to adhere to standards imposed b...

Describing microformats in JavaScript - Archive of obsolete content
ition format the microformat definition must contain the following entries: mfversion specifies the version number of the microformat api to which the definition was written. for firefox 3, this should be set to 0.8. mfobject the javascript object that implements the microformat. classname a string specifying the name of the microformat's class as referenced in html (class="classname"). required an array indicating the names of any properties that must be specified. 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 bo...

Archive of obsolete content
here at mdn, we try to avoid outright deleting content that might be useful to people targeting legacy platforms, operating systems, and browsers. perhaps your target audience is people that are using older hardware, for example, and can't upgrade to the latest and greatest browsers. or for "reasons," your company is required to use very old software and you need to build web content that runs on that software. or perhaps you're just curious about the history of an obsolete feature or api, and how it worked. there are many reasons older documentation can be useful. so, we've established this area into which we can archive older documentation. material in this archived content zone should not be used for building new web sites or app...

bootstrap.js - Extensions
the bootstrap.js script should contain several specific functions, which are called by the browser to manage the extension. the script gets executed in a privileged sandbox, which is cached until the extension is shut down. for more information, see bootstrapped extensions. the example below contains the required methods in vsdoc format. function startup(data, reason) { /// bootstrap data structure @see /docs/extensions/bootstrapped_extensions#bootstrap_data /// string id /// string version /// nsifile installpath /// nsiuri resourceuri /// /// reason types: /// app_startup /// addon_enable /// addon_install /// addon_upgrade /// addon_downgrade } function shutdown(data, reason) { /// bootstrap data structure @see /do...

Anatomy of a video game - Game development
experienced game programmers who are new to web development could also benefit, too. ...

Index - Game development
...

Game distribution - Game development
o prepare a game for them as such an action involves little to no modification of the game itself — usually adding a manifest file containing necessary information in a zipped package containing all the resources is enough. the chrome web store is also an attractive option — again, having a manifest file ready, zipping your game and filling in the online submission form is about all that's required. tizen is also putting a high value on supporting apps written in javascript. their store is another available option. native mobile stores when it comes to the mobile market, there's the apple app store for ios, google play for android and all the rest of the competition. native stores are already filled with established devs selling great games, so you have to be talented and lucky to get n...

Building up a basic demo with Three.js - Game development
opening it in your browser. you should now see a gray window. congratulations! geometry now our scene is properly rendering, we can start adding 3d shapes. to speed up development, three.js provides a bunch of predefined primitives, which you can use to create shapes instantly in a single line of code. there's cubes, spheres, cylinders, and more complicated shapes available. detail like drawing required vertices and faces, for a given shape, is handled by the three framework, so we can focus on higher level coding. let's start, by defining the geometry for a cube shape, adding the following just above the render() function: var boxgeometry = new three.boxgeometry(10, 10, 10); in this case, we define a simple cube that is 10 x 10 x 10 units. the geometry itself is not enough though, we also ne...

GLSL Shaders - Game development
e code example that renders a cube. to speed up the background code we will be using the three.js api. as you may remember from the basic theory article, a vertex is a point in a 3d coordinate system. vertices may, and usually do, have additional properties. the 3d coordinate system defines space and the vertices help define shapes in that space. shader types a shader is essentially a function required to draw something on the screen. shaders run on a gpu (graphics processing unit), which is optimized for such operations. using a gpu to deal with shaders offloads some of the number crunching from the cpu. this allows the cpu to focus its processing power on other tasks, like executing code. vertex shaders vertex shaders manipulate coordinates in a 3d space and are called once per vertex. the ...

Audio for Web games - Game development
ck is in a state to be playable. note: in many ways the concept of buffering is an outdated one. as long as byte-range requests are accepted (which is the default behavior), we should be able to jump to a specific point in the audio without having to download the preceding content. however, preloading is still useful — without it, there would always need to be some client-server communication required before playing can commence. concurrent audio playback a requirement of many games is the need to play more than one piece of audio at the same time; for example, there might be background music playing along with sound effects for various things happening in the game. although the situation is soon going to get better with the adoption of the web audio api, the current most widely-supported m...

Implementing game control mechanisms - Game development
boot.js, preloader.js, mainmenu.js and game.js — these are loaded into the index file in this exact order. the first one initializes phaser, the second preloads all the assets, the third one controls the main menu welcoming the player, and the fourth controls the actual gameplay. every state has its own default methods: preload(), create(), and update(). the first one is needed for preloading required assets, create() is executed once the state had started, and update() is executed on every frame. for example, you can define a button in the create() function: create: function() { // ... var buttonenclave = this.add.button(10, 10, 'logo-enclave', this.clickenclave, this); // ... } it will be created once at the start of the game, and will execute this.clickenclave() action assigned to it...

Tiles and tilemaps overview - Game development
s) or to create a level editor. some popular games that use this technique are super mario bros, pacman, zelda: link's awakening, starcraft, and sim city 2000. think about any game that uses regularly repeating squares of background, and you'll probably find it uses tilemaps. the tile atlas the most efficient way to store the tile images is in an atlas or spritesheet. this is simply all of the required tiles grouped together in a single image file. when it's time to draw a tile, only a small section of this bigger image is rendered on the game canvas. the below images shows a tile atlas of 8 x 4 tiles: using an atlas also has the advantage of naturally assigning every tile an index. this index is perfect to use as the tile identifier when creating the tilemap object. the tilemap data struct...

Collision detection - Game development
positions of all the bricks in the group. the third, optional parameter is the function executed when a collision occurs — ballhitbrick(). create this new function as the bottom of your code, just before the closing </script> tag, as follows: function ballhitbrick(ball, brick) { brick.kill(); } and that's it! reload your code and you should see the new collision detection working just as required. thanks to phaser there are two parameters passed to the function — the first one is the ball, which we explicitly defined in the collide method, and the second one is the single brick from the bricks group that the ball is colliding with. inside the function we remove the brick in question from the screen simply by running the kill() method on it. you would expect to have to write a lot more...

Initialize the framework - Game development
next » this is the first of 16 tutorials to learn how to use gamedev phaser. after completing this tutorial you can find the source code for this section at gamedev-phaser-content-kit/demos/lesson01.html. before we can start writing the game's functionality, we need to create a basic structure to render the game inside. this can be done using html — the phaser framework will generate the required <canvas> element. the game's html the html document structure is quite simple, as the game will be rendered entirely on the <canvas> element generated by the framework. using your favourite text editor, create a new html document, save it as index.html, in a sensible location, and add the following code to it: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>gamedev phaser...

Plug-in Development Overview - Gecko Plugin API Reference
file extensions in alternating strings. for example: str 128 mime type string 1 video/quicktime string 2 mov, moov string 3 audio/aiff string 4 aiff string 5 image/jpeg string 6 jpg several other optional strings may contain useful information about the plug-in. plug-ins must support 'str#' 128 but are not required to support any of these others: str#' 127 can contain a list of mime type descriptions corresponding to the types in 'str#' 128 . for example, this description list corresponds to the types in the previous example: string 1: "quicktime video", string 4: "aiff audio", and string 5: "jpeg image format." str#' 126: string 1 can contain a descriptive message about the plug-in. this message, wh...

Code splitting - MDN Web Docs Glossary: Definitions of Web-related terms
ous 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 webpack and browserify which can create ...

Control flow - MDN Web Docs Glossary: Definitions of Web-related terms
which the computer executes statements in a script. code is run in order from the first line in the file to the last line, unless the computer runs across the (extremely frequent) structures that change the control flow, such as conditionals and loops. for example, imagine a script used to validate user data from a webpage form. the script submits validated data, but if the user, say, leaves a required field empty, the script prompts them to fill it in. to do this, the script uses a conditional structure or if...else, so that different code executes depending on whether the form is complete or not: if (field==empty) { promptuser(); } else { submitform(); } a typical script in javascript or php (and the like) includes many control structures, including conditionals, loops and function...

DTLS (Datagram Transport Layer Security) - MDN Web Docs Glossary: Definitions of Web-related terms
curity. as a datagram protocol, dtls doesn't guarantee the order of message delivery, or even that messages will be delivered at all. however, dtls gains the benefits of datagram protocols, too; in particular, the lower overhead and reduced latency. these features are especially useful for one of the most common areas in which dtls comes into play: webrtc. all of the webrtc related protocols are required to encrypt their communications using dtls; this includes sctp, srtp, and stun. learn more general knowledge datagram transport layer security on wikipedia specifications rfc 6347: datagram transport layer security version 1.2 datagram transport layer security protocol version 1.3 draft specification related specifications rfc 5763: framework for establishing a secure real-time tr...

Doctype - MDN Web Docs Glossary: Definitions of Web-related terms
its sole purpose is to prevent a browser from switching into so-called “quirks mode” when rendering a document; that is, the "<!doctype html>" doctype ensures that the browser makes a best-effort attempt at following the relevant specifications, rather than using a different rendering mode that is incompatible with some specifications. ...

Domain - MDN Web Docs Glossary: Definitions of Web-related terms
ned in a top-level domain registry. "mozilla" is the domain. if you like to own a domain you have to register it with one of the many registrars who are allowed to do so with a top-level domain registry. "developer" is a "sub-domain", something you as the owner of a domain may define yourself. many owners choose to have a subdomain "www" to point to their world_wide_web resource, but that's not required (and has even fallen somewhat out of favor). learn more domain name on wikipedia ...

Domain sharding - MDN Web Docs Glossary: Definitions of Web-related terms
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 initial response from an http request is generally an html file listing other resources such as javascript, 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 ...

Lazy load - MDN Web Docs Glossary: Definitions of Web-related terms
see also lazy loading ...

MVC - MDN Web Docs Glossary: Definitions of Web-related terms
nents follow a more rigid pattern. in the early days of the web, mvc architecture was mostly implemented on the server-side, with the client requesting updates via forms or links, and receiving updated views back to display in the browser. however, these days, more of the logic is pushed to the client with the advent of client-side data stores, and xmlhttprequest allowing partial page updates as required. web frameworks such as angularjs and ember.js all implement an mvc architecture, albeit in slightly different ways. learn more general knowledge model–view–controller on wikipedia ...

Main thread - MDN Web Docs Glossary: Definitions of Web-related terms
n your page, as well as to perform layout, reflows, and garbage collection. this means that long-running javascript functions can block the thread, leading to an unresponsive page and a bad user experience. unless intentionally using a web worker, such as a service worker, javascript runs on the main thread, so it's easy for a script to cause delays in event processing or painting. the less work required of the main thread, the more that thread can respond to user events, paint, and generally be responsive to the user. ...

Media (CSS) - MDN Web Docs Glossary: Definitions of Web-related terms
rs several features that allow you to tweak your document's styles—or even offer different styles—according to the media type (such as screen or print, to name two) or media capabilities (such as width, resolution, or other values) of the viewer's device. learn more general knowledge using media queries technical reference media queries define a set of characteristics or parameters required to apply the css styles that are specified within the curly braces of the media query; for example: only applying certain css styles for devices below 768 pixels. @media at-rule conditionally apply part of a stylesheet, based on the result of a media query. window.matchmedia() test the viewing device against a media query. ...

Progressive Enhancement - MDN Web Docs Glossary: Definitions of Web-related terms
feature detection is generally used to determine whether browsers can handle more modern functionality, while polyfills are often used to add missing features with javascript. special notice should be taken of accessibility. ...

SPA (Single-page application) - MDN Web Docs Glossary: Definitions of Web-related terms
only a single web document, and then updates the body content of that single document via javascript apis such as xmlhttprequest and fetch when different content is to be shown. this therefore allows users to use websites without loading whole new pages from the server, which can result in performance gains and a more dynamic experience, with some tradeoff disadvantages such as seo, more effort required to maintain state, implement navigation, and do meaningful performance monitoring. learn more general knowledge some of the most popular spa frameworks include: react angular vue.js ...

Syntax - MDN Web Docs Glossary: Definitions of Web-related terms
syntax generally includes grammar and the rules that apply to writing it, such as indentation requirements in python. syntax varies from language to language (e.g., syntax is different in html and javascript). although languages can share few similarities in terms of their syntaxes for example "operand operator operand" rule in javascript and python. this does not mean the two langauges share similarities with syntax. syntax applies both to programming languages (commands to the computer) and markup languages (document structure information) alike. ...

Tag - MDN Web Docs Glossary: Definitions of Web-related terms
in html, a tag is used for creating an element. the name of an html element is the name used in angle brackets such as <p> for paragraph. note that the end tag's name is preceded by a slash character, </p>, and that in empty elements, the end tag is neither required nor allowed. if attributes are not mentioned, default values are used in each case. learn more general knowledge html element on wikipedia html elements syntax on whatwg technical reference introduction to html ...

VoIP - MDN Web Docs Glossary: Definitions of Web-related terms
packages include skype, msn messenger, yahoo and many more. everything transferrred through voip is digital. it is also known as ip telephony, or broadband telephony. the main reason for using voip technology is because of cost. voip allows you to make a call directly from a computer, a special voip phone, or a traditional phone connected to a special adapter. a high speed internet connection is required for voip. usually, telephone calls over the internet do not incur further charges beyond what the user is paying for internet access, much in the same way that the user doesn't pay for sending individual emails over the internet. learn more general knowledge voip on wikipedia ...

Test your skills: HTML accessibility - Learn web development
form, and wrap them in an element that associates them all together as a single related group. give the group a description/title that summarises all of the information as personal data. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. html accessibility 3 in this task you are required to turn all the information links in the paragraph into good, accessible links. the first two links just go to regular web pages. the third link goes to a pdf, and it's large — 8mb. the fourth link goes to a word document, so the user will need some kind of application installed that can handle that. try updating the live code below to recreate the finished example: download the star...

What is accessibility? - Learn web development
loss", says the world health organization's deafness and hearing loss fact sheet. people with mobility impairments these people have disabilities concerning movement, which might involve purely physical issues (such as loss of limb or paralysis), or neurological/genetic disorders that lead to weakness or loss of control in limbs. some people might have difficulty making the exact hand movements required to use a mouse, while others might be more severely affected, perhaps being significantly paralyzed to the point where they need to use a head pointer to interact with computers. this kind of disability can also be a result of old age, rather than any specific trauma or condition, and it could also result from hardware limitations — some users might not have a mouse. the way this usually affe...

Images, media, and form elements - Learn web development
ent — this defines simple form fields such as text inputs, through to more complex fields added in html5 such as color and date pickers. there are some additional elements, such as <textarea> for multiline text input, and also elements used to contain and label parts of forms such as <fieldset> and <legend>. html5 also contains attributes that enable web developers to indicate which fields are required, and even the type of content that needs to be entered. if the user enters something unexpected, or leaves a required field blank, the browser can show an error message. different browsers are inconsistent in how much styling and customization they allow for such items. styling text input elements elements that allow for text input, such as <input type="text">, specific types such as <input typ...

Organizing your CSS - Learn web development
of the reasons you might use sass is to be able to define all of the colors and fonts used in a project as settings, then use that variable around the project. this means that if you realise you have used the wrong shade of blue, you only need change it in one place. if we created a variable called $base-color as in the first line below, we could then use it through the stylesheet anywhere that required that color. $base-color: #c6538c; .alert { border: 1px solid $base-color; } once compiled to css, you would end up with the following css in the final stylesheet. .alert { border: 1px solid #c6538c; } compiling component stylesheets i mentioned above that one way to organise css is to break down stylesheets into smaller stylesheets. when using sass you can take this to another level and...

Styling tables - Learn web development
that allows you to easily set column widths by setting width on their headings (<th>). use border-collapse: collapse to make table elements borders collapse into each other, producing a neater and easier to control look. use <thead>, <tbody>, and <tfoot> to break up your table into logical chunks and provide extra places to apply css to, so it is easier to layer styles on top of one another if required. use zebra striping to make alternative rows easier to read. use text-align to line up your <th> and <td> text, to make things neater and easier to follow. test your skills! we have covered a lot in this article, but can you remember the most important information? you can find some further tests to verify that you've retained this information before you move on — see test your skills: tab...

Positioning - Learn web development
ve the position: relative; declaration and add a fixed height, like so: body { width: 500px; height: 1400px; margin: 0 auto; } now we're going to give the <h1> element position: fixed;, and get it to sit at the top of the viewport. add the following rule to your css: h1 { position: fixed; top: 0; width: 500px; margin-top: 0; background: white; padding: 10px; } the top: 0; is required to make it stick to the top of the screen. we give the heading the same width as the content column and then give it a white background and some padding and margin, so the content won't be visible underneath it. if you save and refresh now, you'll see a fun little effect whereby the heading stays fixed, and the content appears to scroll up and disappear underneath it. but we could improve this m...

Responsive design - Learn web development
s on the full-featured desktop version of the site. flexible layout before responsive design a number of approaches were developed to try to solve the downsides of the liquid or fixed-width methods of building websites. in 2004 cameron adams wrote a post entitled resolution dependent layout, describing a method of creating a design that could adapt to different screen resolutions. this approach required javascript to detect the screen resolution and load the correct css. zoe mickley gillenwater was instrumental in her work to describe and formalize the different ways in which flexible sites could be created, attempting to find a happy medium between filling the screen or being completely fixed in size. responsive design the term responsive design was coined by ethan marcotte in 2010 and descr...

How CSS works - Learn web development
css! javascript is handled a bit later on in the process, and we won't talk about it here to keep things simpler. the browser parses the fetched css, and sorts the different rules by their selector types into different "buckets", e.g. element, class, id, and so on. based on the selectors it finds, it works out which rules should be applied to which nodes in the dom, and attaches style to them as required (this intermediate step is called a render tree). the render tree is laid out in the structure it should appear in after the rules have been applied to it. the visual display of the page is shown on the screen (this stage is called painting). the following diagram also offers a simple view of the process. about the dom a dom has a tree-like structure. each element, attribute, and piece of...

create fancy boxes - Learn web development
background-color: #a4c9cf; /* well, actually we are not making a full circle as we want the bottom of our cloud to be flat. feel free to tweak this example to make a cloud that isn't flat at the bottom ;) */ border-radius: 100% 100% 0 0; } /* those are common style that apply to both our ::before and ::after pseudo elements. */ .fancy::before, .fancy::after { /* this is required to be allowed to display the pseudo-elements, event if the value is an empty string */ content: ''; /* we positionnate our pseudo-elements on the left and right sides of the box, but always at the bottom */ position: absolute; bottom : 0; /* this makes sure our pseudo-elements will be below the box content whatever happens. */ z-index : -1; background-color: ...

What do common web layouts contain? - Learn web development
p of every page on the site. contains information relevant to all pages (like site name or logo) and an easy-to-use navigation system. main content the biggest region, containing content unique to the current page. stuff on the side 1) information complementing the main content; 2) information shared among a subset of pages; 3) alternative navigation system. in fact, everything not absolutely required by the page's main content. footer visible at the bottom of every page on the site. like the header, contains less prominent global information like legal notices or contact info. these elements are quite common in all form factors, but they can be laid out different ways. here are some examples (1 represents header, 2 footer; a main content; b1, b2 things on the side): 1-column layout. espe...

What is a Domain Name? - Learn web development
ydomainname.org: $ whois afunkydomainname.org not found as you can see, the domain does not exist in the whois database (at the time of writing), so we could ask to register it. good to know! getting a domain name the process is quite straightforward: go to a registrar's website. usually there is a prominent “get a domain name” call to action. click on it. fill out the form with all required details. make sure especially that you have not misspelled your desired domain name. once it's paid for, it's too late! the registrar will let you know when the domain name is properly registered. within a few hours, all dns servers will have received your dns information. note: in this process the registrar asks you for your real-world address. make sure you fill it properly, since in some c...

Basic native form controls - Learn web development
t of the form data once submitted — for example you might want to submit a timestamp to the server stating when an order was placed. because it is hidden, the user can not see nor intentionally edit the value, it will never receive focus, and a screen reader will not notice it either. <input type="hidden" id="timestamp" name="timestamp" value="1286705410"> if you create such an element, it's required to set its name and value attributes. the value can be dynamically set via javascript. the hidden input type should not have an associated label. other text input types, like search, url, and tel, were added with html5. those will be covered in the next tutorial, html5 input types. checkable items: checkboxes and radio buttons checkable items are controls whose state you can change by clicking...

The HTML5 input types - Learn web development
html form control appearance may be quite different from a designer's specifications, web developers sometimes build their own custom form controls. we cover this in an advanced tutorial: how to build custom form widgets. 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. 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"...

Example 2 - Learn web development
ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> <form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { fon...

Example 3 - Learn web development
class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { fon...

Example 4 - Learn web development
class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { fon...

Example 5 - Learn web development
</li> <li class="option" role="option">lemon</li> <li class="option" role="option">banana</li> <li class="option" role="option">strawberry</li> <li class="option" role="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { fon...

Other form controls - Learn web development
of all the drop-down box types on github at drop-down-content.html (see it live also). select box a simple select box is created with a <select> element with one or more <option> elements as its children, each of which specifies one of its possible values. <select id="simple" name="simple"> <option>banana</option> <option selected>cherry</option> <option>lemon</option> </select> if required, the default value for the select box can be set using the selected attribute on the desired <option> element — this option is then preselected when the page loads. the <option> elements can be nested inside <optgroup> elements to create visually associated groups of values: <select id="groups" name="groups"> <optgroup label="fruits"> <option>banana</option> <option selected>cherry...

Test your skills: Form validation - Learn web development
this task, we are providing you with a simple support query form, and we want you to add some validation features to it: make all of the input fields mandatory to complete before the form can be submitted. change the type of the "email address" and "phone number" fields to make the browser apply some more specific validation suitable for the data being asked for. give the "user name" field a required length of between 5 and 20 characters, the "phone number" field a maximum length of 15 characters, and the "comment" field a maximum length of 200 characters. try submitting your form — it should refuse to submit until the above constaints are followed, and give suitable error messages. to help, you might want to consider adding some simple css to show when a form field is valid or invalid. ...

Web forms — Working with user data - Learn web development
re starting this module, you should at least work through our introduction to html. at this point you should find the introductory guides easy to understand, and also be able to make use of our basic native form controls guide. mastering forms however requires more than just html knowledge — you also need to learn some specific techniques to style form controls, and some scripting knowledge is required to handle things like validation and creating custom form controls. therefore, before you look at the other sections listed below we'd recommend that you go away and learn some css and javascript first. the above text is a good indicator as to why we've put web forms into its own standalone module, rather than trying to mix bits of it into the html, css, and javascript topic areas — form eleme...

HTML basics - Learn web development
orm an entire html page. let's revisit the code we put into our index.html example (which we first met in the dealing with files article): <!doctype html> <html> <head> <meta charset="utf-8"> <title>my test page</title> </head> <body> <img src="images/firefox-icon.png" alt="my test image"> </body> </html> here, we have the following: <!doctype html> — the doctype. it is required preamble. in the mists of time, when html was young (around 1991/92), doctypes were meant to act as links to a set of rules that the html page had to follow to be considered good html, which could mean automatic error checking and other useful things. however these days, they don't do much, and are basically just needed to make sure your document behaves correctly. that's all you need to know for...

JavaScript basics - Learn web development
ore details on javascript consoles, see discover browser developer tools. variables variables are containers that store values. you start by declaring a variable with the var (less recommended, dive deeper for the explanation) or the let keyword, followed by the name you give to the variable: let myvariable; note: a semicolon at the end of a line indicates where a statement ends. it is only required when you need to separate statements on a single line. however, some people believe it's good practice to have semicolons at the end of each statement. there are other rules for when you should and shouldn't use semicolons. for more details, see your guide to semicolons in javascript. note: you can name a variable nearly anything, but there are some restrictions. (see this section about naming...

Creating hyperlinks - Learn web development
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. ...

Introduction to HTML - Learn web development
s is to give text meaning (also known as semantics), so that the browser knows how to display it correctly. this article looks at how to use html to break up a block of text into a structure of headings and paragraphs, add emphasis/importance to words, create lists, and more. creating hyperlinks hyperlinks are really important — they are what makes the web a web. this article shows the syntax required to make a link and discusses best practices for links. advanced text formatting there are many other elements in html for formatting text that we didn't get to in the html text fundamentals article. the elements here are less well-known, but still useful to know about. in this article, you'll learn about marking up quotations, description lists, computer code and other related text, subscript a...

From object to iframe — other embedding technologies - Learn web development
opriately — or for testing — but can't cause any harm to the rest of the codebase (either accidental or malicious) is called a sandbox. unsandboxed content can do way too much (executing javascript, submitting forms, popup windows, etc.) by default, you should impose all available restrictions by using the sandbox attribute with no parameters, as shown in our previous example. if absolutely required, you can add permissions back one by one (inside the sandbox="" attribute value) — see the sandbox reference entry for all the available options. one important note is that you should never add both allow-scripts and allow-same-origin to your sandbox attribute — in that case, the embedded content could bypass the same-origin policy that stops sites from executing scripts, and use javascript t...

Graceful asynchronous programming with Promises - Learn web development
n't really make sense to try to execute out of order, or in order but before each previous step has quite finished: you choose what toppings you want. this can take a while if you are indecisive, and may fail if you just can't make up your mind, or decide to get a curry instead. you then place your order. this can take a while to return a pizza and may fail if the restaurant does not have the required ingredients to cook it. you then collect your pizza and eat. this might fail if, say, you forgot your wallet so can't pay for the pizza! with old-style callbacks, a pseudo-code representation of the above functionality might look something like this: choosetoppings(function(toppings) { placeorder(toppings, function(order) { collectorder(order, function(pizza) { eatpizza(pizza); ...

Introduction to events - Learn web development
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 = function2; etc. note: if you are called on to support...

Function return values - Learn web development
the isnan() function to test whether the num value is not a number — if so, it returns true, and if not, it returns false. if the test returns false, the num value is a number. therefore, a sentence is printed out inside the paragraph element that states the square, cube, and factorial values of the number. the sentence calls the squared(), cubed(), and factorial() functions to calculate the required values. save your code, load it in a browser, and try it out. note: if you have trouble getting the example to work, feel free to check your code against the finished version on github (see it running live also), or ask us for help. now it's your turn! at this point, we'd like you to have a go at writing out a couple of functions of your own and adding them to the library. how about the ...

What is JavaScript? - Learn web development
e.js environment — you can find out more about server-side javascript in our dynamic websites – server-side programming topic. dynamic versus static code the word dynamic is used to describe both client-side javascript, and server-side languages — it refers to the ability to update the display of a web page/app to show different things in different circumstances, generating new content as required. server-side code dynamically generates new content on the server, e.g. pulling data from a database, whereas client-side javascript dynamically generates new content inside the browser on the client, e.g. creating a new html table, filling it with data requested from the server, then displaying the table in a web page shown to the user. the meaning is slightly different in the two contexts, but ...

Inheritance in JavaScript - Learn web development
setting teacher()'s prototype and constructor reference all is good so far, but we have a problem. we have defined a new constructor, and it has a prototype property, which by default just contains an object with a reference to the constructor function itself. it does not contain the methods of the person const...

Working with JSON - Learn web development
ional travel" ] } ] } if we loaded this object into a javascript program, parsed in a variable called superheroes for example, we could then access the data inside it using the same dot/bracket notation we looked at in the javascript object basics article. for example: superheroes.hometown superheroes['active'] to access data further down the hierarchy, you simply have to chain the required property names and array indexes together. for example, to access the third superpower of the second hero listed in the members list, you'd do this: superheroes['members'][1]['powers'][2] first we have the variable name — superheroes. inside that we want to access the members property, so we use ["members"]. members contains an array populated by objects. we want to access the second obj...

Object prototypes - Learn web development
hence, the constructor property is also available to both person1 and person2 objects. for example, try these commands in the console: person1.constructor person2.constructor these should both return the person() constructor, as it contains the original definition of these instances. a clever trick is that you can put parentheses onto the end of the constructor property (containing any required parameters) to create another object instance from that constructor. the constructor is a function after all, so can be invoked using parentheses; you just need to include the new keyword to specify that you want to use the function as a constructor. try this in the console: let person3 = new person1.constructor('karen', 'stephenson', 26, 'female', ['playing drums', 'mountain climbing']); ...

Test your skills: Object basics - Learn web development
he greeting to the browser devtools' console). update the color property value to black. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. object basics 2 in our next task, we want you to have a go at creating your own object literal to represent one of your favourite bands. the required members are: name: a string representing the band name. nationality: a string representing the country the band comes from. genre: what type of music the band plays. members: a number representing the number of members the band has. formed: a number representing the year the band formed. split: a number representing the year the band split up, or false if they are still together. albums:...

Perceived performance - Learn web development
only the stuff you are actually using, then download the rest. if you're downloading all the assets in the end, the weight of all your assets hasn't improved -- in fact, you may need to add some code -- but because the download of non-immediately necessary assets are delayed in a manner that is not perceptible the the user, the user will feel like the download was faster. to minimize the assets required for initial load, separate interactive functionality from content so that required content -- the text, styles, and images visible at initial load -- can be loaded first. delay, or lazy load, the rest of the assets. don't load images or scripts that aren’t used or visible on the initial page load. either delay their load, loading them when the page becomes usable, or, loading them when they b...

Web performance resources - Learn web development
load attribute, requiring javascript, so it is important to include a noscript tag with a traditional fallback. <link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'"> <noscript><link rel="stylesheet" href="/path/to/my.css"></noscript> the downside with this approach is the flash of unstyled text (fout.) the simplist way to address this is by inlining css that is required for any content that is rendered above the fold, or what you see in the browser viewport before scrolling. these styles will improve perceived performance as the css does not require a file request. <style type="text/css"> // insert your css here </style> javascript avoid javascript blocking by using the async or defer attributes, or link javascript assets after the page's dom elements. javas...

What is web performance? - Learn web development
objective: to gain basic familiarity of what is involved with web performance. * versus subjective, perceived performance, covered in the next article what is web performance? web performance is the objective measurement and perceived user experience of a web site or application. this includes the following major areas: reducing overall load time: how long does it take the files required to render the web site to download on to the user's computer? this tends to be affected by latency, how big your files are, how many files there are, and other factors besides. a general strategy is to make your files as small as possible, reduce the number of http requests made as much as possible, and employ clever loading techniques (such as preload) to make files available sooner. making the...

JavaScript performance - Learn web development
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 of javascript. requiring a library for other features may improve developer experience, but is all that javascript required? is there a lighter weight or home spun solutions? some features may not be necessary, and though they may add some bling, is the cost of the feature in terms of performance worth it? remove unused code split the javascript into smaller files code-split javascript into critical and non-critical parts. module bundlers like webpack support code-splitting. optimize these smaller files minific...

Multimedia: video - Learn web development
for current browser support of video and other media types. video autoplay to ensure that a looping background video autoplays, you must add several attributes to the video tag: autoplay, muted, and playsinline. <video autoplay="" loop="" muted="true" playsinline="" src="backgroundvideo.mp4"> while the loop and autoplay make sense for a looping and autoplaying video, the muted attribute is required for autoplay in mobile browsers. playsinline is required for mobile safari, allowing videos to play without forcing fullscreen mode. remove audio from muted hero videos for hero-video or other video without audio, removing audio is smart. <video autoplay="" loop="" muted="true" playsinline="" id="hero-video"> <source src="banner_video.webm" type='video/webm; codecs="vp8, vorbis"'>...

Website security - Learn web development
ersistent xss vulnerability occurs when the malicious script is stored on the website and then later redisplayed unmodified for other users to execute unwittingly. for example, a discussion board that accepts comments that contain unmodified html could store a malicious script from an attacker. when the comments are displayed, the script is executed and can send to the attacker the information required to access the user's account. this sort of attack is extremely popular and powerful, because the attacker might not even have any direct engagement with the victims. while the data from post or get requests is the most common source of xss vulnerabilities, any data from the browser is potentially vulnerable, such as cookie data rendered by the browser, or user files that are uploaded and disp...

Getting started with Ember - Learn web development
s (allowing easier mental context switching). getting ready to build our ember project you'll need a code editor before continuing to interact with your brand new project. if you don't have one configured already, the ember atlas has some guides on how to set up various editors. installing the shared assets for todomvc projects installing shared assets, as we're about to do, isn't normally a required step for new projects, but it allows us to use existing shared css so we don't need to try to guess at what css is needed to create the todomvc styles. first, enter into your todomvc directory in the terminal, for example using cd todomvc in macos/linux. now run the following command to place the common todomvc css inside your app: npm install --save-dev todomvc-app-css todomvc-com...

Ember resources and troubleshooting - Learn web development
nt. controllers are (as of january 2020), the only way to manage url query params. ideally, controllers should be fairly light in their responsibilities, delegating to components and services where possible. what is the purpose of routes? a route represents part of the url when a user navigates from place to place in the app. a route has only a couple responsibilities: load the minimally required data to render the route (or view-sub-tree). gate access to the route and redirect if needed. handle loading and error states from the minimally required data. a route only has 3 lifecycle hooks, all of which are optional: beforemodel — gate access to the route. model — where data is loaded. aftermodel — verify access. last, a route has the ability to handle common events re...

Routing in Ember - Learn web development
a "sitemap" for developers to be able to quickly see how the entire app is structured. it also tells ember how to interact with your route, such as when loading arbitrary data, handling errors while loading that data, or interpreting dynamic segments of the url. since our data is static, we won't get to any of those fancy features, but we'll still make sure that the route provides the minimally required data to view a page. creating the "index" route did not add a route definition line to router.js, because like with url navigation and javascript module loading, "index" is a special word that indicates the default route to render, load, etc. to adjust our old way of rendering the todolist app, we'll first need to replace the todolist component invocation from the application template with an {...

Ember app structure and componentization - Learn web development
hown in the resulting terminal output: installing component create app/components/header.hbs skip app/components/header.js tip to add a class, run `ember generate component-class header` installing component-test create tests/integration/components/header-test.js header.hbs is the template file where we’ll include the html structure for just that component. later on we'll add the required dynamic functionality such as data bindings, responding to user interaction, etc. note: the header.js file (shown as skipped) is for connection to a backing glimmer component class, which we don't need for now, as they are for adding interactivity and state manipulation. by default, generate component generates template-only components, because in large applications, template-only components en...

Framework main features - Learn web development
often make heavy use of typescript. typescript is not concerned with the writing of user interfaces, but it is a domain-specific language, and has significant differences to vanilla javascript. dsls can't be read by the browser directly; they must be transformed into javascript or html first. transformation is an extra step in the development process, but framework tooling generally includes the required tools to handle this step, or can be adjusted to include this step. while it is possible to build framework apps without using these domain-specific languages, embracing them will streamline your development process and make it easier to find help from the communities around those frameworks. jsx jsx, which stands for javascript and xml, is an extension of javascript that brings html-like synta...

Componentizing our Svelte app - Learn web development
n-svelte-tutorial/05-advanced-concepts or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/05-advanced-concepts remember to run npm install && npm run dev to start your app in development mode. repl to see the current state of the code in a repl, visit: https://svelte.dev/repl/76cc90c43a37452e8c7f70521f88b698?version=3.23.2 summary now we have all of our app's required functionality in place. we can display, add, edit and delete todos, mark them as completed, and filter by status. in this article, we covered the following topics: extracting functionality to a new component. passing information from child to parent using a handler received as a prop. passing information from child to parent using the bind directive. conditionally rendering blocks of marku...

Dynamic behavior in Svelte: working with variables and props - Learn web development
in this article we'll be using variables and props to make our app dynamic, allowing us to add and delete todos, mark them as complete, and filter them by status. prerequisites: at minimum, it is recommended that you are familiar with the core html, css, and javascript languages, and have knowledge of the terminal/command line. you'll need a terminal with node + npm installed to compile and build your app. ...

Vue conditional rendering: editing existing todos - Learn web development
tton type="button" class="btn" @click="oncancel"> cancel <span class="visually-hidden">editing {{label}}</span> </button> <button type="submit" class="btn btn__primary"> save <span class="visually-hidden">edit for {{label}}</span> </button> </div> </form> </template> <script> export default { props: { label: { type: string, required: true }, id: { type: string, required: true } }, data() { return { newlabel: this.label }; }, methods: { onsubmit() { if (this.newlabel && this.newlabel !== this.label) { this.$emit("item-edited", this.newlabel); } }, oncancel() { this.$emit("edit-cancelled"); } } }; </script> <style scoped> .edit-label { ...

Getting started with Vue - Learn web development
be other directories present (for example, if you choose a router, you will also have a views directory). .vue files (single file components) like in many front-end frameworks, components are a central part of building apps in vue. these components let you break a large application into discrete building blocks that can be created and managed separately, and transfer data between each other as required. these small blocks can help you reason about and test your code. while some frameworks encourage you to separate your template, logic, and styling code into separate files, vue takes the opposite approach. using single file components, vue lets you group your templates, corresponding script, and css all together in a single file ending in .vue. these files are processed by a js build tool (such...

Vue resources - Learn web development
hosting platforms. vue 3 vue 3 is a major release of the framework with a lot of major changes. it went into active beta in april, 2020. the biggest change is a new composition api that works as an alternative to the current property-based api. in this new api, a single setup() function is used on the component. only what you return from this function is available in your <template>s. you are required to be explicit about "reactive" properties when using this api. vue handles this for you using the options api. this makes the new api typically considered a more advanced use case. there are also a handful of other changes, including a change in how apps are initialized in vue. to read more about the changes involved with vue 3, refer to this article by vue school which goes over most of the ma...

Understanding client-side JavaScript frameworks - Learn web development
st have a look at the desired functionality of our app, then we'll create a todos.svelte component and put static markup and styles in place, leaving everything ready to start developing our to-do list app features, which we'll go on to in subsequent articles. 3. dynamic behavior in svelte: working with variables and props now that we have our markup and styles ready we can start developing the required features for our svelte to-do list app. in this article we'll be using variables and props to make our app dynamic, allowing us to add and delete todos, mark them as complete, and filter them by status. 4. componentizing our svelte app the central objective of this article is to look at how to break our app into manageable components and share information between them. we'll componentize our ap...

Handling common accessibility problems - Learn web development
th the background color. your design might look cool, but it is no good if people with visual impairments like color blindness can't read your content. use a tool like webaim's color contrast checker to check whether your scheme is contrasting enough. another tip is to not rely on color alone for signposts/information, as this will be no good for those who can't see the color. instead of marking required form fields in red, for example, mark them with an asterisk and in red. note: a high contrast ratio will also allow anyone using a smartphone or tablet with a glossy screen to better read pages when in a bright environment, such as sunlight. hiding content there are many instances where a visual design will require that not all content is shown at once. for example, in our tabbed info box ex...

Introduction to automated testing - Learn web development
once all the questions have been asked, it will ask you if the information entered is ok. type yes and press enter/return and npm will generate a package.json file in your directory. this file is basically a config file for the project. you can customize it later, but for now it'll look something like this: { "name": "node-tes...

Implementing feature detection - Learn web development
a property name) and not include the semi-colon on the end. @supports also has or and not logic available — the other block applies the float layout if the flexbox properties are not available: @supports not (flex-flow: row) and (flex: 1) { /* rules in here */ } this may look a lot more convenient than the previous example — we can do all of our feature detection in css, no javascript required, and we can handle all the logic in a single css file, cutting down on http requests. the problem here is browser support — @supports is not supported at all in ie, and only supported in very recent versions of safari/ios webkit (9+/9.2+), whereas the javascript version should work in much older browsers (probably back to ie8 or 9, although older versions of ie will have additional problems, su...

Command line crash course - Learn web development
this article provides an introduction to the terminal, the essential commands you'll need to enter into it, how to chain commands together, and how to add your own command line interface (cli) tools. prerequisites: familiarity with the core html, css, and javascript languages. objective: to understand what the terminal/command line is, what basic commands you should learn, and how to install new command line tools. ...

Client-side tooling overview - Learn web development
s in your process will improve your own development experience and likely improve the overall quality of your code. it often takes some time for new developer tools to settle down in their complexity. one of the best known tools, webpack, has a reputation for being overly complicated to work with, but in the latest major release there was a huge push to simplify common usage so the configuration required is reduced down to an absolute minimum. there's definitely no silver bullet that will guarantee success with tools, but as your experience increases you'll find workflows that work for you or for your team and their projects. once all the kinks in the process are flattened out, your tool chain should be something you can forget about and it should just work. how to choose and get help with a pa...

Understanding client-side web development tools - Learn web development
al information you need to work towards your goal. get started guides 1. client-side tooling overview in this article we provide an overview of modern web tooling, what kinds of tools are available and where you’ll meet them in the lifecycle of web app development, and how to find help with individual tools. 2. command line crash course in your development process you'll undoubtedly be required to run some command in the terminal (or on the "command line" — these are effectively the same thing). this article provides an introduction to the terminal, the essential commands you'll need to enter into it, how to chain commands together, and how to add your own command line interface (cli) tools. 3. package management basics in this article we'll look at package managers in some detail t...

Mozilla's Section 508 Compliance
lower than 55 hz. complete. mozilla supports of <blink> and text-decoration: blink in web pages. in these situations mozilla blinks 1 hz, which is within the allowable range and follows the stricter mil-std standard. (l) when electronic forms are used, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues. partially complete. see functional performance criteria below. screen reader access is currently being tested. an extension called ad block helps remove extra noisy content from web pages that clutter accessibility. functional performance criteria requirement windo...

Multiprocess on Windows
limited to supporting the same language features which were supported by vb at that time. given those two options, it may seem that oicf is the preferred format. however, for various reasons, our com interceptor currently only supports typelib metadata. in order for the interceptor to be able to work with our interfaces, we must do some additional work to compensate for typelib's weaknesses. the required steps are as follows: ensure that you generate typelibs for all of your com interfaces; ensure that those interfaces are registered; register any outparams that consist of arrays of interfaces. we will now further detail each of these items: generating typelibs for all com interfaces you first need to include a library statement in your idl. when midl processes your idl, it generates c c...

Accessible Toolkit Checklist
the standard window class msctls_statusbar32. make sure that parent-child relationships are exposed correctly in each window's msaa tree general msaa support focus events handling event callbacks, which requires a unique id for each non-windowed child of every widget that can be focused or have any other event associated with it. for example, a unique child id would be required for each tree item supporting the most important basic iaccessible events get_accparent: get the parent of an iaccessible. get_accchildcount: get the number of children of an iaccessible. get_accchild: get the child of an iaccessible. get_accname: get the "name" of the iaccessible, for example the name of a button, checkbox or menu item. ...

Add-ons
development resources. for more information about transition support, please visit our wiki page. publishing add-ons addons.mozilla.org, commonly known as "amo," is mozilla's official site for developers to list add-ons, and for users to discover them. by uploading your add-on to amo, you can participate in our community of users and creators and find an audience for your add-on. you are not required to list your add-on on amo, but your add-on must be signed by mozilla else users will not be able to install it. for an overview for the process of publishing your add-on see signing and distributing your add-on. other types of add-ons in addition to extensions, there are a few other add-on types that allow users to customize firefox. those add-ons include: user dictionaries let you spel...

Adding phishing protection data providers
ing a new provider, you should use the next unused number. to find an id number to use, you can build a loop that requests the value of browser.safebrowsing.provider.0.name, then browser.safebrowsing.provider.1.name, and so forth until no value is returned. then you can use that value. you can find examples of how to read and write preferences in the article adding preferences to an extension. required preferences browser.safebrowsing.provider.idnum.name a human-readable name for the data provider. browser.safebrowsing.provider.idnum.keyurl an url that returns a private key to be used for encrypting of other requests. browser.safebrowsing.provider.idnum.lookupurl the url to use to look up urls to see if they're block-listed. this request must be encrypted using the private key ret...

A bird's-eye view of the Mozilla framework
-platform idl), derived from the corba idl. the xpidl interface description is independent of the programming language used to implement the object itself. for example, a javascript object or c++ class could both implement the same xpidl interface. scripting languages such as javascript cannot directly access xpcom components, but access them indirectly using xpconnect. xpconnect also provides a required layer for xpcom components written in a scripting language. let’s consider a resource description framework (rdf) example, where rdf is a framework for describing and interchangingmetadata, that is, information about information. in this example, we’re interested in the rdf sub-graph underlying thecontents panel widget within thehelp viewer window. suppose the client already has an nsirdfdat...

Chrome registration
e being mapped from (jar files, local directory, etc.) old-style contents.rdf manifests before the plaintext manifests were introduced (which happened in firefox 1.5, toolkit 1.8), rdf manifests named "contents.rdf" were used to register chrome. this format is deprecated; however, seamonkey versions before version 2 do not support the plaintext manifest format yet, so contents.rdf manifests are required for extensions that wish to maintain backwards compatibility with firefox 1.0 or the suite. gecko 1.9.2 note the contents.rdf manifest format is no longer supported at all starting with gecko 1.9.2; add-ons already installed using this format will continue to work but can no longer be installed. be sure to remove your add-on and reinstall it to ensure that it installs correctly after updati...

Debugging Frame Reflow
hat on initial reflow the available height for the outer table frame is unconstrained. the table cell requires its children to compute the mes. it is reported back from the block as: block 02d7bcf8 d=300,300 me=300 the block max. element size is 300 twips. the second table reflow is started at rowg 00b984a4 r=2 a=1500,uc c=1500,uc cnt=879 where the previous information is used. the block has been required to compute the max. element size only once and it reports now: block 02d7bcf8 d=1410,300 the block shows the same address as the previous one. frames with children that overflow the parent have the ns_frame_outside_children flag set. for these frames the overflow area is displayed as block 025ed8f0 d=8940,1020 o=(0,0) 9180 x 1020. the overflow area is specified as (x,y) origin and width x height.

Debugging Table Reflow
roportionconstraint = 3, // 1*, 2*, etc. cols attribute assigns 1* e0proportionconstraint = 4 // 0*, means to force to min width after this follows the width information for each column: widths=-1 -1 -1 -1 -1 -1 -1 -1 -1 -1 the table code knows ten different width's: #define num_widths 10 #define num_major_widths 3 // min, des, fix #define min_con 0 // minimum width required of the content + padding #define des_con 1 // desired width of the content + padding #define fix 2 // fixed width either from the content or cell, col, etc. + padding #define min_adj 3 // minimum width + padding due to col spans #define des_adj 4 // desired width + padding due to col spans #define fix_adj 5 // fixed width + padding due to col spans...

Simple SeaMonkey build
are requirements: the seamonkey build process is both i/o- and cpu-intensive, and can take a long time to build even on modern hardware. minimum and recommended hardware requirements for mozilla development are: recommended: 8gb of ram (having only 4gb ram and 4gb swap may give memory errors during compile) 35 gb free disk space. this will accomodate visual studio 2013 community edition, the required sdks, the mozillabuild package, the mercurial source repository and enough free disk space to compile. a fast ssd is recommended; the firefox build process is i/o-intensive. high speed internet installing build tools if your system is not listed below, see the build prerequisites page. debian linux: # this one-liner should install all necessary build deps sudo aptitude insta...

Commenting IDL for better documentation
ll name of the interface in the description of the method. this will help the tools generate proper links to help make the documentation easier to read and browse through. special commands you can use special commands in your doxygen comments; the ones listed below are interpreted by our tools. using these will help generate much higher quality documentation, faster, with less human intervention required. command details @brief description please only use this to provide a brief description of the interface, keep it short and to the point. do not include more than one brief per interface. @param parameter description every parameter of a method should be documented, only use the parameter name, leave out things like [in]/[out]. @returns description if the method returns something then th...

mach
se.argumentparser.add_argument(). the class and method names can be whatever you want. they are irrelevant to mach. an instance of the @commandprovider class is instantiated by the mach driver if a command in it is called for execution. the __init__ method of the class must take either 1 or 2 arguments (including self). if your class inherits from object, no explicit __init__ implementation is required (the default takes 1 argument). if your class's __init__ takes 2 arguments, the second argument will be an instance of mach.base.commandcontext. this object holds state from the mach driver, including the current directory, a handle on the logging manager, the settings object, and information about available mach commands. the arguments registered with @commandargument are passed to your method ...

Performance best practices for Firefox front-end engineers
information, and then setting it safely, without causing flushes. promisedocumentflushed is only available to priviledged script, and should be called on the inner window of a top-level frame. calling it on the outer window of a subframe is not supported, and calling it from within the inner window of a subframe might cause the callback to fire even though a style and layout flush will still be required. these gotchas should be fixed by bug 1441173. for now, it is up to you as the consumer of this api to not accidentally write to the dom within the promisedocumentflushed callback. doing so might cause flushes to occur for other promisedocumentflushed callbacks that are scheduled to fire in the same tick of the refresh driver. bug 1441168 tracks work to make it impossible to modify the dom withi...

Firefox and the "about" protocol
see firefox reader view for clutter-free web pages about:rights displays rights information about:robots special page showing notes about robots about:serviceworkers displays currently running service work...

mozbrowseractivitydone
ccess) { console.log('activity completed successfully'); } else { console.log('activity not completed successfully'); } }); related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowserasyncscroll
ozbrowserasyncscroll", function( event ) { console.log("the scroll top position of the document is:" + event.details.top + "px"); }); related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowseraudioplaybackchange
queryselector("iframe"); browser.addeventlistener("mozbrowseraudioplaybackchange", function(event) { console.log(event.details); }); related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowsercaretstatechanged
ryselector("iframe"); browser.addeventlistener("mozbrowsercaretstatechanged", function( event ) { // do stuff with event.details }); related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowserclose
erclose", function() { console.log("browser window has been closed; iframe will be destroyed."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowsercontextmenu
rowsercontextmenu", function(event) { console.log("asking for menu:" + json.stringify(event.details)); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowserdocumentfirstpaint
ventlistener("mozbrowserdocumentfirstpaint", function() { console.log("first content painted."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowsererror
istener("mozbrowsererror", function( event ) { console.log("an error occurred:" + event.detail); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowserfindchange
" + event.details.activematchordinal + " out of " + event.details.numberofmatches); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowserfirstpaint
ddeventlistener("mozbrowserfirstpaint", function(event) { console.log("first content painted."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowsericonchange
riconchange", function( event ) { console.log("the url of the new favicon is:" + event.details.href); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowserloadend
olor; }); browser.addeventlistener('mozbrowserloadend',function() { stopreload.textcontent = 'r'; }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowserloadstart
= 'x'; }); browser.addeventlistener('mozbrowserloadend',function() { stopreload.textcontent = 'r'; }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowserlocationchange
browser.addeventlistener('mozbrowserlocationchange', function (event) { urlbar.value = event.detail.url; }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowsermanifestchange
rowsermanifestchange", function(event) { console.log("new manifest url: " + event.details.href); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowsermetachange
". ...

mozbrowseropentab
wseropentab", function( event ) { console.log("a new document has opened containing the content at " + event.details.url + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowserresize
rresize", function( event ) { console.log("the new window size is " + event.details.width + " x " + event.details.height + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowserscroll
{ console.log("the new scroll position is " + event.details.left + " across and " + event.details.top + "down."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowserscrollareachanged
tion( event ) { console.log("the new scroll area is " + event.details.width + " x " + event.details.height + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowserscrollviewchange
er.addeventlistener("mozbrowserscrollviewchange", function( event ) { console.log("scrolling has " + event.details.state + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowsersecuritychange
); browser.addeventlistener("mozbrowsersecuritychange", function( event ) { console.log("the ssl state is:" + event.details.state); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowserselectionstatechanged
ible) { console.log("the current selection is visible."); } else { console.log("the current selection is not visible."); } }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowsershowmodalprompt
sershowmodalprompt", function( event ) { console.log("asking for prompt:" + json.stringify(event.detail)); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowsertitlechange
zbrowsertitlechange", function( event ) { console.log("the title of the document is:" + event.detail); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowserusernameandpasswordrequired ...

HTMLIFrameElement.setVisible()
ay also be large incompatibilities between implementations and the behavior may change in the future. the setvisible() method of the htmliframeelement is used to change the visibility state of the browser <iframe>. the visible state of a browser <iframe> has nothing to do with its actual visibility (which is handled through css). the visible state is used to define the level of resources required by the browser <iframe>. if the visible state is set to true, it means that the browser <iframe> should have high priority over the resources needed to render and handle its content. on the contrary, if its visible state is set to false, it has low priority over the resources it needs. as an example, if the content of a browser <iframe> uses the window.requestanimationframe method and if the vis...

Browser API
nged sent when the text selected inside the browser <iframe> content changes. note that this is obsolete, and newer implementations use mozbrowsercaretstatechanged instead. mozbrowsershowmodalprompt sent when alert(), confirm(), or prompt() are called within a browser <iframe>. mozbrowsertitlechange sent when the document title changes within a browser <iframe>. mozbrowserusernameandpasswordrequired sent when an http authentification is requested. mozbrowseropensearch sent when a link to a search engine is found. mozbrowservisibilitychange sent when the visibility state of the current browser iframe <iframe> changes, for example due to a call to setvisible(). specifications this api isn't part of any official specification. ...

Embedding Tips
embedders may wish to override some of the default service implementations with their own. for example, the default prompt service uses xul to render prompt dialogs and embedders may wish to render them in a way more appropriate for their application and platform.. ...

Roll your own browser: An embedding how-to
like that isn't totally obvious, nonetheless it has to be done. here is that effort. i have created a directory under embedding called config. ...

How to get a stacktrace with WinDbg
at the bottom. before debugging can start, several commands must be entered into the one-line input box at the bottom of the command window. tip: all commands must be entered exactly as written, one line at a time, into the bottom of the command box. copying and pasting each line is the easiest method to avoid mistakes some commands start with a period (.) or a pipe character (|), which is required. (the keystroke for a pipe character on us keyboards is shift+\) submit the log file on a bug or via the support site, even if nothing seems to happen during the debug process start debugging now that firefox is opened in the debugger, you need to configure your windbg to download symbols from the mozilla symbol server. to load the symbols, enter the three commands below, pressing enter afte...

How to investigate Disconnect failures
main thread is blocked). crashes (not freezes) if we have a crash we always should submit it. under about:crashes we have links to all the crashes submitted by firefox to crash-stats. from there use “signature” as summary for bugzilla bug. in “extensions” check installed addons and check if they might be responsible for the failure. 3. single out the failing test or shorten the required tests needed to reproduce. 4. reproduce manually if possible. file a bug once you found what caused the failure, file a new bug; if you could make it reproducible, narrow down the test case as much as you can so we can see what causes the failure. ...

JavaScript-DOM Prototypes in Mozilla
if such objects are provided, they are not guaranteed by any specification to have any effect on the environment. results in other browsers is not guaranteed. so how does all this work in the mozilla dom code? it all happens in xpconnect and nsdomclassinfo.{cpp,h} in t...

AddonManager
all that has been canceled. addoninstall errors constant description error_network_failure a network error occurred. error_incorrect_hash the downloaded file did not match the expected hash. error_corrupt_file the file appears to be corrupt. error_file_access there was an error accessing the filesystem. error_signedstate_required the addon must be signed and isn't. update check reasons constant description update_when_user_requested an update check performed at the explicit request of the user. update_when_new_app_detected an update check performed when a new version of the application has been detected. update_when_new_app_installed an update check performed afte...

Download
download is stopped, and optionally removes any partial data kept as part of a canceled or failed download. after this method has been called, the download cannot be started again. note: this method should be used in place of the cancel() and removepartialdata() methods while shutting down or disposing of the download object, to prevent other callers from interfering with the operation. this is required because cancellation and other operations are asynchronous. promise finalize( boolean aremovepartialdata ); parameters aremovepartialdata optional whether any partially downloaded data should be removed after the download has been stopped. the default is false. promise resolves to undefined when the operation has finished successfully. ...

FileUtils.jsm
tart from (see getting special files for more info) patharray an array of path components to locate beneath the directory specified by key. the last item in this array must be the leaf name of a file. followlinks optional true if links should be followed, false otherwise. return value returns a nsifile object for the file specified. the file is not created if it does not exist, however all required directories along the way are. getdir() gets a directory at the specified hierarchy under a nsidirectoryservice key. nsifile getdir( string key, array patharray, bool shouldcreate, bool followlinks ); parameters key the nsidirectoryservice key to start from (see getting special files for more info) patharray an array of path components to locate beneath the directory specified ...

Following the Android Toasts Tutorial from a JNI Perspective
s article will follow the android developers :: api guides - toasts tutorial. it will use the jni.jsm module that is available in firefox for android since version 17. this article teaches developers how to port java code to jni by reading the java and android documentation. toast description a toast provides simple feedback about an operation in a small popup. it only fills the amount of space required for the message, and the current activity remains visible and interactive. for example, navigating away from an email before you send it triggers a "draft saved" toast to let you know that you can continue editing later. toasts automatically disappear after a timeout. toasts do not have to be created with jni; they are exposed by the nativewindow feature on firefox for android, see toast documen...

JavaScript OS.Constants
tem-specific constants. this module is largely a companion to js-ctypes. using os.constants from the main thread to initialize os.constants for use in the main thread, add the following snippet to your code: components.classes["@mozilla.org/net/osfileconstantsservice;1"]. getservice(components.interfaces.nsiosfileconstantsservice). init(); from a chrome worker no initialization is required. module os.constants is always available for chrome workers. os.constants.sys constants related to system configuration. name the name of the operating system (e.g. "darwin"). debug set to true on debug build configurations, non-existent otherwise. os.constants.path paths of well-known files and directories. libxul the path to the file containing ...

NetUtil.jsm
am, ostream, function(aresult) { if (!components.issuccesscode(aresult)) { // an error occurred! } }) asyncfetch() the asyncfetch() method opens an input source, asynchronously, and gives an nsiinputstream containing the data obtained to the callback provided. the callback may then consume data from the input stream passed to the callback. note: prior to gecko 2, the input source was required to be specified as an nsichannel. note: support for specifying an nsiinputstream as the input source was added in gecko 5. asyncfetch( asource, acallback ); parameters asource the source to open asynchronously. this may be specified as an nsiuri, nsifile, nsichannel, nsiinputstream or as a string specifying the url to open. acallback a function that will be called when the open o...

OS.File for the main thread
thod will neuter the array buffer. options an object that may contain the following fields tmppath if null or unspecified, write the data directly to path. if specified, write the data to a temporary file called tmppath and, once the write is complete, rename the file to replace path. performing this operation is a little slower but also a little safer. firefox 25 note tmppath is required in firefox 24 or lower version, but optional in firefox 25 or higher version nooverwrite if specified and true, and if path already exists, this function will throw an error without overwriting path. flush if false or unspecified, return immediately once the write is complete. if true, before writing, force the operating system to write its internal disk buffers to the disk. this is consider...

PerfMeasurement.jsm
umber of times memory accesses missed the cache. branch_instructions uint64 the number of branch instructions executed. branch_misses uint64 the number of times branch prediction guessed wrong. bus_cycles uint64 the number of memory bus cycles that elapsed. page_faults uint64 the number of page exceptions the os handled. major_page_faults uint64 the number of times page faults required disk access. context_switches uint64 the number of context switches that occurred involving the thread being profiled. cpu_migrations uint64 the number of times the profiled thread migrated from one cpu core to another. event types measured constant the eventsmeasured constant provides a mask indicating which event types were recorded. variable type description eventsmeasured even...

PromiseWorker.jsm
ed by the worker thread, which is created by promiseworker.jsm in main thread, to communicate with the main thread. promiseworker.js provides abstractworker. here's the simplified diagram of how promiseworker works (svg version of the promiseworker diagram) setup and usage this section explains how to set up and use a promiseworker. as well known with workers, there is a minimum of two files required. the worker file, and the main thread file. the following sections tell you which content to use in your worker and main thread files, in order to use promiseworker objects. worker file there is some standard templating that must be dropped into the worker file by the developer. the require.js file must be imported with workerglobalscope/importscripts(). next, the promiseworker.js file should b...

Using JavaScript code modules
a javascript code module is simply some javascript code located in a registered location. the module is loaded into a specific javascript scope, such as xul script or javascript xpcom script, using components.utils.import() or components.utils["import"](). ...

WebRequest.jsm
name type description name string header name, for example "content-type" value string header value, for example "image/png" chrome incompatibilities although this api is modeled on chrome's webrequest extension api, there are some differences. we're working on addressing them, though. filtering by windowid and tabid is not supported. the onauthrequired, onbeforeredirect, and onerroroccurred events are not supported. the "requestbody" instruction in opt_extrainfospec is not supported. redirection is not allowed in onbeforerequest or onheadersreceived, but is allowed in onbeforesendheaders. see bug 1176092. handlerbehaviorchanged() is not supported. requestid is not included in the argument passed to the listener. examples basic examples ...

Index
of translating software user interfaces from one language to another and adapting it to suit a foreign culture. these resources are for anyone with an interest in the technical aspects involved in localization. 2 application translation with mercurial android, draft, editing, firefox, lightning, localization, mercurial, seamonkey, translate, patch, thunderbird first, get the required programs to compile mozilla applications like firefox and thunderbird from build instructions. this is only necessary once. 3 bootstrapping a new locale localization, mercurial, translate, bit bucket (see also https://developer.mozilla.org/en/create_a_new_localization) 4 encodings for localization files internationalization, localization when creating a l...

Localization content best practices
double quotation marks, respectively. the pair should be used to surround statements and references to user input. example: you have chosen a keyword that is currently in use by "%s". please select another. example: search %1$s for "%2$s" non-directional single, and double, quotation marks should be used in reference to html code, or other languages where ascii character usage is required, such as html. html does not prefer one over the other, and our codebase uses them interchangeably as of march 2016. example: this web page at <span id='malware_sitename'/> has been reported as an attack page and has been blocked based on your security preferences. u+2026 (\u2026) is the horizontal ellipsis character. this character should be used in place of three consecutive periods. crea...

Initial setup
re's what you do: look through the existing localization community directory to see if one already exists for your locale. if a community already exists, reach out to them and ask how you can help. if a community doesn't exist, send an email to the new-locales newsgroup for additional guidance. accounts there are a handful of accounts that you need to be aware of as you begin. they're not required for you to begin contributing, but will be required when you are preparing to produce an official release. for now, simply be aware that these will become important as your efforts progress. these accounts will store your code, contributions, and help you produce an official localization. hg (mercurial) mercurial is the revision control environment that houses the main mozilla source code as ...

QA phase
gs let's now push this changeset. enter the following command: hg push http://hg.mozilla.org/l10n-central/x-testing mercurial will connect to your repo and ask you to provide your account information (i.e., the username and the password). real url is http://hg.mozilla.org/l10n-central/x-testing pushing to http://hg.mozilla.org/l10n-central/x-testing searching for changes http authorization required realm: hg.mozilla.org http user: your_id password: after you enter your account information, the changeset will be pushed. adding changesets adding manifests adding file changes added 1 changesets with 2 changes to 2 files bb/acl: your_id is allowed. accepted payload. quota: 979.7 kb in use, 150.0 mb available (0.64% used) your changeset has been successfully pushed to your repository! as y...

Creating localizable web applications
nf->url('/'));?> </h1> snippet 10. better: <h1> <a href="<?= $locale_conf->url('/') ?>"> <img src="/static/img/logo.png" alt="<?= /* l10n: link title attribute */ _("mozilla labs personas"); ?> " /> </a> </h1> ...but don't sacrifice flexibility don't sacrifice flexibility trying to satisfy the rule above. make sure the content supports changing the order of the sentence, which may be required by some grammars. snippet 1. bad: <p class="added"><?= _("<strong>added:</strong>") . $persona['date']; ?></p> snippet 2. bad: <p class="added"><strong><?= _("added:") ?></strong><?= $persona['date']; ?></p> snippet 3. good: <p class="added"><? printf( /* l10n: %s is a date */ _("<strong>added:</strong> %s"), $persona['date']);?></p> the first bad snippet puts the <strong/> html elements i...

Basics
o><mo mathvariant="bold">...</mo> </mstyle> </mfrac> </mrow> </mstyle> </mfrac> </mrow> </mstyle> </mfrac> </mrow> </mstyle> </mfrac> </mrow> </mstyle> </mfrac> </mrow> </math> </button> </div> for more information about mathml in mozilla, see the mathml project page. there are links to more samples, screenshots and instructions on how to download fonts for various platforms. these fonts are required to view other examples beyond the basic constructions illustrated here. mathml background image html content <div class="background"></div> <math display="block"> <mrow> <msub> <mi>z</mi> <mi>&alpha;</mi> </msub> <mrow> <mo>(</mo> <mi>f</mi> <mo>)</mo> </mrow> <mo>=</mo> <mfrac> <mn>1</mn> <mrow> <mn>2</mn> <mi>i</mi> <mo>&thinspace;</mo> <mi>cos</mi> <mo>(</mo> <mfrac> <mrow> <mi>&alpha;...

Fonts for Mozilla's MathML engine
this wiki page describes how users can install and use such math fonts with mozilla's mathml engine. note that most of these instructions may as well apply to other web rendering engines. installation instructions windows install the latin modern math and stix fonts as follows: download latinmodern-math-1959.zip. open the zip archive, move inside the latinmodern-math-1959 directory and then inside the otf directory. you will find a latinmodern-math font file. open the latinmodern-math font file and click the install button. download stixv2.0.2.zip. ...

Mozilla DOM Hacking Guide
(cx, obj, ::js_getstringchars(str), ::js_getstringlength(str), v, nsnull, nsnull, 0)) { return ns_error_failure; } // this js api call defines the "location" property on the window object, its // value being the xpconnect wrapper for the location object. *objp = obj; return ns_ok; } this is the first step. it is required to have the getter for .location work as well, but that's another story. the second step is to map .location to .location.href in nswindowsh::setproperty() if (str == slocation_id) { // setting the location property jsstring *val = ::js_valuetostring(cx, *vp); ns_ensure_true(val, ns_error_unexpected); // convert the value assigned to location (i.e. the url) to a jsstring. nscomptr<nsisupp...

GPU performance
nvidia parallel nsight - haven't tried. amd gpu shaderanalyzer - will compile a shader and show the machine code and give static pipeline estimations. not that useful for firefox because all of our shaders are pretty simple. ...

JS::PerfMeasurement
ructions .branch_instructions branch instructions executed ::branch_misses .branch_misses branch instructions that were not predicted correctly ::bus_cycles .bus_cycles total memory bus cycles ::page_faults .page_faults total page-fault exceptions fielded by the os ::major_page_faults .major_page_faults page faults that required disk access ::context_switches .context_switches context switches involving the profiled thread ::cpu_migrations .cpu_migrations migrations of the profiled thread from one cpu core to another these events map directly to "generic events" in the linux 2.6.31+ <linux/perf_event.h> interface, and so unfortunately are a little vague in their specification; for...

Memory Profiler
firefox developer tools now has a built-in memory profiler. this article details how to use an old profiler specifically designed for firefox os devices. getting the profiler add-on the built-in memory profiler's interface is still under construction. it can be obtained by installing the memory profiler add-on. you may need to set the "xpinstall.signatures.required" pref to false in order to install it, since the xpi is not yet signed. using the add-on open the devtools panel or webide. select the memoryprofiler tab. to take a profile you can use the buttons in the profiler panel. start - start profiling stop - stop profiling reset - clear profile data when profiler is stopped profile data is accumulated and resumed after start. use reset to start a new recording. understan...

Profiling with Xperf
this page applies to xperf version 4.8.7701 or newer. to see your xperf version, either run 'xperf' on a command line with no arguments, or start 'xperfview' and look at help -> about performance analyzer. ...

Profiling with the Firefox Profiler
will invoke bash to use adb and addr2line. install the latest pre-release build in your host machine's firefox browser that has your phone reachable via adb. this will add a icon in the top right of the browser. set devtools.debugger.remote-enabled to true in about:config for fennec. select target mobile usb and press connect. the first run will take an additional 1 minute or so to pull in the required system libraries. profiling firefox startup start your firefox with the environment variable moz_profiler_startup=1 set. this way the profiler is started as early as possible during startup. then capture the profile using the add-on as usual. startup profiling does not use the settings that you configured in the add-on's panel. it uses settings that can be configured with the environment ...

about:memory
this "explicit" value at the root of the tree represents all the memory allocated via explicit calls to allocation functions. the "window-objects" sub-tree represents all javascript window objects, which includes the browser tabs and ui windows. for example, the "top(http://edition.cnn.com/, id=8)" sub-tree ...

Performance
benchmarking tips on generating valid performance metrics. performance best practices in extensions a performance "best practices" guide for extension developers. ...

Firefox Sync
count, authentication and key management. all data is encrypted and decrypted on each device; no sync data is ever transmitted to a server without being encrypted. mozilla does not hold any keys to your sync data. your data can only be decrypted by someone who is able to log in to your firefox account (ie, that knows your firefox accounts password and has access to your email for the verification required during the initial login). documentation this document serves as an index for all technical documentation related to sync. it is not designed for use by end-users, but instead for people who wish to understand the details of how sync is implemented or wish to interact with it. general the always prolific richard newman has written a couple of notes about bookmark syncing (first, second) and h...

Installing JSHydra
building jshydra jshydra requires, as part of its build process, spidermonkey. by default, the configure script will obtain a known working copy of spidermonkey; it is possible via the --moz-src and --moz-obj configure arguments to tell jshydra to use existing copies of the source and build. ...

L20n HTML Bindings
one file (~110kb) one file, minified (~35kb) it's recommended to include the l20n.js file as the last script in the head element. <head> … <script src="l20n.js"></script> </head> create manifest use a localization manifest to define available languages and their resource files. <link rel="localization" href="../locales/manifest.json"> an example of the manifest file (all keys are required): { "locales": [ "en-us", "pl"], "default_locale": "en-us", "resources": [ "../locales/{{locale}}/strings.l20n", "/shared/{{locale}}/date.l20n"¨ ] } make html elements localizable use the data-l10n-id attribute on an html element to mark it as localizable. <p data-l10n-id="about"></p> notice that you don't have to put the text content in the html anymore (you still can if ...

Cached Monitors
e hash table as needed. important cached monitors are slower to use than their uncached counterparts. see monitors for information about uncached monitors. cached monitors functions cached monitors allow the client to associate monitoring protection and state change synchronization in a lazy fashion. the monitoring capability is associated with the protected object only during the time it is required, allowing the monitor object to be reused. this additional flexibility comes at the cost of a small loss in performance. pr_centermonitor enters the lock associated with a cached monitor. pr_cexitmonitor decrements the entry count associated with a cached monitor. pr_cwait waits for a notification that a monitor's state has changed. pr_cnotify notifies a thread waiting for a change in the s...

Introduction to NSPR
le interaction between the thread(s) waiting on a condition and those notifying it. the notification must take place within a monitor--the same monitor that protects the data being manipulated by the notifier. in pseudocode, the sequence looks like this: enter(monitor); ... manipulate the monitored data notify(condition); exit(monitor); notifications to a condition do not accumulate. nor is it required that any thread be waiting on a condition when the notification occurs. the design of the code that waits on a condition must take these facts into account. therefore, the pseudocode for the waiting thread might look like this: enter(monitor) while (!expression) wait(condition); ... manipulate monitored data exit(monitor); the need to evaluate the boolean expression again after rescheduling fr...

Named Shared Memory
e application's address space. pr_attachsharedmemory may also be called to remap a shared memory segment after detaching the same prsharedmemory object. be sure to detach it when you're finished. pr_detachsharedmemory should be called to unmap the shared memory segment from the application's address space. pr_closesharedmemory should be called when no further use of the prsharedmemory object is required within a process. following a call to pr_closesharedmemory, the prsharedmemory object is invalid and cannot be reused. pr_deletesharedmemory should be called before process termination. after you call pr_deletesharedmemory, any further use of the shared memory associated with the name may cause unpredictable results. filenames the name passed to pr_opensharedmemory should be a valid filename f...

Network Addresses
f internet protocol version 6 (ipv6). to facilitate the transition to ipv6, it is recommended that clients treat all structures containing network addresses as transparent objects and use the functions documented here to manipulate the information. if used consistently, this api also eliminates the need to deal with the byte ordering of network addresses. typically, the only numeric declarations required are the well-known port numbers that are part of the prnetaddr structure. network address types and constants prhostent prprotoent pr_netdb_buf_size network address functions initializing a network address pr_initializenetaddr facilitates the use of prnetaddr, the basic network address structure, in a polymorphic manner. by using these functions with other network address functions, cli...

PRThread
an nspr thread. syntax #include <prthread.h> typedef struct prthread prthread; description in nspr, a thread is represented by a pointer to an opaque structure of type prthread. this pointer is a required parameter for most of the functions that operate on threads. a prthread* is the successful result of creating a new thread. the identifier remains valid until it returns from its root function and, if the thread was created joinable, is joined. ...

PRThreadScope
sophisticated scheduling techniques. local threads are scheduled by nspr within the process. the process is assumed to be globally scheduled, but nspr can manipulate local threads without system intervention. in most cases, this leads to a significant performance benefit. however, on systems that require nspr to make a distinction between global and local threads, global threads are invariably required to do any form of i/o. if a thread is likely to do a lot of i/o, making it a global thread early is probably warranted. on systems that don't make a distinction between local and global threads, nspr silently ignores the scheduling request. to find the scope of the thread, call pr_getthreadscope. ...

PR_EXTERN
used to define the prototypes for functions or variables that are to be exported from a shared library. syntax #include <prtypes.h> pr_extern(type)prototype description pr_extern is used to define externally visible routines and globals. for syntax details for each platform, see prtypes.h. the macro includes the proper specifications to declare the target extern and set up other required linkages. warning: some platforms do not allow the use of the underscore character (_) as the first character of an exported symbol. ...

PR_PushIOLayer
...

Process Initialization
prcalloncetype prcalloncefn pr_callonce ...

NSS FAQ
http? yes, tls is independent of application protocols. it works with common internet standard application protocols (http, pop3, ftp, smtp, etc.) as well as custom application protocols using tcp/ip. how long does it take to integrate nss into my application? the integration effort depends on an number of factors, such as developer skill set, application complexity, and the level of security required for your application. nss includes detailed documentation of the ssl api and sample code that demonstrates basic ssl functionality (setting up an encrypted session, server authentication, and client authentication) to help jump start the integration process. however, there is little or no documentation currently available for the rest of the nss api. if your application requires sophisticated cer...

FIPS Mode - an explanation
ocols, and firefox can only talk to those servers that use fips standard encryption algorithms such as aes or triple-des. servers that can only use non-fips-approved encryption, such as rc4, cannot be used in fips mode. how is fips mode different from normal non-fips mode? in normal non-fips mode, the "master password" is optional and is allowed to be a weak short password. the user is only required to enter his master password to use his own private keys (if he has any) or to access his stored web-site passwords. the user is not required to enter the master password to visit ordinary https servers, nor to view certificates he has previously stored. in non-fips mode, nss is willing and able to use popular non-fips approved cryptographic algorithms, such as rc4 and md5, to communicate with ...

Using JSS
se a binary release of jss, here's how to get jss working with your code. gather components setup your runtime environment initialize jss in your application gather components you need the jss classes and the nspr, nss, and jss shared libraries. nspr and nss shared libraries jss uses the nspr and nss libraries for i/o and crypto. jss version 3.0 linked statically with nss, so it only required nspr. jss versions 3.1 and later link dynamically with nss, so they also require the nss shared libraries. the exact library names vary according to the convention for each platform. for example, the nspr library is called nspr4.dll or libnspr4.dll on windows and libnspr4.so on solaris. the following table gives the core names of the libraries, omitting the platform-specific prefix and suffix.

NSS 3.12.6 release notes
rvers have been upgraded. nss_ssl_require_safe_negotiation values: 1: requiresafenegotiation = true unset: requiresafenegotiation = false controls whether safe renegotiation indication is required for initial handshake. if true, a connection will be dropped at initial handshake if the peer server or client does not support safe renegotiation. the default setting for this option is false. these options can also be set with the following ssl options: ssloptions.enablerenegotiation ssloptions.requiresafeneg...

NSS 3.14.2 release notes
_ext_key_usage_ctl_signing notable changes in nss 3.14.2 bug 805604 - support for aes-ni and avx accelerated aes-gcm was contributed by shay gueron of intel. if compiled on linux systems in 64-bit mode, nss will include runtime detection to check if the platform supports aes-ni and pclmulqdq. if so, nss uses the optimized code path, reducing the cpu cycles per byte to 1/20 of what was required before the patch (https://bugzilla.mozilla.org/show_bug.cgi?id=805604 and https://crypto.stanford.edu/realworldcrypto/slides/gueron.pdf). support for other platforms, such as windows, will follow in a future nss release. (https://bugzilla.mozilla.org/show_bug.cgi?id=540986) sqlite has been updated to 3.7.15. note: please apply the patch in https://bugzilla.mozilla.org/show_bug.cgi?id=837799 if ...

NSS 3.19.2 release notes
oke existing nss applications that need to generate or use such keys, via apis such as seckey_creatersaprivatekey or seckey_createdhprivatekey. in nss 3.19.2, this change in freebl behaviour has been reverted. the fix for bug 1138554 has been moved to libssl, and will now only affect the minimum keystrengths used in ssl/tls. note: future versions of nss may increase the minimum keysizes required by the freebl module. consumers of nss are strongly encouraged to migrate to stronger cryptographic strengths as soon as possible. bugs fixed in nss 3.19.2 this bugzilla query returns all the bugs fixed in nss 3.19.2: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.19.2 compatibility nss 3.19.2 shared l...

NSS 3.24 release notes
nfigservercert function has been added for configuring ssl/tls server sockets with a certificate and private key. use this new function in place of ssl_configsecureserver, ssl_configsecureserverwithcertchain, ssl_setstapledocspresponses, and ssl_setsignedcerttimestamps. ssl_configservercert automatically determines the certificate type from the certificate and private key. the caller is no longer required to use sslkeatype explicitly to select a "slot" into which the certificate is configured (which incorrectly identifies a key agreement type rather than a certificate). separate functions for configuring online certificate status protocol (ocsp) responses or signed certificate timestamps are not needed, since these can be added to the optional sslextraservercertdata struct provided to ssl_configse...

NSS 3.48 release notes
ded master secret is enabled by default, where possible. see bug 1575411 for details. the master password pbe now uses 10,000 iterations by default when using the default sql (key4.db) storage. because using an iteration count higher than 1 with the legacy dbm (key3.db) storage creates files that are incompatible with previous versions of nss, applications that wish to enable it for key3.db are required to set environment variable nss_allow_legacy_dbm_iteration_count=1. applications may set environment variable nss_min_mp_pbe_iteration_count to request a higher iteration count than the library's default, or nss_max_mp_pbe_iteration_count to request a lower iteration count for test environments. see bug 1562671 for details. certificate authority changes the following ca certificates were add...

NSS API Guidelines
porting!) from the tag for your build, this saves you from messing around with specific files revision numbers. header files we have a preferred naming system for include files. we had been moving towards one, for some time, but for the nss 3.0 project we finally wrote it down. data types function prototypes public nss____t.h nss____.h friend (only if required) nss____tf.h nss____f.h nss-private ____t.h ____.h module-private ____tm.h ____m.h the files on the right include the files to their left; the files in a row include the files directly above them. header files always include what they need; the files are protected against double inclusion (and even double opening by the compiler). note: it's not necess...

NSS sources building testing
st be possible to successfully use the command "ping $host.$domsuf" on your computer (ping reports receiving replies). on many computers the variables host=localhost domsuf=localdomain works. in case you built nss in 64 bits, you need to set the use_64 environment variable to 1 to run the tests. if you get name resolution errors, try to disable ipv6 on the loopback device. after you have set the required environment variables, use "cd nss/tests" and start the tests using "./all.sh". the tests will take a while to complete; on a slow computer it could take a couple of hours. once the test suite has completed, a summary will be printed that shows the number of failures. you can find the test suite results in directory nss/../tests_results (i.e. the results directory ends up next to the nss directo...

nss tech note2
0]: cka_token = ck_true [1] 1024[805ef10]: cka_label = localhost.nyc.rr.com [20] 1024[805ef10]: rv = 0x0 4. collect performance data. this mode is most useful in optimized builds. the number of calls to each pkcs #11 function will be counted, and the time spent in each function as well. a summary of performance data is dumped during nss shutdown. no additional environment variables are required for this mode. if the environment variable nss_output_file is set, its value will be used as the path name of the file to which the final output will be written. otherwise, the output will be written to stdout. ...

nss tech note6
nss .chk files for the fips 140 mode nss technical note: 6 in nss 3.8, we added checksum files required for the nss softoken to operate in fips 140 mode. the new checksum file is called libsoftokn3.chk on unix/linux and softokn3.chk on windows. it must be put in the same directory as the nss libraries. the libsoftokn3.chk/softokn3.chk file contains a checksum for the softoken. when in fips 140 mode, the softoken is required to compute its checksum and compare it with the value in libsoftokn3.chk/softokn3.chk. the following applies to nss 3.8 through 3.10 : on 32-bit solaris sparc (i.e., not x86, and not 64-bit sparc) and 32-bit hp-ux pa-risc (i.e., not itanium, and not 64-bit pa-risc), there are two more .chk files: libfreebl_pure32_3.chk and libfreebl_hybrid_3.chk. the following ap...

Overview of NSS
testing the nss software crypto module has been validated three times for conformance to fips 140 at security levels 1 and 2. for more information, see the nss fips page (or this one). the nss libraries passed the niscc tls/ssl and s/mime test suites (1.6 million test cases of invalid input data). complete software development kit in addition to libraries and apis, nss provides security tools required for debugging, diagnostics, certificate and key management, cryptography module management, and other development tasks. nss comes with an extensive and growing set of documentation, including introductory material, api references, man pages for command-line tools, and sample code. nss is available as source and shared (dynamic) libraries. every nss release is backward compatible with previous ...

NSS PKCS11 Functions
o make this unique. minpwlen then minimum password length for this token. flags a comma separated list of flag values, parsed case-insensitive. valid flags are: readonly - databases should be opened read only. nocertdb - don't try to open a certificate database. nokeydb - don't try to open a key database. forceopen - don't fail to initialize the token if thedatabases could not be opened. passwordrequired - zero length passwords are not acceptable(valid only if there is a keydb). optimizespace - allocate smaller hash tables and lock tables.when this flag is not specified, softoken will allocatelarge tables to prevent lock contention. for more info on module strings see pkcs11_module_specs. this function will return a reference to a slot. the caller is responsible for freeing the slot reference wh...

PKCS 12 functions
the mozilla cross reference (mxr) link for each function provides access to the function definition, prototype definition, and source code references. the nss version column indicates which versions of nss support the function. ...

PKCS 7 functions
the mozilla cross reference (mxr) link for each function provides access to the function definition, prototype definition, and source code references. the nss version column indicates which versions of nss support the function. ...

Build instructions
with the native compiler. use_64: on platforms that support both 32-bit and 64-bit abis, tells nss to build for the 64-bit abi. default is 32-bit abi, except on platforms that do not support a 32-bit abi. moz_debug_symbols: tells nss to build with debug symbols, even in an optimized build. on windows, in both debug and optimized builds, when using msvc, tells nss to put symbols in a .pdb file. required to build with msvc 8 (2005 express). default is not to put debug symbols into optimized builds, and for msvc, is to put symbols into the .exe or .dll file. nsdistmode: if set to 'copy', mozilla/dist/<obj_stuff>/bin/* real files instead of symbolic links. these variables should be either undefined, or set to "1". results are undefined for variables set to "0". for windows, install the mozillab...

NSPR functions
these nspr functions are listed in this section. nspr initialization and shutdown nspr is automatically initialized by the first nspr function called by the application. call pr_cleanup to shut down nspr and clean up its resources. pr_cleanup error reporting nss uses nspr's thread-specific error code to report errors. ...

NSS environment variables
od when few servers have been upgraded. [2|r|r]: ssl_renegotiate_requires_xtn (default) only allows renegotiation if the peer's hello bears the tls renegotiation_info extension. this is the safe renegotiation. 3.12.5 modified in 3.12.6 nss_ssl_require_safe_negotiation boolean (1 to enable) it controls whether safe renegotiation indication is required for initial handshake. in other words a connection will be dropped at initial handshake if a server or client do not support safe renegotiation. the default setting for this option is false. 3.12.5 nss_ssl_server_cache_mutex_timeout integer (seconds) timeout time to detect dead or hung process in multi-process ssl server. default is 30 seconds. 3.4 nss_strict_nof...

NSS tools : crlutil
hould be set to 0 since this is non-critical extension date: invalidity date of a cert. date should be represented in generalizedtime format (yyyymmddhhmmssz). usage the certificate revocation list management tool's capabilities are grouped as follows, using these combinations of options and arguments. options and arguments in square brackets are optional, those without square brackets are required. see "implemented extensions" for more information regarding extensions and their parameters. * creating or modifying a crl: crlutil -g|-m -c crl-gen-file -n nickname [-i crl] [-u url] [-d keydir] [-p dbprefix] [-l alg] [-a] [-b] * listing all crls or a named crl: crlutil -l [-n crl-name] [-d krydir] * deleting crl from db: crlutil -d -n nickname [-d keydir] [-p dbprefix] * erasing...